ウラカタ勉強会 2017年1月度 最近のWebから学ぶデザイン術

Transcript

1. 最近のWebから学ぶ デザイン術 2017年1月　ウラカタ勉強会
2. 自己紹介 デザイナーの中嶋です。 制作会社・フリーランスを経て 2008年に名案企画に入社。 ただひたすらデザインと マークアップをしてます。
3. 1. デザインで重要な事とは 2. 最近のWebデザイン Agenda
4. 中嶋が考える デザインで重要な事とは Section 1
5. デザインをテーマ 何を話そうか...
6. デザイン 問題を解決する術 ＝
7. デザイン 問題を解決する術 ＝ （ 設計面 + ビジュアル面 ）
8. 最も重要なのは 設 計
9. 設計に必要な能力 • 情報を収集・理解する能力 • 整理する能力 • 整頓する能力
10. 設計がしっかりできないことには 良いデザインなんて作れない
11. 最近のWebデザイン Section 2
12. デバイスの多様化 （ スマホ・タブレット・大型モニター ） 回線の高速化 （ 無料Wi-Fiスポットの拡大・LTE ） 背景
13. • スマホ対応はレスポンシブデザイン • スクロールを恐れない縦長レイアウト • ブロックを積み重ねるだけのシングルカラム • 大型モニターにも対応するリキッドレイアウト • ファーストビュー独占の巨大なキービジュアル • ダイナミックなタイポグラフィ Webデザインの傾向
14. では、見ていきましょう
15. 回帰系
16. レイヤーの移動スピードに差を付けることで 視差効果をもたらし、デザインに立体感をもたらす パララックス
17. GIF画像を複数重ね、コマ送りすることで アニメーションを再現する アニメーションGIF
18. 2015～2016年頃から 増えだしたデザイン
19. ページのコンテンツをストーリー仕立てで組立て、スクロー ルするだけで内容への理解を深める。 ◎ ユーザーの滞在時間を伸ばす効果がある。 ストーリーテリング
20. クロム＝枠をなくしたデザイン。余計な装飾をせず、ビジュ アルを引き立て、メッセージが強調される。 ◎ 雑誌の1ページのようなデザインが再現できる。 クロムなし
21. イメージをフルスクリーンで表示したレイアウト。 様々なサイズのデバイスでも同じ印象の表現ができるた め、近年では重宝されやすい。 ◎ 魅力的に見せやすく、ユーザーを引き込みやすい。 ヒーローヘッダー
22. 構成要素が左右非対称であったり、秩序なく不規則に配 置されたデザイン。 ◎ デザインに強い個性が生まれる アシンメトリー
23. 余計なナビゲーションを隠すことができるため、よりミニマ ムなデザインを再現できる。 デスクトップ版デザインでの利用が増えてきた。 ハンバーガーメニュー
24. パーティクル（粒子）がアニメーションする背景を配置して いるデザイン。 ◎ 背景に立体感が生まれる パーティクル背景
25. 番外編
26. いろんな事をやっていて、ホンマに凄いけど、ストレスを感 じずにはいられないデザイン。 凄い、ホンマに凄い。けど...系
27. 2017年注目編
28. 画面を真っ二つに区切って、左右で異なる動作をさせるレ イアウト。 ◎ 余白を無くし、画面を有効に活用できる スプリットスクリーンレイアウト
29. コンテンツの区切りとなるラインが斜めやラウンデッド（曲 線）になっているデザイン。 斜めライン・ラウンデッド
30. まとめ
31. • モバイルファーストなデザイン傾向 • アニメーションは個性を生む重要な要素 • 短命なサイトは試しやすい
32. ありがとうございました