最近、レスポンシブウェブデザインを採用したウェブサイトが増えています。
このブログをご覧の方にも、すでに取り入れている方もいらっしゃるのではないでしょうか。
今回はレスポンシブウェブデザインのサイトで特に注意したいEFOポイントを３つお伝えします。
目次
レスポンシブ・ウェブデザインとは？
レスポンシブ・ウェブデザインとは、ウェブサイト制作の手法の一つです。
画面（ブラウザ）の横幅サイズにあわせて装飾やレイアウトが変化するデザインのウェブページを、単一のファイルで対応することを指します。
WEB制作になじみの無い方にはピンと来ないかもしれませんが、レスポンシブ・ウェブデザインを用いることにより、
PC、タブレット、スマートフォンなど、さまざまな画面サイズのデバイスに最適化できるとお考えいただければと思います。
昨今、本当に多種多様なサイズのデバイスが次々と発表されていきますので、
今後はレスポンシブ・ウェブデザインが主流となっていく可能性もあるでしょう。
レスポンシブ・ウェブデザインにはそのほかに以下のようなメリットがあります。
- サイトの更新の手間が省ける
- 更新漏れの防止が可能
- SEOの観点からもメリットがあると言われている
EFO的に見て、レスポンシブ・ウェブデザインで陥りがちなケース
少し前置きが長くなりましたが、さっそくレスポンシブ・ウェブデザインで陥りがちなEFO的NGパターンをご紹介します。
ページが重い
レスポンシブ・ウェブデザインはPC向けとスマートフォン向けのファイルが同一なので、基本的にはスマートフォンでもPCと同様のコンテンツを読み込まなくてはなりません。
つまり、PC環境ではあまり気にならないリッチなコンテンツ構成のままだと、スマ－トフォンの３G回線では非常に読み込みが重くなる、というケースが多くあります。
サイト全体もそうですが、フォームはとくにCSSなどを活用しファイルサイズが大きくなり過ぎないように心がけたいものです。
ラベルと項目が2カラムのままになっている
すぐ対策したい！スマートフォン向けフォームでありがちなストレスを生む５つの要因でもお伝えしましたが、スマートフォンで見るとストレスにつながる表組み型のフォームデザイン。
PC用ウェブサイトでは一般的な形なので、スマートフォンサイズでもそのままとなっているケースが目立ちました。
せっかくの見やすいデザインが、非常に勿体無い…
横幅が狭い場合は表組みの要素を横幅いっぱいに広げるようなスタイルで記述しましょう。
横幅いっぱいに項目が広がっている方が、やはり入力しやすそうです
不要な要素が残っている
PCの大きな画面では気にならないグローバルナビゲーションなどのサイトのメニュー類。スマートフォンの小さな画面では、かなりのファーストビュー領域を食ってしまう場合があります。
なるべくメニューはたたんでおくか、フォームのページでは表示しないようにしておきましょう。
最後に
いかがだったでしょうか。
今回のエントリを書くにあたり、かなりの数のレスポンシブデザインのサイトを調査しましたが、きちんとフォームまで丁寧に対応されているサイトは本当にわずかでした。
便利で優れた技術であるレスポンシブ・ウェブデザイン。
デバイスの多様化にともない、今後もますます採択するサイトが増えてくると思います。
引き続き、レスポンシブデザインのEFOについては情報収集を続けていきたいと思います。
