ホームページ制作、HP作成の大阪キューブ

こんにちわ。
キューブ制作部の片山です！！

五月に入り、ゴールデンウィークですね！
この連休にどこかお出かけする方も多いのではないでしょうか？

さて、皆さんは通勤、通学にスマートフォンでサイトを見ることはありますか？

最近はスマートフォンに対応したレスポンシブデザインのご要望が増えています。

画面が小さい分、見やすくするためにどのような工夫がされているのか気になったので私もいくつか参考サイトを探しました。

そこで今回は、工夫されてるPCサイトとレスポンシブサイトを比較しながら紹介したいと思います！！

「立山の水　－さらら－」

http://sarara.jp/

立山の美味しいお水のさららという商品紹介サイトです。

PCサイトでは、メニュー部分がよく見る横並びのカタチになっています。

それに比べスマートフォンサイトでは、
見やすくするためにドロップダウンメニューになっています。

それだけではなく、水の滴がメニューボタンの部分に使われています。

このようなちょっとした工夫で、
お水の商品紹介サイトであることがわかりやすく、
小さい画面のスマートフォンでもユーザーの目に
とまりやすいデザインになっているのではないでしょうか？

「相模原看護専門学校」

http://www.snvs.ac.jp/

看護専門学校のサイトです。

PCサイトのメインビジュアルは、一枚の生徒の集合写真が使われ、
画面全体を使ったキャッチコピーがこの学校の魅力を表現しています。

それに比べて、スマートフォンサイトになると、
一人一人が実習や講義受けている学生生活の様子が
スライドショーで流れるようになっています。

小さい画面でわかりにくいメインビジュアルも
この学校の雰囲気や良さが一目で伝わってくるのではないでしょうか？

「mixi」

http://mixi.co.jp/recruit/

snsとして様々なサービスを提供している企業の採用ページです。

PCサイトでは、企業理念や社員の想いなど、どんな企業であるかを知ってから、
最後に、「新卒の方」「キャリアの方」のリンク先へのバナーがあります。

大きい画面で見るため、ゆったりとしたデザインで、じっくりと読めるようになっています。

しかし、スマートフォン用のサイトでは、そのバナーが、メインビジュアルのすぐ下にも配置されます。
そうすることで、すぐにエントリーページにとぶことができ、
すぐにエントリーに進みたいと考える人にとってはとても便利だと感じます。

スマートフォンではPCサイトに比べ縦長になるため、
採用ページで一番必要な、エントリーページへのバナーを
すぐに見つけることができるユーザー目線の優しいサイトですよね。

PCサイトとスマートフォンサイトを比較すると、
同じサイトではありますが、
いくつか見やすい工夫がされていることがわかってきますよね。

以上、「一工夫で変わる！PCサイトとスマートフォンサイトの比較集」でした！

来週もお楽しみに！