SlideShare una empresa de Scribd logo
1 de 118
Descargar para leer sin conexión
2014年のWebデザイントレンドと
本当に必要とされるデザインと手法
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
2014.06.25 at Mynavi Room 2F-S
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CREATOR’S CAREER LOUNGE
登壇者紹介
登壇者紹介
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
F U K U O K A A K I R A
福岡 陽
クリエイティブディレクター
登壇者紹介
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
T O T S U K A S H O TA
戸 塚 省 太
執行役員 / シニアクリエイティブディレクター
登壇者紹介
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
T O M I TA K A Z U K I
冨 田 一 樹
フロントエンドデザイナー
登壇者紹介
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
S U Z U K I K E N I C H I
鈴 木 健 一
UIデザイナー
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
デザインと目的
「目的を達成するための」デザインとは?
はじめに
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
デザインと目的
デザインには「目的」がある
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
デザインと目的
知ってほしい 買ってほしい シェアしてほしい
🎓 👜
信じてほしい 仲良くしてほしい 待ってほしい
⏳👥
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
デザインと目的
状況によって変化する「目的」
目的によって変化する「デザイン」
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
デザインと目的
Webデザイントレンドにも「目的」がある
つまり
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
環境の変化、要求の変化、
デザインの変化を振り返る
Webデザイントレンドの変遷
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
WEB DESIGN TREND
2004 - Web広告時代
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サイトを支持
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
WEB DESIGN TREND
2005 - Webサービスの萌芽
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」が一般層にさらに浸透
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
WEB DESIGN TREND
2006 - Web動画の登場
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
高度化するWeb表現
2006年のWebトレンド
YouTube誕生 PIPコンテンツ
2006年のヒット商品
「動画」という表現の新たな選択肢
Wii
イナバウアー
MNP
脳トレ
FlashPlayerで動画再生が可能に
UNICLOCK
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
WEB DESIGN TREND
2007 - ソーシャルメディア勃興
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
“シェアする”という選択肢
2007年のWebトレンド
Twitter「○○なう」 Facebook「いいね」
2007年のヒット商品
iPod touch
ビリーズブートキャンプ
そんなの関係ねぇ
どんだけ∼
追従するWebサービス
Webサイトに対するユーザーの関わり方の多様化
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
WEB DESIGN TREND
2008 - iPhoneショック
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
PC、ガラケー、スマホの対応三極化
2008年のWebトレンド
Flashの後退 「スマホビュー」登場
2008年のヒット商品
HTML5・CSS3・JSの新たなスタンダード
iPhone 3G
ホームレス中学生
Eee PC
Wii Fit
モダンブラウザ
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
WEB DESIGN TREND
2009 - スマホアプリの時代
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
スマホアプリの急伸はWebへの影響も
2009年のWebトレンド
スキューモーフィックな
デザイン
スマホ固有の機能
を利用したアプリ
2009年のヒット商品
アプリ・サービスから新たなUIが生まれる
ドラゴンクエスト9
ポメラ
事業仕分け
草食系男子
Gree・Mobage
携帯ゲームの成長
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
WEB DESIGN TREND
2010 - タブレット誕生
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
PC、スマホ、タブレットへの三極化
2010年のWebトレンド
iPad誕生 Retina解像度の登場
2010年のヒット商品
異なるスクリーンサイズ、解像度の乱立
アバター
もしドラ
Kinect
増加するスマホ
食べるラー油
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
トレンドの変遷
WEB DESIGN TREND
2014 - そして、現在
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 1
ただの流行ではない
フラットデザインの意義
トレンドから学ぶ「目的を達成するための」デザイン手法
1
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
「フラットデザイン」とは?
WHAT IS “FLAT DESIGN”
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
・機能と実物感の融合
・立体的。本物のような見た目
・グラデ、光沢、ドロップシャドウの多用
スキューモーフィックデザイン フラットデザイン
・機能と実物感を切り離す
・平面的。抽象的で密度が低い
・彩度の高い色、大きい塗りと余白
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
フラットデザインサイトの例
タイルレイアウトとフラットデザイン
Organizing for Action http://www.barackobama.com
特徴的な色使い
Sitedrop http://sitedrop.com
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
なんでみんな「フラット」になった?
POINT 1
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
制作者はスキューモーフィックに疲れた?
なんでみんな「フラット」になった?[1]
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
スキューモーフィックは本当に
ユーザーフレンドリーだったのか?
なんでみんな「フラット」になった?[2]
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
ユーザーが困らなければ、
何でもよかったんじゃね?
つまり
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
フラットデザインは「解像度からの解放」
POINT 2
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
ブラウザの 拡大・縮小 機能
ディスプレイの Retina化
デバイス で変化する画面解像度
激変するブラウズ解像度
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
「ピクセルパーフェクト」デザインの崩壊
解像度に囚われないデザイン手法が必要
⬇
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
CSSで再現できるデザイン
SVG・Webフォント
拡大・縮小、画面解像度の変化に耐えるには
高解像度画像
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
解像度にとらわれないデザインに
フラットデザインが適していた
つまり
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
コンテンツの魅力を引き出すデザイン
POINT 3
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
情報量は少なく
多ければ細かく分割
フラットデザインを成立させるには?
操作性は明確に 写真を大きく使う
余白は大きく大胆にボタンは「ボタン」になっているか?
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
せせこましくなく、わかりやすいデザイン
結果的に
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
逆にフラットデザインが苦手なケースは?
フラットテイストで作ると スキューモーフィックテイストで作ると
フラットデザインは盛り上がり感のある演出が難しいかも
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
フラットデザイン
フラットデザインは「器」
コンテンツをどう伝えるかが第一
結論
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 2
レスポンシブデザインは
自由のために自由を捨てている?
トレンドから学ぶ「目的を達成するための」デザイン手法
2
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
「レスポンシブデザイン」とは?
WHAT IS “RESPONSIVE DESIGN”
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
SMART PHONE TABLET PC
ARCPHILIA Inc. http://www.arcphilia.co.jp
ウィンドウ幅の変動でビューが変わる
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
スマホではメニューが全面に押し出される
Organizing for Action http://www.barackobama.com
レスポンシブデザインの例
レイアウトやマージンの調整
Big Spaceship http://www.bigspaceship.com
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
縦方向のレスポンシブデザインもある
Vertical Media Queries http://css-tricks.com/examples/VerticalMediaQueries/bootstrap.html
レスポンシブデザインの例
ウィンドウの高さを変更
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にアクセス
⬇
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
レスポンシブデザインは「お得」ですか?
POINT 1
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
レスポンシブデザインは本当に低コスト?
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
・ワンソースなので管理がラク
・事前振り分けを考えなくていい
コストダウン要因 コストアップ要因
・デバイスによってコンテンツを
 大幅に変えることができない
