レスポンシブWEBデザインでホームページを作成する時、ついパソコン画面での表示に目がいってしまいます。
パソコンの様な大きな画面への配置を優先した「PCファースト」のデザインになってしまうんです。
もちろんWeb戦略的に考えてPCサイトを優先させ、スマートフォンの表示はオマケ程度であれば問題ありません。
ですが実際はPCを使う方よりもスマートフォン、タブレットなどの端末を利用されている方が急増しています。
そういう方にとって、PCファーストで作成されたホームページは表示に時間がかかったり、画像が汚く見えたり、操作しにくかったりと、意外とストレスに感じる部分が多くなるんです。
実は、本来レスポンシブWEBデザインで作成されるページは「スマートフォンファースト」であるべきなんです。
それにはスマートフォンやタブレットの通信環境が異なる事の他に、画面の幅の違いにも問題があります。
レスポンシブWEBデザインで作成した場合、パソコン用の表示でもタブレット・スマートフォンでの表示でも使われるHTMLファイルと画像は一緒です。
特に問題となるのが、「一緒の画像を使う」という点です。
画面の横幅に合わせて画像幅が可変する場合がほとんどなので、横幅から一部だけはみ出るという事はありません。
ですが縦横比率を守ったまま縮小されるんです。
もしも画像の中に文字がある場合、縮小されれば文字サイズも一緒に縮小されてしまいます。
パソコン画面サイズでちょうどいい文字サイズで作成したとしても、スマートフォンの画面で見た時に小さすぎて読めないかもしれません。
また、あまりにもファイル容量の大きな画像を使っている場合、同じファイルサイズをスマートフォンやタブレットの通信回線でダウンロードする事になるので、契約している通信制限容量を圧迫してしまう事にも注意しなければなりません。
また、Wi-Fiの通信環境がない場合、なかなかページが表示されない・・・という事もよく起こる現象です。
ここでパソコン用とスマートフォン・タブレット用の画像を2種類作成し、HTMLにあらかじめ設置しておいて、表示する画面サイズ毎に画像を切り替えればいい・・・と考えるかもしれません。
でもそれは一番やってはいけない方法なんです。
画面上にはCSSを使う事で表示・非表示を制御できますが、HTMLにimg要素を使って配置した時点で、画像は読み込まれてしまいます。
表面上は見えないけれど、裏側ではダウンロードしているんですね。
なので2種類の画像を読み込んでいるので、単純に考えて倍の通信量がかかることに！！
この方法はデザイン上、どうしても切り替えたい場合以外では本当にオススメできないので、注意してください。
画像サイズ・通信量と2点挙げましたが、最後にもう1点問題があります。それはスクロール量です。
ご存知の通り、パソコン画面とスマートフォンの画面では横幅が全く違いますよね。
横幅を広く取ってデザインされているものを、横幅を狭くしてデザインするとどうなるでしょうか・・・
縦方向に伸ばすしかありませんよね？
そうなるとスクロールする量が自然と増えてしまうんです。
そうなって来ると、ナビゲーションの位置やリンクバナーの位置など、作り手側がタップして欲しい要素が見えなくなってしまったり、画面へ表示した時に見える印象もだいぶ変わってしまいます。
また、読みやすい位置で改行をしている場合、横幅が変わる事で逆に読みにくくなってしまう事もあるんです。
そうした問題を解決するために、パソコンとスマートフォン、タブレットのそれぞれの画面表示で中間地点を見つけてあげる事が重要です。
スマートフォンを使う人の方が多い
スマートフォンの普及に伴って、パソコンが要らなくなる時代が訪れようとしています。
データのバックアップや音楽CDの取り込み・転送などにパソコンが必要でしたが、既にクラウド上でバックアップを取っておいたり、音楽CDを取り込んでスマートフォンへ転送させるような外付けの機器も多くなってきました。
バックアップに関して言えば、スマートフォンとの接続もできる大容量の外付けHDDも販売されていたり、USBやSDカードを接続する機器などなど様々な製品が発売されています。
キーボードやマウスもBluetoothで接続できるので、もはやノートパソコンとの違いが分からなくなってきました。
こうした周辺機器の充実もあり、パソコンを持たずにスマートフォン・タブレットだけを持っている方が増えています。
そんな背景からもスマートフォンファーストでのデザインを優先させる時代が来ようとしています。
ですがスマートフォンファーストでページを作成すると、どうしても質素になってしまいがちですので、あまりウケがよくないのも事実です。
どうしたらいいか困ってしまいますが、「移動や待ち合わせなどのスキマ時間に見てもらいたいページならスマートフォンへ特化させる」「お役所や企業を対象としたページならパソコンへ特化させる」といったようにWeb戦略的に考えて、ターゲットとなるユーザーがパソコンをメインで使う方なのか、スマートフォンをメインで使う方なのかを考えてホームページの方向性を決めていきましょう。
