CCL Vol.6_WEB DESIGN TREND_20140625

2014年のWebデザイントレンドと本当に必要とされるデザインと手法

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

福岡陽

クリエイティブディレクター


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”



・機能と実物感の融合・⽴体的。本物のような⾒た目・グラデ、光沢、ドロップシャドウの多⽤

スキューモーフィックデザインフラットデザイン

・機能と実物感を切り離す・平⾯的。抽象的で密度が低い・彩度の⾼い⾊、⼤きい塗りと余⽩



なんでみんな「フラット」になった？

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

ウィンドウ幅の変動でビューが変わる



・振り分け必要・個別に必要なHTML・CSS・URLがバラバラになる可能性

通常のマルチデバイス対応レスポンシブデザイン

・振り分け不要・HTMLがワンソースに・CSSはブレイクポイントにわけて記述

HTML HTML

SP TABLET PC

HTML

CSS CSS CSS

+ + +

📱 💻📰

URL/UAなどで振り分け

HTML

SP TABLET PC

CSS

+ + +

📱 💻📰width0-480

width480-1024

width1024-

同一URLにアクセス



レスポンシブデザインは「お得」ですか？

POINT 1



レスポンシブデザインは本当に低コスト？



・ワンソースなので管理がラク・事前振り分けを考えなくていい

コストダウン要因コストアップ要因

・デバイスによってコンテンツを⼤幅に変えることができない

・結局CSSを書く総量はさほど変わらないむしろ保守が難しくなる可能性あり

・JSの対応に注意

・IE8対応…😭

コストを減らすつもりが増えていく可能性も



マルチデバイスの対応が求められている

どんなときにレスポンシブデザインが向いている？

コンテンツ内容が各デバイスで同一

URLを統一したい

コストを抑えたい…？



レスポンシブデザイン以外の選択肢

POINT 3



[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

楽しい？苦しい？「パララックスサイト」の使いどころ


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ページ完結型サイトの増加

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

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



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

POINT 2



⾊んな意味で

パララックスサイトあるある [1]



⾒るペースを強要するパララックスサイトあるある [2]



いつものスクロールの感覚と違う

パララックスサイトあるある [3]



気持ちよいことを邪魔される気持ち悪さ

パララックスサイトの危険性



UIとしてのパララックス

POINT 3



ページ分割という考え方

新しいUI



表現の手法の一つとしてよりも、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 ✓ ✓ ✓✓✓

AndroidBrowser ✓⏳⏳ ✓ ✓

各リッチコンテンツ技術の対応状況



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

POINT 1



そもそもリッチコンテンツって何だっけ？

静的なテキストや静止画像だけなく、動的な映像やアニメーション、CG、音声を利用した表現豊かなコンテンツのこと。

－＠IT リッチクライアント⽤語事典より

それ、HTMLでできるよ。



ブラウザの⾼度化、スマホの⾼性能化

今起きているブラウズ・制作環境の変化

HTML・CSS・JSの表現⼒の向上

HTMLの部品になるリッチコンテンツ



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

POINT 2



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

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

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



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



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

結論


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デザイナー

マークアップエンジニア

リードUI/UXデザイナー

Webサービスディレクター

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

【アルバイト】Web制作スタッフ

管理アシスタント

KYOTO

WebデザイナーアシスタントWebデザイナー

続きはWebで

www.ficc.jp/recruit/

STANDARDからも⼤切なお知らせ

STANDARDは、スマートフォンアプリやWebサイト・Webサービス等のUIデザインに特化したプロダクションです。

人の役に⽴つアプリやWebのUI設計、デザイン制作をしています。

なにをやっているのか

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

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

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

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

探している人

http://www.standardinc.jp

@suk

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

CCL Vol.6_WEB DESIGN TREND_20140625

Design

Transcript of CCL Vol.6_WEB DESIGN TREND_20140625