search
LoginSignup
10

More than 5 years have passed since last update.

Organization

すごいレスポンシブデザインのサイト

あらまし

世の中すっかりレスポンシブサイトが定着してきましたが、これは作りこみ半端ないぞ、というサイトを 1 つと、レスポンシブサイトの構成を検討するにあたって便利なサイトを紹介したいと思います。

これは凄い

いろいろなサイトを見てきたのですが、これは芸が細かいぞ、というサイトを1つだけ紹介したいと思います。それは早稲田大学のサイトでした。

解像度ごとにことなったナビ x 3 パターン

スクリーンショット 2015-12-17 20.21.55.png
これはスマホの解像度。

スクリーンショット 2015-12-17 20.22.13.png

ちょっと古い端末やタブレット向け (sm-md) くらいの解像度。メニューがアイコンで少しだけ展開されています。

スクリーンショット 2015-12-17 20.22.27.png

PC (lg) の解像度。メニューがフルに展開されています。

ナビ展開時の動作も解像度によって異なり芸が細かい

スクリーンショット 2015-12-17 20.23.14.png

スマホの場合は、ナビを展開すると現れるナビ。

スクリーンショット 2015-12-17 20.24.01.png

sm-md あたりの解像度の時は、アイコンだけじゃなく hover したら説明がでるという芸の細かさ。

ちょっと作りこみが半端なさすぎて、サイト構成の変更ごとに発生するアイコンの用意などメンテナンスコストについて心配してしまいます。レスポンシブデザインはシルバーブレットではない、という話もありますしxs と lg くらいの作り分けで良いのではないかと思ってしまいます。

スクリーンショット 2015-12-17 20.23.33.png

lg といった広い解像度がある時はこのようなナビですが、スマホの時と見た目がちょっと違う芸の細かさ。

いろいろ画像を貼り付けましたが、ちょっと実際にアクセスして画面の横幅をグリグリしてみてもらえると、「おおっ」と思っていただけると思います。

いい感じのレスポンシブサイト一覧

RWDJP というサイトでいけてるレスポンシブサイト、そして、レスポンシブデザインとは一見思えない見た目だが実はレスポンシブデザインだった、といった一覧がありますので、構成など検討される場合はきっと参考になると思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
10