WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

文字を光らせ幻想的な世界観を創造する

  えのすい(新江ノ島水族館)で行われるナイトワンダーアクアリウムの特 …

作品の雰囲気を損なうことなく、イラストを上手く配置した「ムーミン展」のサイトがかわいい!

2019年の4月9日(火)から6月16日(日)まで、六本木ヒルズ森タワー52階に …

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

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

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

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

松本薫さんが開店したアイスクリーム屋さん「Darcy’s」のサイトが可愛い!

松本薫さんの引退会見、衝撃的でしたね! テレビではいつも柔道でかっこいい姿を見て …

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

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

海の中にいるような幻想的なデザイン

大阪府吹田市にある水族館・動物園・美術館が融合した新感覚ミュージアム「ニフレル」 …

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

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

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

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

フラットデザインで見やすい

  大阪経済法科大学のサイト。フラットデザインのイラストがとてもおしゃ …