第２回 NHKスタジオパーク
第２回はNHKスタジオパークのサイトです。
http://www.nhk.or.jp/studiopark/
まずは
パソコンサイズの全体像から
・1200px以上
シンプルなグリッドレイアウトとなっている。
背景は灰色。
白いボックスが綺麗に敷き詰められている。
ナビゲーションは左上、
中央の写真はjQueryのFlexSliderがプラグインで使われている。
レスポンシブルの話では、画面のサイズに合わせて５段階に変化する。
・1200px以上
・1000px以上
・821px以上
・541px以上
・540px以下
レイアウトが変わるときのアニメーションがかわいい。
こちらはメイソンリーのプラグインが使われている。
・1000px以上
一番右の列が小さい方のボックスになる。
・821px以上
さらに小さくなる。
・541px以上
ここでナビゲーションのボックスが上部に移動
もっと小さくなる。
・540px以下
スマホサイズ。
このサイトのお気に入りのポイントは何よりも、
横幅でレイアウトが切り替わるときのボックスの動きがかわいい！
という一言に尽きる。
そしてソースがとてもきれいで美しい。
無駄がなくとてもよく洗練されている。
しかし、今の自分の実力では解読がよくわからないのでもっと勉強していきたい。
第１回 星のカービィポータル
第１回は星のカービィのサイトを紹介します。
星のカービィポータル
・トップ画像
トップの画像は幅100%で表示してある。
・スマホ時
レスポンシブの切り替え点は992px。
上部のナビゲーションがハンバーガーメニューに切り替わる。
写真もSP用のとPC用のものを２種類用意してある。
・かわいらしい演出
画像だとわからないが、バックグラウンドで流れ星が流れるという演出もあり乙である。
左中ほどのカービィがアニメーションでふわふわと浮く演出がほどこされておりかわいい。
テーマが変わるところでは間にアイコンをおいて切れ目がわかるようにしている。
・おまけ要素
フォトフレームや楽譜の無料配布など、楽しめるプレゼント要素が含まれている。
・トップに戻るのも感動
一番下までスクロールすると大砲に入ったカービィが。
このカービィをクリックすると・・・
カービィ作品ではおなじみの大砲が発射されて画面の上部まで戻ってくる。
こういった遊び心も非常におもしろい。
昔楽しんだ懐かしのカービィのサイトでこのようないろいろな発見があるとは非常に感慨深い。
