WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

曲に合わせて鍵盤が動く「MAP」

   

名称未設定 1

2015年の7月に販売されたgroup_inouのアルバム「MAP」というアルバムの特設サイトです。

ジャケットにもなっている青空に鍵盤のようなものがゆっくり波打っているという何とも幻想的な雰囲気です。その下の文字も少し斜めになっていて動きがあります。

下にスクロールすると、アルバムに収録されている曲を視聴することができるのですが、その曲のテンポに合わせて真ん中の鍵盤が波打ったり様々な動きをします。なんだか見ていると生き物のようで可愛く見えてくるのが不思議です。

その下のライブ情報では、時系列ごとにジグザグに配置された情報が掲載されています。日付のところにカーソルを置くとgoogleマップが表示される仕組みになっていて、サイト全体の雰囲気を壊さないように配慮されたデザインだと感じました。

 - 動きで表現

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

猫!

  サイトを開けた途端猫がお出迎えしてくれます。しかもこの写真、日替わ …

動く虎たちが見ていて楽しい!病院ということを忘れさせてくれそうな「やざわ虎クリニック」のホームページ

長野県諏訪市にある内科・外科病院「やざわ虎クリニック」のホームページです。 ファ …

カラコンの色味を背景で表現したサイトがとにかくオシャレ!「PLAY / UP(プレイアップ)」

カラーコンタクト「PLAY / UP」のホームページです。 丸ドットで作られた背 …

簡単に起業できちゃいそうな会社設立サポート屋さん

東京都渋谷区にある会社設立の手助けをしてくれる「GAGEEN」のホームページです …

ついついボタンを押したくなる「伊勢丹新宿店 食品フロアのツボ」

伊勢丹新宿店の食品フロアガイド「伊勢丹新宿店 食品フロアのツボ」のホームページで …

コンテンツの区切りを波のアニメーションにすることで、ワインぽさを演出したサイト

山梨県笛吹市にあるワイン製造工場「モンデ酒造」のホームページです。 コンテンツの …

もうすぐバレンタイン!2019年バレンタイン特設サイトを集めました!

明日はいよいよバレンタインデーですね! 皆さんはもう誰かにチョコレートを上げまし …

舌でも目でも石巻を楽しむことができる、「泳ぎ寿司 石巻」

今年の3月6日・11日に東京都にある「代々木ビレッジ code kurkku」で …

商品の見せ方がオシャレでかっこいい!ガトーショコラ専門店「Chocolaphil」

ガトーショコラ専門店「Chocolaphil」のホームページです。 鮮やかな青い …

水色と黒を使用し、近未来感を演出したデザイン

メルセデス・ベンツとPerfumeがコラボレーションしたメルセデス・ベンツのiP …