全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話

Webデザイン・Web制作に関する勉強会 #2

Transcript

1. 全くデザインを勉強したことのないエンジニアが 「なるほどデザイン」を読んで少しだけ勉強した話
2. ショウノシオリ @shosho_egg 　・株式会社 chatbox　エンジニア 　・PHP（Laravel）、Vue.js などを使ってます 　・PHPカンファレンス関西2017&2018実行委員長
3. 読んだ本 なるほどデザイン 目で見て楽しむデザインの本 ◦ 筒井美希 著 ◦ http://naruhodo-design.com/ 　　　　　　　　　　　　　※読んだのは Chapter1だけです。 　　　　　　　　　　　　　※スライドで紹介する内容はあくまで私なりに解釈したものです。
4. Chapter1　編集 × デザイン 一枚の「朝ごはん」の写真。 これをどう配置するか？ ページ全体？ 帯っぽく？ ｷﾘﾇｸ ？ そのまま ？
5. ▷ 「このデザインが正しい」というものはない ▷ 「なんのためにデザインするのか」を意識する事が重 要 編集意図 世界観 コンセプト 切り口 メッセージ
6. デザインをする前に（情報）整理をする ◦ デザインを通して伝えたい内容が決まっていない状態では、つくらな い ◦ デザインの正解は「目的を考え、それが伝わること」 デザインをする上で大事なこと
7. どんな人 に？ 何を？ なぜ？ いつ？ どこで？ 情報整理のポイント 5W1H （≒ ペルソナを設定） Who What Why When / Where / How
8. 例1) 初心者向けお料理レシピ本 Who　男女問わず料理初心者 What　朝食の作り方 Why　迷わないため When/Where/How　長く使ってもらいたい書籍 ▷ 簡単に感じるような工夫を ◦ シンプルな構成 ◦ 書体はクセなく、文章も簡潔に ◦ 手順に写真を細かく入れると逆に小難しく見える
9. 例2) 料理好きの女性に向けた雑誌 Who　料理好きで関心の高い女性 What　朝食のバリエーション Why　楽しんでもらう When/Where/How　月に複数回発行される雑誌 ▷ たのしい雰囲気を出す ◦ にぎやかな配置・色 ◦ 写真・フォントの大きさなどでメリハリを ◦ 可読性の高さや文字情報量の多さは不要
10. 例3) ライフスタイルのムック本 Who　生活にこだわりのある人 What　上質な朝の風景 Why　憧れを持ってもらう When/Where/How　季節ごとに一冊でるムック ▷ ストーリー性が大事 ◦ 説明ではなく「ストーリー」を書く ◦ 関係のない写真も効果的に使い想像を膨らませる ◦ 長い文章の間に写真がはさみこまれていると、説明用写真のよう な印象になっていまうので ×
11. 学んだこと ▷ デザインをする前に「情報整理」をしよう ◦ 5W1H を考えると ◎ ▷ デザインをする上で知っておくと良さそうな事 ◦ 写真はレイアウト・数・ジャンルを考えて、効果的に使おう ◦ 文章の書き方、書体は設定したペルソナを考えて選ぶ ▷ レイアウトのパターンは知っておくとよさそう
12. 感想 ▷ デザイナーさんってすごいな... ◦ 分野外のことについても調べたりと、実作業以外にも考えなければなら ないことが多そう ◦ 自分のつくったデザインがちゃんと意図通り伝わっているのか、について は他の人のレビューとかが必要なのかな ▷ 「なるほどデザイン」すごくわかりやすいぞ ◦ 続きも読みたい
13. Thanks! Any questions? You can find me at: @username user@mail.me