WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

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

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

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

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

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

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

難しい話題でも、イラストや箇条書きでまとめ分かりやすく伝える

  「ミズベリング」という水辺を使って街づくりをするという企画の元集ま …

スラッシュの角度で区切られたデザインが気持ちいい「EN/PIRE」

大阪府大阪市にある植物の販売からディスプレイデザイン等も行っている会社「EN/P …

ボーダーの線を真っ直ぐではなく少し曲げることで立体感をだす

新潟県長岡市にある電力会社「大原電業株式会社」のホームページです。 青を基調とし …

シネマグラフを使った写真が印象的!「京都 宇治 伊藤久右衛門」のサイト

「京都 宇治 伊藤久右衛門」のホームページです。 ファーストビューのスライダーが …

特殊なアニメーションを使って展示された作品を紹介している美術展のサイトが、ユニークな動きで面白い!

2018年の4月14日(土)から7月8日(日)まで、東京都美術館で開催されている …

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

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

丸を駆使したデザイン

  全体のオブジェクトが丸いサイトです。写真やロゴマークの背景のお皿、 …