名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

スマートフォンやタブレット端末の普及により、ホームページはさまざまな画面サイズで閲覧する事が多くなりました。昨今では、折り畳み式のスマートフォンなど、今まで主流であった画面サイズとは異なる端末も出てきています。
異なる端末を使うユーザーでも、同じ情報を得られるようにするべく生まれたのが「レスポンシブデザイン」です。現在は、多くのホームページでレスポンシブデザインが採用されています。
今回は、レスポンシブデザインのホームページを制作する際にWEBデザイナーが気をつけるべきポイントを紹介します。

レスポンシブデザインとは

レスポンシブデザインとは、どのデバイスでも見やすくなるように、ディスプレイサイズに合わせてコンテンツの配置を変えるデザインを指します。
アダプティブデザインと呼ばれるPCとスマートフォンで独立したデザインを制作するホームページもあります。
アダプティブデザインは、PC用とスマートフォン用それぞれのHTMLファイルを用意する必要があるのに対し、レスポンシブデザインは１つのHTMLファイルを用意するだけなので運用が非常に楽です。
またレスポンシブデザインは、閲覧する端末に関わらずURLが1つなので、SEOにおいても高い効果を期待できます。

レスポンシブデザインを制作する際に気をつけるべきポイント

ここからはレスポンシブデザインを制作する際に気をつけるべき4つのポイントを紹介します。

ボタンをタップしやすい形・大きさにする

PCではカーソルをマウスで動かしてボタンを押すのが一般的ですが、スマートフォンは画面をタップしてボタンを押します。小さな画面上のボタンを指でタップする為、押しやすい大きさ・形のボタンでデザインする必要があります。
また、スマートフォンではマウスオーバーの動きがほとんどできない為、注意が必要です

ボタン間のマージンを十分に空ける

ボタンが並ぶデザインの場合、ボタンが近すぎると誤ったボタンを押してしまう可能性があります。
タップした時に誤って違うボタンを押してしまわないようにボタン間に十分なマージンを空ける必要があります。

機能が予測できるようなアイコン・ボタンデザインを使用する

機能が予測できるようなアイコン・ボタンを使用することで、ユーザーは迷わずサイト内を回遊できます。昨今、グローバルナビゲーションをハンバーガーメニュー内に収めるホームページが増えています。現在は多くの人がスマートフォンを利用している為、ハンバーガメニューの使い方にも慣れているユーザーが多く、「ただの3本線」でも「メニュー」だと分かります。
スマートフォンはPCに比べて、コンテンツをコンパクトにする必要がある為、ハンバーガーメニューなど機能が予測できるアイコン・ボタンデザインを使用しましょう。
ただ機能が予測できないような複雑なアイコンは、かえってユーザーを混乱させてしまう為、注意する必要があります。

文字を大きくする

現在発売されている多くのスマートフォンは解像度が高く、鮮明にディスプレイに映されますが、かといって小さな文字サイズでは読みづらくなってしまいます。PCで適切な文字サイズでもスマートフォンで見たら全く読めないなんてことも多いので、スマートフォン用の文字サイズを用意してからデザインを制作する必要があります。本文のテキストサイズは、14〜16pxを基準に制作しましょう。

今回のまとめ

現在、解像度やアスペクト比の異なる様々なスマートフォン端末が売られています。ホームページを制作する際は、今回紹介したポイントをしっかりと押さえて、ユーザーが見やすいレイアウトを心がけましょう。
また、実際にスマートフォンで見てみる事で改善するべきポイントが見えてくる事もあるので、制作したレスポンシブデザインは必ず実機でも確認することをお勧めします。