WebGallery

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

*

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

   

名称未設定 1

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

トップには、背景に動画を使用して開催準備の様子が流れるようになっています。また、大きい画面で表示するときにも画質の粗さが目立たないように黒い背景を動画の上に乗せています。また、中央に配置されたキャッチコピーの右側には開催概要のボタンがあるのですが、ボタンの内容を切り替えてYouTubeで動画を閲覧することも出来ます。このデザインはとても参考になります!

ページの下にスクロールするとメニュー部分のデザインがふわっと切り替わるのもいいですね!ドロップダウンの方向も上から下に切り替わっているので使いやすいですね。

さらに下にスクロールすると、交通アクセスや開催概要などのコンテンツが並んでいる部分があるのですが、そこでも動画を使用してかっこいいデザインになっています。写真だけでなく動画もたくさん取り入れることで、デザインも変わって面白いです

 - 動きで表現 , ,

Message

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

  関連記事

コンテンツの区切りを波のアニメーションにすることで、ワインぽさを演出したサイト

山梨県笛吹市にあるワイン製造工場「モンデ酒造」のホームページです。 コンテンツの …

アリのマークを用いて様々な仕掛けを作る

東京都にある株式会社「Alfanet(アルファネット)」のホームページです。 ま …

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

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

ワンちゃん・ネコちゃんをメインに作られたサイトが、どれもオシャレで可愛い!

今年でうちの愛猫も2歳になるのですが、大きくなるのは早いですね… 大きくなっても …

今後の参考に!スタイリッシュなアニメーション効果を使ったサイトをご紹介!

コーディングをしているときに「どんなアニメーションをつけようか」と考えるのが1つ …

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

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

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

新潟県南魚沼市にある道の駅「南魚沼」のホームページです。 大きく表示される道の駅 …

簡単に起業できちゃいそうな会社設立サポート屋さん

東京都渋谷区にある会社設立の手助けをしてくれる「GAGEEN」のホームページです …

2020年新卒採用サイトのトレンドをチェック!おしゃれなデザインをまとめてみました!

年始早々インフルエンザにかかってしまいました…皆様もお気をつけて… 久しぶりに高 …

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

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