デザイン

デザイン

クリエイティブなサイトに BGMや音響を効果的に使用している22のWebサイト実例

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、22 Websites That Use Background Music or Sounds
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

195 views

読了時間 : 約5分52秒

大多数の方は、ブラウザで新しいWebサイトを開いたときに音楽が流れるのは煩わしいと感じるでしょう。しかし、使い方次第では、そのWebサイトを特別なものにしたり、付加価値を高めたりという効果が期待できます。

 

今回はBGMを使用していて巧妙な効果を発揮している22のWebサイトをセレクトしました。これらのWebサイトは音楽や芸術などニッチ分野のために作られ、音楽はデザインに優雅にマッチします。

 

音楽がテーマのWebサイトデザインは、タイポグラフィ、カラーパレット、画像の配置、レイアウトなどの点において新鮮でしょう。きっと何らかのインスピレーションが生まれるはずですよ。

 

どうでしょう?Webサイトに音楽を使うことを検討してみませんか。下記のコメント欄も是非ご活用ください。

 

 

Relax, we are the good guys

 

 

 

 

 

Relaxは、まさにthey’re the good guysというところで、大変素晴らしいWebサイトを有しています。モノクロのアニメーションの背景でBGMが流れています。非常にはっきりした見出しで、シンプルながらも効果的なデザインです。情報がクリアに伝わり、利用者はこのWebサイトの概要を容易に理解することができますよ。

 

 

 

Blast

 

 

 

 

Blastは、クリエイティブで個性的かつ大胆なイメージのBGMが印象的なWebサイトです。

 

 

 

Amy

 

 

 

 

このWebサイトはエイミー・ワインハウスと彼女の美しい音楽の人生を紹介しています。あなたが彼女のファンなら、彼女の音楽と共にこのWebサイトを分析し、是非インスピレーションを得てください。ホームページは豪華な見映えで、全画面表示の動画が注意を引くもので、操作性も非常に直感的で優れています。

 

 

 

More Hazards

 

 

 

 

More Hazardsはナッシュビルのデュオの歌手であり、このWebサイトは彼らの音楽をクリエイティブに表現することにフォーカスしています。このWebサイトは創造的でカラフルなデザインで、高解像度の画像と魅力的なBGMをによる魅力的なホームページとなっています。

 

 

 

John Iacoviello

 

 

John Iacovielloはソフトウェア開発者であり、このWebサイトは間違いなく彼仕様です。My Static Selfは彼の個人用ポートフォリオのWebサイトで、BGMを使用しています。こちらのホームページのデザインはそのシンプルさと豊富な種類の音楽に必ずや驚きを覚えることでしょう。

 

 

Fornasetti

 

 

少し創造性と説得力のあるイラストで、あなたは確かにウェブサイトのイメージを変えて、それがあなたの訪問者に与える影響を増やすことができます!これは素晴らしい例です。Fournasettiは楽しいアニメーションの背景を持ち、いくつかの本当に素晴らしいBGMを使用しています。クリックするとパターンが変わります。

 

 

 

Melas

 

 

 

MelasのWebサイトはインタラクティブで抽象的なイメージの背景で、カーソルを当てると三角形が移動します。動くときには音が流れます。このWebサイトは、その優れたスクロール機能を有していて、シンプルながらも内容は充実したホームページです。ユーザーは、少ないクリックで多くのコンテンツを読むことができます。

 

 

 

Calvin Harris

 

 

 

Calvin Harrisの最新アルバムがリリースされましたが、彼のWebサイトでこっそり聴くことができます。アクセスして彼の素晴らしい音楽を聴いてください。

 

 

 

Pivovarov

 

 

 

Pivovarovはミュージシャンです。彼はWebサイトでいくらかの音楽を届けています。彼の音楽同様、Webサイトも刺激的であることは間違いないでしょう。

 

 

 

 

The Vending Machine

 

 

