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
210
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
Webデザイン・Web制作に関する勉強会 #2
ショウノシオリ
July 10, 2018
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
sshono1210
0
200
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
Nuxt.js で SSR 対応する
sshono1210
1
2.2k
array_merge と array_push の違いについて
sshono1210
0
490
Vue.js の methods と computed
sshono1210
0
95
すぐに使える ES2015 の基本構文3つ
sshono1210
0
67
肌で感じたディレクションとマネジメント
sshono1210
0
60
Vue.jsで遊んでみよう
sshono1210
0
75
Other Decks in Programming
See All in Programming
2025-04-25 GitHub Copilot Agent ライブデモ(スクリプト)
goataka
0
120
VitestのIn-Source Testingが便利
taro28
9
2.5k
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.2k
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
250
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
160
Boast Code Party / RubyKaigi 2025 After Event
lemonade_37
0
120
エンジニア向けCursor勉強会 @ SmartHR
yukisnow1823
3
13k
flutter_kaigi_mini_4.pdf
nobu74658
0
160
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
160
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
rkaga
3
2.7k
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
190
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
810
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Thoughts on Productivity
jonyablonski
69
4.6k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for Performance
lara
608
69k
Faster Mobile Websites
deanohume
307
31k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
850
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]