WebGallery

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

*

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

   

名称未設定 1

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

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

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

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

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

 - 動きで表現 , ,

Message

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

  関連記事

要所で動きを使い、注目度を上げる

エステサロンクレジットカード決済導入「株式会社ジェイ・シー・エス」のホームページ …

配色をカラフルにするだけでなく、アニメーションもたくさん使ったサイトのデザインが可愛い!

熊本県熊本市にある食のテーマパーク「株式会社フードパル熊本」のホームページです。 …

フルスクリーン動画が迫力ある水族館は、サメやエイに触ることも出来る!?

大阪府大阪市にある世界最大級の水族館で、平成25年の3月14日に開設された「海遊 …

文字を光らせ幻想的な世界観を創造する

  えのすい(新江ノ島水族館)で行われるナイトワンダーアクアリウムの特 …

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

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

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

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

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

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

ロゴマークにマウスをホバーさせるとアニメーションになる仕組み

東京都台東区にあるランドセル工業会が運営している「ランドセルくらぶ」のホームペー …

遠近感のあるサイト

  動物病院のサイト。可愛いイラストを使って構成されており、親しみやす …

コントラストの強い配色で高級感のある雰囲気を演出したサイト

フランスのファッションデザイナー「pierre cardin」の日本公式サイトで …