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
ノンデザイナーズ・デザインブック - デザイン4原則
Search
Livesense Inc.
PRO
April 22, 2014
Technology
0
310
ノンデザイナーズ・デザインブック - デザイン4原則
ノンデザイナーズ・デザインブック - デザイン4原則
2013/09/25 (水) @ Livesense TechLunch
発表者:渡邉 惇
Livesense Inc.
PRO
April 22, 2014
Tweet
Share
More Decks by Livesense Inc.
See All by Livesense Inc.
27新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
47
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
13
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.4k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
390
26新卒_総合職採用_会社説明資料
livesense
PRO
0
8.7k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
27k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
12k
中途セールス職_会社説明資料
livesense
PRO
0
250
EM候補者向け転職会議説明資料
livesense
PRO
0
120
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
280
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
15
5.4k
JEDAI Databricks Free Editionもくもく会
taka_aki
1
110
怖くない!はじめてのClaude Code
shinya337
0
130
本が全く読めなかった過去の自分へ
genshun9
0
630
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
100
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
420
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
320
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
610
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
130
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Designing for humans not robots
tammielis
253
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Adopting Sorbet at Scale
ufuk
77
9.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Building Applications with DynamoDB
mza
95
6.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Done Done
chrislema
184
16k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
γεςϜ։ൃ෦ɹϝσΟΞ։ൃୈ2άϧʔϓ Copyright © LIVESENSE Inc. ᬒɹಯ ϊϯσβΠφʔζɾσβΠϯϒοΫ σβΠϯ4ݪଇ
ಥવͰ͕͢
8݄·Ͱͷᬒ Q.サイトってサクッと作れるものな の? A.DB使わないなら、BootStrap使え ば結構”さくっと”それっぽいサイト 出来るよ(※作ったこと無い) でもBootStrap使うとBootStrap臭す るんだよねー(※言いたいだけ)
ちょっとCSSいじればカスタマイズ 出来るよ(※作ったことはない)
TaskForceͰ࡞ͬͯΈΔ͜ͱʹ 惨 敗
ഊҼ ✔レイアウトのイメージの稚拙さ • UIの引き出しの少なさ • 細かいディテールに落ちない
✔BootStrapから外れたこと出来ない • CSS力の欠如 • デザインの超基本の欠如
ࠓճͷςʔϚ ✔デザインの超基本を押さえる 教材:ノンデザイナーズ・デザインブック ※色彩やフォントについては今回はやらない ✔元ネタ
ノン・デザイナーズ・デザインブックを読み解く https://speakerdeck.com/monoooki/read-a- non-designers-designbook
None
Design Principles デザイン4原則 ✔近接 ✔整列 ✔反復
✔コントラスト
ۙ
ۙͷత ✔関連する項目をまとめてグループ化すること ✔知覚的にも視覚的にも組織化すること
ۙ – ήγϡλϧτݪཧ ✔脳は、周辺の物事を「ひとまとめ」にする
ۙ – αϏλΠδϯά ✔脳は4つまでなら瞬時に把握できる 40~80msec / 1star 250~350msec
/ 1star 塊にすると数えやすい
ྻ ほげほげ ぴよぴよ ふがふが
ふがふが ほげほげ ぴよぴよ ほげほげ ほげほげ ふがふが ふがふが ぴよぴよ ぴよぴよ
ྻͷత ✔ページの一体化と組織化 ✔要素同士に視覚的な繋がりを持たせること cf. 文字揃えは基本1つ(中央揃えは避ける)
ྻ – पลࢹ ✔対象の「あらまし」をつかむのは周辺視野 ✔サイトをパッと見て枠をつかめるかどうか = 理解しやすいサイトになっているかどうか
= パーツが整列されていることが最低限
෮ DeNA 不格好経営いい本だっ た。 CCyybbeerrAAggeenntt ちゃらすぎて頭おかし くなっちゃってるけど、
すげえ。 Yahoo 爆速の意味がいまいち わからん。 DeNA 不格好経営いい本だっ た。 CyberAgent ちゃらすぎて頭おかしく なっちゃってるけど、すげ え。 Yahoo 爆速の意味がいまいち わからん。
෮ͷత ✔反復によって一貫性が生まれる ✔各要素の一体化と視覚的な面白さを加える
ίϯτϥετ 与沢翼 村上太一 孫正義 秒速一億 円 最年少上 場社長
スーパーサ イヤ人 FreeAgentS tyle Livesense SoHBank 与沢翼 村上太一 孫正義 秒速一億 円 最年少上 場社長 スーパーサ イヤ人 FreeAgentS tyle Livesense SoHBank
ίϯτϥετͷత ✔はっきりとした違いによって情報の組織化を 支援すること(ex.
見出し 本文) ✔ページにおもしろみを作り出すこと (異ならせるところは徹底的に / 色、サイズ等)
ίϯτϥετ – ࡾ࣍ݩೝࣝ 遠いもの : 背景、重要でないもの 近いもの : 主要コンテンツ、重要なもの
↑重要でない ↑重要
ͬͯΈΔ ໊ฤ 株式会社リブセンス hPp://www.livesense.co.jp/ 渡邉惇 システム開発部 メディア開発第2G
〒141-‐0021 東京都品川区上大崎2-‐25-‐2 真目黒東急ビル 5F Atsushi.Watanabe
[email protected]
Tel. 03-‐6275-‐3330
ͬͯΈΔ ໊ฤ – ۙ システム開発部 メディア開発第2G 渡邉 惇
Atsushi.Watanabe
[email protected]
株式会社リブセンス 〒141-‐0021 東京都品川区上大崎2-‐25-‐2 真目黒東急ビル 5F hPp://www.livesense.co.jp/ Tel. 03-‐6275-‐3330
ͬͯΈΔ ໊ฤ – ྻ システム開発部 メディア開発第2G 渡邉 惇
Atsushi.Watanabe
[email protected]
株式会社リブセンス 〒141-‐0021 東京都品川区上大崎2-‐25-‐2 真目黒東急ビル 5F hPp://www.livesense.co.jp/ Tel. 03-‐6275-‐3330
ͬͯΈΔ ໊ฤ – ෮ システム開発部 メディア開発第2G 渡邉 惇
Atsushi.Watanabe
[email protected]
株式会社リブセンス 〒141-‐0021 東京都品川区上大崎2-‐25-‐2 真目黒東急ビル 5F Tel. 03-‐6275-‐3330 hPp://www.livesense.co.jp/
ͬͯΈΔ ໊ฤ – ίϯτϥετ システム開発部 メディア開発第2G 渡邉 惇
Atsushi Watanabe
[email protected]
株式会社リブセンス 〒141-‐0021 東京都品川区上大崎2-‐25-‐2 真目黒東急ビル 5F Tel. 03-‐6275-‐3330 hPp://www.livesense.co.jp/
ͬͯΈΔ – Σϒฤ ✔近接 ✔整列 ✔反復
✔コントラスト
·ͱΊ ✔近接、整列、反復、コントラスト原則素敵 ✔原則はサイトデザイン以外にもあてはまる
プレゼン資料、ドキュメント etc… ✔とはいえ「誰に」「何を」伝えたいかが重要
͓·͚ – ίʔυݪଇʹԊͬͯ·͢Ͷ