モバイルファーストデザインの重要性について

2023-11-30

矢崎　祐

Shere:

モバイルファーストデザインとは、製品の設計プロセスをモバイル版から進めて始めていく設計アプローチの事で、優れたユーザー体験を表現し、サービスやサイトを成功に導くための戦略として認識されています。

Webサイトやアプリが導入された時代では、スマホがまだ存在していないこともあり、このようなアプローチの手法が存在しておりませんでした。

スマホが始めて世の中に登場した時代では、大きい画面向けからデザインを作成し、そこから小さい画面向けの作業に移る、グレースフルグラデーションと呼ばれる手法が主でしたが、モバイルサイズでは、表示される画面幅に限界があり、デスクトップ画面幅で表示されているコンテンツ等を、コンパクトにする機能補完が困難でした。そのためモバイルデバイスでの機能性が優れておらず、ユーザー体験の評価が低くなることがありました。

しかし2010年頃からスマホの流通が多彩になったのを背景に、このモバイルファーストデザインのアプローチ手法が徐々に認知され、WebデザイナーやUIUXデザインのコンサルティング専門家たちは、この手法に重きを置くこととなりました。

2012年では、全世界でインターネットへのアクセスにスマートフォンだけを使用する人が、全体の約11％弱の数値でしたが、2016年では50％を超え、現在の2023年では56％まで上がり、2025年には73％まで上昇すると予測されております。2016年の段階では、スマホの販売台数がパソコンの販売台数を上回っております。

上記の背景から、モバイルファーストデザインが流通しておりますが、現代の製品デザインにおいてはかなり重要な戦略となっております。

‍

モバイルファーストデザインは創造性のある惹かれるようなデザインというより、高度な機能性や、それによる使いやすさ、利便性などが重要視されます。

いくつかの原則を紹介していきたいと思います。

コンテンツの優先順位

Webおよびアプリデザインの世界では、「モバイルファースト」という用語が「コンテンツファースト」とも呼ばれます。Webサイトやアプリにとってどのコンテンツが最も重要か、それを特定することをモバイルファーストのデザイナーは最初に実行します。

プロのモバイルファーストデザイナーはシートなどを使用して様々な種類のコンテンツをどのように表示するか（見出し、行動喚起、画像など）を割り当てます。そしてそれらをどのような順番で上部から配置していくかを決定します。

なぜ上部からというと、モバイルユーザーのWebサイトやアプリの閲覧時間の74％は主要ページの上部を閲覧することに時間を費やしているからです。

モバイルファーストのデザインに強い第一印象を与えるために、そのサイトやアプリに関連性があり、目を引くコンテンツを上部に配置することが重要となります。

ワイヤーフレームを構築してからスケールアップする

上記のコンテンツの優先順位を決定づけたらそれらをワイヤーフレームとして、モバイルアプリやWebサイトのレイアウトを構築します。メインページがどのように構成され、どのように設計するかを簡潔に提供し、ユーザーのフローを定義した上で、コンバージョン率向上のための構成を行います。細かいデザインや配色、その他の非機能的な機能にはあまり焦点をこの段階では当てません。

人間の指に合わせる？

人間の指はパソコンのマウスカーソルほどピクセル制度が高くありません。ボタン同士の幅を狭めすぎると上のボタンを押したつもりが下のボタンが反応し、ユーザーにストレスを与えてしまいます。デザイナーは、大きなボタンの設置、リンク同士に十分なスペースを与えたりなど、この点に留意しながら、モバイルファーストデザインを設計します。

直感に合わせたデザイン

モバイルユーザーは特定の行動や習慣に慣れているため、その直感に合わせたデザイン構築が必要です。一つ例を挙げるとWebサイトやアプリを開いた際に、画面の右上にハンバーガーメニュー、画面下部に固定フッターが表示されることを期待しています。これがいわゆるモバイル直感です。「だいたいこの辺にこの要素が表示されているだろう」という認識です。

モバイルファーストのデザイナーはユーザが望むものを提供することで、ユーザーの生来の直感を活用する必要があります。