2013年 Webデザインのトレンドを振り返る
- 2. 自己紹介 石川 洋樹 株式会社コプロシステム Webデザイングループ ディレクター Webサイトやアプリの設計、プロジェクトの 進行管理などディレクター業務全般を担当。 業務関連で気になったトピックなどを集めた 「Tips*Blog」も運営中 :) www.coprosystem.co.jp/tipsblog/ 2
- 9. 世界的に有名なサービスが 次々とフラットデザインを採用 Google - Android 4.4（KitKat） 9
- 12. フラットデザインの特徴 ① Flat ＝ 平たい,平坦な スキューモーフィック デザイン フラット デザイン 12
- 13. フラットデザインの特徴 ① Flat ＝ 平たい,平坦な テクスチャやグラデーションによるリアルな質感、 ドロップシャドウによる奥行き感など 立体感が出るリッチな表現をなくす、 もしくは極力抑えた平面的なデザイン手法。 13
- 14. フラットデザインの特徴 ② ムダな要素をなるべく排除 シンプル＆きれいに配置 パーツ装飾だけに限らず、 サイトのコンテンツや文章も無駄な要素をなるべく減らし、 グリッドを使ってきれいに配置する。 14
- 21. Future Insights Live 2013 http://futureinsightslive.com/las-vegas-2013/ 21
- 22. フラットデザインの特徴 ④ ビビッド スモーキー ビビッドカラー もしくは 少しくすんだスモーキーカラーを 使用したモダンな雰囲気が特徴。 カラーバランスによってユーザビリティを向上させる。 使用する色数は多すぎず、少なすぎず。 22
- 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
- 33. 2013年 Webデザインのトレンド パララックスデザインとは？ パララックス(parallax) ＝ 視差効果 複数の要素に対して、 スクロールスピードに差をつけたり、 “ぼかし”やアニメーションを付加することで、 視差効果による立体的な空間を演出する手法。 33
- 45. 2013年 Webデザインのトレンド ブラーエフェクトデザインとは？ ブラー(blur) ＝ ぼかし 元の素材が何の写真か判別できないくらい 強めのぼかしをかけることで 新しいグラデーションの美しさを表現したり、 奥行き感を出すことができる手法。 45
- 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
- 56. レスポンシブWebデザイン なぜトレンドに？ Webが様々なデバイスで閲覧される時代 技術(CSS3)の進化 Googleが公式推奨 ソーシャルメディアの流行 56
- 57. レスポンシブWebデザイン メリット 簡単なメンテナンスであれば非常に楽 SEOに効果的 ページコンテンツのシェアが容易 57
- 58. レスポンシブWebデザイン デメリット 大きいメンテナンスだと非常に大変 スマホだと表示が重くなる可能性も 構築が複雑になるため時間がかかる場合も あえてPCサイトを見る ということができない 同じ端末でも横向きと縦向きで レイアウトが激変しまうことも 58
- 61. CSSフレームワークの活用 どんなシーンで使われる？ 構想中のWebサービスを早く発信したい時 プロトタイプなど社内検討段階でも ある程度のクオリティで画面内を操作したい時 エンジニアなどの非デザイナーでも ある程度見た目が良いものを作りたい時 61
- 63. 63