[CCL web vol.6] 2014年のWebデザイントレンドと本当に必要とされるデザインと手法

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

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 TA
戸塚省太
執行役員 / シニアクリエイティブディレクター

登壇者紹介
T O M I TA 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”

・機能と実物感の融合
・立体的。本物のような見た目
・グラデ、光沢、ドロップシャドウの多用
スキューモーフィックデザインフラットデザイン
・機能と実物感を切り離す
・平面的。抽象的で密度が低い
・彩度の高い色、大きい塗りと余白

フラットデザインサイトの例
タイルレイアウトとフラットデザイン
Organizing for Action http://www.barackobama.com
特徴的な色使い
Sitedrop http://sitedrop.com

なんでみんな「フラット」になった？
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
ウィンドウ幅の変動でビューが変わる

スマホではメニューが全面に押し出される
Organizing for Action http://www.barackobama.com
レスポンシブデザインの例
レイアウトやマージンの調整
Big Spaceship http://www.bigspaceship.com

縦方向のレスポンシブデザインもある
Vertical Media Queries http://css-tricks.com/examples/VerticalMediaQueries/bootstrap.html
レスポンシブデザインの例
ウィンドウの高さを変更

・振り分け必要
・個別に必要な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 2

[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ページ完結型サイトの増加
ページ遷移よりスクロールのほうがハードルが低い
⬇
楽天メソッド/高級ペライチなど

スクロールなら情報を逃さない
三木谷社長が旨いと言った特大タラバ蟹
http://item.rakuten.co.jp/sfd-ymt/869808/
購入導線へ一直線アプリ紹介ページも
POP - Prototyping on Paper
https://popapp.in

クリックすることすら面倒になった私たち
別ページに別れていたコンテンツが１ページ内に収められてしまう
shop.nikon-image.com/nikon1/nikon1aw1/http://www.nikon-image.com/products/camera/acil/body/nikon1_aw1/
クリックが発生しないのなら
演出のフックになるのはスクロールしかない
⬇パララックスサイトの登場へ

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

重い
色んな意味で
パララックスサイトあるある [1]
ローディング、挙動、気分…

見るペースを強要する
勝手に出てくる演出
気を使ってスクロールしたりして…

いつものスクロールの感覚と違う
スクロールする方向が逆になったり、
ちょっと動かしただけですごいスクロールしちゃったり…

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

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

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

UIと演出の融合
ユーザーに操作を学習させる
Blueprint - Issue 2 | Lexus International
http://www.lexus-int.com/magazine/issue2/blueprint/
ページめくりと標準ページを組み合わせ
Huge. Digital agency.
http://www.hugeinc.com

UIと演出の融合
窓の外だけを変える演出
Jet Edge
http://www.flyjetedge.com
わかりやすいナビゲーション
AQUATILIS EXPEDITION
http://aquatilis.tv

表現の手法の一つとしてよりも、
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
✓ ✓ ✓✓✓
Android
Browser ✓❌❌ ✓ ✓
各リッチコンテンツ技術の対応状況

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

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

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

普遍化するリッチコンテンツ
株式会社ココノヱ - coconoe inc.
http://9ye.jp
canvasをボタンとして使う
Dream Car of the Day
http://www.toyota-insidedreams.com/dreamcar-of-the-day/
音楽も使ったフルスクリーンコンテンツ

普遍化するリッチコンテンツ
Kickstarter https://www.kickstarter.com/team
映像を含んだHTMLコンテンツ
Orangina http://www.orangina.eu/products
HTMLで滑らかなアニメーション

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

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

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

リッチコンテンツだからこそ伝わるイメージ
清水へ参る道 http://feel.kiyomizudera.or.jp
イメージサイトを別途用意する
COEDO http://www.coedobrewery.com/jp/
FlashサイトをそのままHTMLで再現

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

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サービスディレクター
【アルバイト】Webデザイナー
KYOTO
ディレクター Webデザイナー
（2014年7月現在の情報です）

続きはWebで
www.ﬁcc.jp/recruit/

STANDARDからも大切なお知らせ

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

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

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

MOREWORKSから大切なお知らせ

MOREWORKS
www.moreworks.jp
WEB業界で活躍したい人のための求人サイト
希望の職場がすぐ見つかる!! 登録無料!!

[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法

More Related Content