動かすのが楽しくなる! NHK「スタジオパーク」サイトのレスポンシブWebデザインに注目

NHKスタジオパーク NHKスタジオパーク

なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! | gori.me なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! | gori.me

レスポンシブWebデザインは、パソコンやスマートフォンなどの異なる画面サイズに合わせて、ページのレイアウトやデザインを調整するというもの。同じページデザインでも、各端末の画面サイズに適用する形で表示されます。

NHKスタジオパークのサイトも、このレスポンシブWebデザインを採用しています。

全画面でページを開くと、メニュー画面が横に3つ並ぶ3カラム形式で表示されました。

少しブラウザの画面サイズを狭くしてみました。右上にあった幅の広いメニュー画面が下に移動し、代わりに細長いメニューが右カラムの上部に移っています。

さらに狭めます。すると、右カラムのメニューがすべて下へ移動し、2カラム形式になりました。

どんどん画面を狭くしていきます。ついに1カラムになりました。

ブラウザを狭められる限界まできました。レイアウトが崩れることなく、1カラムできれいに表示されています。

試しにスマートフォンでも確認してみると、1カラム形式で表示されていました。画面の向きを横にしても、画面サイズに適用するようにレイアウトが変わります。

いずれの動作も、スムーズに表示を切り替えられるのが印象的でした。このサイトデザインについて解説したサイト「gori.me」によると、「jQuery Masonry」というプラグインが使われているそうです。レスポンシブWebデザインについては、以下のエントリーで詳細に解説されています。

必読!5分でわかる流行のレスポンシブWebデザインまとめ | デザイナーブログ | 株式会社LIG 
必読!5分でわかる流行のレスポンシブWebデザインまとめ | デザイナーブログ |  株式会社LIG

はてなブックマークのコメント欄には「スマートフォン横向きにもスムーズに対応していて、細部までこだわっている感ある」「PC向けからスマホ向けに切り替えるときの動きがいいな」「素晴らしい操作性!」といった感想が寄せられています。

「ウェブデザイン」に関連する商品 by BECOME