WebGallery

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

*

ひし形のグリットを使って、授業風景などの写真を紹介している倉敷芸術科学大学のサイトがおしゃれ!

   

岡山県倉敷市にある大学「倉敷芸術科学大学 芸術学部」のサイトです。

ファーストビューやコンセプト部分にひし形のグリットを使ったスライダーを設置しています。
スライダーの写真が切り替わるたびにひし形も一緒に変形する仕組みになっているので、ファーストビューのレイアウトがシンプルな分、スライダーが際立っていますね!

また、スクロールすると動くようになっているイラストや、カーソルの位置に合わせてくるくると回るボックスなど、装飾を必要最小限に抑えて、要素1つ1つが動くようにすることで、印象的なサイトになっています!

トップページにそれぞれの学部を紹介している要素は、背景にスライドするひし形のグリットを設置しています。
こちらも、ところどころのひし形の写真が切り替わるようになっています!
その下にはプロジェクトについてのページへ移動するリンクが設置されているのですが、こちらは背景を丸の形にすることで、学科に関するリンクの背景はひし形、プロジェクトの背景は丸形にして、パっと見た印象で区別化できるようにしています。

こういった動きを使ったデザインも、難しそうですがいつかやってみたいです…!
とても参考になります!

 - 動きで表現, 形で表現 , , ,

  関連記事

最新ニュースをさらにカテゴリ分けして情報を伝わりやすくする

「ONE TOKYO」というランニングを通じて皆とつながろうという活動を紹介して …

2019年に流行しそうなwebデザイントレンド「ローディングアニメーション」を使ったサイト3選!

今年も1年が始まりましたね! 初詣にも行かず正に寝正月を過ごした私ですが、今年は …

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

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

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

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

壮大なスケールを感じさせるデザイン

  見た瞬間発狂しました。「ICO」や「ワンダと巨像」の制作を手掛けた …

スマートフォン版では宿泊予約のボタンを1番大きくさせる

プレミアホテルグループの1つ「門司港ホテル」のホームページです。 画面上部のヘッ …

ジャンプ率の差を大きくしてタイトルを目立たせたツアーサイト

「UNISON SQUARE GARDEN」の6thアルバムツアー「Dr.Izz …

車の世界観に合わせたデザインがグッとくる!「Make Your own RENOCA」のサイト

トヨタのランドクルーザーとハイエースの専門店を全国展開する「フレックス」が、リノ …

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

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

ファーストビューに動画を取り入れた神社・お寺のサイト5選

数年前から背景に動画を使用したデザインをよく目にするようになりました。 動画を効 …