2013年 Webデザインの トレンドを振り返る

1

2013/11/1

石川 洋樹 株式会社コプロシステム Webデザイングループ ディレクター

Webサイトやアプリの設計、プロジェクトの

進行管理などディレクター業務全般を担当。

業務関連で気になったトピックなどを集めた

「Tips*Blog」も運営中 :)

www.coprosystem.co.jp/tipsblog/

2

自己紹介

3

2013年、 どんなWebデザインを見ましたか？

フラット デザイン

パララックス デザイン

フルスクリーン デザイン

ポリゴン風 デザイン

ブラーエフェクト デザイン

レスポンシブ Webデザイン

CSSフレーム ワークの活用

jQueryを活用した インタラクション

デザイン

4

今回は6つのトレンドについて 概要説明、事例紹介をします

フラット デザイン

パララックス デザイン

フルスクリーン デザイン

ポリゴン風 デザイン

ブラーエフェクト デザイン

レスポンシブ Webデザイン

CSSフレーム ワークの活用

jQueryを活用した インタラクション

デザイン

2013年 Webデザインのトレンド

フラットデザイン

5

世界的に有名なサービスが 次々とフラットデザインを採用

Microsoft - Windows

6

世界的に有名なサービスが 次々とフラットデザインを採用

Yahoo! Japan

7

世界的に有名なサービスが 次々とフラットデザインを採用

Google 8

世界的に有名なサービスが 次々とフラットデザインを採用

Google - Android 4.4（KitKat）

9

世界的に有名なサービスが 次々とフラットデザインを採用

Apple - iOS 7 10

Googleトレンドでも急上昇

「フラットデザイン」で検索（2013/10/30）

11

フラットデザインの特徴 ①

Flat ＝ 平たい,平坦な

フラット デザイン

12

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

フラットデザインの特徴 ①

Flat ＝ 平たい,平坦な

テクスチャやグラデーションによるリアルな質感、

ドロップシャドウによる奥行き感など

立体感が出るリッチな表現をなくす、

もしくは極力抑えた平面的なデザイン手法。

13

フラットデザインの特徴 ②

ムダな要素をなるべく排除 シンプル＆きれいに配置

パーツ装飾だけに限らず、

サイトのコンテンツや文章も無駄な要素をなるべく減らし、

グリッドを使ってきれいに配置する。

14

デザイナー「SubCreative」

http://www.subcreative.com.au/ 15

デザイナー「JUSTIN AGUILAR」

http://www.justinaguilar.com/ 16

アパレルブランド「DIESEL」

http://www.diesel.com/ 17

フラットデザインの特徴 ③

タイポグラフィによる 大胆なレイアウト

コンテンツがシンプルになるため、スペースも十分に。

スカスカにならないようタイポグラフィを使った

大胆なレイアウトバランスが重要。

18

Twitter Bootstrap

http://getbootstrap.com/2.3.2/ 19

デザインエージェンシー「Buffalo」

http://builtbybuffalo.com/ 20

Future Insights Live 2013

http://futureinsightslive.com/las-vegas-2013/ 21

フラットデザインの特徴 ④

ビビッド スモーキー

ビビッドカラー もしくは 少しくすんだスモーキーカラーを

使用したモダンな雰囲気が特徴。

カラーバランスによってユーザビリティを向上させる。

使用する色数は多すぎず、少なすぎず。

22

#FFD464 #F26964

#1253A4 #F1F0EE デザイナー＆アートディレクター

「Lorenzo Verzini」

http://lorenzoverzini.com/ 23

#08233E #F8823C

#2C5379 #EB2142 グラフィックデザイナー＆アートディレクター

「Adam Rudzki」

http://adamrudzki.com/ 24

#0E7AC4 #58BE89

#FBA848 #F27398 ビデオホスティングサービス「WISTIA」

http://wistia.com/ 25

なぜトレンドに？

26

デジタルデバイスへの慣れ

要素をしぼる必要性

レスポンシブWebデザインの登場

スマートフォンとの親和性

フラットデザインのメリット

27

軽い

コンテンツ内容を伝えやすい

レスポンシブに対応しやすい

フラットデザインのデメリット

28

Less is more. Less is bore.

リッチさでごまかせない

向き／不向き の差が激しい

操作が分かりにくくなる可能性も

フラットデザインのデメリット

Baby and iOS 6 vs iOS 7 29

操作が分かりにくくなる可能性も

フラットデザインのデメリット

30

iOS 6 ロック画面

iOS 7 ロック画面

操作が分かりにくくなる可能性も

フラットデザインのための便利ツール

31

Flat UI Design http://fltdsgn.com/

Flat UI Colors http://flatuicolors.com/

2013年 Webデザインのトレンド

パララックスデザイン

32

33

2013年 Webデザインのトレンド

パララックスデザインとは？

パララックス(parallax) ＝ 視差効果

複数の要素に対して、

スクロールスピードに差をつけたり、

