WebGallery

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

*

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

   

名称未設定 1

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

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

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

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

 - 動きで表現

Message

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

  関連記事

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

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

動きや写真で伝統や歴史の重さを表現する

開創から1200年を迎えた高野山の公式ホームページです。トップにあるそれぞれの写 …

どの言語で閲覧してもデザインが崩れない

東京のデザインやファッション、食べ物や観光地・宿泊施設などを世界に紹介するWeb …

写真を使って島の魅力を伝える

2016年4月に「星野リゾート リゾナーレ西表島」からリオープンする「ホテル ニ …

アニメーションをゆっくりとした動きにし、筆のようなフォントや落ち着いた配色で重厚感を感じさせるデザイン

北海道沙流郡平取町にある「二風谷アイヌ匠の道」のホームページです。 黒・白・赤の …

車の世界観に合わせたデザインがグッとくる!「Make Your own RENOCA」のサイト

トヨタのランドクルーザーとハイエースの専門店を全国展開する「フレックス」が、リノ …

子供たちへの愛情がつまった地下足袋「FUM FUM」

化粧品やサプリメントを取り扱っているゲンナイ製薬株式会社と、靴の販売をしている株 …

京都にあるチョコレート専門店のサイトが、可愛くて美味しそう!

京都にあるローチョコレート・ビーントゥバー専門店「KYOTO COCO」のホーム …

五円玉のようなコインが印象的な「goen゜」

森本千絵さんを主宰としたデザイン事務所「goen゜」のホームページです。 ファー …

パララックス効果を使ったデザインの、建設会社のサイトがカッコいい!

熊本県熊本市にある建設会社「快建設」のホームページです。 全体のレイアウトがとて …