More Related Content Similar to [CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法 (20) [CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法9. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
デザインと目的
知ってほしい 買ってほしい シェアしてほしい
🎓 👜
信じてほしい 仲良くしてほしい 待ってほしい
⏳👥
14. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
2004年のヒット商品
トレンドの変遷
Web広告=Flash全盛期
2004年のWebトレンド
「エコトノハ」広告賞を受賞 携帯はFlash Lite1.1が標準
PCへのインストール率:98%
iPod mini
Nintendo DS
PSP
ヨン様
「共通環境」+「HTMLを超えた表現力」がFlashサイトを支持
16. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
Webサービスの隆盛
2005年のWebトレンド
mixiの誕生 ブログとSEO
2005年のヒット商品
HTML・CSS・JavaScriptの重要度の増加
iTunes Music Store
ライブドア
電車男
ちょいワル親父
Google MapsとAJAX
「IT」が一般層にさらに浸透
18. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
高度化するWeb表現
2006年のWebトレンド
YouTube誕生 PIPコンテンツ
2006年のヒット商品
「動画」という表現の新たな選択肢
Wii
イナバウアー
MNP
脳トレ
FlashPlayerで動画再生が可能に
UNICLOCK
20. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
“シェアする”という選択肢
2007年のWebトレンド
Twitter「○○なう」 Facebook「いいね」
2007年のヒット商品
iPod touch
ビリーズブートキャンプ
そんなの関係ねぇ
どんだけ∼
追従するWebサービス
Webサイトに対するユーザーの関わり方の多様化
22. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
PC、ガラケー、スマホの対応三極化
2008年のWebトレンド
Flashの後退 「スマホビュー」登場
2008年のヒット商品
HTML5・CSS3・JSの新たなスタンダード
iPhone 3G
ホームレス中学生
Eee PC
Wii Fit
モダンブラウザ
24. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
スマホアプリの急伸はWebへの影響も
2009年のWebトレンド
スキューモーフィックな
デザイン
スマホ固有の機能
を利用したアプリ
2009年のヒット商品
アプリ・サービスから新たなUIが生まれる
ドラゴンクエスト9
ポメラ
事業仕分け
草食系男子
Gree・Mobage
携帯ゲームの成長
26. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
PC、スマホ、タブレットへの三極化
2010年のWebトレンド
iPad誕生 Retina解像度の登場
2010年のヒット商品
異なるスクリーンサイズ、解像度の乱立
アバター
もしドラ
Kinect
増加するスマホ
食べるラー油
28. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 1
ただの流行ではない
フラットデザインの意義
トレンドから学ぶ「目的を達成するための」デザイン手法
1
30. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
・機能と実物感の融合
・立体的。本物のような見た目
・グラデ、光沢、ドロップシャドウの多用
スキューモーフィックデザイン フラットデザイン
・機能と実物感を切り離す
・平面的。抽象的で密度が低い
・彩度の高い色、大きい塗りと余白
31. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
フラットデザインサイトの例
タイルレイアウトとフラットデザイン
Organizing for Action http://www.barackobama.com
特徴的な色使い
Sitedrop http://sitedrop.com
34. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
スキューモーフィックは本当に
ユーザーフレンドリーだったのか?
なんでみんな「フラット」になった?[2]
37. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
ブラウザの 拡大・縮小 機能
ディスプレイの Retina化
デバイス で変化する画面解像度
激変するブラウズ解像度
39. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
CSSで再現できるデザイン
SVG・Webフォント
拡大・縮小、画面解像度の変化に耐えるには
高解像度画像
42. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
情報量は少なく
多ければ細かく分割
フラットデザインを成立させるには?
操作性は明確に 写真を大きく使う
余白は大きく大胆にボタンは「ボタン」になっているか?
44. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
逆にフラットデザインが苦手なケースは?
フラットテイストで作ると スキューモーフィックテイストで作ると
フラットデザインは盛り上がり感のある演出が難しいかも
46. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 2
レスポンシブデザインは
自由のために自由を捨てている?
トレンドから学ぶ「目的を達成するための」デザイン手法
2
48. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
SMART PHONE TABLET PC
ARCPHILIA Inc. http://www.arcphilia.co.jp
ウィンドウ幅の変動でビューが変わる
49. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
スマホではメニューが全面に押し出される
Organizing for Action http://www.barackobama.com
レスポンシブデザインの例
レイアウトやマージンの調整
Big Spaceship http://www.bigspaceship.com
50. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
縦方向のレスポンシブデザインもある
Vertical Media Queries http://css-tricks.com/examples/VerticalMediaQueries/bootstrap.html
レスポンシブデザインの例
ウィンドウの高さを変更
51. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
・振り分け必要
・個別に必要な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にアクセス
⬇
54. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
・ワンソースなので管理がラク
・事前振り分けを考えなくていい
コストダウン要因 コストアップ要因
・デバイスによってコンテンツを
大幅に変えることができない
・結局CSSを書く総量はさほど変わらない
むしろ保守が難しくなる可能性あり
・JSの対応に注意
・IE8対応…😭
⬇ ⬆
コストを減らすつもりが増えていく可能性も
55. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
マルチデバイスの対応が求められている
どんなときにレスポンシブデザインが向いている?
コンテンツ内容が各デバイスで同一
URLを統一したい
コストを抑えたい…?
57. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
[1] VIEWPORTを固定させて対応
iPhoneのサイトなのにiPhone対応してない
Apple - iPhone 5s - 内蔵アプリケーション
http://www.apple.com/jp/iphone-5s/built-in-apps/
SMART PHONE PC
58. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
[1] VIEWPORTを固定させて対応
適宜、拡大・縮小すればいいという発想
むしろレスポンシブデザインは
拡大・縮小機能を殺してしまう
59. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
[2] スマートフォンサイトしか用意しない
一番小さいサイズに合わせればどのデバイスでも見られる
歴代リプトン復活総選挙 | Lipton
https://lp500.liptonchilled.com/flavor_voting/
SMART PHONE PC
61. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 3
楽しい?苦しい?
「パララックスサイト」の使いどころ
トレンドから学ぶ「目的を達成するための」デザイン手法
3
63. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
parallax / pǽrəl ks / <名詞>
(観察者の位置の移動による) 変位。視差。
̶ 小学館「プログレッシブ英和・和英中辞典」より
⬇
スクロールによる変位。視差。
“パララックス”ってそもそも何?
64. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
Nizo for iPhone http://nizoapp.com
スクロールと演出を連動させたサイト
キリン 澄みきり http://sumikiri.jp
※あくまでWEB DESIGN FES 2014の定義です
65. CREATOR’S CAREER LOUNGE VOL.6 - 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/
68. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
1ページ完結型サイトの増加
ページ遷移よりスクロールのほうがハードルが低い
⬇
楽天メソッド/高級ペライチなど
69. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
スクロールなら情報を逃さない
三木谷社長が旨いと言った特大タラバ蟹
http://item.rakuten.co.jp/sfd-ymt/869808/
購入導線へ一直線 アプリ紹介ページも
POP - Prototyping on Paper
https://popapp.in
70. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
クリックすることすら面倒になった私たち
別ページに別れていたコンテンツが 1ページ内に収められてしまう
shop.nikon-image.com/nikon1/nikon1aw1/http://www.nikon-image.com/products/camera/acil/body/nikon1_aw1/
クリックが発生しないのなら
演出のフックになるのはスクロールしかない
⬇パララックスサイトの登場へ
73. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
見るペースを強要する
パララックスサイトあるある [2]
勝手に出てくる演出
気を使ってスクロールしたりして…
74. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
いつものスクロールの感覚と違う
パララックスサイトあるある [3]
スクロールする方向が逆になったり、
ちょっと動かしただけですごいスクロールしちゃったり…
78. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
UIと演出の融合
ユーザーに操作を学習させる
Blueprint - Issue 2 | Lexus International
http://www.lexus-int.com/magazine/issue2/blueprint/
ページめくりと標準ページを組み合わせ
Huge. Digital agency.
http://www.hugeinc.com
79. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
UIと演出の融合
窓の外だけを変える演出
Jet Edge
http://www.flyjetedge.com
わかりやすいナビゲーション
AQUATILIS EXPEDITION
http://aquatilis.tv
81. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 4
Flash以後のリッチコンテンツ復権
トレンドから学ぶ「目的を達成するための」デザイン手法
4
83. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
iPhone以降のFlash後退
Flashは総合オーサリングツールへ
⬇
Adobe Air, CreateJS
Flashは、今
84. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
Flash Unity Canvas WebGL SVG
iOS Safari
✓❌❌ ✓ ✓iOS8∼
PC
✓ ✓ ✓✓✓
Android
Browser ✓❌❌ ✓ ✓
各リッチコンテンツ技術の対応状況
86. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
そもそもリッチコンテンツって何だっけ?
静的なテキストや静止画像だけなく、動的な
映像やアニメーション、CG、音声を利用した
表現豊かなコンテンツのこと。
− @IT リッチクライアント用語事典より
⬇
それ、HTMLでできるよ。
87. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
ブラウザの高度化、スマホの高性能化
今起きているブラウズ・制作環境の変化
HTML・CSS・JSの 表現力の向上
HTMLの 部品になるリッチコンテンツ
88. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
普遍化するリッチコンテンツ
株式会社ココノヱ - coconoe inc.
http://9ye.jp
canvasをボタンとして使う
Dream Car of the Day
http://www.toyota-insidedreams.com/dreamcar-of-the-day/
音楽も使ったフルスクリーンコンテンツ
89. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
普遍化するリッチコンテンツ
Kickstarter https://www.kickstarter.com/team
映像を含んだHTMLコンテンツ
Orangina http://www.orangina.eu/products
HTMLで滑らかなアニメーション
91. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
コンバーション(結果) と結びついてた?
Flash全盛期のリッチコンテンツの問題点
「ブランディング」だけが目的 でいいんですか?
⬇
93. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
リッチコンテンツだからこそ伝わるイメージ
清水へ参る道 http://feel.kiyomizudera.or.jp
イメージサイトを別途用意する
COEDO http://www.coedobrewery.com/jp/
FlashサイトをそのままHTMLで再現
95. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 5
トレンドから学ぶ「目的を達成するための」デザイン手法
5 Webなのに?今求められる
「エディトリアルデザイン」
96. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
エディトリアルデザイン
Webの「エディトリアルデザイン」とは?
WHAT IS “EDITORIAL DESIGN in the WEB”
97. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
情報発信の変遷
Flash期
SEO期
現在
ユーザー無視
情報置いときました
読み手を意識した情報
エディトリアルデザイン
98. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
Webの「媒体」としての地位の向上
メディアとしてのWeb
「需要」も「供給」も増えた
⬇
「Web人」ではなかった人の参入
エディトリアルデザイン
99. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
メディアとしてのWebの今
コンテンツを魅力的に見せる必要性
Webコンテンツのカンブリア紀に突入
⬇
エディトリアルデザイン
101. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
エディトリアルデザイン
マイ・フェイバリット関西 http://www.my-fav.jp/feature/72/ NET-A-PORTER.COM http://www.net-a-porter.com/magazine/250/1
Webに輸入される誌面デザイン
103. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
エディトリアルデザイン
IWC Schaffhausen http://www.iwc.com/en/collection/aquatimer/ Apple - iPad http://www.apple.com/your-verse/bollywood-vision/
インタラクションが誌面表現を豊かにする