Upload
hiroki-ishikawa
View
8.512
Download
3
Embed Size (px)
DESCRIPTION
2013年11月1日に、あるセミナーに登壇させていただきました。その時のスライド資料です。 フラットデザインとレスポンシブWebデザインを中心に、2013年のWebデザインのトレンド・6つについて、事例やメリット・デメリットを織り交ぜながら振り返りました。
Citation preview
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
フラットデザインの特徴 ③
タイポグラフィによる 大胆なレイアウト
コンテンツがシンプルになるため、スペースも十分に。
スカスカにならないようタイポグラフィを使った
大胆なレイアウトバランスが重要。
18
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
なぜトレンドに?
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デザインのトレンド
パララックスデザインとは?
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://akasaka-akechi.com/ 42
2013年 Webデザインのトレンド
ブラーエフェクトデザイン
44
2013年 Webデザインのトレンド
ブラーエフェクトデザインとは?
ブラー(blur) = ぼかし
元の素材が何の写真か判別できないくらい
強めのぼかしをかけることで
新しいグラデーションの美しさを表現したり、
奥行き感を出すことができる手法。
45
2013年 Webデザインのトレンド
ブラーエフェクトデザインとは?
ブラー(blur) = ぼかし
46
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
レスポンシブ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/