WebGallery

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

*

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

   

名称未設定 1

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

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

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

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

 - 動きで表現

Message

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

  関連記事

空気清浄したくなる

  下ではなく上にスクロールする形のサイト。動いている灰色のものは空気 …

タイトル部分に動きをつけて目立たせる

愛知県名古屋市にある和菓子屋「一朶」のホームページです。 縦長のシングルページの …

想像するだけでワクワクが止まらない「ハンズの夏準備」

「ハンズの夏準備」という東急ハンズの特設サイトです。 サイトのトップには、キャッ …

コンテンツごとに様々な動きをつけたデザイン

新潟県南魚沼市にある道の駅「南魚沼」のホームページです。 大きく表示される道の駅 …

文字を光らせ幻想的な世界観を創造する

  えのすい(新江ノ島水族館)で行われるナイトワンダーアクアリウムの特 …

要所で動きを使い、注目度を上げる

エステサロンクレジットカード決済導入「株式会社ジェイ・シー・エス」のホームページ …

愛媛ならではのサイクリングコースを紹介した「ゆっクル」

愛媛ならではの温泉めぐりのサイクリングコースを紹介している「湯めぐりサイクル」の …

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

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

ページの所々にアニメーションを使った「一時お預かり専用託児所 はないと」

愛知県名古屋市にある「一時お預かり専用託児所 はないと」のホームページです。 メ …

10月から開催している「パリグラフィック」展のサイトがシンプルでおしゃれ!

2017年10月18日から2018年の1月8日まで、東京・丸の内にある三菱一号館 …