YUI-net.com

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

1. アーティスト/アルバムの魅力を最大限伝えるグリッドレイアウト
2. サイト周りで魅せる
3. ページ内遷移がストレスレス

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

• Tweet
• 

個人的に大好きなアーティスト、YUIの公式サイトのWebデザインです。残念ながら、引退してしまいましたが(ToT)、YUIのベスト・アルバム「ORANGE GARDEN POP」、「GREEN GARDEN POP」が発売される直前から変更されたデザインのままのWebデザインになっています。いつもサイトを観ていたので、この体裁になった時は感動を覚えたのを覚えています。。。

Webデザインとしては、思い切った配色で、グリッドレイアウトでコンテンツが並べられているのが刺激的です。そんなWebデザインにはファンにとってはたまらない機能がついているのですよ！

アドレスは変わらずWebデザインバージョンを切り替えられる

アドレスを変えることなくサイトのWebデザインを、「ORANGE ver」、「GREEN ver」を切り替えられます。これはアルバムにちなんでつけられている演出。色が変わるとともに表示されるコンテンツもランダムで変更されるので、ファンからするとめっちゃくちゃ嬉しい機能！なんというか、サイトを堪能している気になれる機能だと私は思いました。

また、このWebデザインは一目瞭然ですが、ベスト・アルバムに合わせて作られたデザインです。つまり、これまでのYUIの軌跡をまとめる一因も担っているというわけです。そう考えると、このグリッドレイアウトでCDジャケットを並べるというのは、今回のベスト・アルバムにベストに応えたWebデザインとなっているのではないでしょうか。

ロールオーバーでディスクリプション

グリッドレイアウトで配置されているCDジャケット写真をホバーすると、ロールオーバーで説明文と音楽を聞ける機能！わかりやすいことこの上ないし、写真から音楽を聞けるので、当時のジャケットを知る人にはとてもわかりやすい構成になっています。文字だけが列挙されているサンプル音源とは便利さが違う。

けど、思えばサイト1ページに表示されているCDジャケットはそんなに多くない。全曲聴くためには？

の、答えがすぐサイト周りを観ることでわかります。音符マークが列挙されマウスホバーで楽曲名が表示されます。

こういったことをみていると、ファンにとってはサイトを閲覧するのがとても楽しい仕様になっているのだなーと本当に感じました。

サイト周りで魅せる

サイトの配色はオレンジもしくは緑の単色のみ。そうなるとデザインが単調なものになってしまいます。そこを多彩なサイドコンテンツで補っています。

まずサイト周りにある音符マークは、上下にかけてグラデーション。これのおかげで単調な中にも強弱は現れるのでつまらなさがなくなっていますよね。

またサイト構成として、左上から右下に開いていくデザインとなっています。それを印象付けているのが、ヘッドメニューとサイドメニュー。これはほぼ同一コンテンツが並んでいます。

重複コンテンツだ、と避難されるかもしれないのですが、片方は文字のみ。かたやもう一方はアイコンのみで表示されています。それぞれが順にリンクしつつだが見た目は違うこのレイアウト構成は、私にとっては良く映りました。

グリッド配置されていたコンテンツがまさかの切り替わり

トップページではCDジャケットがグリッド配置されていますが、メニューをクリックすると、コンテンツに応じてCDジャケットが配置されていた箇所にそのコンテンツが表示されます。同一ページ内のスムースな移動なので全くストレスのない動きですね。

ああー、私にはこのWebデザインはとても挑戦性のあるWebデザインに映りました。ですが、ファンにとってはそれがたまらなく魅力的に映ります。YUIの魅力を精一杯伝えようとするWebデザインでした。勉強になりました。

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

• ツイート
•