CSS Nite redux, Vol.6（Shift 5:｢デザイントレンド｣再演）に参加しました

1月 16 2012 Published by under CSS Nite, セミナー

CSS Nite LP, Disk 20：Webデザイン行く年来る年（Shift5）の「デザイントレンド」セッションの再演版へいってきました。早々にサイトURLは参加者に対して公開するとのことですがとりあえず、自身の備忘録としてセッションで紹介されたリファラーサイトのURLだけまとめています。

なお、紹介されていた全リファラーサイトを追いきれず、若干漏れていると思いますので、分かる範囲で追記していきます。まずは運営側からの公開を待ちましょう！　主宰鷹野さん、ほか出演者の皆さま、大変参考になりました。ありがとうございます。

CSS Nite LP, Disk 20再演版の会場　ベルサール八重洲

CSS Nite LP, Disk 20再演版の会場　ベルサール八重洲にて

 

■『大センター時代』

各コンテンツ要素をセンターに揃え、アプリタイプのヘッダナビ、大きくロゴ、メインサービスをど真ん中に配したビッグヘッダ、背景テクスチャなど、ふんだんに2011年トレンドを取り入れている好例Beanstalk(バーション管理ツール開発会社?)のWEBサイト。メインとなる事業がコンパクト/集中化されているスタートアップ企業などが採用する傾向があると。

Beanstalk_TOP ページ

2011年:デザイントレンドを多く取り入れているBeanstalkのWEBサイト

その他のリファラー

 

■パノラマ

メインビジュアルを左右めいっぱい使ったサイト、下記リファラーはトルコのデジタルマーケ/コンサルティングファームDigital HandsのWEBサイト。上に敷いたテキストレイヤー…ついクリックしたくなる…ビジュアルは文句なしですが惜しい感じです。

Digital Hands - TOP

2011年トレンド:パノラマの好例、Digital HandsのWEBサイト

その他のリファラー

 

■イアイ(居合い)?

斜め要素を粋に使った斬新なデザイン。日本ではまだあまり見かけないと思います。下記リファラーはベルギーのスイーツ店MEA CUPPAのWEBサイト、居合いぬいた｢斜め&スクロール｣一発で展開。スクロールで読み込んでいく。言語はオランダ語のようですね。

”居合い”のような斜め要素組の方法が斬新　MEA CUPPA のWEBサイト

”居合い”のような斜め要素組の方法が斬新　MEA CUPPA のWEBサイト

その他のリファラー

 

■ロゴマット

ロゴまわりの余白を下ブロック(下記リファラの場合はグローバルナビゲーションの彩ピンクのところ、わかる?)に、まるでマット敷いたようにあしらっているデザインだそう。下記リファラーはロンドンのWEBプロダクションPedaloのWEBサイト、Drupalの開発ができるんですね。他にも紹介してましたが…漏れてしまいました。後ほど更新します。

Pedalo_ロンドンのWEB制作会社のサイト

Pedalo_ロンドンのWEB制作会社のサイト_ロゴマットの例

 

■セレクタブルビッグバナーorボタン

 

■円窓

iOSの文字選択時ルーペのあしらいをデザインに落とし込んだギミック

FlairBuilder:円窓のサンプル:キャプチャのおしゃれな見せ方好例

円窓のサンプル:キャプチャのおしゃれな見せ方好例

その他のリファラー

 

 

■FortuneGlobal500社の傾向と分析

 

■フラット&ソリッド

これは私自身も掴んでいた2011年の特徴的なトレンド。某案件(FAQサイト)でも、当初の情報アーキテクチャがほぼ完成したので、クライアントと｢すっきりフラット｣をテーマに、デザインのリニューアルをコソコソしました。明らかにタブレットを意識した下のBBC,ゴールドマン・サックスもいい例ですね。

英国放送BBCのTOPページ

英国放送BBCのTOPページ:は、コンテンツエディット機能、角丸などの｢かつての｣Trendを廃する。リニューアルはよりフラットでソリッドな印象へ

その他のリファラー

 

アプライズ

 

フルイメージ

先のパノラマにも通じますが、潔いドッカーンとした印象を与えますね。TOPとしての機能は十分ですので、下層への誘導/情報の見つけやすさまで丁寧にやりたいですね。

AirFrance_GlobalTOPページ

エールフランスのグローバルサイトTOP　ほんとうに大事にしたいコンセプトのみを巨大ビジュアルで表現、集中する

 

 

■日本の上場企業

 

■ユーザー側からの視点、社会へのあり方/メッセージを大きく出す

 

■エコグリーン

 

■コーポレートテクスチャー

企業概要をイメージさせるテクスチャーを上手に使っている好例。賛否両論ありますが、日清製粉は扱っている製品がひとめでわかります。

第一中央汽船株式会社のTOPページ

企業概要、スケールなどを十分に伝える背景画像

 

■多段グリッド

他も紹介してましたね…amanaさんとかだよね?

 

･自治体サイト

地域ブランディングなど。　※これらリファラー意図はフォローアップを参考にしましょう。

 

 

イベント参考サイト

 

取り急ぎ、簡単にリファラーURL集としてまとめましたが、フォローアップの内容を備忘録として更新していきます。

 

 

■まとめ

登壇者の皆さんのまとめ　※時間がすぎていたので少々雑な感じw

原 一浩さん:ソリッド、ダイナミック＆メッセージ
　　

矢野りんさん:人間中心設計?
　　

坂本 邦夫さん:来年も緑が続きますでもおもしろいのは青とオレンジ
　　

小山 智久さん:スプラッシュの復権？キャッチコピーの力
　　

No responses yet