CSS Nite in Ginza, Vol.58 に参加しました。
8月18日に、CSS Nite in Ginza, Vol.58(2011年8月18日開催) に参加しました。
朝 IT 勉強会カレンダーで見つけ、畑違い(私はウェブデザイナーではない)ながら参加しました。
テーマは、「業種別/目指したい雰囲気別のデザイントレンド考察」。「ウェブデザインコーディネートカタログ」の作者たちによるウェブデザインのトレンドの紹介です。
ウェブデザインの勉強なんて碌にしていなので、よくわからない用語連発だったらどうしよう、と若干不安だったりして。
結果、とても分かりやすく、とても楽しめました。
時代によるトレンドの移り変わり
まず、時代によるウェブデザインのトレンド(?)の変化をさっと見せていただきました。
昔の(weybackmacineをみると、1996年だったようです)アップル社のデザインなどを見ながら、あーこうだったと懐かしんだり。
とはいっても、当時は革新的なデザインだったようです。この頃は、私もパソコン通信だったか・・ブラウザも使ってたかな・・
2011年のウェブデザインのトレンド
続いて本題。2011年のウェブデザインのトレンドをキーワードとともに、例を示して解説していただきました。
紹介されたキーワードは、5つです。
- 断片化された情報の集積
- ウェブサイトのコンテンツを、多段グリッドなどでナビゲーションする。グリッドひとつひとつは絵などでわかりやすく表現されていて、直感的に探しやすい。「自分のストーリーで見る」と表現してたけど、気になるところ、見たいところから見ていく。
- 例)
- 「charary - キャラリー / キャラクターデザインとイラストのサイト」。ブラウザのサイズを変更すると、動きが面白いです。
- アプリっぽい
- 見た目がアプリっぽいもの、動きがアプリっぽいものなど、様々なアプリっぽさがある。説明してくれていたけど、「アプリっぽさ」がよくわからないものもあります。
- 例)
- 「A4折形 - 祝ひ袋」。横のナビゲーションからの動きなどアプリっぽい。かつすごくきれい!
- 「http://level0.kayac.com/#!:titile」。見た目がアプリっぽい。サイドのアイコンひとつひとつがそそりますね。
- 質感・素材感
- ウェブサイトのテーマにあわせた質感や素材感を全面に打ち出すデザイン。さまざまなので、これは紹介されていたサイトを直接みてもらうほうがいいですね。
- 例)
- 「暮らしと、写真と。refocus[+]」。テーマをダイレクトにデザインにしています。
- 「http://www.discovershiretoko.org/ja/」。エコがテーマです。
- 機能的な分かりやすさ
- 利用者の目的にあわせたアクセシビリティを確保。
- 例)
- 「東日製作所 | トップページ」。サイトを訪れた人の目的にあわせた検索性を提供する。トルクの単位変換をして、そこから商品を検索させたりもできるとか。このアイディアはデザインという面だけでなく、エンタープライズ系の無味乾燥なウェブシステムの検索の口としても使えそうです。
- 「トップページ/貝塚市ホームページ」。メニューを全てイラストで表すことはせず、「緊急のとき」などのような目立たせたいもの(と解釈した・・)はアイコン(なんとか、って呼んでいたけど忘れました)で表現するなどのデザインセンス。
- ガーリー・女の子
- 例)
- 大阪薫英女子短期大学。いわゆる「女の子らしいサイト」。
- プーペ・ガール。女装では作れないレベルのガーリーとか。「ガーリー」のジャンルのバリエーションですね。
- 例)