Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
Search
ショウノシオリ
July 10, 2018
Programming
0
240
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
Webデザイン・Web制作に関する勉強会 #2
ショウノシオリ
July 10, 2018
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
230
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
Nuxt.js で SSR 対応する
sshono1210
1
2.3k
array_merge と array_push の違いについて
sshono1210
0
530
Vue.js の methods と computed
sshono1210
0
110
すぐに使える ES2015 の基本構文3つ
sshono1210
0
80
肌で感じたディレクションとマネジメント
sshono1210
0
72
Vue.jsで遊んでみよう
sshono1210
0
88
Other Decks in Programming
See All in Programming
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
CSC305 Lecture 09
javiergs
PRO
0
300
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
560
Pythonに漸進的に型をつける
nealle
1
110
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
130
Introduce Hono CLI
yusukebe
6
3k
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
330
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.7k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
150
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Producing Creativity
orderedlist
PRO
347
40k
Rails Girls Zürich Keynote
gr2m
95
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Invisible Side of Design
smashingmag
302
51k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Fireside Chat
paigeccino
40
3.7k
Transcript
全くデザインを勉強したことのないエンジニアが 「なるほどデザイン」を読んで少しだけ勉強した話
ショウノシオリ @shosho_egg ・株式会社 chatbox エンジニア ・PHP(Laravel)、Vue.js などを使ってます ・PHPカンファレンス関西2017&2018実行委員長
読んだ本 なるほどデザイン 目で見て楽しむデザインの本 ◦ 筒井美希 著 ◦ http://naruhodo-design.com/ ※読んだのは Chapter1だけです。
※スライドで紹介する内容はあくまで私なりに解釈したものです。
Chapter1 編集 × デザイン 一枚の「朝ごはん」の写真。 これをどう配置するか? ページ全体? 帯っぽく? キリヌク ? そのまま
?
▷ 「このデザインが正しい」というものはない ▷ 「なんのためにデザインするのか」を意識する事が重 要 編集意図 世界観 コンセプト 切り口 メッセージ
デザインをする前に(情報)整理をする ◦ デザインを通して伝えたい内容が決まっていない状態では、つくらな い ◦ デザインの正解は「目的を考え、それが伝わること」 デザインをする上で大事なこと
どんな人 に? 何を? なぜ? いつ? どこで? 情報整理のポイント 5W1H (≒ ペルソナを設定)
Who What Why When / Where / How
例1) 初心者向けお料理レシピ本 Who 男女問わず料理初心者 What 朝食の作り方 Why 迷わないため When/Where/How 長く使ってもらいたい書籍 ▷ 簡単に感じるような工夫を ◦ シンプルな構成
◦ 書体はクセなく、文章も簡潔に ◦ 手順に写真を細かく入れると逆に小難しく見える
例2) 料理好きの女性に向けた雑誌 Who 料理好きで関心の高い女性 What 朝食のバリエーション Why 楽しんでもらう When/Where/How 月に複数回発行される雑誌 ▷ たのしい雰囲気を出す ◦ にぎやかな配置・色
◦ 写真・フォントの大きさなどでメリハリを ◦ 可読性の高さや文字情報量の多さは不要
例3) ライフスタイルのムック本 Who 生活にこだわりのある人 What 上質な朝の風景 Why 憧れを持ってもらう When/Where/How 季節ごとに一冊でるムック ▷ ストーリー性が大事 ◦ 説明ではなく「ストーリー」を書く
◦ 関係のない写真も効果的に使い想像を膨らませる ◦ 長い文章の間に写真がはさみこまれていると、説明用写真のよう な印象になっていまうので ×
学んだこと ▷ デザインをする前に「情報整理」をしよう ◦ 5W1H を考えると ◎ ▷ デザインをする上で知っておくと良さそうな事 ◦
写真はレイアウト・数・ジャンルを考えて、効果的に使おう ◦ 文章の書き方、書体は設定したペルソナを考えて選ぶ ▷ レイアウトのパターンは知っておくとよさそう
感想 ▷ デザイナーさんってすごいな... ◦ 分野外のことについても調べたりと、実作業以外にも考えなければなら ないことが多そう ◦ 自分のつくったデザインがちゃんと意図通り伝わっているのか、について は他の人のレビューとかが必要なのかな ▷
「なるほどデザイン」すごくわかりやすいぞ ◦ 続きも読みたい
Thanks! Any questions? You can find me at: @username
[email protected]