・結局CSSを書く総量はさほど変わらない
 むしろ保守が難しくなる可能性あり
・JSの対応に注意
・IE8対応…😭
⬇ ⬆
コストを減らすつもりが増えていく可能性も
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
マルチデバイスの対応が求められている
どんなときにレスポンシブデザインが向いている?
コンテンツ内容が各デバイスで同一
URLを統一したい
コストを抑えたい…?
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
レスポンシブデザイン以外の選択肢
POINT 2
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
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
[1] VIEWPORTを固定させて対応
適宜、拡大・縮小すればいいという発想
むしろレスポンシブデザインは
拡大・縮小機能を殺してしまう
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
[2] スマートフォンサイトしか用意しない
一番小さいサイズに合わせればどのデバイスでも見られる
歴代リプトン復活総選挙 | Lipton
https://lp500.liptonchilled.com/flavor_voting/
SMART PHONE PC
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
レスポンシブデザイン
ユーザーの目線から
レスポンシブデザイン対応が必要かを考えよう
結論
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 3
楽しい?苦しい?
「パララックスサイト」の使いどころ
トレンドから学ぶ「目的を達成するための」デザイン手法
3
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
「パララックスサイト」とは?
WHAT IS “PARALLAX DESIGN”
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
parallax / pǽrəl ks / <名詞>
(観察者の位置の移動による) 変位。視差。
̶ 小学館「プログレッシブ英和・和英中辞典」より
⬇
スクロールによる変位。視差。
“パララックス”ってそもそも何?
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
Nizo for iPhone http://nizoapp.com
スクロールと演出を連動させたサイト
キリン 澄みきり http://sumikiri.jp
※あくまでWEB DESIGN FES 2014の定義です
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/
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
なんでこんなことになっちゃった?
POINT 1
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
今やみんなスクロール大好き人間
スクロールさせるコストの減少
⬇
スクロールを支える技術
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
1ページ完結型サイトの増加
ページ遷移よりスクロールのほうがハードルが低い
⬇
楽天メソッド/高級ペライチなど
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
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/
クリックが発生しないのなら
演出のフックになるのはスクロールしかない
⬇パララックスサイトの登場へ
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
スクロールの自由を奪うことは是か非か?
POINT 2
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
重い
色んな意味で
パララックスサイトあるある [1]
ローディング、挙動、気分…
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
見るペースを強要する
パララックスサイトあるある [2]
勝手に出てくる演出
気を使ってスクロールしたりして…
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
いつものスクロールの感覚と違う
パララックスサイトあるある [3]
スクロールする方向が逆になったり、
ちょっと動かしただけですごいスクロールしちゃったり…
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
気持ちよいことを邪魔される
気持ち悪さ
パララックスサイトの危険性
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
UIとしてのパララックス
POINT 3
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
ページ分割という考え方
新しいUI
⬇
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
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
UIと演出の融合
窓の外だけを変える演出
Jet Edge
http://www.flyjetedge.com
わかりやすいナビゲーション
AQUATILIS EXPEDITION
http://aquatilis.tv
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
パララックスサイト
表現の手法の一つとしてよりも、
UIの一種として考える。
結論
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 4
Flash以後のリッチコンテンツ復権
トレンドから学ぶ「目的を達成するための」デザイン手法
4
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
2周目の「リッチコンテンツ」
“RICH CONTENS” IS BACK AGAIN
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
iPhone以降のFlash後退
Flashは総合オーサリングツールへ
⬇
Adobe Air, CreateJS
Flashは、今
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
Flash Unity Canvas WebGL SVG
iOS Safari
✓❌❌ ✓ ✓iOS8∼
PC
✓ ✓ ✓✓✓
Android
Browser ✓❌❌ ✓ ✓
各リッチコンテンツ技術の対応状況
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
何故今リッチコンテンツが復権するのか?
POINT 1
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
そもそもリッチコンテンツって何だっけ?
静的なテキストや静止画像だけなく、動的な
映像やアニメーション、CG、音声を利用した
表現豊かなコンテンツのこと。
− @IT リッチクライアント用語事典より
⬇
それ、HTMLでできるよ。
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
ブラウザの高度化、スマホの高性能化
今起きているブラウズ・制作環境の変化
HTML・CSS・JSの 表現力の向上
HTMLの 部品になるリッチコンテンツ
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/
音楽も使ったフルスクリーンコンテンツ
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
普遍化するリッチコンテンツ
Kickstarter https://www.kickstarter.com/team
映像を含んだHTMLコンテンツ
Orangina http://www.orangina.eu/products
HTMLで滑らかなアニメーション
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
若者よ、同じ過ちを繰り返すな
POINT 2
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
コンバーション(結果) と結びついてた?
Flash全盛期のリッチコンテンツの問題点
「ブランディング」だけが目的 でいいんですか?
⬇
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
リッチコンテンツが果たす 目的は何ですか?
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
リッチコンテンツだからこそ伝わるイメージ
清水へ参る道 http://feel.kiyomizudera.or.jp
イメージサイトを別途用意する
COEDO http://www.coedobrewery.com/jp/
FlashサイトをそのままHTMLで再現
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
リッチコンテンツ
目的と手段を見誤るべからず。
結論
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
CHAPTER 5
トレンドから学ぶ「目的を達成するための」デザイン手法
5 Webなのに?今求められる
「エディトリアルデザイン」
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
エディトリアルデザイン
Webの「エディトリアルデザイン」とは?
WHAT IS “EDITORIAL DESIGN in the WEB”
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
情報発信の変遷
Flash期
SEO期
現在
ユーザー無視
情報置いときました
読み手を意識した情報
エディトリアルデザイン
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
Webの「媒体」としての地位の向上
メディアとしてのWeb
「需要」も「供給」も増えた
⬇
「Web人」ではなかった人の参入
エディトリアルデザイン
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
メディアとしてのWebの今
コンテンツを魅力的に見せる必要性
Webコンテンツのカンブリア紀に突入
⬇
エディトリアルデザイン
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
エディトリアルデザイン
Webで蘇る誌面
POINT 1
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に輸入される誌面デザイン
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
エディトリアルデザイン
誌面も超えた表現
POINT 2
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/
インタラクションが誌面表現を豊かにする
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
結論
コンテンツは
誌面とWebの技術で進化する。
エディトリアルデザイン
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
最後に
最後に
ENDING
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
最後に
制約と要求の中で最善を尽くした結果が
Webデザイントレンドとは
「Webトレンド」
CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -
最後に
ご清聴ありがとうございました
FICCから大切なお知らせ
FICCは、クライアントへの確実な
ビジネス貢献にフォーカスした
デジタルマーケティングエージェンシーです。
RECRUITMENT
一緒に働きたい人、募集中。
デジタルマーケティングに関わりたい方を広く募集しています。

