WebGallery

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

*

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

   

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

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

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

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

 - 色で表現

  関連記事

Googleマップ付きでおすすめスポットを紹介し、行きたい場所がすぐ分かるようにする

前回に引き続き、今回も地元をPRしているサイトです。神奈川県の魅力をPRした「い …

お昼寝案内

  手書き風のゆるーっとしたサイトです。イラストを使用してわかりやすく …

文字の色を少し薄めのグレーにすることで全体的に優しい色合いに

沖縄県の春・夏・秋・冬の季節ごとの魅力を紹介するキャンペーン「しゅんおき!旬香周 …

1度は泊まってみたい!軽井沢のクラシックホテル

長野県軽井沢にあるクラシックホテル「万平ホテル」のホームページです。 まずサイト …

イラストの雰囲気を大切にした音楽祭のサイトが可愛くておしゃれ!

2017年3月18日の土曜日から6月11日の日曜日まで兵庫県神戸市にある神戸文化 …

手描き風のフォントやパステルカラーの配色を使って、安心感のあるデザインの病院サイト

岡山県岡山市にある産婦人科医院「丹羽病院」のホームページです。 ファーストビュー …

色んな大きさの写真を配置することで、シンプルだけどボリュームのあるデザイン

岡山県観光土産品協会が運営する「観射亭」のホームページです。 緑を基調としたとて …

可愛いイラストと写真で子供にも大人にも見やすいフロアマップ

福岡県春日市にある小児歯科医院「にこにこ小児歯科」のホームページです。 スライダ …

アニメのサイトということを忘れてしまいそうな「セーラームーン 25周年特設サイト」が凄い!

期間限定で公開されている「美少女戦士セーラームーン」の25周年特設サイトです。 …

作って楽しむ・見つけて喜ぶOZONE夏のインテリアフェスタ開催!

東京都新宿区にあるリビングデザインセンターOZONEで、7月14日~19日まで開 …