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

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

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

C385e96e5ddd25faba59e3e14fc3e019?s=128

ショウノシオリ

July 10, 2018
Tweet

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