共に成長し、挑戦したい方は是非ご応募ください。
TOKYO
プロデューサー
ディレクター
テクニカルディレクター
Webデザイナー
マークアップエンジニア
リードデザイナー
Webサービスディレクター
【アルバイト】Webデザイナー
KYOTO
ディレクター Webデザイナー
(2014年7月現在の情報です)
続きはWebで
www.ficc.jp/recruit/
STANDARDからも大切なお知らせ
STANDARDは、スマートフォンアプリや

Webサイト・Webサービス等のUIデザインに
特化したプロダクションです。
人の役に立つアプリやWebのUI設計、デザイン制作をしています。
なにをやっているのか
広告や販売促進のような「モノを売る」ためのデザインではなく、
困っている人の役に立ち、生活を支えたり、変えたりできる「モノ」自体を
デザインすることで、もっと多くの課題を解決できるんじゃないか?
デザインはもっと多くの課題を解決できるはず。
なぜやるのか
UIデザインやエンジニアリングでユーザーとビジネス双方の課題を

解決したいデザイナー・エンジニアを募集しています。
人の役に立つアプリや
サービス制作に携わりたい人を募集します。
探している人
http://www.standardinc.jp
@suk
アプリやサービスのUIが好きなデザイナー・エンジニア
MOREWORKSから大切なお知らせ
MOREWORKS
www.moreworks.jp
WEB業界で活躍したい人のための求人サイト
希望の職場がすぐ見つかる!! 登録無料!!

