WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

まるで本当の雑誌を読んでいるかのようなレイアウト

クラフトタイムズが運営するウェブマガジンです。ビールを題材に取り上げ、様々な内容 …

商品の見せ方がオシャレでかっこいい!ガトーショコラ専門店「Chocolaphil」

ガトーショコラ専門店「Chocolaphil」のホームページです。 鮮やかな青い …

ユーザーごとにデザインを切り替える

ヤマト運輸株式会社の公式ホームページです。 個人・法人・行政や自治体ごとのページ …

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

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

色相を抑えて写真を強調させる

京都府京都市にある「北野天満宮」のホームページです。 綺麗な青空で撮影された北野 …

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

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

昼間とは違う雰囲気を演出した八景島シーパラダイスの「ナイトアクアリウム」

2016年の11月19日から2017年の2月28日まで開催している「音と光と映像 …

タイトル部分に動きをつけて目立たせる

愛知県名古屋市にある和菓子屋「一朶」のホームページです。 縦長のシングルページの …

見る人を飽きさせず、旅の目的ごとにお勧めスポットが分かる構成

  利賀芸術公園の特設サイトです。大きく3つの写真を用いたブロックで分 …

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

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