SlideShare una empresa de Scribd logo
1 de 66
19:00 - 21:3019:00 - 21:30
SHIBUYASHIBUYA
presented bypresented by
T E C H L A B PA A K
金澤直毅 Naoki Kanazawa
32 years old
WEB & GRAPHIC
Rikkyo Univ. > Design Company > Instructor > Freelance > Life is Tech !
life-is-tech.com
DESIGNER
designless.net
中高生のためのスマートフォンアプリ開発コンテスト
TEENS APPS AWARDS 2014
A
TEENSAPPSAWARDSTEENSAPPSAWARDS
2014
Be Startup
先生は、最先端の「情報」の授業を。
TECH for TEACHERS は、カリキュラムを。
すべて、無料で。
presented by
どんなデザインにも
共 通の 原 則 が ある
1. デザインの原則
2. フライヤー実践
3. ケースワーク
Menu
1.デザインの原則
原 則を知り
違 和 感に気 づく
Step1
近接 整列
反復 対比
代 表 的 な 原 則
近 接
整 列
反 復
対 比
DEMO
原 則 は 密 接 に 関 連
整 列
対 比
近 接
反 復
配色余 白
Step2
原 則を過 信しない
自 分の 感 覚を信じる
4つ の 四 角 形 のうち
1つ だけを目 立 た せよ
WORKSHOP
EXAMPLE
lajsbf;aiuw
ebkjznxjb;i
ahwbefkan
bsdmnba;si
lajsbf;aiuw
ebkjznxjb;i
ahwbefkan
bsdmnba;si
lajsbf;aiuw
ebkjznxjb;i
ahwbefkan
bsdmnba;si
Hello
ざわ・・・
ざわ・・・
ざわ・・・
原則
手法
閃き
閃き
閃き
=
= キャッチコピー
= 説明文
= 写真
= 購入ボタン
= 情報
Design
違 和 感の 排 除
+
情 報の 設 計
2.フライヤー実践
lit.sh/design0318
Materials
DEMO
3.ケースワーク
Case1
ロゴ
®
= 598
23
26
1 1 1
1
1
1
5
5
5
5
Google
BRAUN LOGO
黄金比 LOGO
Point
幾 何 学 図 形は美しい
Case2
名 刺
ライフイズテック株式会社 Life is Tech, Inc.
〒106-0047 東京都港区南麻布2-12-3 南麻布ビル1F
life-is-tech.com / tel. 03-5439-9422 / fax. 03-5439-9423
金 澤 直 毅 Naoki Kanazawa
kanazawa@lifeistech.co.jp / 000-0000-0000
チーフデザイナー
Why Don’t You Change the World ?
kanazawa.naoki  designless0
GAME
ざわっち
Life is Tech !
jyT
DEMO
Point
情 報の 設 計
+
個 性
1. 余白
2. デザインの要素
3. デザインの数値化
Next Contents
余 白
W h i t e S p a c e
よ
は
く
デ ザ イン の 要 素
形
文 字
図
色線
質 感
Thankyou!
2015031819:00 - 21:3019:00 - 21:30
SHIBUYASHIBUYA
presented bypresented by
T E C H L A B PA A K
デザインの 原 則
事 例 で 学 ぶ

Más contenido relacionado

La actualidad más candente

ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
hcdvalue
 

La actualidad más candente (20)

20161122_How to start Recruiting Engineers_mercari_ishiguro
20161122_How to start Recruiting Engineers_mercari_ishiguro20161122_How to start Recruiting Engineers_mercari_ishiguro
20161122_How to start Recruiting Engineers_mercari_ishiguro
 
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
 
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
 
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへUXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス  ~リサーチからアイデア発想そしてUIデザインへ
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本
 
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
誰にでもできるプレゼン入門 〜解脱プレゼンの極意〜
 
UXデザイン概論 2019
UXデザイン概論 2019UXデザイン概論 2019
UXデザイン概論 2019
 
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
 
9コマシナリオの使い方
9コマシナリオの使い方9コマシナリオの使い方
9コマシナリオの使い方
 
確実に良くするUI/UX設計
確実に良くするUI/UX設計確実に良くするUI/UX設計
確実に良くするUI/UX設計
 
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
 
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
 
自己紹介スライドショー201606
自己紹介スライドショー201606自己紹介スライドショー201606
自己紹介スライドショー201606
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザイン
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
 

