スマホユーザーを意識せよ｜育つホームページの作り方-10
ranacoホームページ作りのヒントをお伝えするシリーズ。
これまでお伝えしてきたことはコチラ。
三大端末の見え方チェック
「9. 足して引いて集めて繋げる」で各ページの仕上げをしたので、見た目的にはもう「完成！」と言っていいでしょう。
でも、まだまだやることはあります。
もう少しです、頑張ってください！
ホームページを見る人（ユーザー）は今、パソコン・タブレット・スマホ（・家庭用ゲーム機・テレビ）など様々な端末を使って見ています。
そのうちパソコン・タブレット・スマホを使う率が高いので、この三大端末からもホームページが見やすくなっているか、最終チェックする必要があります。
たとえすべての端末を持っていなかったとしても、今はホームページの編集画面からそれぞれの端末の見え方を確認できるようになっている場合が多いので、必ずすべてのページを確認するようにしてください。
端末別インターネット利用者の割合
さてここで、以下の資料を見て頂こうと思います。
総務省が令和元年５月31日に発表した「平成30年通信利用動向調査の結果」からの引用です。
下のグラフは、個人による端末別インターネットの利用状況を表したものです。
スマホ ＞ パソコン ＞ タブレット の順に高くなっています。
上のグラフのように、全体的に見るとスマホとパソコンでは、若干スマホの方が利用率が高いようです。
しかし年齢別でみると、下のグラフのように、若い層ほどスマホの利用率の方が高いという結果になっています。
もちろん、どちらか一方だけの端末を使っているわけではなく、重複して利用している人もいるはずですが、スマホからのホームページの見え方を、しっかり整えておくことが重要だとおわかりいただけたかと思います。
パソコンとスマホのレイアウトの違い
下の図は、当ホームページのレイアウトの違いを表したものです。
よく見かける、ごくごく標準的なホームページのレイアウトを使用しています。
左がパソコンからの見え方、右がスマホからの見え方です。
大きな違いは３点あります。
- メニューバー
パソコンでは常に表示されているメニューバーは、スマホでは左上のボタンをクリックしないとメニューの一覧は展開しません。 - サイドバー
パソコンではコンテンツの右側に配置されているサイドバーが、スマホではコンテンツの下に配置されます。 - フッター①②③
パソコンではフッターは横に３列に配置されていますが、スマホでは縦１列に配置されます。
ディスプレイが横長のパソコンに対して、スマホは縦長です。
レイアウトの違いは、その特徴をよく表していますね。
この点を常に頭に置いて、あなたのホームページを再び見直してみましょう。
スマホでストレス無くページ間の移動ができるか？
メニューの位置を確認しよう
では、もう一度スマホのレイアウト画像を見てください。
赤枠で囲んだ部分が、メニューボタンのある位置です。
つまり、ページ間の移動ができるリンクが貼られている場所、ということです。
コンテンツから遠いフッターメニュー
ユーザーが縦にスクロールしてコンテンツの上から下まで文章を読み終え、他のページに移動したいと思ったときは、フッターメニュー内のリンクをタップすれば良いわけですが・・・、ここで１つ問題があります。
それは、コンテンツとフッターメニューの間に サイドバー が配置されていることです。
下の画像は、当ホームページのサイドバーの内容を図に表したものです。
・・・って、長っ!!!
先ほどの色を付けたレイアウト図では短くして表していましたが、実際はこれだけ多くの内容をサイドバーに配置しているのです。
つまり、コンテンツから、フッターメニューまでの距離が長い！
ユーザーは、たくさんスクロールしなければフッターメニューまでたどり着けないというわけです。
もちろん、左上に配置されているメニューボタンを使えばいいのですが、案外ユーザーは左上のメニューボタンを押さないみたいです・・・。
では、どうすればいいのでしょうか？
ユーザーにストレス無くスムーズにページ間移動をしてもらうための方法を考えてみましょう。
スマホ動線は放射線状に相互通行
結論を先に言えば、リンクを貼ることです。
コンテンツからフッターメニューまでが遠いのなら、コンテンツの最後にリンクを貼ればいいのです。
下の画像を見てください。
この記事の下にあるリンク一覧です。
①は、この記事が「育つホームページの作り方」というシリーズの１つなので、シリーズの前後の記事を読んでもらうためのリンクです。
②は、他の主要コンテンツに移動するためのリンクです。
③は、デザインテンプレートの機能で「モバイルメニュー」というものです。すべてのページで常に表示されているので、ページの途中でも他の主要コンテンツに移動することが出来ます。
このように、コンテンツ直下に関連したページへのリンクがあれば、ユーザーはページ間移動がスムーズにできるというわけです。
ユーザーの心理を考えて対策を
上に挙げたのは、コンテンツの下に置いたメニューリンク一覧の例ですが、ページの途中でもリンクを貼ることで、ユーザーはスムーズにページ間移動が出来ます。
これはスマホに限ったことではなく、パソコンでもタブレットでも同じことです。
「9. 足して引いて集めて繋げる」の中の「ページを繋げて回遊させる」でも書きましたが、ユーザーが「どんなことを知りたいか？」「次にどんな行動をとりたいか？」といった心理を考えて、効果的にリンクを貼るようにしましょう。
相互に貼り巡らされたリンクをたどって、ユーザーがホームページ内をグルグル快適に回遊できる動線をしっかり作っておくことが大切です。
スマホから見たときのページ間移動がスムーズであれば、大丈夫です！
まとめ
スマホユーザーが増えた今、「モバイルファースト」という言葉があるように、スマホからどう見えるか？を意識してホームページを作ることが必要不可欠です。
見え方、レイアウト、リンク（ページ間移動）など、パソコンからだけでなくスマホからも必ずチェックしておくことを忘れないでください。
[aside type=”normal”]育つホームページの作り方
NEXT→「11. 探してもらえる対策をする」
BACK→「9. 足して引いて集めて繋げる」
[/aside]
