NHKが公開している「NHKスタジオパーク」のサイトデザインが、はてなブックマークで話題を呼んでいます。画面サイズに合わせてページのレイアウトが変わる「レスポンシブWebデザイン」を取り入れており、ブラウザの幅に合わせてメニューが自動で整えられます。実際に操作した閲覧者からは「動きがなめらかでいい」といった声が挙がっています。
▽ NHKスタジオパーク
▽ なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | gori.me
レスポンシブWebデザインは、パソコンやスマートフォンなどの異なる画面サイズに合わせて、ページのレイアウトやデザインを調整するというもの。同じページデザインでも、各端末の画面サイズに適用する形で表示されます。
NHKスタジオパークのサイトも、このレスポンシブWebデザインを採用しています。
全画面でページを開くと、メニュー画面が横に3つ並ぶ3カラム形式で表示されました。
少しブラウザの画面サイズを狭くしてみました。右上にあった幅の広いメニュー画面が下に移動し、代わりに細長いメニューが右カラムの上部に移っています。
さらに狭めます。すると、右カラムのメニューがすべて下へ移動し、2カラム形式になりました。
どんどん画面を狭くしていきます。ついに1カラムになりました。
ブラウザを狭められる限界まできました。レイアウトが崩れることなく、1カラムできれいに表示されています。
試しにスマートフォンでも確認してみると、1カラム形式で表示されていました。画面の向きを横にしても、画面サイズに適用するようにレイアウトが変わります。
いずれの動作も、スムーズに表示を切り替えられるのが印象的でした。このサイトデザインについて解説したサイト「gori.me」によると、「jQuery Masonry」というプラグインが使われているそうです。レスポンシブWebデザインについては、以下のエントリーで詳細に解説されています。
▽ 必読！5分でわかるレスポンシブWebデザインまとめ | 東京上野のWeb制作会社LIG
はてなブックマークのコメント欄には「スマートフォン横向きにもスムーズに対応していて、細部までこだわっている感ある」「PC向けからスマホ向けに切り替えるときの動きがいいな」「素晴らしい操作性！」といった感想が寄せられています。
