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
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
760
Advance Your Career with Open Source
ivargrimstad
0
520
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
350
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
820
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
理論と実務のギャップを超える
eycjur
0
130
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.1k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
What's in a price? How to price your products and services
michaelherold
246
12k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
RailsConf 2023
tenderlove
30
1.2k
Thoughts on Productivity
jonyablonski
70
4.9k
How GitHub (no longer) Works
holman
315
140k
Building Applications with DynamoDB
mza
96
6.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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]