MEFILASメンバーがキュレーターとなって体験性の高いWebサイトを紹介するシリーズ「MEFIMEMO」。今回は「音楽が効果的に使われているWebサイト」をテーマに紹介していきます！

BGMとして音楽を流すだけでなく、音楽を使った様々な演出方法で表現の幅を広げている（あるいは音楽自体をより魅せている）ハイクオリティなWebサイトを選出しました。どれもこれも思わず唸ってしまう演出ばかりです。記事を読むだけでなく、実際に "視て・聴いて・触れて" みてください！

01. SIRUP - cure - Playlist Site

SIRUPセカンドアルバム「cure」のプレイリストサイト。スクロールするとサイトが360°回転しながら楽曲を選曲、視聴することができます。

💡 POINT
「包容力・癒やし」と表現するアルバムのイメージが、デザインや360°回転スクロールなどから体感的、視覚的に伝わってくる。アーティストが込めた想いやアルバムのコンセプトがめいっぱいに表現されており、アーティストへの溢れんばかりの愛を感じる。
制作者note記事: https://note.com/mamitani/n/n7d5053326f7e

02. 4 MILES PROJECT

ジャズトランペット奏者、マイルス・デイヴィスのトリビュートサイト。代表的な４つのアルバムを通して、彼の音楽の世界観を紹介しています。

💡 POINT
モダンでクールなサイトデザイン。BGMにマイルス・デイヴィスの楽曲が流れる。貴重な記録映像も視聴でき、まるで資料館や博物館のよう。サイトを堪能しきれば、マイルス・デイヴィスのことを知ってる側の人間なっているはず。

03. Ayako Taniguchi

作曲家、谷口彩子さんのオフィシャルサイト。ビジュアライザだけでなくバックグラウンド再生を利用して曲単体でも谷口彩子さんの音楽を堪能できます。

💡 POINT
幻想的で繊細な演奏に合わせるビジュアライザデザインのセンスがすばらしい。宇宙を感じる世界観。カーソルにやメニューにも仕掛けが施されており、細部まで曲調と同じく繊細に作られている。ビジュアライザとバックグラウンド再生で二度楽しいWebサイト。

04. Masayuki Daijima

テクニカルディレクター、インタラクションデザイナー、プログラマーなどクリエイティブ界隈で活躍されている代島昌幸さんのオフィシャルサイト。

💡 POINT
ビジュアルの表現がとにかく多彩。カーソルの動きと連動したり、飽きさせない。ページ移動や別タブなどに画面を切り替える際にかかっている曲がぶつ切りにならない細かな気遣いがうれしい。曲へのリスペクトにも感じる。

05. Takahisa Mitsumori

ミュージシャン、光森貴久さんのオフィシャルサイト。

💡 POINT
音に合わせて動く波形図により、曲に意識を集中させている。白黒二色で作られ、サイトを構成する要素も最小限な点などから、ストイックに楽曲ファーストなサイト。

06.INDUSTRIAL JP

町工場の音を収集・リミックスした音楽と機械の緻密かつ規則的で美しい様子をとらえた映像を組み合わせたMV発信しているレーベル「INDUSTRIAL JP」のオフィシャルサイト。

💡 POINT
町工場×テクノ12作品をじっくり楽しむことができる。楽曲もさることながら、町工場の映像があまりに良くてがっつり見入ってしまう。ASMRライブラリーのINDUSTRIAL JP ASMRでは360°サウンドでよりリッチな工場音とヌルヌル動く音に合わせて生成されたアニメーションが楽しめる。音源を一斉に鳴らせば耳が大喜び間違いなし。

07. Poolsuite

80年代アメリカのプールサイドで流れていそうな音楽をひたすら聞くことができるインターネットFM。

💡 POINT
ミュージックプレーヤーのUIをブラウザ上で操作するWebラジオ。粗めの解像度がかわいいレトロポップな世界観と、良質なディスミュージックがマッチしている。曲名をクリックするとSOUND CLOUDに遷移するなど、音楽DIGも捗る仕様がいい。

08. Physics of beauty

クレメンス・ウェンガーのアルバム「Physics of Beauty」のプレイリストサイト。

💡 POINT
線や円などで構築されたミニマルなビジュアライザーと共に音楽を楽しめるWebサイト。楽曲と同期した動きに見惚れる。Webサイト全体がアート作品。

09. JazzKeys

キーボードがピアノの鍵盤になり、簡単にジャズを奏でることができるWebサイト。

