[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

登壇者紹介

登壇者紹介CREATOR’S CAREER LOUNGE VOL.6 - WEB DESIGN FES 2014 -

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

ヨン様「共通環境」＋「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コンテンツ

「動画」という表現の新たな選択肢

イナバウアー

脳トレ

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

ただの流行ではない

フラットデザインの意義

トレンドから学ぶ「目的を達成するための」デザイン手法

フラットデザイン

「フラットデザイン」とは？

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

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

レスポンシブデザイン

「レスポンシブデザイン」とは？

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

CSS CSS CSS

📱 💻📰⬇⬇⬇

🌎 URL/UAなどで振り分け

⬇⬇⬇

SP TABLET PC

📱 💻📰⬇⬇⬇

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] スマートフォンサイトしか用意しない

一番小さいサイズに合わせればどのデバイスでも見られる

歴代リプトン復活総選挙 ¦ Liptonhttps://lp500.liptonchilled.com/flavor_voting/

SMART PHONE PC

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

結論

CHAPTER 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 Paperhttps://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 Internationalhttp://www.lexus-int.com/magazine/issue2/blueprint/

ページめくりと標準ページを組み合わせ

Huge. Digital agency.http://www.hugeinc.com

UIと演出の融合

窓の外だけを変える演出

Jet Edgehttp://www.flyjetedge.com

わかりやすいナビゲーション

AQUATILIS EXPEDITIONhttp://aquatilis.tv

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

結論

CHAPTER 4

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

リッチコンテンツ

２周目の「リッチコンテンツ」

“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 Dayhttp://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

一緒に働きたい人、募集中。デジタルマーケティングに関わりたい方を広く募集しています。

共に成長し、挑戦したい方は是非ご応募ください。

プロデューサー

ディレクター

テクニカルディレクター

Webデザイナー

マークアップエンジニア

リードデザイナー

Webサービスディレクター

【アルバイト】Webデザイナー

ディレクター Webデザイナー

（2014年7月現在の情報です）

続きはWebで

www.ficc.jp/recruit/

STANDARDからも大切なお知らせ

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

なにをやっているのか

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

デザインはもっと多くの課題を解決できるはず。

なぜやるのか

UIデザインやエンジニアリングでユーザーとビジネス双方の課題を解決したいデザイナー・エンジニアを募集しています。

人の役に立つアプリやサービス制作に携わりたい人を募集します。

探している人

0 http://www.standardinc.jp

! @suk

アプリやサービスのUIが好きなデザイナー・エンジニア

MOREWORKSから大切なお知らせ

MOREWORKS

www.moreworks.jp

WEB業界で活躍したい人のための求人サイト

希望の職場がすぐ見つかる!! 登録無料!!

[CCL web vol.6] 2014年のWebデザイントレンドと...

Design

Webとスマホとデザインと　- 地方から広がるつながるデザイナーのお仕事 -

デザイン・ガイド: TIDA-050015 ソリューション・サイズと低ノ …

4. DDR2とDDR3 SDRAMのボード・デザイン・ガ …¬¬4章：DDR2とDDR3 SDRAMのボード・デザイン・ガイドライン 4‒3 レべリングおよびダイナミックODT

ＣＧ作品展示サイト” Fragments” ～『閲覧しやすさ』と『デザイン性』を両立させた Web デザイン～

ACCESSORIES - dl.fgaj.info · フロアマットベーシックと同デザインのラゲッジマット。 59123543 フロアマットカジュアルスクワークルのデザインをモチーフにしたヒールパッドを採

【schoo WEB-campus】イノベーションとデザイン思考　先生：柏野尊徳

優れたデザインの定義と思考方法

第5章特許庁におけるデザイン経営の取組 · 第5章におけるデザイン経営の取組 1. 「デザイン経営」とは「デザイン経営」とは、デザインの力をブランド

10 slidetoshi1.civil.saga-u.ac.jp/.../No10_UD/10_slide.ppt.pdf08.7.24 1 第10回都市デザインの手法 (1)図と地（景観資源と景観計画） – 都市デザイン 1

伝統的工芸と生活デザインを結ぶデザイン教育について-1kiyou/2018/pdf/21.pdf伝統的工芸と生活デザインを結ぶデザイン教育について−1 タイ山岳民族の主な種族のテキスタイルデザインの特

RMXTDU_Future_AIR RMX ロボメカRobotics and Mechatronics 数学とデザインアウトラインロボット・メカトロニクスとは？メカトロニクスとは（機械工学と違うの）？

UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」

More care for your car · フロアマットベーシックと同デザインのラゲッジマット。 59123543 フロアマットカジュアルスクワークルのデザインをモチーフにしたヒールパッドを

栄養疫学の基礎① デザインと解析 - niph.go.jp...P

デザイン･スペース（design space, DS）とプロセ …s3.amazonaws.com/zanran_storage/...RSI Regulatory Science Institute. Inc. デザイン･スペース（design space,

創生デザイン学科 · 創生デザイン学科 ... スチュアも含めた身体性（embodiment）にも着目し，身体性とメタファとの関係を活かしたデザインの可能性

〜デザイン脳×プログラミング脳〜デザイナーとプログラマーの72時間戦争

コミュニティと創造性 - Osaka City University · コミュニティとともに紡ぎ出す建築デザイン ―北米におけるデザイン審査制度と創造性のこれから―

CCL 2020 · 2020. 10. 2. · CCL 2020 ... ccl