Más contenido relacionado

La actualidad más candente

デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本Takuya Nishitani
 
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来Masayuki Uetani
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケAsami Yamamoto
 
自分と向き合うセルフブランディング
自分と向き合うセルフブランディング自分と向き合うセルフブランディング
自分と向き合うセルフブランディングwariemon
 
綺麗なデザインの盛り付け方 -超小ネタ編-
綺麗なデザインの盛り付け方 -超小ネタ編-綺麗なデザインの盛り付け方 -超小ネタ編-
綺麗なデザインの盛り付け方 -超小ネタ編-wariemon
 
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大schoowebcampus
 
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストクックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストMiwa Kuramitsu
 
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることMasahiko Yoshikawa
 
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)Concent, Inc.
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりtomoakitomono
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフローAsami Yamamoto
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司schoowebcampus
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方Satoru MURAKOSHI
 
成長するデザイン組織
成長するデザイン組織成長するデザイン組織
成長するデザイン組織Mikihiro Fujii
 
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門正樹 平野
 
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性yukahatakeyama
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン力也 伊原
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味Tatsuya_Yokoyama
 
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴schoowebcampus
 

La actualidad más candente (20)

デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
 
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
 
自分と向き合うセルフブランディング
自分と向き合うセルフブランディング自分と向き合うセルフブランディング
自分と向き合うセルフブランディング
 
綺麗なデザインの盛り付け方 -超小ネタ編-
綺麗なデザインの盛り付け方 -超小ネタ編-綺麗なデザインの盛り付け方 -超小ネタ編-
綺麗なデザインの盛り付け方 -超小ネタ編-
 
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
 
クックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストクックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
 
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
 
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
 
成長するデザイン組織
成長するデザイン組織成長するデザイン組織
成長するデザイン組織
 
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
 
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
 
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
 

Destacado

FICC VISION 2016
FICC VISION 2016FICC VISION 2016
FICC VISION 2016FICC inc.
 
ホントのホントの0から始める3Dモデリング入門
ホントのホントの0から始める3Dモデリング入門ホントのホントの0から始める3Dモデリング入門
ホントのホントの0から始める3Dモデリング入門c-mitsuba
 
マテリアルデザイン
マテリアルデザインマテリアルデザイン
マテリアルデザインAkio Yonekura
 
マーケティングブリーフ項目 テンプレート
マーケティングブリーフ項目 テンプレートマーケティングブリーフ項目 テンプレート
マーケティングブリーフ項目 テンプレートFICC inc.
 
Introducing Fluent Design
Introducing Fluent DesignIntroducing Fluent Design
Introducing Fluent Designc-mitsuba
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザインKonomi Kawaharada
 
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]YUKI YAMAGUCHI
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Tomoyuki Arasuna
 
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例yosuke sato
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩井上 誠
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -wariemon
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計Takayuki Fukatsu
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうToshiaki Sasaki
 

Destacado (13)

FICC VISION 2016
FICC VISION 2016FICC VISION 2016
FICC VISION 2016
 
ホントのホントの0から始める3Dモデリング入門
ホントのホントの0から始める3Dモデリング入門ホントのホントの0から始める3Dモデリング入門
ホントのホントの0から始める3Dモデリング入門
 
マテリアルデザイン
マテリアルデザインマテリアルデザイン
マテリアルデザイン
 
マーケティングブリーフ項目 テンプレート
マーケティングブリーフ項目 テンプレートマーケティングブリーフ項目 テンプレート
マーケティングブリーフ項目 テンプレート
 
