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
110
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
15
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.4k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
390
26新卒_総合職採用_会社説明資料
livesense
PRO
0
8.8k
株式会社リブセンス会社紹介資料 / 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
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
解析の定理証明実践@Lean 4
dec9ue
1
210
AI導入の理想と現実~コストと浸透〜
oprstchn
0
160
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
110
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
300
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.2k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
320
How Community Opened Global Doors
hiroramos4
PRO
1
130
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Practical Orchestrator
shlominoach
188
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Rails Girls Zürich Keynote
gr2m
94
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Writing Fast Ruby
sferik
628
62k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Being A Developer After 40
akosma
90
590k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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… ✔とはいえ「誰に」「何を」伝えたいかが重要
͓·͚ – ίʔυݪଇʹԊͬͯ·͢Ͷ