WebGallery

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

*

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

   

名称未設定 1

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

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

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

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

 - 動きで表現

Message

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

  関連記事

2019年に流行しそうなwebデザイントレンド「ローディングアニメーション」を使ったサイト3選!

今年も1年が始まりましたね! 初詣にも行かず正に寝正月を過ごした私ですが、今年は …

トップの部分だけでなく、色々な場所で背景に動画を使用する

毎年夏に東京ビッグサイトで行われるアートイベント「万国學生藝術展覧祭 學展」のホ …

各コンテンツに飛ぶボタンを作り、読む側に優しいデザイン

  東京都にある留学サポートを行っている会社です。全体的に色をあまり使 …

東京メトロとコラボしたフラットデザインなドラえもんが可愛い!

東京メトロとドラえもんがコラボし、4月1日からスタートしたキャンペーン「すすメト …

アニメの世界観を大切にしたサイトがカッコよくておしゃれ!

2017年の10月に放送が開始されるアニメ「魔法使いの嫁」の公式ホームページです …

花火のアニメーションを使って、夏限定のパッケージデザインを表現したシャンドンの特設サイト

「CHANDON」の2018年夏限定サマーボトルの特設サイトです。 大きな花火や …

「ミルク王国」という世界観を大切にしたデザイン

石川県河北郡内灘町の「ミルク王国ウチナダ」のホームページです。 パステルカラーの …

浴衣の色合いや金魚を使って清涼感を出した「鈴乃屋ゆかたコレクション2018」のサイトが綺麗!

鈴乃屋ゆかたコレクション2018「2018 YUKATA COLLECTION」 …

アリのマークを用いて様々な仕掛けを作る

東京都にある株式会社「Alfanet(アルファネット)」のホームページです。 ま …

特殊なアニメーションを使って展示された作品を紹介している美術展のサイトが、ユニークな動きで面白い!

2018年の4月14日(土)から7月8日(日)まで、東京都美術館で開催されている …