WebGallery

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

*

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

   

名称未設定 1

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

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

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

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

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

 - 動きで表現 , ,

Message

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

  関連記事

各コンテンツに飛ぶボタンを作り、読む側に優しいデザイン

  東京都にある留学サポートを行っている会社です。全体的に色をあまり使 …

トップの部分だけでなく、色々な場所で背景に動画を使用する

毎年夏に東京ビッグサイトで行われるアートイベント「万国學生藝術展覧祭 學展」のホ …

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

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

映像の切り替わるモーションが面白い!「TAO TAJIMA」さんのwebサイト

TANGRAM co. ltd.に所属する映像ディレクター「TAO TAJIMA …

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

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

どの言語で閲覧してもデザインが崩れない

東京のデザインやファッション、食べ物や観光地・宿泊施設などを世界に紹介するWeb …

水色と黒を使用し、近未来感を演出したデザイン

メルセデス・ベンツとPerfumeがコラボレーションしたメルセデス・ベンツのiP …

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

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

浴衣の色合いや金魚を使って清涼感を出した「鈴乃屋ゆかたコレクション2018」のサイトが綺麗!

鈴乃屋ゆかたコレクション2018「2018 YUKATA COLLECTION」 …

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

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