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
170
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
Webデザイン・Web制作に関する勉強会 #2
ショウノシオリ
July 10, 2018
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
140
開発チームのリーダーとしてどうあるべきか?
sshono1210
2
1.1k
Nuxt.js のディレクトリ
sshono1210
0
2.7k
Nuxt.js で SSR 対応する
sshono1210
0
2k
array_merge と array_push の違いについて
sshono1210
0
330
Vue.js の methods と computed
sshono1210
0
80
すぐに使える ES2015 の基本構文3つ
sshono1210
0
43
肌で感じたディレクションとマネジメント
sshono1210
0
32
Vue.jsで遊んでみよう
sshono1210
0
41
Other Decks in Programming
See All in Programming
Folding Cheat Sheet #4
philipschwarz
PRO
0
110
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.4k
Milestoner
bkuhlmann
1
420
Try creating your own orderedmap
kazamori
1
270
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
SIMD Parallel Programming with the Vector API
josepaumard
0
240
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.6k
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
1k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
190
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Open AI APIを使う前に知っておきたいアカウントTier の話
akki_megane
0
110
Featured
See All Featured
A Tale of Four Properties
chriscoyier
153
22k
Statistics for Hackers
jakevdp
790
220k
How to name files
jennybc
65
93k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Atom: Resistance is Futile
akmur
260
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Become a Pro
speakerdeck
PRO
13
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Producing Creativity
orderedlist
PRO
338
39k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
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]