💡 POINT
タイピングするだけでピアノ演奏を体験でき、キーボードを適当にパチパチ打つだけで簡単ピアニスト気分。そしてなんと奏でたメロディとメッセージをリンクコピーでシェアできてしまう。現代の新しい音楽体験を堪能できるWebサイト。

10. Kamome〜おやすみのテーマ〜

扇風機の「Kamomefan」が提供しているヒーリングミュージックを聞くことができるWebサイト。

💡 POINT
商品と一緒に同封されているカードにサイトURLが記載されている。オリジナルヒーリングミュージックとKamomefanの優しい風で、いつもの部屋が一瞬で心地良い海辺に。より商品のコンセプトに浸れる体験ができる。

11. ウルトラワイド超短焦点プロジェクタ「ワイード」

ウルトラワイド超短焦点プロジェクタ「ワイード」のプロモーションサイト。商品の強みを音とビジュアルで楽しく全力で訴えてきます。

💡 POINT
本来大人しく？羅列しているはずのテキストやボタンがハイテンションなオリジナルソングに連動しながらノリノリにノッている様がおもしろい。ページ自体は普遍的な商品情報で構成されているので、演出とのギャップがより効いている。

12. Infinite Bad Guy

Youtubeで最もカバーされているビリー・アイリッシュの「Bad Guy」。世界中のカバー動画を繋ぎ続けるWebサイト。

💡 POINT
Youtubeと同期しにありとあらゆるカバー動画をシームレスに適当な部分で繋ぎ続ける技術がすごすぎる。多種多様なBad Guyが永遠と流れ続ける様が奇妙でカオス。ビリー・アイリッシュの奇抜なイメージにマッチしている。

13. I Miss My Bar

バーにまつわる音源を自由にカスタマイズし、自分自身のお気に入りのバーの雰囲気を再現できるWebサイト。運営はメキシコのモンテレーにあるバーMaverick。

💡 POINT
自由気ままにバーを楽しめなくなった現状を憂い作成されたWebサイト。様々な環境音を細かく調節でき、設置されているSpotifyでは実在するメキシコのバーで流れる楽曲のプレイリストが流れる。大好きな”あのバー”をとことんこだわって再現できる。地元バーへの愛が詰まっている。

14. 2021 NEW COLLECTION 「EMOTIONAL」 | MAISON CACAO

MAISON CACAOの2021年バレンタインコレクションの特設サイト。テーマは「EMOTIONAL」。Webサイトがミュージックプレイヤーのようになっており、楽曲すべてダウンロードができます。

💡 POINT
Webサイトをプレイヤーに見立てるアイデアが面白い。何よりチョコレートそれぞれに合わせて作られた音楽がとても素敵。チョコレートのお供にWebサイトを楽しめば、五感全てでMAISON CACAOを堪能できる。

番外編. 相鉄レコード｜相鉄・JR直通線開業1周年記念

相鉄・ＪＲ相互直通開始1周年の記念サイト。相鉄全26駅、26の歌を車窓から見たそれぞれの土地の景色と合わせて楽しむことができます。

💡 POINT
何よりまず企画が面白い。利用者の声を集めて作った歌と車窓からの映像がエモい。MVを通してその駅・土地への興味が出た。アニメーションとの合わせ方も面白く、映像作品としてもクオリティが高い。車窓やドアのような映像窓も素敵。

まとめ

今回は「音楽が効果的に使われているWebサイト」をご紹介しました。

本来、情報を取得する媒体であるWebサイトに音楽は不要なのかもしれません。しかし、音楽があることでWebサイトの体験の質が上がる場合もあります。例えば、No.11「ワイード」では、読ませたい情報に音楽の表現を付け加えることで、よりWebサイトの世界観が明確になり、商品のコンセプトも伝わりやすくなっています。

YouTubeやSNSで音ありのコンテンツに触れる機会も増えているため、敬遠されがちだったWebサイトでの音楽を使った表現も、体験性を高める表現として見直すきっかけになれば嬉しいです。

MEFILASでは、クリエイティブでユーザーの心を動かし、目的を達成するWebサイトを制作しています。

■ お仕事のご依頼やご相談
Web制作のご依頼やご相談がございましたら、お気軽にお問い合わせください。
https://mefilas.com/contact/works.php

■ 採用応募
MEFILASのメンバーとともにクリエイティブなWeb制作に挑戦したい方を募集しています。
https://mefilas.com/recruit/

■ パートナー募集
Web制作をサポートいただけるパートナーを募集しております。
https://forms.gle/krviW8sjUysj97T39