WebGallery

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

*

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

   

名称未設定 1

新潟県南魚沼市にある道の駅「南魚沼」のホームページです。

大きく表示される道の駅の写真が、とても綺麗です。写真の下の背景もただ切り替えるのではなく、波線にすることで動きをつけて変化しています。一番最初の紹介部分では左側にお米のイラスト、右側に道の駅にある写真を載せ、新潟県のアピールポイントが見ただけで分かるようになっています。

さらにその下には道の駅南魚沼の構造をイラストで紹介しています。水彩の暖かみのあるイラストで可愛らしく、そして分かりやすく解説しています。

「観る」・「食べる」・「買う」・「遊ぶ」といったコンテンツごとの紹介では、スクロールすると写真がスライドして出てくる仕組みです。上に戻るときちんと元に戻る仕組みなので、とても参考になります。

また、「雪あかり」の名前の由来部分では、背景を水色にして雪の結晶を降らせることで注目度が上がります。その雪の結晶もスクロールすると下に動くのでこういった変化をつけるのはすごいです。

 - 動きで表現 , ,

Message

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

  関連記事

カラコンの色味を背景で表現したサイトがとにかくオシャレ!「PLAY / UP(プレイアップ)」

カラーコンタクト「PLAY / UP」のホームページです。 丸ドットで作られた背 …

動きやフォントを工夫して高級感を表現する

明治38年から続いている特集雑誌「婦人画報」の110周年記念サイトです。 トップ …

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

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

商品を色々な角度から見ることができる

  シチズン時計株式会社の特設サイトです。まず最初のオープニングアート …

ロゴを使ったファーストビューがインパクト大!東京都の「みるみるクリニック」

東京都江東区にある、小児科・内科・アレルギー科「みるみるクリニック」のホームペー …

背景を道に見立てたデザインの地図アプリのサイトがおしゃれ!

株式会社Strolyが制作した地図アプリ「Stroly」のホームページです。 フ …

自分が本を選んでいるかのようなスクロール

  丸善出版株式会社とジュンク堂書店が佐賀県とコラボレートした「ほんの …

大豆を使った商品を取り扱っているサイトのデザインが、大豆の形を使ったデザインでおしゃれ!

岡山県岡山市に本社を構える「913  NEUF UN TROIS(ヌフアントロワ …

グローバルナビよりも目立った言語切り替えボタン

熊本県にある有限会社「球磨川ABC」のホームページです。左側に固定された言語選択 …

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

2015年の7月に販売されたgroup_inouのアルバム「MAP」というアルバ …