WebGallery

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

*

建物の外観を連想させる背景のアニメーション

   

%e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a-1

東京都千代田区にある「有楽町マリオン」のホームページです。

背景のアニメーションやレイアウトがとても特徴的なサイトです。
有楽町マリオンの外観を連想させる背景のアニメーションはとてもインパクトがあって、サイト全体がとても綺麗な雰囲気になっています。

また、右側のコンテンツ部分はファーストビューで「ショップリスト」が表示されるようになっており、表示される瞬間にバーコードがロゴになっていくアニメーションを使っています。
スマートフォンで閲覧した際には、コンテンツに背景が埋もれてしまわないように、縦長の1ページではなく、各コンテンツのページに移動するようになっています。
画面下部にメニューが固定されているのも、タイトルがメニューに重ならないように工夫されています。

 - 色で表現

  関連記事

ボタンを目立つ色にするのではなく、背景色を少し薄くして文字色を濃くする

商品「フェイスマスク ルルルン」のホームページです。 フェイスマスクということで …

優しい色合いにすることで、リラックスできる空間をイメージさせる天然温泉

熊本県熊本市にある天然温泉「湯らっくす」のホームページです。 ロゴマークがゆるっ …

島根県にあるぶどう園のサイトが可愛くて美味しそう!

島根県安来市にあるぶどう園「足立ぶどう園」のホームページです。 ファーストビュー …

ものづくりの現場で戦う女性職人がカッコいい!特設サイト「ものの婦」

「ものの婦 – 山形には、ものづくりの現場で戦う女性職人がいる。」の …

万華鏡のようにクルクル変わるタイトルが綺麗!なアートイベント

2016年7月30日から東京ミッドタウン・ホールで開催されている「FLOWERS …

シームレスな移動が癖になる!素敵なサイト3選

ページ移動や要素にアニメーションを使用しているサイトって、ジャンルを問わずずっと …

トップページやタイトル部分を縦書きにすることで和を意識した「肘折温泉」

山形県最上郡大蔵村にある温泉郷「湯の里 肘折温泉」のホームページです。 ファース …

紫女子部がプルーンの魅力を紹介!

カリフォルニアプルーン協会が手がけた「紫女子部 スタート記念 プルンプルーンキャ …

犬との絆がもっと深まりそうな犬用ウェアラブルデバイス

犬用ウェアラブルデバイス「INUPATHY(イヌパシー)」のランディングページで …

光の空間をイメージさせるアニメーションを使ったイベントサイト

「ハーモニアスひかりアベニュー」を東京・行幸通りで2016年12月24日から12 …