SlideShare une entreprise Scribd logo
1  sur  68
19:00 - 21:3019:00 - 21:30
SHIBUYASHIBUYA
presented bypresented by
T E C H L A B PA A K
デザインの 手 法
模 倣 から 学 ぶ
0629
金澤直毅 Naoki Kanazawa
1982
WEB & GRAPHIC
Rikkyo Univ. > Design Company > Instructor > Freelance > Life is Tech !
life-is-tech.com
DESIGNER
designless.net
SUMMER CAMP 2015 中高生向け IT & プログラミングキャンプ
TECH LAUNCH AUDITION 中学生・高校生・学生のための起業・開発支援オーディション
Be Startup
Be Startup 中学生・高校生のための起業体験プログラム
Code Girls 女子中学生・高校生のための IT ワークショップ
TECH for TEACHERS 先生に、最先端の「情報」の授業を。
Life is Tech ! Singapore シンガポール支社
どんなデザインにも
共 通の 原 則 が ある
http://lit.sh/design20150318
デザインの 原 則
どんなデザインも
要 素 の 組 み合 わ せ
http://lit.sh/design20150420
デザインの 要 素
ロゴデザインで 学 ぶ
ワークフロー
http://lit.sh/design20150525
デザインの 発 想
模 倣から学 ぶ
デザイントレンド
デザインの 手 法
http://lit.sh/design20150629
1. 流行を知る
2. Illustrator基礎
3. 模倣の実践
MENU
1.流行を知る
APPLE or BRAUN
Case1
Google
APPLE BRAUN
1960s Braun Products Hold the Secrets to Apple's Future
Sir Jonathan Paul Ive
APPLE - Chief Design Officer
Simplicity isn't simple.
Dieter Rams
BRAUN - Design Director
Less, but better.
Flat
Geometric
Polygon
Material
SWISS DESIGN
Case2
O
Flat?
Material?
Geometric?
Google
SWISS GRAPHIC
流 行は繰り返 す
流 行に囚 わ れず
最 適な手 法を
選 択 する
2.Illustrator基礎
Circle
PRACTICE
Illustrator - Shape
M
L
1. ドラッグで描画
2. (Ctrl)+ ドラッグで正方形 ( 正円 )
※クリックで数値入力で描画
Illustrator - Select
1. 図形 / 文字をクリックで選択
2. ドラッグで移動
3. 何もないところをクリックで解除
※ (Ctrl) 押しっぱなしでいつでも選択ツール
Illustrator - Text
T
1. クリックで入力
2. 余白を (Ctrl)+ クリックで選択解除
3. (Ctrl) 押しっぱなしで移動
4. バウンディングボックスで調整
1. 画像を作業フォルダに保存
2. ドラッグ&ドロップ
※右クリック > 重ね順を調整
Illustrator - Photo
1. 画像の上に図形を描く
2. 画像と図形を選択(Shift + )
3. 右クリック
4. クリッピングマスク作成
Illustrator - Mask
1. ドラッグで図形を描画
2.「.」をクリック
3. ウインドウからグラデーションパネル
4. スライダーに色を割り当てる
Illustrator - Gradient
Illustrator - Zoom
Option(alt)+
+
+ +
※ (Ctrl)+1 で 100% 表示
SPACE
3.模倣の実践
WEB
写真+タイトル+ボタン
WORKSHOP 1
写真
DESIGN METHOD
タイトル
ボタン
SIGN UP
DESIGN METHOD
S I G N U P
D E S I G N M E T H O D
S I G N U P
D E S I G N M E T H O D
S I G N U P
透明(描画モード)
乗算
スクリーン
オーバーレイ
カラー
METHOD
写真
紫陽花を撮る
タイトル
ボタン
撮影スポット
紫陽花を撮る
撮影スポット
撮影
スポット
紫
陽
花
を
撮
る
透明なグラデーション
METHOD
DTP
写真+タイトル+本文
WORKSHOP 2
都市と自然
Urban Life
Photo by Naoki Kanazawa
2122
特 集
二子玉 川
田園都市線 二子玉川駅を中心とするエリア。渋谷からのア
クセスもよく、高島屋を中心としたショッピングセンターが
立ち並ぶ洗練された街。一方で、多摩川沿いに赴けば自然
を感じることもできる。季節限定でカフェもオープンするこ
とも。田園都市線 二子玉川駅を中心とするエリア。渋谷か
らのアクセスもよく、高島屋を中心としたショッピングセンタ
ーが立ち並ぶ洗練された街。一方で、多摩川沿いに赴けば
自然を感じることもできる。
都市と自然
Urban Life
Photo by Naoki Kanazawa
2122
特 集
二子玉 川
田園都市線 二子玉川駅を中心とするエリア。渋
谷からのアクセスもよく、高島屋を中心としたシ
ョッピングセンターが立ち並ぶ洗練された街。
一方で、多摩川沿いに赴けば自然を感じること
もできる。季節限定でカフェもオープンすること
も。田園都市線 二子玉川駅を中心とするエリ
ア。渋谷からのアクセスもよく、高島屋を中心と
したショッピングセンターが立ち並ぶ洗練され
た街。一方で、多摩川沿いに赴けば自然を感じ
ることもできる。
裁ち落とし
重ねてずらす
墨+色
METHOD
その他
WORKSHOP 3
7/18
お申込みお申込み
Code Girls
7/18
お申込みお申込み
Code Girls
Code Girls
Code Girls
Code Girls
本日の
デザイン
本日の
デザイン
Books
つ
み
か
さ
ね
19:00 - 21:3019:00 - 21:30
SHIBUYASHIBUYA
presented bypresented by
T E C H L A B PA A K
デザインの 手 法
模 倣 から 学 ぶ
0629
Thankyou!

