スマホファーストのサイトを分析してみた

今回は、PCサイトもスマホのデザインを流用しつつ素敵に見せているサイト３選をピックアップして分析してみました。

KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。

スマホファースト

サイトの内容によっては、スマホ9割などであまりPCが見られないケースもあります。そういった場合こういったデザインにすることで納期・費用も抑えられるのでおすすめです！

サーティワンアイスクリーム

URL：https://www.31ice.co.jp/contents/topics/210601_01.html

サーティワンアイスクリームさんでは、毎月出る新しいフレーバーごとにLPを出しています。ある程度テンプレート化しながらも、毎月の味らしさを出すためにカラーや要素などを作り込んでしっかりデザインされていました。

他にもアイスケーキなどの一部のコンテンツでスマホファーストのデザインになっていました。

-ダブルでオススメの組み合わせ

オススメの組み合わせが載ってることで、プラスで頼みたくなります。つい、いつも同じ物を頼みがちですが、こういうオススメメニューがあるとちょっといつもとは違う冒険ができて楽しいですね！

３人のサーティワン好きランキング

皆で好きなアイスについても語ってみましたが、種類が多い分みんなバラバラでした！カップ、コーン派に別れたりいろんな楽しみ方のある企業で素敵だな〜と実感しました！

-カラースキーム分析

今月はパイナップルケーキをテーマにしているため、オレンジと黄色の配色でデザインされていました。ロゴマークはサーティワンのブランドカラーのピンクと青で作られています。

スマホユーザーが大半で毎月商品が出て時間をできるだけ早くしたい！そんなときにスマホファーストサイトはぴったりです！

CRISP CONNECT(クリスプコネクト)
by CRISP SALAD WORKS

URL：https://connect.crisp.co.jp/

シンプル＆ベーシックで見やすく作られています。太字で強いメッセージ性を感じながら、マージンなどの余白を多めに取ることで清潔感・読みやすさを損なわずにデザインされています。

スラックの連携など、現在のテクノロジーを利用して色々連携できるサービスを提供しているのもすごいなともいました。
寄付するボタンも常に出ていて分かりやすいです。

提供したサラダの個数など、支援してくださいってだけでなく、しっかり運営されている感じが出ているのも魅力的だなと感じました。

-カラースキーム分析

CRISP SALAD WORKSさんのサイトは黒と黄色で構成されていますが、こちらは赤をメインに印象をガラッと変えています。赤を使うことで医療に関するイメージをダイレクトに伝えています。

こういうサイトはより早く情報を提供したいので、スピード重視でスマホメインのサイトにするのもありですね。

狂ATE the FUTURE

URL：https://park.itc.u-tokyo.ac.jp/createthefuture/

東大工学部の若き研究者たちが衝動と未来を語る動画メディアを紹介するサイト。ユーザー層が、ほとんどスマホで見るということもあり、スマホファーストでも十分な印象です。また、ビジュアルがクオリティが高い分、背景全面に敷いても違和感なく、むしろそれがインパクトを強調する形になっています。ページ自体は少ないが、1つ1つのデザインが丁寧でしっかり作り込まれている印象でした。

CREATE the FUTURE→狂ATE the FUTURE
CREATORS→狂ATORS　など言葉の使い方にも遊び心もあります。

-カラースキーム分析

メインビジュアルやバナーはカラフルなイラストが載っていますが、枠線や背景色、ロゴを黒にすることでデザインを引き締め、まとまりを持たせています。

スマホファーストにしても背景画像を工夫することでPCサイトぐらいクオリティが高く見えます！情報量が多くないサイトはこの形式でも見やすいです。

KNAPでもニーズに応じて臨機応変に対応可能です！
この記事を書いているメンバーが働いている会社
よかったら見に来てください！