WebGallery

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

*

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

   

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

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

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

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

 - 色で表現

  関連記事

サイトを見てるだけで食べたくなる!焼きたてチーズタルトの専門店「PABLO」

「焼きたてチーズタルト専門店 PABLO」のホームページです。 コンテンツやIn …

美容品を販売している会社のサイトがオシャレでカッコいい!

「株式会社MEGMALE(メグマーレ)」のホームページです。 ファーストビューの …

グレーとゴールドを使ってデザインされた鉄工所のサイトがカッコいい!

千葉県富津市にある鉄工所「大栄鉄工所」のホームページです。 濃いグレーとゴールド …

広島にあるゴルフ場のサイトがシンプルでカッコいい!

広島県三原市にあるゴルフ場「久井カントリークラブ」のホームページです。 ファース …

対象の商品の背景を伝えるストーリーなどがしっかり伝わるようにした「USIO DESIGN PROJECT」

「USIO DESIGN PROJECT」のホームページです。 水色を基調とした …

見出しを明朝体、文章をゴシック体にして凛々しい雰囲気を出しながらも親しみやすさを感じる士業サイト

東京都品川区にある税理士事務所「CROSSROAD(クロスロード)」のホームペー …

固くなりすぎず、落ち着いた色合いを使う

  金沢大学の公式ホームページです。色を暗めにして落ち着いた雰囲気が出 …

様々な情報が各ブロックごとに色んな大きさで並んだレイアウト

長野県小谷村の観光公式サイトです。 左側にアイコンが縦に並んだメニュー欄、右側に …

保護者の目線になってデザインされた幼稚園のサイト

東京都八王子市にある幼稚園「八王子実践幼稚園」のホームページです。 フラットなデ …

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

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