ホームページのモバイル対応化

ホームページのモバイル対応化

20191017

今はほとんどのWEBサイトがスマートフォンやタブレットなどのモバイルデバイスに対応しています。
数年前にGoogleがモバイル対応を推奨した際に多くのWEBサイトが作り直されたり、新規で制作される場合のほとんどがモバイル対応しています。

その理由として、ホームページの属性によっては、パソコンで閲覧されるよりもスマートフォンで閲覧される事が多くなった。Googleから検索対象としてモバイルから検索した場合は、モバイル対応サイトを優先にするといったアナウンスがあった等があげられます。
実際パソコンを使わない人が増えているのも確かです。

パソコンとスマートフォンの違い

パソコンとスマートフォンの大きな違いは三つあります。
・パソコンの画面は横に広く、スマートフォンは狭い。
・パソコンにはマウスオーバーという概念があるがスマートフォンには無い。
・Wi-Fiではなく、携帯電話通信で閲覧される事を想定する必要がある。

一昔前ですと、マウスを当てると何らかの情報が表示されたりといった作りがありましたが、スマートフォンにはこの動作がありませんので、こういった作りは良くありません。
某大学のWEBサイトがリニューアルされた際、マウスを当てると情報が表示されるという作りになっており、業界では話題になった事もあります。

どのようにして、モバイル対応にするのか

大きくわけて、二つの手法があります。
ひとつは、パソコン用のWEBサイトとモバイル用のWEBサイトの二つを用意し、閲覧しにきたユーザーデバイスの識別して、いづれかを表示する。
この場合、二つのWEBサイトが存在するので管理に面倒が生じます。ただしそれぞれ専用の画面に出来るので、それぞれ見やすく制作できるという利点があります。

もう一つはレスポンシブデザインと言われ小規模なサイトで採用されている手法ですが、閲覧しているブラウザの幅に応じてレイアウトを切り替える作りです。
htmlは一つですが、CSSというレイアウトを指定するファイルを複数用意しておき、ブラウザの幅によって切り替えます。
昔でいうリキッドデザインとは異なりますが、考え方は似ています。

レスポンシブデザインにする場合の注意点

スマフォ対応サイトと言いながら、単純に2列のレイアウトをモバイル表示の際1列に切り替えるだけといったのをよく見かけます。
ナビゲーションが使いにくい、ページがやたら長い、文字の大きさが不自然といったものです。
俗に言うWEBデザイナーがデザインしたものであればこういった点も考慮してデザインされているので良いのですが、古いWEBサイトを強引にレスポンシブ化していたり、WEBデザインの知識や経験が少ない人がデザインするとこういったことになります。
単純にモバイルの画面に収まっていれば良いというだけでなく使いやすさ等も十分に考慮してデザインする必要があります。

モバイルでも使いやすい設計にする

モバイルデバイスは解像度が高いので、比較的小さな文字でも視認性が高くなっています。しかしそれを操作する人間の指はそれなりの大きさがありますので、リンクが押しやすいか、文字の大きさだけでなく行間なども読みやすいような作りにする必要があります。

またモバイルデバイスの場合はWi-Fi環境ではなく4G等の携帯電話用の通信で閲覧される事も想定しなくてはなりません。
データ転送量が少ないか、画像サイズがきちんと最適化されているかなども考慮したWEBサイト設計が必要です。

これからWEBサイトを作る場合だけでなく、すでに対応しているWEBサイトでも、しっかりモバイル対応しているか再確認してみてください。
GoogleのGoogle Search Consoleで確認することで、きちんと対応されているかのチェックをすることも出来ます。