NHK大河ドラマ「八重の桜」

Webデザイン３つの良いとこ : 3 Good Point!

1. 桜を散らして桜を見せて。イメージを演出
2. トップページのスライドショーがすごい
3. 各所で光るデザイン

私はWebデザインのココを見た！

• Tweet
• 

2013年のNHK大河ドラマ、八重の桜の公式ホームページのWebデザインをレビュー。

舞い散る桜や、LightBoxなどの綺麗なjQuery、雑誌記事のように構成されたインタビュー記事、配色など、様々な技巧が凝らされているWebサイトです。

舞い散る桜、左右から彩る桜

八重の桜、「桜」がキーワードになっている物語を、Webデザインで素晴らしく表現しています。

ページ左右からは桜が彩り、ページ上部からは桜が舞い降りてきます。

これはjQueryプラグインである「Snowfall Plugin」を利用すればjQueryで簡単に桜を降らせる効果をつけられるもの。

「雪を降らせるjQuery」と認識していましたが、桜が舞い散る表現は良いですねー！

雲の流れは変わらず背景と上要素だけ変化するスライドショー

サイトを観ていると自然すぎてなかなか気づかなかったのですが（自然とさせるためにこういったWebデザインにしているのですが）、背景を流れる雲は動き続ける中で、背景と上要素のみが変化するスライドショーを実装しています。

上図は紫背景と各コンテンツのスライドに変化したものです。

すごいですね！幾重にもレイヤーが重なったイメージをするとわかりやすい。

こんなに自然と魅せるWebデザインはなかなか珍しい。

jQueryで多彩な演出

上図は登場人物をクリックした際のポップアップ表示。ライトボックス系なjQueryを利用しています。

lightboxはlightboxでも、この表示のさせ方は頂きました！

左に写真を、右に説明文を淡い帯パターンを背景に表示させるこの構成。閉じるボタンも自然となっています。

これなら登場人物をわかりやすく、楽しく表示させることができますね。

上図は、ヘッドメニューに表示されている、「什の掟」をクリックすると表示されるものです。上からスライドして表示され、薄い透明色となっているので、不自然な感じはうけません。

そこに左右の桜がまた映えること映えること。ほんとキレイだなー。

雑誌のようなインタビュー記事のWebデザイン

スペシャルコンテンツとして、キャストのみなさんのインタビューを見ることが出来ます。

そのインタビューのデザインが、また一風変わっていますね。しっかりと各所各所で区切り、そして画像もうまく利用することで、読み疲れを防いでいます。

このデザインは「紙」な雑誌のようなレイアウトですよね。

上図は俳優の西島秀俊さんの画像をposition:absolute;を設定することで、枠からはみ出すずらしをわざとデザインしています。

こういったことにはどんどん挑戦していきたい。

私自身、八重の桜かなりスキです！人の「頑張る想い」を初回から何度も描いている点が特に私を惹き寄せます。

そんな中でWebサイトを観て、更にワクワク感が増して来ました。こういったファンを裏切らない秀逸なWebデザインを作るには大変な苦労があると思いますが、私もこんなWebサイトを制作出来るよう頑張って行きたいと思いました！

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•