2013年11月1日に、あるセミナーに登壇させていただきました。その時のスライド資料です。 フラットデザインとレスポンシブWebデザインを中心に、2013年のWebデザインのトレンド・6つについて、事例やメリット・デメリットを織り交ぜながら振り返りました。

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

2. 自己紹介
石川 洋樹
株式会社コプロシステム
Webデザイングループ ディレクター
Webサイトやアプリの設計、プロジェクトの
進行管理などディレクター業務全般を担当。
業務関連で気になったトピックなどを集めた
「Tips*Blog」も運営中 :)
www.coprosystem.co.jp/tipsblog/
2

3. 2013年、
どんなWebデザインを見ましたか？
フラット
デザイン
パララックス
デザイン
フルスクリーン
デザイン
ポリゴン風
デザイン
ブラーエフェクト
デザイン
レスポンシブ
Webデザイン
CSSフレーム
ワークの活用
jQueryを活用した
インタラクション
デザイン
3

4. 今回は6つのトレンドについて
概要説明、事例紹介をします
フラット
デザイン
パララックス
デザイン
フルスクリーン
デザイン
ポリゴン風
デザイン
ブラーエフェクト
デザイン
レスポンシブ
Webデザイン
CSSフレーム
ワークの活用
jQueryを活用した
インタラクション
デザイン
4

5. 2013年 Webデザインのトレンド
フラットデザイン
5

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

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

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

9. 世界的に有名なサービスが
次々とフラットデザインを採用
Google - Android 4.4（KitKat）
9

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

11. Googleトレンドでも急上昇
「フラットデザイン」で検索（2013/10/30）
11

12. フラットデザインの特徴 ①
Flat ＝ 平たい,平坦な
スキューモーフィック
デザイン
フラット
デザイン
12

13. フラットデザインの特徴 ①
Flat ＝ 平たい,平坦な
テクスチャやグラデーションによるリアルな質感、
ドロップシャドウによる奥行き感など
立体感が出るリッチな表現をなくす、
もしくは極力抑えた平面的なデザイン手法。
13

14. フラットデザインの特徴 ②
ムダな要素をなるべく排除
シンプル＆きれいに配置
パーツ装飾だけに限らず、
サイトのコンテンツや文章も無駄な要素をなるべく減らし、
グリッドを使ってきれいに配置する。
14

15. デザイナー「SubCreative」
http://www.subcreative.com.au/
15

16. デザイナー「JUSTIN AGUILAR」
http://www.justinaguilar.com/
16

17. アパレルブランド「DIESEL」
http://www.diesel.com/
17

18. フラットデザインの特徴 ③
タイポグラフィによる
大胆なレイアウト
コンテンツがシンプルになるため、スペースも十分に。
スカスカにならないようタイポグラフィを使った
大胆なレイアウトバランスが重要。
18

19. Twitter Bootstrap
http://getbootstrap.com/2.3.2/
19

20. デザインエージェンシー「Buffalo」
http://builtbybuffalo.com/
20

21. Future Insights Live 2013
http://futureinsightslive.com/las-vegas-2013/
21

22. フラットデザインの特徴 ④
ビビッド
スモーキー
ビビッドカラー もしくは 少しくすんだスモーキーカラーを
使用したモダンな雰囲気が特徴。
カラーバランスによってユーザビリティを向上させる。
使用する色数は多すぎず、少なすぎず。
22

23. #FFD464
#F26964
#1253A4
#F1F0EE
デザイナー＆アートディレクター
「Lorenzo Verzini」
http://lorenzoverzini.com/
23

24. #08233E
#F8823C
#2C5379
#EB2142
グラフィックデザイナー＆アートディレクター
「Adam Rudzki」
http://adamrudzki.com/
24

25. #0E7AC4
ビデオホスティングサービス「WISTIA」
http://wistia.com/
#58BE89
#FBA848
#F27398
25

26. なぜトレンドに？
 デジタルデバイスへの慣れ
 要素をしぼる必要性
 レスポンシブWebデザインの登場
 スマートフォンとの親和性
26

27. フラットデザインのメリット
 軽い
 コンテンツ内容を伝えやすい
 レスポンシブに対応しやすい
27

28. フラットデザインのデメリット
 Less is more. Less is bore.
 リッチさでごまかせない
 向き／不向き の差が激しい
 操作が分かりにくくなる可能性も
28

29. フラットデザインのデメリット
 操作が分かりにくくなる可能性も
Baby and iOS 6 vs iOS 7
29

30. フラットデザインのデメリット
 操作が分かりにくくなる可能性も
iOS 6
ロック画面
iOS 7
ロック画面
30

31. フラットデザインのための便利ツール
Flat UI Design
http://fltdsgn.com/
Flat UI Colors
http://flatuicolors.com/
31

32. 2013年 Webデザインのトレンド
パララックスデザイン
32

33. 2013年 Webデザインのトレンド
パララックスデザインとは？
パララックス(parallax) ＝ 視差効果
複数の要素に対して、
スクロールスピードに差をつけたり、
“ぼかし”やアニメーションを付加することで、
視差効果による立体的な空間を演出する手法。
33

