CCL Vol.6_WEB DESIGN TREND_20140625

2014年のWebデザイントレンドと
本当に必要とされるデザインと手法
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -

CREATOR’S CAREER LOUNGE
登壇者紹介

登壇者紹介
F U K U O K A A K I R A
福岡陽
クリエイティブディレクター

登壇者紹介
T O T S U K A S H O T A
⼾塚省太
執⾏役員 / シニアクリエイティブディレクター

登壇者紹介
T O M I T A K A Z U K I
冨田一樹
フロントエンドデザイナー

登壇者紹介
S U Z U K I K E N I C H I
鈴⽊健一
UIデザイナー

デザインと目的
「目的を達成するための」デザインとは？
はじめに

デザインには「目的」がある

知ってほしい買ってほしいシェアしてほしい
🎓 👜
信じてほしい仲良くしてほしい待ってほしい
⏳

状況によって変化する「目的」
目的によって変化する「デザイン」

Webデザイントレンドにも「目的」がある
つまり

トレンドの変遷
環境の変化、要求の変化、
デザインの変化を振り返る
Webデザイントレンドの変遷

WEB DESIGN TREND
2004 - Web広告時代

2004年のヒット商品
Web広告＝Flash全盛期
2004年のWebトレンド
「エコトノハ」広告賞を受賞携帯はFlash Lite1.1が標準
PCへのインストール率：98%
iPod mini
Nintendo DS
PSP
ヨン様
「共通環境」＋「HTMLを超えた表現⼒」がFlashサイトを支持

WEB DESIGN TREND
2005 - Webサービスの萌芽

Webサービスの隆盛
mixiの誕生ブログとSEO
HTML・CSS・JavaScriptの重要度の増加
iTunes Music Store
ライブドア
電⾞男
ちょいワル親父
Google MapsとAJAX
「IT」が一般層にさらに浸透

WEB DESIGN TREND
2006 - Web動画の登場

⾼度化するWeb表現
YouTube誕生 PIPコンテンツ
「動画」という表現の新たな選択肢
Wii
イナバウアー
MNP
脳トレ
FlashPlayerで動画再生が可能に
UNICLOCK

WEB DESIGN TREND
2007 - ソーシャルメディア勃興

“シェアする”という選択肢
Twitter「○○なう」 Facebook「いいね」
iPod touch
ビリーズブートキャンプ
そんなの関係ねぇ
どんだけ〜
追従するWebサービス
Webサイトに対するユーザーの関わり方の多様化

WEB DESIGN TREND
2008 - iPhoneショック

PC、ガラケー、スマホの対応三極化
Flashの後退「スマホビュー」登場
HTML5・CSS3・JSの新たなスタンダード
iPhone 3G
ホームレス中学生
Eee PC
Wii Fit
モダンブラウザ

WEB DESIGN TREND
2009 - スマホアプリの時代

スマホアプリの急伸はWebへの影響も
スキューモーフィックな
デザイン
スマホ固有の機能
を利⽤したアプリ
アプリ・サービスから新たなUIが生まれる
ドラゴンクエスト9
ポメラ
事業仕分け
草食系男子
Gree・Mobage
携帯ゲームの成⻑

WEB DESIGN TREND
2010 - タブレット誕生

PC、スマホ、タブレットへの三極化
iPad誕生 Retina解像度の登場
異なるスクリーンサイズ、解像度の乱⽴
アバター
もしドラ
Kinect
増加するスマホ
食べるラー油

WEB DESIGN TREND
2014 - そして、現在

CHAPTER 1
ただの流⾏ではない
フラットデザインの意義
トレンドから学ぶ「目的を達成するための」デザイン手法
1

フラットデザイン
「フラットデザイン」とは？
WHAT IS “FLAT DESIGN”

・機能と実物感の融合
・⽴体的。本物のような⾒た目
・グラデ、光沢、ドロップシャドウの多⽤
スキューモーフィックデザインフラットデザイン
・機能と実物感を切り離す
・平⾯的。抽象的で密度が低い
・彩度の⾼い⾊、⼤きい塗りと余⽩

なんでみんな「フラット」になった？
POINT 1

制作者はスキューモーフィックに疲れた？
なんでみんな「フラット」になった？[1]

スキューモーフィックは本当に
ユーザーフレンドリーだったのか？
なんでみんな「フラット」になった？[2]

ユーザーが困らなければ、
何でもよかったんじゃね？
つまり

フラットデザインは「解像度からの解放」
POINT 2

ブラウザの拡⼤・縮小機能
ディスプレイの Retina化
デバイスで変化する画⾯解像度
激変するブラウズ解像度

「ピクセルパーフェクト」デザインの崩壊
解像度に囚われないデザイン手法が必要

