「モバイルファースト」で作られたWebサイト
日常生活においてWebサイトを見るときに、パソコンからではなくモバイル端末から見るという利用者が現在は閲覧者全体の約7割以上になると言われています。
私自身も仕事中はPCでWebサイトを見る事が多いのですが、プライベートではスマートフォン（以下スマホ）で調べ物をしたり、Webサイトを見る事がほとんどです。特に出先などで検索したい事があるとスマホを使う事が当たり前ですよね。最近では名刺やチラシ、DMなどにQRコードを印刷し、スマホからWebサイトなどにアクセスを促す導線も増えています。このような流れからか、「モバイルファースト」で作られたWebサイトを目にする機会も増えてきた気がします。その中でも素敵なデザインや面白いと感じた「モバイルファースト」のWebサイトを紹介します。
1. SALONIA公式サイト
https://salonia.jp/limited/spring2022/
このWebサイトはコンテンツの幅が500pxで作られています。
「モバイルファースト」ならではのコンテンツ幅のサイズですが、メインロゴや右上のナビゲーション、左右に風船のような装飾と、同じような有機的な形状でトリミングされた写真が配置されていて、コンテンツ幅が狭くても、デザイン的に寂しい感じや余白が多いといった印象は全く感じません。左右の装飾が上下にふわふわと動いたり、スクロールすると左右の写真がコンテンツの内容に合わせて変化することも、このWebサイトのやわらかな世界観が出ていて素敵です。
そして、右下にはQRコードが配置してあり、スマホでアクセスするための導線になっています。PC画面の中にQRコードが配置されるこのようなWebサイトを見るのは初めてなので驚きました。
2. Hondaハート
https://www.honda.co.jp/HondaHeart/special-contents/infographics/01/
このWebサイトのコンテンツ幅は540pxでした。
PC画面では、画面いっぱいにカラフルな背景が配置されています。背景は固定されていて、中心のメインコンテンツにはアニメーションが多用されています。背景が派手なデザインだとしても、そのことで自然とメインコンテンツに視線が向くようにつくられています。テキストサイズも通常のWebサイトより大きく、メリハリが効いているので読みやすいです。背景にアニメーションなどがなくても、コンテンツとのバランスが取れたWebサイトなので、「モバイルファースト」のデザインをつくる際には参考にしたいと思いました。
3. EMI OZAKI WEB
こちらのWebサイトは、PC画面ではコンテンツのデサインがそのままスマホの形をしています！背景にはスマホを持つ手のイラストになっていて、コンテンツ自体がスマホの中に入っているような見せ方になっています。とても考えられていながら可愛いらしいデザインです。
ナビゲーションがなくても、親しみ慣れたスマホのホーム画面のデザインなので迷うことなく見たいそれぞれのアイコン（リンク）が選べます。
リンクを押したときには、アプリケーションが開いたようなアニメーションの後に、SNSのようなデザインがあらわれ、違和感なく記事やコンテンツの内容を見る事ができます。遊び心があるだけでなく、操作しやすいデザインのWebサイトなのでユーザビリティを考えたWebサイトを作っていく上で参考にしたいと思いました。
PCでスマホの画面を操作するという不思議な状況になるデザインは、PCからも見てみたいWebサイトになっています。
まとめ
今回は「モバイルファースト」でつくられたWebデザインを紹介しました。
通常のWebデザインとは違い、コンテンツの幅がスマホやタブレットのサイズでつくられているので、背景や余白部分を大きく使える「モバイルファースト」ならではの大胆なデザインが多く見られました。サイズ幅の狭い「モバイルファースト」のデザインを優先させることでPCでの見え方がないがしろにされるのではないかと思っていましたが、余白部分に写真やアニメーションをつけることでブランドのイメージをさらに強く伝えられているように感じることができました。
コーディングの面でも全てをレスポンシブデザインにする必要がないので、通常のコーディングより作業工数などの負荷を減らせる事ができるのではないかと思います。
普段の制作では、レスポンシブデザインについて意識しながら行っていますが、「モバイルファースト」について意識することは少なかったので、今後ターゲット層やコンテンツ内容を確認しながら「モバイルファースト」のデザインを考えてみたいと思うきっかけとなりました。
WEBデザイナー ／ N.N