Destacado

スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。
Matsumoto Takamasa
 
【企画書】omiai:IVS_LAUNCH PAD用資料
【企画書】omiai:IVS_LAUNCH PAD用資料【企画書】omiai:IVS_LAUNCH PAD用資料
【企画書】omiai:IVS_LAUNCH PAD用資料
Find Job Startup
 
【企画書】UIscope:MOVIDA JAPAN_Demo Day用資料
【企画書】UIscope:MOVIDA JAPAN_Demo Day用資料【企画書】UIscope:MOVIDA JAPAN_Demo Day用資料
【企画書】UIscope:MOVIDA JAPAN_Demo Day用資料
Find Job Startup
 
【企画書】ReceReco:新規事業討議用社内資料
【企画書】ReceReco:新規事業討議用社内資料【企画書】ReceReco:新規事業討議用社内資料
【企画書】ReceReco:新規事業討議用社内資料
Find Job Startup
 

Destacado (20)

Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
 
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
 
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
 
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザインアクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
 
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
 
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
 
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめインタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
 
スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。
 
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
 
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
 
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
 
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
 
【企画書】omiai:IVS_LAUNCH PAD用資料
【企画書】omiai:IVS_LAUNCH PAD用資料【企画書】omiai:IVS_LAUNCH PAD用資料
【企画書】omiai:IVS_LAUNCH PAD用資料
 
【企画書】UIscope:MOVIDA JAPAN_Demo Day用資料
【企画書】UIscope:MOVIDA JAPAN_Demo Day用資料【企画書】UIscope:MOVIDA JAPAN_Demo Day用資料
【企画書】UIscope:MOVIDA JAPAN_Demo Day用資料
 
P2 P 奨学金プロジェクト Ver3 5
P2 P 奨学金プロジェクト Ver3 5P2 P 奨学金プロジェクト Ver3 5
P2 P 奨学金プロジェクト Ver3 5
 
【企画書】ReceReco:新規事業討議用社内資料
【企画書】ReceReco:新規事業討議用社内資料【企画書】ReceReco:新規事業討議用社内資料
【企画書】ReceReco:新規事業討議用社内資料
 

Más de Naoki Kanazawa

Más de Naoki Kanazawa (14)

GitHub - How to "pull request"
GitHub - How to "pull request"GitHub - How to "pull request"
GitHub - How to "pull request"
 
模倣から学ぶデザインの手法 by Life is Tech !
模倣から学ぶデザインの手法 by Life is Tech !模倣から学ぶデザインの手法 by Life is Tech !
模倣から学ぶデザインの手法 by Life is Tech !
 
頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !
 
実践して学ぶデザインの要素 by Life is Tech !
実践して学ぶデザインの要素 by Life is Tech !実践して学ぶデザインの要素 by Life is Tech !
実践して学ぶデザインの要素 by Life is Tech !
 
デザインの扉
デザインの扉デザインの扉
デザインの扉
 
Design 4 everyone
Design 4 everyoneDesign 4 everyone
Design 4 everyone
 
表現別、PhotoshopとIllustratorの使い分けを学ぶ
表現別、PhotoshopとIllustratorの使い分けを学ぶ表現別、PhotoshopとIllustratorの使い分けを学ぶ
表現別、PhotoshopとIllustratorの使い分けを学ぶ
 
Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門Webデザイナーのためのエディタ入門
Webデザイナーのためのエディタ入門
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
Prototyping by Adobe Photoshop
Prototyping by Adobe PhotoshopPrototyping by Adobe Photoshop
Prototyping by Adobe Photoshop
 
Document Design by Adobe Illustrator - 3
Document Design by Adobe Illustrator - 3Document Design by Adobe Illustrator - 3
Document Design by Adobe Illustrator - 3
 
Document Design by Adobe Illustrator - 2
Document Design by Adobe Illustrator - 2Document Design by Adobe Illustrator - 2
Document Design by Adobe Illustrator - 2
 
Prototyping by Adobe Illustrator
Prototyping by Adobe IllustratorPrototyping by Adobe Illustrator
Prototyping by Adobe Illustrator
 
Document Design by Adobe Illustrator - 1
Document Design by Adobe Illustrator - 1Document Design by Adobe Illustrator - 1
Document Design by Adobe Illustrator - 1
 

事例で学ぶデザインの原則 by Life is Tech !