今回はレスポンシブデザインを適用したので紹介する。

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

そもそもレスポンシブ（Web）デザインとは何だよ、という人も多いかもしれない。レスポンシブデザインとは、端末に最適化されたデザインを意味する。

Webサイトを閲覧する際、PC、タブレット、スマホを利用して見ると思うが、それぞれデザインが異なる。

試しにYahooのホームページで比較する。スマホだと上部にアイコンがあり、下にニュースが表示されている。

一方、PCで表示させた場合、上部にあったはずのアイコンが左に移動して、ニュースは真ん中。それ以外にも多数の情報があるのがわかる。

スマホとPCのデザインの違い

• スマホの特徴

  1. 指でタッチしやすいように大きなアイコン

  2. 情報量は少なめ

• PCの特徴

  1. マウス操作のため小さなアイコン

  2. 情報量が非常に多い

スマホはタッチ操作が前提のため直感的に操作できるのが重要になってくる。一方、PCはマウス操作が前提のため細かい操作ができ,ディスプレイ自体も大きいため情報量を多く乗せることができる。

あとはその情報をどうやって見せるのか、どのようにすればまとまりがありわかりやすい表示にできるか、それがWebデザインで重要になってくる。