Contenu connexe

Tendances

優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
 
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
INFOBAHN.inc(株式会社インフォバーン)
 
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
rie05
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
hcdvalue
 

Tendances (20)

優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
 
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
コンテンツマーケティングの正しい活用方法 心を動かすオウンドメディアのつくり方 Ver.02
 
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
 
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
 
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
【人事向け勉強会(1.19)】Retty社 奥田様 ご登壇スライド
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
 
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
 
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
続・パワポは「最後」に開く-もっとみがく!プレゼン資料作成術「大掃除編」
 
續談脈絡訪查|設計思考的第1.5關 Design Thinking Level 1.5
續談脈絡訪查|設計思考的第1.5關 Design Thinking Level 1.5續談脈絡訪查|設計思考的第1.5關 Design Thinking Level 1.5
續談脈絡訪查|設計思考的第1.5關 Design Thinking Level 1.5
 
クラウドファースト時代のAWS活用事例と今後の展望 - AWS Cloud Storage & DB Day 2014
クラウドファースト時代のAWS活用事例と今後の展望 - AWS Cloud Storage & DB Day 2014 クラウドファースト時代のAWS活用事例と今後の展望 - AWS Cloud Storage & DB Day 2014
クラウドファースト時代のAWS活用事例と今後の展望 - AWS Cloud Storage & DB Day 2014
 
Unityで意外と簡単・・・だけど難しいVRコンテンツ
Unityで意外と簡単・・・だけど難しいVRコンテンツUnityで意外と簡単・・・だけど難しいVRコンテンツ
Unityで意外と簡単・・・だけど難しいVRコンテンツ
 
設計思考:番外編 如何避免成為豬隊友|設計思考的第?關 Design Thinking Level ?
設計思考:番外編 如何避免成為豬隊友|設計思考的第?關 Design Thinking Level ?設計思考:番外編 如何避免成為豬隊友|設計思考的第?關 Design Thinking Level ?
設計思考:番外編 如何避免成為豬隊友|設計思考的第?關 Design Thinking Level ?
 
データからインサイト そして、アイデアの発想へ(CJM/POV/HMW)
データからインサイト そして、アイデアの発想へ(CJM/POV/HMW)データからインサイト そして、アイデアの発想へ(CJM/POV/HMW)
データからインサイト そして、アイデアの発想へ(CJM/POV/HMW)
 
デザイン思考による人間中心のイノベーション
デザイン思考による人間中心のイノベーションデザイン思考による人間中心のイノベーション
デザイン思考による人間中心のイノベーション
 
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
 