Introducing Fluent Design
Introducing Fluent DesignIntroducing Fluent Design
Introducing Fluent Design
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
 
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
 
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 

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

福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるためにMiho Yamamori
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)Hiroyuki Ogawa
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたHayashi Yuichi
 
インブラウザデザインについて(考察)
インブラウザデザインについて(考察)インブラウザデザインについて(考察)
インブラウザデザインについて(考察)takumaro web
 
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Mari Kimura
 
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014Nobuya Sato
 
モバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービスモバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービス株式会社ドーモ
 
Web開発の 今までとこれから
Web開発の 今までとこれからWeb開発の 今までとこれから
Web開発の 今までとこれからShinichi Takahashi
 
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意Nobuya Sato
 
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツTomonori Watanabe
 
ギャラリーサイトプレゼン
ギャラリーサイトプレゼンギャラリーサイトプレゼン
ギャラリーサイトプレゼンsuzuki_slow-star
 
イーブックデザイナーの仕事/HTML5ブックデザインの可能性
イーブックデザイナーの仕事/HTML5ブックデザインの可能性イーブックデザイナーの仕事/HTML5ブックデザインの可能性
イーブックデザイナーの仕事/HTML5ブックデザインの可能性Youji Sakai
 
作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜
作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜
作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜典子 松本
 
Slide14080401 140804043205-phpapp01
Slide14080401 140804043205-phpapp01Slide14080401 140804043205-phpapp01
Slide14080401 140804043205-phpapp01Maki Daigaku
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015Naoki Yamada
 
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-EdoiOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-EdoMegumi Otani(Czenhe)
 
デブサミ 2013 日本App Inventorユーザー会
デブサミ 2013 日本App Inventorユーザー会デブサミ 2013 日本App Inventorユーザー会
デブサミ 2013 日本App Inventorユーザー会Takeaki Tada
 
ABC2014 Winter: Material Design
ABC2014 Winter: Material DesignABC2014 Winter: Material Design
ABC2014 Winter: Material DesignNobuya Sato
 
20190517_モバイルアーキテクチャを決定する際の観点
20190517_モバイルアーキテクチャを決定する際の観点20190517_モバイルアーキテクチャを決定する際の観点
20190517_モバイルアーキテクチャを決定する際の観点Takahito Miyamoto
 

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

CCL Vol.6_WEB DESIGN TREND_20140625
CCL Vol.6_WEB DESIGN TREND_20140625CCL Vol.6_WEB DESIGN TREND_20140625
CCL Vol.6_WEB DESIGN TREND_20140625
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
 
インブラウザデザインについて(考察)
インブラウザデザインについて(考察)インブラウザデザインについて(考察)
インブラウザデザインについて(考察)
 
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
 
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
 
モバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービスモバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービス
 
Web開発の 今までとこれから
Web開発の 今までとこれからWeb開発の 今までとこれから
Web開発の 今までとこれから
 
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
 
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ
 
ギャラリーサイトプレゼン
ギャラリーサイトプレゼンギャラリーサイトプレゼン
ギャラリーサイトプレゼン
 
イーブックデザイナーの仕事/HTML5ブックデザインの可能性
イーブックデザイナーの仕事/HTML5ブックデザインの可能性イーブックデザイナーの仕事/HTML5ブックデザインの可能性
イーブックデザイナーの仕事/HTML5ブックデザインの可能性
 
作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜
作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜
作ろう!LINEスタンプ 〜スタンプクリエイターの語り場〜
 
Slide14080401 140804043205-phpapp01
Slide14080401 140804043205-phpapp01Slide14080401 140804043205-phpapp01
Slide14080401 140804043205-phpapp01
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
 
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-EdoiOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
 
デブサミ 2013 日本App Inventorユーザー会
デブサミ 2013 日本App Inventorユーザー会デブサミ 2013 日本App Inventorユーザー会
デブサミ 2013 日本App Inventorユーザー会
 
ABC2014 Winter: Material Design
ABC2014 Winter: Material DesignABC2014 Winter: Material Design
ABC2014 Winter: Material Design
 
20190517_モバイルアーキテクチャを決定する際の観点
20190517_モバイルアーキテクチャを決定する際の観点20190517_モバイルアーキテクチャを決定する際の観点
20190517_モバイルアーキテクチャを決定する際の観点
 

Más de FICC inc.

ブランド固有の歴史を活かしてファンを獲得するナラティブUGC
ブランド固有の歴史を活かしてファンを獲得するナラティブUGCブランド固有の歴史を活かしてファンを獲得するナラティブUGC
ブランド固有の歴史を活かしてファンを獲得するナラティブUGCFICC inc.
 
