あなたのサイトはもうスマホ化していますか？この記事を読んでいるあなた自身も、webサイトをpcを利用して見ることも減ってきたのではないでしょうか。
もし、サイトのリニューアルを控えているなら、ぜひスマートフォンユーザーに向けたデザインから制作してみませんか？
モバイルファーストインデックス（MFI）
2016年10月に開催したPubCon Las Vegas 2016で公表された、「モバイルファーストインデックス（以下：MFI）」について、名前はともかく、施行されたということ自体を、Webに携わる立場であれば、知らない人はもう少ないと思います。Webデザイナーの方々の間では周知の事実ですね。
2017年10月以降、Googleでの検索順位評価が、PCサイトを主軸にしたものから、モバイルサイトを主軸にしたものに着々と変わっていっているようです。
よりGoogleの提唱しているルールに準拠するために
さて、せっかくスマホ化するのであれば、より軽量で、よりGoogleが提唱している内容に準拠して作りたいものです。
今回ご紹介するのは「モバイルファースト」。つまり、スマートフォンサイトのデザインや設計を元にしてサイトを構築し、PCやタブレットはあくまでスマホサイズのレスポンシブ展開と考える手法についてです。
現在、MFIが施行されているので、情報設計や導線設計も同様にスマホからデザインを起こすべきです。ユーザーがPCからアクセスするよりも、スマホからアクセスする回数の方が、大きくなっているサイトも数多くあります。
それでは肝心のモバイルファーストWebデザインについて、掘り下げてみましょう。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
モバイルファーストWebデザイン
まず、「モバイルファースト」とは、「モバイルに適応したサイトを作ること」ではなく、「あらゆるモバイル端末を使うユーザー視点に立ち、特有のニーズに応えること」を指します。
前者を意味と捉えてしまうと、間違った方向に情報設計やデザイン設計がなされてしまうので、着手前に今一度、モバイルユーザーのニーズに応えるんだ！と決意を新たにサイト構築に挑みましょう。
モバイルファーストとスマホファースト？
もう少し似た意味で、「スマホファースト」という言葉もあります。「モバイルファースト」の中の一部ではありますが、 より、スマホというカテゴリに狭めたものとなります。
「スマホファースト」とは、スマホで閲覧するユーザー、つまりPCを開く手間を惜しみ、外出先や空き時間でさらっと素早く情報を得たいユーザーに向けて、情報量を絞ったコンテンツを提供することをいいます。
パソコンとスマホで情報量を変えることは得策ではなくなってきている
スマホから見やすいように情報量を絞ってサイトのデザインを作成すること自体はは大賛成です。しかし、GoogleがPCとスマホで閲覧した時のコンテンツに差異をなくせと流布している以上、多少の訴求度の変更や順位を差し替え等はあっていいとしても、情報量や版を変えることは得策ではないと、私個人としては考えます。
モバイル端末やタブレット、PCまで、情報量が変わらず、Googleの査定が変わらず、デザイン面でのみレスポンシブ対応するサイト、何より、スマホから起こしたと推測されるサイトをご紹介します。
モバイルファーストの一例
例えば以下のサイト、完全にレスポンシブで、かつ情報量が変わりません。ですがきちんとスマホでのデザインが成立しており、PCの情報量を強引にスマホに添わせた、という無理やり感も出ていません。
まさに、最新のモバイルファーストのお手本と言えるのではないでしょうか。過剰な装飾もないため、とても軽快な表示が実現し、かつPCではすこし情報に物足りなさも感じるくらいには、ゆとりのあるデザインとなっています。
上記のように、どのデバイスで閲覧しても同じ情報量、似たデザインであるページこそ、もっとも最新のレスポンシブ対応のWebデザインに適していると言えるでしょう。
もちろん、PCではスマートフォンで閲覧時よりも多少情報が増えても構いませんが、あくまで「多少」程度にとどめておくべきでしょう。Googleの検索結果評価システムに反してくるからです。構築の際も、ワンソースでのレスポンシブになるよう、心がけることが重要です。
ただ、ECサイトなどでは少し要件が異なってきます。ECサイトの場合、スマートフォンではより的確で簡潔な情報を、PCやタブレットではより詳細な譲歩を求められがちだからです。レスポンシブECサイトを設計するときなどは、各デバイス間やサービスで、より情報の出しわけに配慮しましょう。
上記の際に有用なのが、Webマーケティングです。より市場調査をしっかりと行い、数値に基づいた設計をしましょう。
モバイル フレンドリーテストを行おう
突然ですが、モバイルフレンドリーテストはご存知ですか？モバイルフレンドリーテストとは、MFI(Mobile First Index)よりも大切と言われています。
下に添付したサイトが、Google社が提供するWeb診断サイトです。
https://search.google.com/test/mobile-friendly?hl=JA
1~2分程度で診断が終わり、Webページがモバイルデバイスにとって使い勝手が良いかを判断してくれます。では、何がモバイルフレンドリーに当てはまるのでしょうか？
モバイルフレンドリーの条件
モバイルフレンドリーの条件には大きく分けて4つ条件があります。
1, ビューポートがモバイルサイトに適した形になっているか
レスポンシブ対応をし、固定幅のviewportがページ内に定義されていないかが重要です。
PC画面をそのままモバイルサイトにすると、文字が小さく、横に大きくスクロールしなければならないといった問題が出てきます。
2, ボタンやリンクといったタップ要素の間隔が近すぎず、適切な間隔が保たれているか
ボタン同士の幅が狭い、ボタンそのものが小さいなど誤タップを誘発する作りは適していません。
3, モバイルデバイスに対して互換性がないプラグインを利用しない
例えば、Flashモバイルデバイスで表示できないので、好ましくありません。
4, モバイルデバイスに適した文字サイズになっているか
PCサイズの文字では、モバイル端末では見づらいことがあります。PC画面とは別にモバイル端末に合わせて文字サイズを指定する必要があります。
現在はPCユーザーよりもモバイルユーザーの方が主流となっています。モバイルフレンドリーは必要な対応になり、SEO対策にもつながります。自分でサイトを持っている方々は、htmlやcssの構造を見直し、一度モバイルフレンドリーテストを行ってチェックしてみましょう。
モバイルファーストを意識したサイトを作ろう
モバイルファーストについて、ご理解いただけたでしょうか。これからデザインを決定してWebサイト構築に入る予定のWeb担当者のみなさま、サイトへの流入がスマートフォンの方が多くなってきているならぜひ、モバイルファーストで Webサイトを設計してみましょう。
スマホサイトを作成する場合、是非Webデザイナーがこだわるべきスマホサイトの見やすさも合わせてお読みください。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