CSSで再現できるデザイン
SVG・Webフォント
拡⼤・縮小、画⾯解像度の変化に耐えるには
⾼解像度画像

解像度にとらわれないデザインに
フラットデザインが適していた
つまり

コンテンツの魅⼒を引き出すデザイン
POINT 3

情報量は少なく
多ければ細かく分割
フラットデザインを成⽴させるには？
操作性は明確に写真を⼤きく使う
余⽩は⼤きく⼤胆にボタンは「ボタン」になっているか？

せせこましくなく、わかりやすいデザイン
つまり

フラットデザインは「器」
コンテンツをどう伝えるかが第一
結論

CHAPTER 2
レスポンシブデザインは
自由のために自由を捨てている？
2

レスポンシブデザイン
「レスポンシブデザイン」とは？
WHAT IS “RESPONSIVE DESIGN”

SMART PHONE TABLET PC
ARCPHILIA Inc. http://www.arcphilia.co.jp
ウィンドウ幅の変動でビューが変わる

・振り分け必要
・個別に必要なHTML・CSS
・URLがバラバラになる可能性
通常のマルチデバイス対応レスポンシブデザイン
・振り分け不要
・HTMLがワンソースに
・CSSはブレイクポイントにわけて記述
HTML HTML
SP TABLET PC
HTML
CSS CSS CSS
+ + +
📱 💻📰
URL/UAなどで振り分け
HTML
SP TABLET PC
CSS
+ + +
📱 💻📰
width
0-480
width
480-1024
width
1024-
同一URLにアクセス

レスポンシブデザインは「お得」ですか？
POINT 1

レスポンシブデザインは本当に低コスト？

・ワンソースなので管理がラク
・事前振り分けを考えなくていい
コストダウン要因コストアップ要因
・デバイスによってコンテンツを
⼤幅に変えることができない
・結局CSSを書く総量はさほど変わらない
むしろ保守が難しくなる可能性あり
・JSの対応に注意
・IE8対応…😭
コストを減らすつもりが増えていく可能性も

マルチデバイスの対応が求められている
どんなときにレスポンシブデザインが向いている？
コンテンツ内容が各デバイスで同一
URLを統一したい
コストを抑えたい…？

レスポンシブデザイン以外の選択肢
POINT 3

[1] VIEWPORTを固定させて対応
iPhoneのサイトなのにiPhone対応してない
Apple - iPhone 5s - 内蔵アプリケーション
http://www.apple.com/jp/iphone-5s/built-in-apps/
SMART PHONE PC

[1] VIEWPORTを固定させて対応
適宜、拡⼤・縮小すればいいという発想
むしろレスポンシブデザインは
拡⼤・縮小機能を殺してしまう

[2] スマートフォンサイトしか⽤意しない
一番小さいサイズに合わせればどのデバイスでも⾒られる
歴代リプトン復活総選挙 | Lipton
https://lp500.liptonchilled.com/flavor_voting/
SMART PHONE PC

ユーザーの目線から
レスポンシブデザイン対応が必要かを考えよう
結論

CHAPTER 3
楽しい？苦しい？
「パララックスサイト」の使いどころ
3

パララックスサイト
「パララックスサイト」とは？
WHAT IS “PARALLAX DESIGN”

parallax / pǽrəl ks / <名詞>
(観察者の位置の移動による) 変位。視差。
— 小学館「プログレッシブ英和・和英中辞典」より
スクロールによる変位。視差。
“パララックス”ってそもそも何？

Nizo for iPhone http://nizoapp.com
スクロールと演出を連動させたサイト
キリン澄みきり http://sumikiri.jp
※あくまでWEB DESIGN FES 2014の定義です

スクロールに対して変化を起こす
イベント型ページ分割型
コンテンツを1画⾯ずつ分割
Nikon 1 AW1 shop.nikon-image.com/nikon1/nikon1aw1/
Ben the Bodyguard http://benthebodyguard.com/
Apple - Mac Pro http://www.apple.com/macpro/
LAMDASH DNA http://panasonic.jp/shaver/lamdash/dna/

なんでこんなことになっちゃった？
POINT 1

今やみんなスクロール⼤好き人間
スクロールさせるコストの減少
スクロールを支える技術

1ページ完結型サイトの増加
ページ遷移よりスクロールのほうがハードルが低い
楽天メソッド/⾼級ペライチなど

スクロールの自由を奪うことは是か非か？
POINT 2

⾊んな意味で
パララックスサイトあるある [1]

⾒るペースを強要する

いつものスクロールの感覚と違う

気持ちよいことを邪魔される
気持ち悪さ
パララックスサイトの危険性

UIとしてのパララックス
POINT 3

ページ分割という考え方
新しいUI

表現の手法の一つとしてよりも、
UIの一種として考える。
結論

CHAPTER 4
Flash以後のリッチコンテンツ復権
4