パーセプションフロー・モデリング Perception Flow Modeling
 パーセプションフロー・モデリング Perception Flow Modeling パーセプションフロー・モデリング Perception Flow Modeling
パーセプションフロー・モデリング Perception Flow ModelingFICC inc.
 
提案書の書き方
提案書の書き方提案書の書き方
提案書の書き方FICC inc.
 
ストーリーテリングの魔術
ストーリーテリングの魔術ストーリーテリングの魔術
ストーリーテリングの魔術FICC inc.
 
FICC BX事業部 サービス紹介資料
FICC BX事業部 サービス紹介資料FICC BX事業部 サービス紹介資料
FICC BX事業部 サービス紹介資料FICC inc.
 
ONE FICC / パーパスと学際的リベラルアーツによるイノベーション
ONE FICC / パーパスと学際的リベラルアーツによるイノベーションONE FICC / パーパスと学際的リベラルアーツによるイノベーション
ONE FICC / パーパスと学際的リベラルアーツによるイノベーションFICC inc.
 
データドリブンマーケティング・ロードマップ
データドリブンマーケティング・ロードマップデータドリブンマーケティング・ロードマップ
データドリブンマーケティング・ロードマップFICC inc.
 
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方FICC inc.
 
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方FICC inc.
 
Improving Brand Advertising ROI
Improving Brand Advertising ROIImproving Brand Advertising ROI
Improving Brand Advertising ROIFICC inc.
 
ブランド広告ROI改善施策
ブランド広告ROI改善施策ブランド広告ROI改善施策
ブランド広告ROI改善施策FICC inc.
 
マスブランド向け広告ROI改善施策
マスブランド向け広告ROI改善施策マスブランド向け広告ROI改善施策
マスブランド向け広告ROI改善施策FICC inc.
 
データドリブンIMC (2018.11.16)
データドリブンIMC (2018.11.16)データドリブンIMC (2018.11.16)
データドリブンIMC (2018.11.16)FICC inc.
 
One page memo_v3.1
One page memo_v3.1One page memo_v3.1
One page memo_v3.1FICC inc.
 
Data Driven IMC English Ver
Data Driven IMC English VerData Driven IMC English Ver
Data Driven IMC English VerFICC inc.
 
FICC MARKETING BASICS
FICC MARKETING BASICSFICC MARKETING BASICS
FICC MARKETING BASICSFICC inc.
 
One page memo v3
One page memo v3One page memo v3
One page memo v3FICC inc.
 

Más de FICC inc. (17)

ブランド固有の歴史を活かしてファンを獲得するナラティブUGC
ブランド固有の歴史を活かしてファンを獲得するナラティブUGCブランド固有の歴史を活かしてファンを獲得するナラティブUGC
ブランド固有の歴史を活かしてファンを獲得するナラティブUGC
 
パーセプションフロー・モデリング Perception Flow Modeling
 パーセプションフロー・モデリング Perception Flow Modeling パーセプションフロー・モデリング Perception Flow Modeling
パーセプションフロー・モデリング Perception Flow Modeling
 
提案書の書き方
提案書の書き方提案書の書き方
提案書の書き方
 
ストーリーテリングの魔術
ストーリーテリングの魔術ストーリーテリングの魔術
ストーリーテリングの魔術
 
FICC BX事業部 サービス紹介資料
FICC BX事業部 サービス紹介資料FICC BX事業部 サービス紹介資料
FICC BX事業部 サービス紹介資料
 
ONE FICC / パーパスと学際的リベラルアーツによるイノベーション
ONE FICC / パーパスと学際的リベラルアーツによるイノベーションONE FICC / パーパスと学際的リベラルアーツによるイノベーション
ONE FICC / パーパスと学際的リベラルアーツによるイノベーション
 
データドリブンマーケティング・ロードマップ
データドリブンマーケティング・ロードマップデータドリブンマーケティング・ロードマップ
データドリブンマーケティング・ロードマップ
 
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
 
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
データドリブンマーケティングに必要なパーセプションフロー・モデルの考え方
 
Improving Brand Advertising ROI
Improving Brand Advertising ROIImproving Brand Advertising ROI
Improving Brand Advertising ROI
 
ブランド広告ROI改善施策
ブランド広告ROI改善施策ブランド広告ROI改善施策
ブランド広告ROI改善施策
 
マスブランド向け広告ROI改善施策
マスブランド向け広告ROI改善施策マスブランド向け広告ROI改善施策
マスブランド向け広告ROI改善施策
 
データドリブンIMC (2018.11.16)
データドリブンIMC (2018.11.16)データドリブンIMC (2018.11.16)
データドリブンIMC (2018.11.16)
 
