Advertisement

32musiclover_pic

 

3400年前にはすでに歌が完成していたという、長い歴史をもつ音楽。

クリエイティブなアイデアの表現方法のひとつです。

 

「音楽」をコンテンツ、テーマにしたウェブサイトデザイン34個をまとめたエントリー「34 Inspiring Music Related Websites」が、海外デザインブログDzineBlogで公開されていたので、今回はご紹介します。

 

 

通常のウェブサイトやブログなどのレイアウトでは、あまり見かけないユニークなデザインが多く、デザイン制作のアイデアにいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

デザインと音楽の融合、クリエイティブなWebサイトデザインまとめ

 

The Licence Lab

シャンパンゴールドの色使い、レザーテクスチャのナビゲーションメニューが印象的。

Musicページにおける音楽ソート(並び替え)機能がとてもユニークなサイトです。

3musiclover_pic

 

 

 

The Bullitt Agency

音楽アーティスト、DJを集めたエージェント集団のWebサイトデザイン。

キーボードの矢印キーを使って、コンテンツの移動を行います。

10musiclover_pic

 

 

 

Vodafone.fm

ブランドカラーをモチーフに、グリッドレイアウトを使ってデザインされています。

音楽を再生すると、音に合わせて背景が切り替わるギミックが、。

8musiclover_pic

 

 

 

TribeCon 3

洋服の生地、テキスタイルのような質感の背景デザインに、レタープレス(型押し)デザイン、タイポグラフィーを組み合わせた、大胆なイベント告知ページ。

27musiclover_pic

 

 

 

Sugar Shack Records

ラスタカラーのストライプを左斜めに、グランジテイストを組み合わせた、やさしい印象を与えてくれるWebサイト。

14musiclover_pic

 

 

 

Bulls + Arrows

水彩絵の具でペイントしたような背景に、グリッドレイアウトを合わせたダーク系サイト。

16musiclover_pic

 

 

 

The Record – Contemporary ART and VINYL

アナログレコードのラベルをモチーフにしたロゴに、水平型ナビゲーションメニューを利用した、ユニークなデザイン。

11musiclover_pic

 

 

 

Festival mundo 2011

上部に設置されてあるメニューをくりっくすることで、パスにそってコンテンツがアニメーション移動します。

22musiclover_pic

 

 

 

Routalempi

フィンランドで活動を行っている、バンドグループのWebサイト。

ナビゲーションメニューをクリックすると、スルスルっとコンテンツが移動します。

6musiclover_pic

 

 

 

Pasadena

トップページはきれいな写真を使った、ナビゲーションメニューのみなのですが、質感が個人的に好みだったのでメモとして。

33musiclover_pic

 

 

 

Hanging Up the Moon

オシャレGIFアニメーション「シネマグラフ」を利用したサムネイル画像をクリックすると、それぞれの曲を試聴可能となっていますよ。

23musiclover_pic

 

 

 

Niepubliczna Szkota Myzyczna

ポーランドにある音楽学校のWebサイト、子供達の笑顔いっぱいな写真を、フルサイズでスライドさせています。

25musiclover_pic

 

 

 

Bionic Babies

背景全体に動画を再生することで、よりユーザーに分かりやすくイメージを伝えたWebサイトデザイン。

21musiclover_pic

 

 

 

GIVERS

バンドメンバーを撮影した、レトロ風写真をそのまま背景デザインに利用した、ウェブサイト。

細字スタイルのバンドロゴとの相性もばっちり◎。

34musiclover_pic

 

 

 

Pioneer STEEZ

カラフルで、パワフルなBoomBoxスピーカーの紹介用Webサイト、パララックス効果使ってます。

1musiclover_pic

 

 

 

Guns N’ Roses

立体的なリボン風ロゴデザインに、バラ色をアクセントに使った、スタイリッシュなWebサイトデザイン。

2musiclover_pic

 

 

 

Jonathan Crehan

今回特にリボンデザインを利用した、ウェブサイトが多いように感じました。

20musiclover_pic

 

 

 

Daniel Osborne

クラシックカーと一緒に撮影された写真が、よりビンテージな風合いを表現したWebサイト。

左側のナビゲーションメニューの、フォント選びなども参考になりそうです。

29musiclover_pic

 

 

 

音楽アーティスト、バンドのクリエイティブなウェブサイトデザイン30個まとめ  

以前ご紹介した、音楽に関連するWebサイトデザインのまとめとなります。

 

[参照元 : 34 Inspiring Music Related Websites – DzineBlog]