リッチコンテンツ
２周目の「リッチコンテンツ」
“RICH CONTENS” IS BACK AGAIN

iPhone以降のFlash後退
Flashは総合オーサリングツールへ
Adobe Air, CreateJS
Flashは、今

Flash Unity Canvas WebGL SVG
iOS Safari
✓⏳⏳ ✓ ✓iOS8〜
PC
✓ ✓ ✓✓✓
AndroidBrowser
✓⏳⏳ ✓ ✓
各リッチコンテンツ技術の対応状況

何故今リッチコンテンツが復権するのか？
POINT 1

そもそもリッチコンテンツって何だっけ？
静的なテキストや静止画像だけなく、動的な映像
やアニメーション、CG、音声を利用した表現豊か
なコンテンツのこと。
－＠IT リッチクライアント⽤語事典より
それ、HTMLでできるよ。

ブラウザの⾼度化、スマホの⾼性能化
今起きているブラウズ・制作環境の変化
HTML・CSS・JSの表現⼒の向上
HTMLの部品になるリッチコンテンツ

若者よ、同じ過ちを繰り返すな
POINT 2

コンバーション(結果) と結びついてた？
Flash全盛期のリッチコンテンツの問題点
「ブランディング」だけが目的でいいんですか？

リッチコンテンツが果たす目的は何ですか？

目的と手段を⾒誤るべからず。
結論

CHAPTER 5
5 Webなのに？今求められる
「エディトリアルデザイン」

エディトリアルデザイン
Webの「エディトリアルデザイン」とは？
WHAT IS “EDITORIAL DESIGN in the WEB”

情報発信の変遷
Flash期
SEO期
現在
ユーザー無視
情報置いときました
読み手を意識した情報

Webの「媒体」としての地位の向上
メディアとしてのWeb
「需要」も「供給」も増えた
「Web人」ではなかった人の参入

メディアとしてのWebの今
コンテンツを魅⼒的に⾒せる必要性
Webコンテンツのカンブリア紀に突入

Webで蘇る誌⾯
POINT 1

マイフェイバリット関西 http://www.my-fav.jp/feature/72/ NET-A-PORTER.COM http://www.net-a-porter.com/magazine/250/1
Webに輸入される誌⾯デザイン

誌⾯も超えた表現
POINT 2

IWC Schaffhausen http://www.iwc.com/en/collection/aquatimer/ Apple - iPad http://www.apple.com/your-verse/bollywood-vision/
インタラクションが誌⾯表現を豊かにする

結論
コンテンツは
誌⾯とWebの技術で進化する。

最後に
最後に
ENDING

最後に
制約と要求の中で最善を尽くした結果が
Webデザイントレンドとは
「Webトレンド」

最後に
いずれ来るであろう未来の話
そして

FICCから⼤切なお知らせ

FICCは、クライアントへの確実な
ビジネス貢献にフォーカスした
デジタルマーケティングエージェンシーです。

RECRUITMENT
一緒に働きたい人、募集中。
デジタルマーケティングに関わりたい方を広く募集しています。
共に成⻑し、挑戦したい方は是非ご応募ください。

TOKYO
プロデューサー
アシスタントプロデューサー
ディレクター
アシスタントディレクター
Webデザイナー
アシスタントWebデザイナー
マークアップエンジニア
リードUI/UXデザイナー
Webサービスディレクター
【アルバイト】Webデザイナー
【アルバイト】Web制作スタッフ
管理アシスタント
KYOTO
WebデザイナーアシスタントWebデザイナー

続きはWebで
www.ficc.jp/recruit/

STANDARDからも⼤切なお知らせ

STANDARDは、スマートフォンアプリや
Webサイト・Webサービス等のUIデザインに
特化したプロダクションです。
人の役に⽴つアプリやWebのUI設計、デザイン制作をしています。
なにをやっているのか

広告や販売促進のような「モノを売る」ためのデザインではなく、
困っている人の役に⽴ち、生活を支えたり、変えたりできる「モノ」自体を
デザインすることで、もっと多くの課題を解決できるんじゃないか？
デザインはもっと多くの課題を解決できるはず。
なぜやるのか

UIデザインやエンジニアリングでユーザーとビジネス双方の課題を
解決したいデザイナー・エンジニアを募集しています。
人の役に⽴つアプリや
サービス制作に携わりたい人を募集します。
探している人
 http://www.standardinc.jp
 @suk
アプリやサービスのUIが好きなデザイナー・エンジニア

CCL Vol.6_WEB DESIGN TREND_20140625

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to CCL Vol.6_WEB DESIGN TREND_20140625

Similar to CCL Vol.6_WEB DESIGN TREND_20140625 (20)

CCL Vol.6_WEB DESIGN TREND_20140625