One page memo_v3.1
One page memo_v3.1One page memo_v3.1
One page memo_v3.1
 
Data Driven IMC English Ver
Data Driven IMC English VerData Driven IMC English Ver
Data Driven IMC English Ver
 
FICC MARKETING BASICS
FICC MARKETING BASICSFICC MARKETING BASICS
FICC MARKETING BASICS
 
One page memo v3
One page memo v3One page memo v3
One page memo v3
 

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

  • 2. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CREATOR’S CAREER LOUNGE 登壇者紹介
  • 3. 登壇者紹介 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - F U K U O K A A K I R A 福岡 陽 クリエイティブディレクター
  • 4. 登壇者紹介 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - T O T S U K A S H O TA 戸 塚 省 太 執行役員 / シニアクリエイティブディレクター
  • 5. 登壇者紹介 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - T O M I TA K A Z U K I 冨 田 一 樹 フロントエンドデザイナー
  • 6. 登壇者紹介 CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - S U Z U K I K E N I C H I 鈴 木 健 一 UIデザイナー
  • 7. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 「目的を達成するための」デザインとは? はじめに
  • 8. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 デザインには「目的」がある
  • 9. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 知ってほしい 買ってほしい シェアしてほしい 🎓 👜 信じてほしい 仲良くしてほしい 待ってほしい ⏳👥
  • 10. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 状況によって変化する「目的」 目的によって変化する「デザイン」
  • 11. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - デザインと目的 Webデザイントレンドにも「目的」がある つまり
  • 12. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 環境の変化、要求の変化、 デザインの変化を振り返る Webデザイントレンドの変遷
  • 13. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2004 - Web広告時代
  • 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サイトを支持
  • 15. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2005 - Webサービスの萌芽
  • 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」が一般層にさらに浸透
  • 17. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2006 - Web動画の登場
  • 18. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 高度化するWeb表現 2006年のWebトレンド YouTube誕生 PIPコンテンツ 2006年のヒット商品 「動画」という表現の新たな選択肢 Wii イナバウアー MNP 脳トレ FlashPlayerで動画再生が可能に UNICLOCK
  • 19. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2007 - ソーシャルメディア勃興
  • 20. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 “シェアする”という選択肢 2007年のWebトレンド Twitter「○○なう」 Facebook「いいね」 2007年のヒット商品 iPod touch ビリーズブートキャンプ そんなの関係ねぇ どんだけ∼ 追従するWebサービス Webサイトに対するユーザーの関わり方の多様化
  • 21. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2008 - iPhoneショック
  • 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 モダンブラウザ
  • 23. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2009 - スマホアプリの時代
  • 24. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 スマホアプリの急伸はWebへの影響も 2009年のWebトレンド スキューモーフィックな デザイン スマホ固有の機能 を利用したアプリ 2009年のヒット商品 アプリ・サービスから新たなUIが生まれる ドラゴンクエスト9 ポメラ 事業仕分け 草食系男子 Gree・Mobage 携帯ゲームの成長
  • 25. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2010 - タブレット誕生
  • 26. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 PC、スマホ、タブレットへの三極化 2010年のWebトレンド iPad誕生 Retina解像度の登場 2010年のヒット商品 異なるスクリーンサイズ、解像度の乱立 アバター もしドラ Kinect 増加するスマホ 食べるラー油
  • 27. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - トレンドの変遷 WEB DESIGN TREND 2014 - そして、現在
  • 28. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 1 ただの流行ではない フラットデザインの意義 トレンドから学ぶ「目的を達成するための」デザイン手法 1
  • 29. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 「フラットデザイン」とは? WHAT IS “FLAT DESIGN”
  • 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
  • 32. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン なんでみんな「フラット」になった? POINT 1
  • 33. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 制作者はスキューモーフィックに疲れた? なんでみんな「フラット」になった?[1]
  • 34. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン スキューモーフィックは本当に ユーザーフレンドリーだったのか? なんでみんな「フラット」になった?[2]
  • 35. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン ユーザーが困らなければ、 何でもよかったんじゃね? つまり
  • 36. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン フラットデザインは「解像度からの解放」 POINT 2
  • 37. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン ブラウザの 拡大・縮小 機能 ディスプレイの Retina化 デバイス で変化する画面解像度 激変するブラウズ解像度
  • 38. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 「ピクセルパーフェクト」デザインの崩壊 解像度に囚われないデザイン手法が必要 ⬇
  • 39. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン CSSで再現できるデザイン SVG・Webフォント 拡大・縮小、画面解像度の変化に耐えるには 高解像度画像
  • 40. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 解像度にとらわれないデザインに フラットデザインが適していた つまり
  • 41. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン コンテンツの魅力を引き出すデザイン POINT 3
  • 42. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 情報量は少なく 多ければ細かく分割 フラットデザインを成立させるには? 操作性は明確に 写真を大きく使う 余白は大きく大胆にボタンは「ボタン」になっているか?
  • 43. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン せせこましくなく、わかりやすいデザイン 結果的に
  • 44. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン 逆にフラットデザインが苦手なケースは? フラットテイストで作ると スキューモーフィックテイストで作ると フラットデザインは盛り上がり感のある演出が難しいかも
  • 45. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - フラットデザイン フラットデザインは「器」 コンテンツをどう伝えるかが第一 結論
  • 46. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 2 レスポンシブデザインは 自由のために自由を捨てている? トレンドから学ぶ「目的を達成するための」デザイン手法 2
  • 47. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン 「レスポンシブデザイン」とは? WHAT IS “RESPONSIVE DESIGN”
  • 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にアクセス ⬇
  • 52. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン レスポンシブデザインは「お得」ですか? POINT 1
  • 53. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン レスポンシブデザインは本当に低コスト?
  • 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を統一したい コストを抑えたい…?
  • 56. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン レスポンシブデザイン以外の選択肢 POINT 2
  • 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
  • 60. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - レスポンシブデザイン ユーザーの目線から レスポンシブデザイン対応が必要かを考えよう 結論
  • 61. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 3 楽しい?苦しい? 「パララックスサイト」の使いどころ トレンドから学ぶ「目的を達成するための」デザイン手法 3
  • 62. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 「パララックスサイト」とは? WHAT IS “PARALLAX DESIGN”
  • 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/
  • 66. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト なんでこんなことになっちゃった? POINT 1
  • 67. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 今やみんなスクロール大好き人間 スクロールさせるコストの減少 ⬇ スクロールを支える技術
  • 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/ クリックが発生しないのなら 演出のフックになるのはスクロールしかない ⬇パララックスサイトの登場へ
  • 71. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト スクロールの自由を奪うことは是か非か? POINT 2
  • 72. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 重い 色んな意味で パララックスサイトあるある [1] ローディング、挙動、気分…
  • 73. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 見るペースを強要する パララックスサイトあるある [2] 勝手に出てくる演出 気を使ってスクロールしたりして…
  • 74. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト いつものスクロールの感覚と違う パララックスサイトあるある [3] スクロールする方向が逆になったり、 ちょっと動かしただけですごいスクロールしちゃったり…
  • 75. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 気持ちよいことを邪魔される 気持ち悪さ パララックスサイトの危険性
  • 76. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト UIとしてのパララックス POINT 3
  • 77. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト ページ分割という考え方 新しいUI ⬇
  • 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
  • 80. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - パララックスサイト 表現の手法の一つとしてよりも、 UIの一種として考える。 結論
  • 81. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - CHAPTER 4 Flash以後のリッチコンテンツ復権 トレンドから学ぶ「目的を達成するための」デザイン手法 4
  • 82. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 2周目の「リッチコンテンツ」 “RICH CONTENS” IS BACK AGAIN
  • 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 ✓❌❌ ✓ ✓ 各リッチコンテンツ技術の対応状況
  • 85. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 何故今リッチコンテンツが復権するのか? POINT 1
  • 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で滑らかなアニメーション
  • 90. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 若者よ、同じ過ちを繰り返すな POINT 2
  • 91. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ コンバーション(結果) と結びついてた? Flash全盛期のリッチコンテンツの問題点 「ブランディング」だけが目的 でいいんですか? ⬇
  • 92. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ リッチコンテンツが果たす 目的は何ですか?
  • 93. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ リッチコンテンツだからこそ伝わるイメージ 清水へ参る道 http://feel.kiyomizudera.or.jp イメージサイトを別途用意する COEDO http://www.coedobrewery.com/jp/ FlashサイトをそのままHTMLで再現
  • 94. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - リッチコンテンツ 目的と手段を見誤るべからず。 結論
  • 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コンテンツのカンブリア紀に突入 ⬇ エディトリアルデザイン
  • 100. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - エディトリアルデザイン Webで蘇る誌面 POINT 1
  • 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に輸入される誌面デザイン
  • 102. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - エディトリアルデザイン 誌面も超えた表現 POINT 2
  • 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/ インタラクションが誌面表現を豊かにする
  • 104. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 結論 コンテンツは 誌面とWebの技術で進化する。 エディトリアルデザイン
  • 105. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 最後に 最後に ENDING
  • 106. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 最後に 制約と要求の中で最善を尽くした結果が Webデザイントレンドとは 「Webトレンド」
  • 107. CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 - 最後に ご清聴ありがとうございました