パソコンよりスマートフォンの利用が増えいている昨今。

iphoneやandroidといったスマートフォンでの閲覧をプライオリティの最上位とした『スマホファースト』でのホームページ制作をしましょう。

いま現在「モバイルファースト」ではなく『スマホファースト』の時代となってます。
ただ単純にパソコン用のデザインをスマートフォン用のデザインにするだけといった単純な話だけではありません。

ユーザーの立場になってデザインする必要があり、「使いやすさ・有益なコンテンツ・情報量」を意識する必要があります。
そうすれば自ずとSEO的にも有効となり、価値あるWebサイトが出来上がります。

画面サイズによってデザインの表示を変える方法。

CSS3のメディアクエリを利用して端末の画面サイズ毎に設定することができます。

これはGoogle社でも推奨された方法なので、今１番スマホ最適化する方法として信用度の高いやり方です。

レスポンシブ ウェブ デザイン（RWD）は、サーバーからどのデバイスに対しても常に同じ HTML コードを配信し、CSS を使用して各デバイスでのページのレンダリングを変える設定方法です。すべての Googlebot ユーザー エージェントがページとそのアセット（CSS、JavaScript、画像）をクロールできる状態であれば、Google のアルゴリズムによってこの設定が自動的に検出されます。

レスポンシブWebデザインにする理由

• URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
• 対応するパソコン用ページやモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、ページへのインデックス プロパティの割り当てが正確に行われます。
• 同じコンテンツのページをいくつも維持管理する手間が省けます。
• モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
• ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。ユーザー エージェントに基づくリダイレクトはエラーが発生しやすく、ユーザー エクスペリエンスを損なうおそれがあります
• Googlebot がサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々の Googlebot ユーザー エージェントが複数回クロールしてすべてのバージョンを取得する必要があります。一方、レスポンシブ ウェブ デザインの場合は、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。Google によるクロールの効率が上がると、サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新されることにつながります。

source:（https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ja）

スマートフォンやタブレットは、みなさん普段使用しているので実感として分かっていると思いますが、タッチパネル式なので指で操作します。PCのようにマウスでクリックする操作ではないので、指を意識した操作性を常に考える必要があります。
タップ操作、スワイプ操作によってユーザーが使いにくいな…と思われないようにデザイン・構成していきましょう。

主な重要項目をリストアップしました。

• ボタンやリンクを指先のサイズに対して余裕のあるサイズにする
• 指先のサイズに対して被らないようにボタンやリンクを配置する
• タップできる領域を明確にする
• スワイプできる要素にはヒントを与える
• パソコンのようなマウスを上に乗せるときのアクション（hover）はスマホにはない。
• スマホでは押したときのアクションや表示領域に入った時の要素のアニメーションを考える。

片手で操作する上でよく使うボタンは画面下部にあった方が操作しやすいです。

最近のスマートフォンは特に画面サイズが大きくなっていますので、上部のボタンを押す時はもう一方の手の指を使い両手でスマートフォンを操作することが多くなります。

なるべくならば片手で操作できるように設計すると、ユーザーが喜ぶ（ユーザビリティの向上）ことにつながることでしょう。

モバイルファーストインデックスは、Googleの公式ブログで下記のように説明されています。

モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。

source：https://webmaster-ja.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html

これまで主にパソコン向けデザインのページがインデックスやランキングの評価対象になっていました。
しかし現在スマートフォン需要が急速に高まったおかげで、グーグルの評価基準が変わりスマートフォン向けのデザインページがメインの評価対象として扱われるようになりました。

これにより、UIデザインの観点だけでなく、SEO対策の観点でもモバイルファースト→『スマホファースト』の重要性が高まりました。

スマートフォンをユーザーが利用した時のシーンを想像して、コンテンツの配置・レイアウトを考える必要がある。

例えば飲食店であれば、その飲食店に向かう途中に場所が分からなくて検索しているかもしれない。
そういった時に住所や電話番号が分かりずらい場所にあると、ユーザーはストレスを感じる。
配置に創意工夫が必要になってくるのだが、例えば画面下部に固定のボタンを用意したり、トップページに分かりやすく記載したり…方法は考えれば色々出てくるはずだ。

ユーザーの利用シーンを想像して想定してデザインを作ることにより、ユーザーに有益で使いやすいスマホファーストなホームページが出来上がることでしょう。