Advertisement

 

 

音楽とデザインは個性、クリエイティビティの面において似ているのかもしれません。

多くのアーティストがデザインルールやトレンドに関係なく個性的なデザインを利用したウェブサイトを制作しています。

 

海外デザインブログOnextraPixelでさまざまなジャンルのアーティストのウェブサイトを30個まとめたエントリー「Inspirational Web Design Within the Music Industry」が公開されていたので、今回はご紹介します。

レイアウトやデザイン制作のアイデア、参考になるのではないでしょうか。

 

 

詳細は以下から。

 

 

クリエイティブで個性的な音楽系ウェブサイトデザインまとめ

 

Fall Out Boy

シンプルで軽いグランジテクスチャを背景デザインに利用したウェブサイトデザイン。

カラムを意識したデザインとなっていますが、ヘッダー部分の淡いグラデーションとアーティスト写真がインパクト大。

 

 

Anthony Hamilton

巨大なアーティスト画像がインパクトのあるグランジスタイルのウェブサイトデザイン。

ラインの細いフォントを利用することでエレガントな印象となり、カラーリングも参考としてメモ。

※ 開くと音が出ますのでご注意ください。

 

 

Alicia Keys

ファンキーでオシャレな色使いのデザインパーツを利用しており、ページを開いた瞬間にソーシャルメディアや最新ニュースなどを一目で確認することが可能。

 

 

Usher

紺色を基調とした洗練されたデザインが特徴的なウェブサイトのひとつ。

ボックスを利用することで分かりやすく、多くの情報をまとめています。

 

 

Jimi Hendrix

彼のテーマカラーでもある深紫(Deep Purple)をウェブサイト全体に利用したアート性の強いウェブサイト。

 

 

Jack Johnson

サーファーでミュージシャンでもあるJack Johnsonらしいウッドテクスチャを背景全体に利用したやさしく、ゆるい印象のウェブサイトデザイン。

細かくカテゴリー分けされているので、初めて訪れたひとにも分かりやすいのではないでしょうか。

 

 

Gary Nock

ハーフトーンや淡いグランジテクスチャを重ねることでやわらかい印象を表現しているウェブデザインのひとつ。

利用されているカラーリングも参考になりそうですね。

 

 

Norah Jones

枠組みなどを手描きスケッチ風にデザインした温かみのあるウェブサイトデザインとなっており、最新アルバムもすぐにプレビューできるなどユーサビリティもうまく考慮されています。

 

 

Zac Brown Band

グリッドレイアウトを利用したすっきりと整理されたウェブ際とデザインのひとつ。

ファブリック素材を背景画像として利用しており、グランジテイストとの相性もばっちり。

 

 

Jason Gray

汚れた方眼紙テクスチャを背景に使い、なんと言ってもヘッダー部分のロールオーバーエフェクトがユーザーの注意を惹きつけています。

 

 

Marina & the Diamonds

シンプルなミニマルデザインを利用したウェブサイトデザインとなっており、力強いロゴデザインが引き立っています。

 

 

Nicole Scherzinger

PussyCat Dollsのメンバーでもある彼女のウェブサイトは、カラフルなパステルカラーを利用したデザイン。

 

 

Placebo

光の反射がまぶしいほどの背景テクスチャを利用したポップでユニークな印象のウェブサイトデザイン。

グリッドを利用してレイアウトすることで、シンプルでまとまりのあるデザインに仕上げられています。

 

 

Kari Jobe

女性らしい色使いと手描きスケッチ風デザインがかわいらしいウェブサイトデザインのひとつ。

どこかレトロな印象を与えてくれる色調がやさしい気持ちにさせてくれます。

 

 

Splendour in the Grass

こちらはアーティストウェブサイトではなく、イベント用なのですがインパクトのあるカラフルデザインとなっておりイベントの印象を連想させることができます。

 

 

Jono Buchanan

グラフィック色の強い音楽系ウェブサイトとなっており、シンプルなレイアウトですがインパクトのあるイメージデザインが数多く使用されています。

 

 

Rihanna

ソーシャルメディアをフル活用したユーザー参加型ウェブサイトのひとつで、もちろん最新アルバムなどの紹介も分かりやすくさrています。

※ 開くと音ができますのでご注意ください。

 

 

Ebony Cuts

レコード棚をそのまま再現したユニークなつくりのウェブサイトデザインのひとつ。

表向きにレイアウトされているアナログレコードをクリックすることで、サンプル音源を試聴することが可能となっています。

 

 

AC/DC

オールドスクール感のあるグランジデザインはバンドメンバーの個性を象徴したようなウェブサイトデザインとなっています。

ブログ形式にすることでプライベートをユーザーと共有しやすくなっています。

 

 

Tinie Tempah

グラフィックデザインのトレンドでもあるライティングエフェクトを利用したダーク系ウェブサイトデザイン。

UIデザインの色合いなどを合わせることで、すっきりとまとまりのあるデザインを表現しています。

 

 

海外HIPHOPアーティストのデザインのクールなウェブサイト&MySpace35個まとめ

以前まとめたエントリーですが、こちらにはHipHopアーティストを中心としたウェブサイトデザインがまとめられています。

よろしかったらこちらも一緒に合わせてどうぞ。

 

 

 

音楽系ウェブサイトの考察まとめ

 

トレンド

 

多くの音楽系ウェブサイトにおいて、ユニークで個性的なデザインが目立ちますが、枠組みを利用した基本的レイアウトデザインが中心となっています。

たとえばバンドやアーティストの画像を利用した巨大な背景画像やMP3プレイヤー、最新ニュース、写真などがよく利用されているようです。

 

レイアウト

 

基本的な枠組みに捉われず、Html5やCSS3などを積極的に利用することでマガジンスタイルやリキッドレイアウトなどクリエイティブなデザインが多い。

 

オーディエンス、ユーザー

 

ファンなどを中心としたユーザーが見込まれるので、バンド、アーティストのイメージ画像は必要となり、ニュースやツアー情報などを簡単に確認できるものがよさそう。

またtwitterやfacebookなどのソーシャルメディアを利用することで、アーティストのプライベートを公開しユーザーが親近感を持ちやすくなります。 

 

[参照元 : Industry Web Design Within the Music Industry – OnextraPixel]