34. 2013年 Webデザインのトレンド
パララックスデザインとは？
Fast
Speed
Middle
Speed
Slow
Speed
More Slow
Speed
34

35. ファッションブランド「KRYSTALRAE」
http://krystalrae.com/
35

36. デザイナー「OK Studios」
http://www.ok-studios.de/home/
36

37. PRO TREK「Slim lineシリーズ」
http://protrek.jp/products/slim-line/
37

38. 2013年 Webデザインのトレンド
フルスクリーンデザイン
38

39. 2013年 Webデザインのトレンド
フルスクリーンデザインとは？
美しい写真や動画を
フルスクリーンサイズで配置
商品やサービスなどコンテンツの魅力を
テキストで読ませるのではなく
インパクトある素材のダイナミックなレイアウトで
視覚的に伝えることができる手法。
39

40. 大阪にある水族館「海遊館」
http://www.kaiyukan.com/newkaiyukan/
40

41. ECサイト作成ツール「SQUARESPACE」
http://www.squarespace.com/
41

42. 赤坂料亭「あけち」
http://akasaka-akechi.com/
42

43. 模型製作「和 模型工房」
http://www.wamokei.com/
43

44. 2013年 Webデザインのトレンド
ブラーエフェクトデザイン
44

45. 2013年 Webデザインのトレンド
ブラーエフェクトデザインとは？
ブラー(blur) ＝ ぼかし
元の素材が何の写真か判別できないくらい
強めのぼかしをかけることで
新しいグラデーションの美しさを表現したり、
奥行き感を出すことができる手法。
45

46. 2013年 Webデザインのトレンド
ブラーエフェクトデザインとは？
ブラー(blur) ＝ ぼかし
46

47. 時間管理ツール「toggl」
https://www.toggl.com/
47

48. 決済代行サービス「Chec」
https://trychec.com/
48

49. iPhoneアプリ「Piction」
http://pictionapp.com/
49

50. フリーランス「Bastien Pean」
http://www.bastienpean.com/
50

51. 2013年 Webデザインのトレンド
レスポンシブWebデザイン
51

52. 2013年 Webデザインのトレンド
レスポンシブWebデザインとは？
PC用サイトとスマートフォン（以下スマホ）用サイトを用
それに対しレスポンシブWebデザインは、OSやブラウザを
意する場合、ユーザが閲覧しているOSやブラウザ（ユー
判断基準にするのではなく、ブラウザの横幅サイズを判断
ザーエージェント）を判別して、サーバーサイドプログラ
基準にして、CSS（スタイルシート）の装飾を切り替え、
ムで表示するHTMLを振り分けるという手法が一般的。
あらゆるデバイスに対応する手法。
この人はパソコンで閲覧している → パソコン用HTML
この人は1200pxのブラウザで見てる → ○○という装飾
この人はiPhoneで閲覧している → スマホ用HTML
この人は480pxのブラウザで見てる → ■■という装飾
52

53. 400px
800px
1280px
Gmail
https://mail.google.com/intl/ja/mail/help/about.html
53

54. 400px
750px
1280px
首相官邸
http://www.kantei.go.jp/
54

55. レスポンシブWebデザイン
Googleトレンドでも急上昇
「レスポンシブWebデザイン」で検索（2013/10/30）
55

56. レスポンシブWebデザイン
なぜトレンドに？
 Webが様々なデバイスで閲覧される時代
 技術(CSS3)の進化
 Googleが公式推奨
 ソーシャルメディアの流行
56

57. レスポンシブWebデザイン
メリット
 簡単なメンテナンスであれば非常に楽
 SEOに効果的
 ページコンテンツのシェアが容易
57

58. レスポンシブWebデザイン
デメリット
 大きいメンテナンスだと非常に大変
 スマホだと表示が重くなる可能性も
 構築が複雑になるため時間がかかる場合も
 あえてPCサイトを見る ということができない
 同じ端末でも横向きと縦向きで
レイアウトが激変しまうことも
58

59. 2013年 Webデザインのトレンド
CSSフレームワークの活用
59

60. 2013年 Webデザインのトレンド
CSSフレームワークとは？
別名「デザインフレームワーク」
ある程度見た目のよいHTMLを
コーディングしやすいように、
あらかじめ装飾が施されたclassやidが用意された
CSSの骨組みのこと。
60

61. CSSフレームワークの活用
どんなシーンで使われる？
 構想中のWebサービスを早く発信したい時
 プロトタイプなど社内検討段階でも
ある程度のクオリティで画面内を操作したい時
 エンジニアなどの非デザイナーでも
ある程度見た目が良いものを作りたい時
61

62. CSSフレームワークの活用
具体例
Yahoo!が提供する
CSSフレームワーク
http://yui.yahooapis.com/pure/0.3.0/pure-min.css
＋
オリジナルのCSS
62

63. 63

64. ご清聴ありがとうございました。
本セッションのような
Webデザインに関するトレンド情報や
役に立つTipsはブログで発信しています。
是非ご覧ください。
www.coprosystem.co.jp/tipsblog/
64