LTを支える技術(LLD'11 Winter)
LTを支える技術(LLD'11 Winter)LTを支える技術(LLD'11 Winter)
LTを支える技術(LLD'11 Winter)
 
定義設計問題 Define|設計思考的第2關 Design Thinking Level 2
定義設計問題 Define|設計思考的第2關 Design Thinking Level 2定義設計問題 Define|設計思考的第2關 Design Thinking Level 2
定義設計問題 Define|設計思考的第2關 Design Thinking Level 2
 

Similaire à 模倣から学ぶデザインの手法 by Life is Tech !

効果的なスプリントプランニングのトライ
効果的なスプリントプランニングのトライ効果的なスプリントプランニングのトライ
効果的なスプリントプランニングのトライ
貴明 今井
 
高専カンファレンス in 石川 発表資料 - ちらりずむ
高専カンファレンス in 石川 発表資料 - ちらりずむ高専カンファレンス in 石川 発表資料 - ちらりずむ
高専カンファレンス in 石川 発表資料 - ちらりずむ
chirarhythm55
 
111125 ものづくりオープンメソッドiamas・岐阜高専連携講座 takawo
111125 ものづくりオープンメソッドiamas・岐阜高専連携講座 takawo111125 ものづくりオープンメソッドiamas・岐阜高専連携講座 takawo
111125 ものづくりオープンメソッドiamas・岐阜高専連携講座 takawo
takawo shunsuke
 

Similaire à 模倣から学ぶデザインの手法 by Life is Tech ! (20)

STC_OC20200704 processing
STC_OC20200704 processingSTC_OC20200704 processing
STC_OC20200704 processing
 
効果的なスプリントプランニングのトライ
効果的なスプリントプランニングのトライ効果的なスプリントプランニングのトライ
効果的なスプリントプランニングのトライ
 
高専カンファレンス in 石川 発表資料 - ちらりずむ
高専カンファレンス in 石川 発表資料 - ちらりずむ高専カンファレンス in 石川 発表資料 - ちらりずむ
高専カンファレンス in 石川 発表資料 - ちらりずむ
 
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~3Dプリント×Python ~コードからアプローチする3Dプリンティング~
3Dプリント×Python ~コードからアプローチする3Dプリンティング~
 
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
 
111125 ものづくりオープンメソッドiamas・岐阜高専連携講座 takawo
111125 ものづくりオープンメソッドiamas・岐阜高専連携講座 takawo111125 ものづくりオープンメソッドiamas・岐阜高専連携講座 takawo
111125 ものづくりオープンメソッドiamas・岐阜高専連携講座 takawo
 
Baseエンジニアイベント 20170516
Baseエンジニアイベント 20170516Baseエンジニアイベント 20170516
Baseエンジニアイベント 20170516
 
Geidai 01
Geidai 01Geidai 01
Geidai 01
 
Designers Pit 01 Origamiを使ったプロトタイプ作成を学ぼう
Designers Pit 01 Origamiを使ったプロトタイプ作成を学ぼうDesigners Pit 01 Origamiを使ったプロトタイプ作成を学ぼう
Designers Pit 01 Origamiを使ったプロトタイプ作成を学ぼう
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
 
キャリア設計的な話
キャリア設計的な話キャリア設計的な話
キャリア設計的な話
 
STC OC20200812 processing
STC OC20200812 processingSTC OC20200812 processing
STC OC20200812 processing
 
作業スケジュールを運用・管理する技術
作業スケジュールを運用・管理する技術作業スケジュールを運用・管理する技術
作業スケジュールを運用・管理する技術
 
CVPR 2018 速報とその後 (CVPR 2018 完全読破チャレンジ報告会)
CVPR 2018 速報とその後 (CVPR 2018 完全読破チャレンジ報告会) CVPR 2018 速報とその後 (CVPR 2018 完全読破チャレンジ報告会)
CVPR 2018 速報とその後 (CVPR 2018 完全読破チャレンジ報告会)
 
backlogを使ったテレワーク時代の社員教育「遠隔徒弟制度」 株式会社テンタス小泉智洋
backlogを使ったテレワーク時代の社員教育「遠隔徒弟制度」 株式会社テンタス小泉智洋backlogを使ったテレワーク時代の社員教育「遠隔徒弟制度」 株式会社テンタス小泉智洋
backlogを使ったテレワーク時代の社員教育「遠隔徒弟制度」 株式会社テンタス小泉智洋
 
20200707 rpa community_shizuoka_the 3rd_lts_v1.0(upload)
20200707 rpa community_shizuoka_the 3rd_lts_v1.0(upload)20200707 rpa community_shizuoka_the 3rd_lts_v1.0(upload)
20200707 rpa community_shizuoka_the 3rd_lts_v1.0(upload)
 
STC OC20200905 processing
STC OC20200905 processingSTC OC20200905 processing
STC OC20200905 processing
 
presen_nakayama_20220530.pptx
presen_nakayama_20220530.pptxpresen_nakayama_20220530.pptx
presen_nakayama_20220530.pptx
 
180828_PRLT 「最高のPRにするために、わたしがあなたにできること」
180828_PRLT 「最高のPRにするために、わたしがあなたにできること」180828_PRLT 「最高のPRにするために、わたしがあなたにできること」
180828_PRLT 「最高のPRにするために、わたしがあなたにできること」
 
20210707 ut triz発明9画面slideshare
20210707 ut triz発明9画面slideshare20210707 ut triz発明9画面slideshare
20210707 ut triz発明9画面slideshare
 

Plus de Naoki Kanazawa

Plus de Naoki Kanazawa (12)

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