このWebサイトで、Chris Taylorによるクリエイティブな作品を見たり購入したりすることができます。現代的でエレガントな見映えのWebサイトです。それぞれの作品は、シンプルで暗めの背景と大きなサムネイル画像が使用されています。

 

 

 

Hashima Island: A Forgotten World

 

 

 

Hashima Island(端島)は、長崎から約15マイル離れたところにあり、言わば忘れられた島としてGoogleプロジェクトに取り上げられています。この島は日本の高度経済成長のシンボルです。このWebサイトでは、モノクロのGoogleナビゲーションと少し怖い印象の音が使われていて、この世界観を表現しています。

 

 

 

Wayne McGregor, Random Dance

 

 

 

Wayne McGregorは受賞歴のある振付師であり、こちらのWebサイトは彼の作品と彼のチームの音楽とイメージ、紹介文で構成されています。

 

 

 

Janis

 

 

Janisは、ショッピングモールの衣料品店で聞くようなリラックスした音楽がBGMとされているファッションWebサイトです。このWebサイトでは、シンプルな全画面表示の背景画像とページ下部のシンプルなメニューバーが特徴です。

 

 

The Build Film

 

 

 

The Build Filmは自身のWebサイトでも音楽を使用しています。3つの異なるオートバイ製造者のストーリーを通じて、オートバイのカスタムメイドの世界を垣間見るインタラクティブな映画作品です。

 

 

 

Studio Venezia

 

 

 

このWebサイトはあなたにとって刺激的で確実に注目したくなるカッコイイプリローダー映像と一連のアニメーションとBGMを備えています。ベニスビエンナーレの取り組みの一環で、Xavier Veilhamによって作成され、フランスのパビリオン(展示場)を意味します。

 

 

Studiogusto

 

 

Studiogustoは文化と創造性を第一とするクリエイティブエージェンシーです。このエージェンシーは、コンピュータ音のBGMを短編映画に使用している、本当に素敵なアニメーションのWebサイトを有しています。

 

 

 

Brightly Preflight Nerves

 

 

 

こちらはCharlie GleasonのWebサイトです。彼はミュージシャンかつプログラマーであり、あなたの今後のプロジェクトにおいて役立つ刺激的な素敵なWebサイトを持っています。彼の音楽とプログラミングスキルが存分に発揮されています。Webサイトでは彼が歌っているように歌詞が流れるように表示される全画面表示の動画が使用されています。

 

 

 

The Instant Love

 

 

大胆なテキスト、シンプルなタイポグラフィ、色付きの背景、ユニークな画像など、これがホームページデザインの素晴らしい要素です。Instant Loveはカラフルなウェブサイトを通して歌を祝います。あなたはこのウェブサイト上で多くの曲を聴くことができ、そしてインスピレーションを得ることができます。探している曲が見つかるまで、アーティストやジャンルをスクロールできます。

 

 

Conoce Valencia de Una Forma Diferente

 

 

 

このWebサイトでは、創造的な印象の一覧グリッドが使用されています。4等分したページに歌手が表示されていて、画像にカーソルを合わせると歌を歌う映像が流れます。

 

 

 

Dubfire

 

 

このWebサイトはDubfireというバンドのため特別制作されたものです。未来的かつ抽象的なイラストを繊細なアニメーション効果で表し、大変スタイリッシュですよ!このWebサイトでは、シンプルな黒色の背景が使用されており、レイアウトとしては幾何学的なベクトル形式の模様をオーバーレイしています。それぞれの立方体にはバンドに関する情報が表示されます。カーソルを移動させると、そのバンドの詳細が表示されるようになります。停止すると立方体が真っ赤になり音楽が流れます。

 

 

Sound Creatures, by Is-Real

 

 

 

このWebサイトは、全体的にはシンプルな明るめの色合いでユニークなイラストを備えています。手書きの生き物のポートフォリオを含み、それぞれは独自の音を持っています!

 

おすすめ新着記事

おすすめタグ