[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

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

http://www.barackobama.com

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

http://www.barackobama.com

http://www.bigspaceship.com



縦方向のレスポンシブデザインもある

Vertical Media Queries http://css-tricks.com/examples/VerticalMediaQueries/bootstrap.html

レスポンシブデザインの例

(

ウィンドウの高さを変更

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

http://www.apple.com/jp/iphone-5s/built-in-apps/



[1] VIEWPORTを固定させて対応

適宜、拡大・縮小すればいいという発想

むしろレスポンシブデザインは拡大・縮小機能を殺してしまう



[2] スマートフォンサイトしか用意しない

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

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

SMART PHONE PC

https://lp500.liptonchilled.com/flavor_voting/



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

結論


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の定義です

http://nizoapp.com

http://sumikiri.jp



スクロールに対して変化を起こす

イベント型ページ分割型

コンテンツを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/

http://shop.nikon-image.com/nikon1/nikon1aw1/

http://benthebodyguard.com/

http://www.apple.com/macpro/

http://panasonic.jp/shaver/lamdash/dna/



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

POINT 1



今やみんなスクロール大好き人間

スクロールさせるコストの減少⬇

スクロールを支える技術



1ページ完結型サイトの増加

ページ遷移よりスクロールのほうがハードルが低い

⬇

楽天メソッド/高級ペライチなど



スクロールなら情報を逃さない

三木谷社長が旨いと言った特大タラバ蟹http://item.rakuten.co.jp/sfd-ymt/869808/

購入導線へ一直線アプリ紹介ページも

POP - Prototyping on Paperhttps://popapp.in

http://item.rakuten.co.jp/sfd-ymt/869808/

https://popapp.in



クリックすることすら面倒になった私たち

別ページに別れていたコンテンツが１ページ内に収められてしまう

shop.nikon-image.com/nikon1/nikon1aw1/

(

http://www.nikon-image.com/products/camera/acil/body/nikon1_aw1/

クリックが発生しないのなら演出のフックになるのはスクロールしかない

⬇パララックスサイトの登場へ

http://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

http://www.lexus-int.com/magazine/issue2/blueprint/

http://www.hugeinc.com



UIと演出の融合

窓の外だけを変える演出

Jet Edgehttp://www.flyjetedge.com

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

AQUATILIS EXPEDITIONhttp://aquatilis.tv

http://www.flyjetedge.com

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 Dayhttp://www.toyota-insidedreams.com/dreamcar-of-the-day/

音楽も使ったフルスクリーンコンテンツ

http://9ye.jp

http://www.toyota-insidedreams.com/dreamcar-of-the-day/



普遍化するリッチコンテンツ

Kickstarter https://www.kickstarter.com/team

映像を含んだHTMLコンテンツ

Orangina http://www.orangina.eu/products

HTMLで滑らかなアニメーション

https://www.kickstarter.com/team

http://www.orangina.eu/products



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

POINT 2



コンバーション(結果) と結びついてた？

Flash全盛期のリッチコンテンツの問題点

「ブランディング」だけが目的でいいんですか？⬇



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



リッチコンテンツだからこそ伝わるイメージ

清水へ参る道 http://feel.kiyomizudera.or.jp

イメージサイトを別途用意する

COEDO http://www.coedobrewery.com/jp/

FlashサイトをそのままHTMLで再現

http://feel.kiyomizudera.or.jp

http://www.coedobrewery.com/jp/



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

結論


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に輸入される誌面デザイン

http://www.my-fav.jp/feature/72/

http://NET-A-PORTER.COM

http://www.net-a-porter.com/magazine/250/1



誌面も超えた表現

POINT 2



IWC Schaffhausen http://www.iwc.com/en/collection/aquatimer/ Apple - iPad http://www.apple.com/your-verse/bollywood-vision/

インタラクションが誌面表現を豊かにする

http://www.iwc.com/en/collection/aquatimer/

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.ficc.jp/recruit/

http://www.ficc.jp/recruit/

STANDARDからも大切なお知らせ

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

なにをやっているのか

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

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

なぜやるのか

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

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

探している人

0 http://www.standardinc.jp

! @suk

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

http://www.standardinc.jp

MOREWORKSから大切なお知らせ

MOREWORKS

www.moreworks.jp

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

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

https://www.moreworks.jp

Design

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

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