SlideShare a Scribd company logo
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
デザインの 原 則
事 例 で 学 ぶ

More Related Content

What's hot

ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
 

What's hot (20)

好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
 
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
プレゼンの技術
プレゼンの技術プレゼンの技術
プレゼンの技術
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
UXの考え方とアプローチ
UXの考え方とアプローチUXの考え方とアプローチ
UXの考え方とアプローチ
 
模倣から学ぶデザインの手法 by Life is Tech !
模倣から学ぶデザインの手法 by Life is Tech !模倣から学ぶデザインの手法 by Life is Tech !
模倣から学ぶデザインの手法 by Life is Tech !
 
プレゼン用 きれいでわかりやすいパワーポイントを作る方法
プレゼン用 きれいでわかりやすいパワーポイントを作る方法プレゼン用 きれいでわかりやすいパワーポイントを作る方法
プレゼン用 きれいでわかりやすいパワーポイントを作る方法
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
 
9コマシナリオの使い方
9コマシナリオの使い方9コマシナリオの使い方
9コマシナリオの使い方
 
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
パワポは「最後」に開く-すぐできる!プレゼン資料作成術「大掃除編」
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
 
プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11プレゼン基礎講座 2016.11
プレゼン基礎講座 2016.11
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザイン
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 

Viewers also liked

スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。
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
 
【企画書】gamba!(ガンバ):サムライインキュベート様向け_企画プレゼン資料
【企画書】gamba!(ガンバ):サムライインキュベート様向け_企画プレゼン資料【企画書】gamba!(ガンバ):サムライインキュベート様向け_企画プレゼン資料
【企画書】gamba!(ガンバ):サムライインキュベート様向け_企画プレゼン資料
Find Job Startup
 

Viewers also liked (20)

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:新規事業討議用社内資料
 
T TIME 滞在時間割キャンペーン(第4回販促会議企画コンペティション)
T TIME 滞在時間割キャンペーン(第4回販促会議企画コンペティション)T TIME 滞在時間割キャンペーン(第4回販促会議企画コンペティション)
T TIME 滞在時間割キャンペーン(第4回販促会議企画コンペティション)
 
【企画書】gamba!(ガンバ):サムライインキュベート様向け_企画プレゼン資料
【企画書】gamba!(ガンバ):サムライインキュベート様向け_企画プレゼン資料【企画書】gamba!(ガンバ):サムライインキュベート様向け_企画プレゼン資料
【企画書】gamba!(ガンバ):サムライインキュベート様向け_企画プレゼン資料
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
 

More from Naoki Kanazawa

More from Naoki Kanazawa (13)

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 !
 
デザインの扉
デザインの扉デザインの扉
デザインの扉
 
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 !