“ぼかし”やアニメーションを付加することで、

視差効果による立体的な空間を演出する手法。

34

Fast Speed

Middle Speed

Slow Speed

More Slow Speed

2013年 Webデザインのトレンド

パララックスデザインとは？

35

ファッションブランド「KRYSTALRAE」

http://krystalrae.com/

36

デザイナー「OK Studios」

http://www.ok-studios.de/home/

37

PRO TREK「Slim lineシリーズ」

http://protrek.jp/products/slim-line/

2013年 Webデザインのトレンド

フルスクリーンデザイン

38

2013年 Webデザインのトレンド

フルスクリーンデザインとは？

美しい写真や動画を フルスクリーンサイズで配置

商品やサービスなどコンテンツの魅力を

テキストで読ませるのではなく

インパクトある素材のダイナミックなレイアウトで

視覚的に伝えることができる手法。

39

大阪にある水族館「海遊館」

http://www.kaiyukan.com/newkaiyukan/ 40

ECサイト作成ツール「SQUARESPACE」

http://www.squarespace.com/ 41

赤坂料亭「あけち」

http://akasaka-akechi.com/ 42

模型製作「和 模型工房」

http://www.wamokei.com/ 43

2013年 Webデザインのトレンド

ブラーエフェクトデザイン

44

2013年 Webデザインのトレンド

ブラーエフェクトデザインとは？

ブラー(blur) ＝ ぼかし

元の素材が何の写真か判別できないくらい

強めのぼかしをかけることで

新しいグラデーションの美しさを表現したり、

奥行き感を出すことができる手法。

45

2013年 Webデザインのトレンド

ブラーエフェクトデザインとは？

ブラー(blur) ＝ ぼかし

46

時間管理ツール「toggl」

https://www.toggl.com/ 47

決済代行サービス「Chec」

https://trychec.com/ 48

iPhoneアプリ「Piction」

http://pictionapp.com/ 49

フリーランス「Bastien Pean」

http://www.bastienpean.com/ 50

2013年 Webデザインのトレンド

レスポンシブWebデザイン

51

PC用サイトとスマートフォン（以下スマホ）用サイトを用

意する場合、ユーザが閲覧しているOSやブラウザ（ユー

ザーエージェント）を判別して、サーバーサイドプログラ

ムで表示するHTMLを振り分けるという手法が一般的。

この人はパソコンで閲覧している → パソコン用HTML

この人はiPhoneで閲覧している → スマホ用HTML

それに対しレスポンシブWebデザインは、OSやブラウザを

判断基準にするのではなく、ブラウザの横幅サイズを判断

基準にして、CSS（スタイルシート）の装飾を切り替え、

あらゆるデバイスに対応する手法。

この人は1200pxのブラウザで見てる → ○○という装飾

この人は480pxのブラウザで見てる → ■■という装飾

2013年 Webデザインのトレンド

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

52

53

Gmail

https://mail.google.com/intl/ja/mail/help/about.html

400px 800px 1280px

54

首相官邸

http://www.kantei.go.jp/

400px 750px 1280px

レスポンシブWebデザイン

Googleトレンドでも急上昇

「レスポンシブWebデザイン」で検索（2013/10/30）

55

レスポンシブWebデザイン

なぜトレンドに？

56

Webが様々なデバイスで閲覧される時代

技術(CSS3)の進化

Googleが公式推奨

ソーシャルメディアの流行

レスポンシブWebデザイン

メリット

57

簡単なメンテナンスであれば非常に楽

SEOに効果的

ページコンテンツのシェアが容易

レスポンシブWebデザイン

デメリット

58

大きいメンテナンスだと非常に大変

スマホだと表示が重くなる可能性も

構築が複雑になるため時間がかかる場合も

あえてPCサイトを見る ということができない

同じ端末でも横向きと縦向きで

レイアウトが激変しまうことも

2013年 Webデザインのトレンド

CSSフレームワークの活用

59

2013年 Webデザインのトレンド

CSSフレームワークとは？

60

別名「デザインフレームワーク」

ある程度見た目のよいHTMLを

コーディングしやすいように、

あらかじめ装飾が施されたclassやidが用意された

CSSの骨組みのこと。

CSSフレームワークの活用

どんなシーンで使われる？

61

構想中のWebサービスを早く発信したい時

プロトタイプなど社内検討段階でも

ある程度のクオリティで画面内を操作したい時

エンジニアなどの非デザイナーでも

ある程度見た目が良いものを作りたい時

CSSフレームワークの活用

具体例

Yahoo!が提供する CSSフレームワーク

http://yui.yahooapis.com/pure/0.3.0/pure-min.css

＋

オリジナルのCSS

62

63

64

ご清聴ありがとうございました。

本セッションのような

Webデザインに関するトレンド情報や

役に立つTipsはブログで発信しています。

是非ご覧ください。

www.coprosystem.co.jp/tipsblog/