WebGallery

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

*

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

   

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

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

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

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

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

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

  関連記事

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

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

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

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

1つ1つのボタンを大きく配置することで、見やすく押しやすいレイアウトに

北海道札幌市にある幼稚園「幸明幼稚園」のホームページです。 全体的に原色に近い色 …

「交通アクセス」のボタンを右上に配置することで、観光客にも優しいデザインに

佐賀県鹿児島市にある「祐徳稲荷神社」のホームページです。 ロゴマークの赤い色と白 …

模様を不規則にしてタイルを表現する

愛知県名古屋市にあるタイルの製造・販売を行っている「KYタイル株式会社」のホーム …

丸を駆使したデザイン

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

「Golden」にかけた黄金のアニメーションがとても幻想的!フェレロ ロシェのキャンペーン公式サイト

「Ferrero Rocher(フェレロ ロシェ)」のキャンペーン公式サイトです …

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

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

「ACSL」のサイトのフライトシミュレーションがとにかくスゴい!

「ACSL|株式会社自律制御システム研究所」のホームページです。 ファーストビュ …

大豆を使った商品を取り扱っているサイトのデザインが、大豆の形を使ったデザインでおしゃれ!

岡山県岡山市に本社を構える「913  NEUF UN TROIS(ヌフアントロワ …