WebGallery

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

*

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

   

名称未設定 1

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

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

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

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

 - 動きで表現

Message

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

  関連記事

一つのコンテンツで二つの情報が見れる

10月24日から行われるイベント「Any Tokyo 2015」のホームページで …

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

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

コントラストの強い配色で高級感のある雰囲気を演出したサイト

フランスのファッションデザイナー「pierre cardin」の日本公式サイトで …

スライダーを使った回転寿司のデザインが面白い!高知県のお寿司屋さん

高知県須崎市にある回転寿司「回転ずしいちばん船 マルナカ須崎店」のホームページで …

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

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

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

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

ユーザーごとにデザインを切り替える

ヤマト運輸株式会社の公式ホームページです。 個人・法人・行政や自治体ごとのページ …

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

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

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

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

「伝統」と「革新」を伝える「廣榮堂 採用サイト」

岡山で160年の歴史を誇る老舗和菓子屋「廣榮堂」の採用ページです。 学生たちをタ …