こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。
モバイル向けに最適化され、優れたウェブサイトデザインが求められるのはもはや常識となりました。今回は、改めてモバイルファーストについて考察するとともに、モバイルサイトの訪問者により良い体験を提供するためのポイントをまとめて紹介していきたいと思います。
モバイルに向けたデザイン戦略の必要性
モバイルデバイスを使用するユーザーが急激に増え、デザイン戦略は大きく変わりました。モバイルファーストデザインは、サービスやサイトを成功に導くための重要なカギとなります。
従来、ウェブサイトはデスクトップのユーザー向けにデザインされていましたが、環境やテクノロジーの進化とともに、モバイル優先のアプローチが必要となりました。
国内のスマートフォン保有率は85%を超え、2021年時点でスマートフォンからのインターネット利用者は約68.5%とほぼ７割を占めています。現時点でモバイルのインターネット使用率は、デスクトップを上回りました。この先さらに、多くの人々がスマートフォンから情報を探すようになり、モバイルでの利用者が増えると予想されます。つまり、モバイル向けに最適化されたデザインでなければ、素晴らしいユーザー体験を提供できなくなる可能性がますます高まるのです。
また、広告媒体がテレビや雑誌から、スマートフォンに移行していることも一因として考えられます。InstagramやTwitterなどのSNSで、動画やアニメーションを活用した広告は、消費者の認知度や購買欲を高める一般的かつ有効な手段として使われています。
モバイルファーストデザインについて
モバイルファーストデザインとは、モバイルデバイスを優先してデザインプロセスを開始することで、優れたユーザー体験を生み出そうとする考えかたです。
モバイルはデスクトップに比べ画面表示領域が小さいです。そのためモバイルファーストでは必然的にいちばん重要な機能が優先され、ユーザー体験の中核部分をデザインすることが求められます。つまり、機能の本質を抽出し、引き算のデザインが必要となるのです。ここはデザイナーが苦労するポイントのひとつではないでしょうか。しかしモバイルデザインの課題を解決することで、より大きなデバイスに向けたデザインも進めやすくなりますし、小さな画面のコンテンツを最適化することが、タブレットやデスクトップなどのより大きな画面に適応させる近道となります。
レスポンシブデザインについて
今やさまざまな大きさのスマートフォンやタブレットが登場し、サイトのコンテンツを画面に最適化することは必須となっています。
一般的には、画面の表示領域が大きいほど、より多くのコンテンツが一度に表示されますが、レスポンシブなレイアウトは、表示デバイスの画面サイズに応じてレイアウトやコンテンツを最適化して表示させなければいけません。
具体的にはCSS3のメディアクエリやフルード（リキッドとも言います）レイアウトなどを使用し、ユーザーが使用するデバイスや画面サイズ、解像度などに対応したレイアウトに。さらに文字のサイズ、画像、コンテンツの表示方法も最適な形に変更します。またレスポンシブと比較される「アダプティブデザイン」もありますが、お互いが包含しあう部分もあるため今回は割愛します。
