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

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

Transcript

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

   View Slide

2. ショウノシオリ
   @shosho_egg
   　・株式会社 chatbox　エンジニア
   　・PHP（Laravel）、Vue.js などを使ってます
   　・PHPカンファレンス関西2017&2018実行委員長
   

   View Slide

3. 読んだ本
   なるほどデザイン 目で見て楽しむデザインの本
   ○ 筒井美希 著
   ○ http://naruhodo-design.com/
   　　　　　　　　　　　　　※読んだのは Chapter1だけです。
   　　　　　　　　　　　　　※スライドで紹介する内容はあくまで私なりに解釈したものです。
   

   View Slide

4. Chapter1　編集 × デザイン
   一枚の「朝ごはん」の写真。
   これをどう配置するか？
   ページ全体？ 帯っぽく？
   ｷﾘﾇｸ
   ？
   そのまま
   ？
   

   View Slide

5. ▷ 「このデザインが正しい」というものはない
   ▷ 「なんのためにデザインするのか」を意識する事が重
   要
   編集意図
   世界観
   コンセプト
   切り口
   メッセージ
   

   View Slide

6. デザインをする前に（情報）整理をする
   ○ デザインを通して伝えたい内容が決まっていない状態では、つくらな
   い
   ○ デザインの正解は「目的を考え、それが伝わること」
   デザインをする上で大事なこと
   

   View Slide

7. どんな人
   に？
   何を？ なぜ？
   いつ？
   どこで？
   情報整理のポイント
   5W1H
   （≒ ペルソナを設定）
   Who What Why When / Where / How
   

   View Slide

8. 例1) 初心者向けお料理レシピ本
   Who　男女問わず料理初心者
   What　朝食の作り方
   Why　迷わないため
   When/Where/How　長く使ってもらいたい書籍
   ▷ 簡単に感じるような工夫を
   ○ シンプルな構成
   ○ 書体はクセなく、文章も簡潔に
   ○ 手順に写真を細かく入れると逆に小難しく見える
   

   View Slide

9. 例2) 料理好きの女性に向けた雑誌
   Who　料理好きで関心の高い女性
   What　朝食のバリエーション
   Why　楽しんでもらう
   When/Where/How　月に複数回発行される雑誌
   ▷ たのしい雰囲気を出す
   ○ にぎやかな配置・色
   ○ 写真・フォントの大きさなどでメリハリを
   ○ 可読性の高さや文字情報量の多さは不要
   

   View Slide

10. 例3) ライフスタイルのムック本
    Who　生活にこだわりのある人
    What　上質な朝の風景
    Why　憧れを持ってもらう
    When/Where/How　季節ごとに一冊でるムック
    ▷ ストーリー性が大事
    ○ 説明ではなく「ストーリー」を書く
    ○ 関係のない写真も効果的に使い想像を膨らませる
    ○ 長い文章の間に写真がはさみこまれていると、説明用写真のよう
    な印象になっていまうので ×
    

    View Slide

11. 学んだこと
    ▷ デザインをする前に「情報整理」をしよう
    ○ 5W1H を考えると ◎
    ▷ デザインをする上で知っておくと良さそうな事
    ○ 写真はレイアウト・数・ジャンルを考えて、効果的に使おう
    ○ 文章の書き方、書体は設定したペルソナを考えて選ぶ
    ▷ レイアウトのパターンは知っておくとよさそう
    

    View Slide

12. 感想
    ▷ デザイナーさんってすごいな...
    ○ 分野外のことについても調べたりと、実作業以外にも考えなければなら
    ないことが多そう
    ○ 自分のつくったデザインがちゃんと意図通り伝わっているのか、について
    は他の人のレビューとかが必要なのかな
    ▷ 「なるほどデザイン」すごくわかりやすいぞ
    ○ 続きも読みたい
    

    View Slide

13. Thanks!
    Any questions?
    You can find me at:
    @username
    user@mail.me
    

    View Slide