多くの人がスマートフォン（以下、スマホ）からインターネット（以下、ネット）を利用するようになってから、Webサイト（以下、サイト）にはモバイル対応した「モバイルファーストデザイン」が求められるようになりました。ではこの「モバイルファースト」を意識したデザインとは一体どのようなデザインを指すのでしょうか。
僕たちのところにも、Webサイトにスマホ用デザインを作りたい・持ちたいとご依頼やご相談がきますが実は、『スマホ用デザイン＝モバイルファースト』ではありません。
今回、「モバイルファースト」の本質と、モバイルファーストでデザインをする上で気をつけたいポイント、重要なポイントをご紹介します。
そもそもモバイルファーストとは
モバイルファーストとはモバイル端末で閲覧された際、使いやすさをより重要視した作り方を指します。モバイル端末、特にスマホのような小さな画面でも解りやすく表示したり設計します。タップはもちろんスワイプのように画面上での操作性を考慮して、モバイルユーザーに配慮したデザイン設計することを、モバイルファーストと言います。「モバイルファースト」という言葉を聞くと、「スマホサイトを先に作るべき」、「スマホサイトが必要」と考える方が多いですがこれは誤解です。
ユーザーの満足度を考える
モバイルユーザーの満足度を優先したWebサイトを作る、という考えは間違っていません。しかし、「モバイルファースト」の本質は
スマホを含むモバイルユーザーにとって使いやすく、パソコンをメインとしているユーザーにも使いやすいデザインを作る
ということです。モバイルファーストだからといってパソコンユーザーのことは考慮しなくてもよいという意味ではありません。補足となりますが「スマホファースト」という言葉もあります。このスマホファーストはモバイルファーストの一部です。スマホ画面でのデザインを最重要視するという考え方となります。
見づらいとユーザーが離脱してしまう
画面の小さいスマホでサイトを見た時に、パソコンと同じ表示をしてしまうと、
文字がかなり小さく読めない
写真やイラストも小さすぎて何が何だか分からない
なんてことは容易に想像できます。そうなると目が疲れるとか、操作がしづらいといった理由からWebサイトからユーザーが離脱してしまいます。競合他社のサイトに行かれてしまいかねません。結果として見込み顧客を逃してしまうことにもなります。さらにはパソコンのサイトにすら来てもらえない、なんて結果にも繋がる可能性があります。今では、70〜80代の年配者の方もスマホで情報収集したり、友人・知人とやりとりをしています。小学生でも使うことが多く見られるように、スマホやタブレットを初めて使う世代がかなり若くもなっています。このことからもモバイルファーストの重要性が解るかと思います。
モバイルファーストで気をつけるポイント
「モバイルユーザーに配慮したデザイン」とはどういったものなのか、しっかりと注意を払うべきポイントを紹介します。
■ 多様化するデバイスに対応したデザイン設計
ここまでスマホをメインに紹介してきましたが、ユーザーが使うデバイスは多種多様です。モバイル端末はスマホだけではありません。タブレットを持ち歩いている人もいます。さらにWindowsやAndroid OSの場合、デバイスはさらに多様になります。ブラウザも多種になります。そのためそれぞれのデバイスやブラウザに適したWebサイトを個別に作ります。そうすることで、自社がターゲットとしているユーザーにとってのユーザビリティの良いWebサイトになります。
■ ワンソース・マルチデバイスの考え方
ただデバイス毎にWebサイトを作るのは非常に大変です。なぜならデバイス毎のデザイン表示の微調整から各デバイスに合わせてWeb言語を記述する必要があり、それらにかかる初期費用や更新のコスト負担が非常に大きなものになります。さらに個別でデザインやWeb言語の記述も必要なため、手間もかかります。そこで、モバイルファーストでは一つのソースから各デバイスに対応する「ワンソース・マルチデバイス」という考え方がポイントになってきます。
■ レスポンシブデザイン
ワンソース・マルチデバイスの手法の一つが、「レスポンシブWebデザイン」となります。
レスポンシブとは英語で、「反応する」とか「敏感な」の意味があります。
そのためレスポンシブデザインは『順応性の高いデザイン』という捉え方ができます。
技術的なことを説明すると長くなりすぎるので簡潔にレスポンシブWebデザインを説明すると、デバイスに応じた表示になるようにCSS（Web言語）で、デザイン設計を指定してあげるということです。指定してあげることで表示されるデザインデータは一つで済むことになり、Webサイト作成後もその修正や更新は少ない回数で済みます。ただしデメリットとして、スマホとパソコンでコンテンツの順番を変えるなど、大幅に見せ方を変えることはできません。かと言って、レスポンシブデザインは先述通り、初期費用やその後の運用を考えると非常に取り入れやすい手法となります。
パソコンとモバイルで情報に差はないか
スマホが出始めた頃は、スマホサイトの重要性はそれほど高くなく、必要な情報や訴求ポイントはパソコンサイトからしっかりと見てほしいといった考え方があったため、一部のコンテンツのみを記載しているスマホサイトが多々ありました。しかし「モバイルファースト」「スマホファースト」という言葉が出るほどにスマホの普及率・利用率が上がったため今では、スマホサイトもパソコンサイト同様の情報を記載する必要性があります。全く同じにしないといけないという訳ではないですが、パソコンやスマホ等、どのモバイル端末から閲覧しても、得られる情報・訴求ポイントは同じであることが大切です。当たり前なようでまだまだ未対応のサイトは多く見受けられます。
モバイルファーストインデックス
実は、モバイルファーストの考え方が広く認知されたきっかけがあります。それはGoogleによる「モバイルファーストインデックス（MFI）」の導入です。
「モバイルファーストインデックス」とはどういうものなのか、Googleが公式ブログで説明しています。
これまで、Googleのクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツが使用されてきました。そのため、その内容がモバイル版と大きく異なる場合、モバイル検索ユーザーに問題が発生する可能性がありました。モバイルファーストインデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイルユーザーが探しているものを見つけやすくすることを意味します。
引用元：モバイル ファースト インデックスを開始します
今まではパソコンサイトで評価していたけれど、これからはモバイル（スマホ）サイトが主な評価対象になりますよ、ということです。パソコンサイトの内容が充実していても検索結果の上位に表示させることが通用しなくなったということです。この結果、モバイル（スマホ）サイトの重要度が上がり「モバイルファースト」の考えが普及したのです。
MFIで影響を受けてしまうサイト
MFIの適用により、どのようなサイトが影響を受けやすくなったのでしょうか。
■ モバイル対応をしておらずパソコンサイトのみ運営
『見づらいとユーザーが離脱してしまう』の項でもご説明した通り、モバイル（特にスマホ）向けサイトがなく、パソコン向けサイトのみのサイトです。そういったサイトが全く検索順位に引っかからないわけではありませんが、モバイルでアクセスした際に、パソコンサイトが表示されたらどうでしょうか。表示されている情報が小さく見えづらくて、すぐに離脱されてしまいます。MFIの適用に対応するだけでなく、見込みユーザーを新規顧客になってもらうためにもモバイル対策は必須となります。
■ パソコンサイトとスマホサイトでコンテンツに差がある
評価基準がモバイルサイトに変更となったため、情報を取捨選択し主要コンテンツだけをモバイルサイトに記載している場合、評価されるコンテンツ数は当然、以前よりも少なくなります。評価されるコンテンツ数が減少するとサイト全体の評価も下がってしまい、検索順位に影響を与えます。どの端末から閲覧しても記載情報に差がなく、ユーザーに同じ情報と価値を提供できていることがMFI対応には重要になります。
■ ページの表示が遅いサイト
表示が遅いなと感じたサイトを見た経験はありませんか？サイトの表示が遅い理由はサイト構成によって様々ですが、表示に時間がかかってしまうことも、サイト評価に悪影響を及ぼします。サイトが開くのに3秒かかってしまうと、人は「これは遅い（重い）サイトだ」と認識してしまいます。地下鉄や建物内など通信環境が不安定な場所ではモバイルからアクセスすることが多いかと思います。そのような場所で見られるといったことも考慮して、デザイン設計をする必要があります。
モバイルの機能も活用できるサイト
モバイルの独自の機能、例えば、カメラやマップ、GPS機能などを活用してビジネスやサービスが広がりを持つような仕様のモバイルサイトを作り上げるようにします。このようなモバイル用にコンテンツを考え作り上げることで、見ていて解りやすく楽しい、そして見るだけでなく使えるんだと感じてもらえるコンテンツや仕組みを盛り込んだサイトが今後は増えていきます。
まとめ
モバイルファーストの考え方や、モバイルファーストに適したWebサイトの作り方をご紹介しました。ただ、闇雲に意識してデザインするのではなく、ユーザーがどの端末・OSから、どのような場面で見るのか、使うのかを想像し調査してWebサイト作りをするのが最も望ましいことになります。Webサイトを見てくれるユーザーにとって使いやすく解りやすいことが最も大切です。自社でなく、『ユーザーが主役』の視点でWebサイトを作り、運用することを意識しましょう。
今回も最後まで読んでいただき、ありがとうございます。
HS広告スタジオでは、見栄えの良いデザインを作るだけではなく、“見た目”も“機能”も効果が得られるように、Webサイトをデザインしています。ぜひ、専用ページにてチェックしてみてください。
