SlideShare a Scribd company logo
1 of 35
Download to read offline
「デザインの基礎」
松本 典子
Noriko Matsumoto
2019/06/29 [Interact 2019] Designer’s Design Talk
- Azure / Windows Development MVPの場合 -
Designer’s Design Talk
2
自己紹介
松本 典子
@nori790822 https://www.facebook.com/noriji822
ASCII.jp: 「Azure Logic Apps」超入門
https://ascii.jp/elem/000/001/647/1647224/
ASCII.jp:「Azure Logic Apps」超入門 ~AI編~
https://ascii.jp/elem/000/001/736/1736136/
Blog:https://zuvuyalink.net/nrjlog/
そもそも、デザインって?
3
4
「デザイナー」をやっていると
一度は言われることがあります。
5
よく言われる言葉
デザイナーは
アーティストでしょ?
6
よく言われる言葉
デザイナーは
アーティストでしょ?
デザイナーとアーティストは
役割が明確に違うと思います
デザイナー
 与えられた制限の中で最大の
結果を出す
 制作物について「何故」を
説明が必須
アーティスト
 なるべく制限の無い状態で最
大限の自己表現
 制作物について
「なんとなく」の表現が許さ
れる
7
デザイナーとアーティストの違い
問題「解決」する人 問題「提起」する人
8
デザインの語源
レイアウトの基礎
9
1. 整列
–グリッドシステムの採用
2. 近接
3. 余白
10
レイアウトの基礎
 各要素を見えないラインで揃える
 ロゴ(アイキャッチ)と文字情報の揃える
 位置を揃えることで、情報が別のグループであることを
認識させやすく
 見た目も美しくなる
11
1.「整列」で情報を整理する
デザインの基礎は「そろえる」
12
グリッドシステムを利用
したポスターレイアウト例
13
グリッドシステムの採用
グリッドシステム
網目状の升目にコンテンツを配
置していく手法
 比較的簡単に秩序ある
レイアウトに仕上げる
ことが出来る
 レイアウトが単調になりやすい
– 要素に変化をつけることも
考えること
14
グリッドシステムの採用
15
2.近接で要素をグルーピング
要素の関連性を明確に「正しく伝える」
近接
関連度に応じて要素間の距離を
調整すること。
関連性が高いものは近くにまとめ、
低いものは距離をとって配置する
のが基本。
あいまいな近接の度合いを明確にする
ことで、関連する要素の結びつきを
より強くできる
16
「近接」を使用した例
要素の近接を意識せずレイアウト
した例。
全てが均等に設定されているので、
どこに何が書いてあるかが把握
しにくい。
17
「近接」を使用した例
どの要素同士を
グルーピングするか
検討が必要
情報のカテゴリーを
考慮して近接の度合いを
調整する
何も要素が置かれていない
スペースを「余白」と言う。
つい埋めたくなるが、
余白があるから要素が生きてくる
ということを意識する。
18
3.余白をコントロールする
– 余白が多い:高級ブランド
– 余白が少ない:スーパーのチラシ
フォントの基本
19
 和文フォントは「明朝体」と
「ゴシック体」の2種類に大別
 明朝体は伝統的でクラシカルな印象
 ゴシック体はシンプルでモダンな印象
20
基本的な和文フォントの種類
明朝体やゴシック体の中でもさまざまな
デザインがある。
それぞれの印象も大きくことなるので、
一括りで扱うことはできない。
 欧文フォントは「セリフ体」と
「サンセリフ体」が基本
 欧文フォントの場合は
うろこのことを「セリフ」と呼ぶ
 セリフがある書体はセリフ体、
無い書体はサンセリフ体に分類
– セリフ体は「ローマン体」と
呼ばれることもある。
21
基本的な欧文フォントの種類
 同じフォントでも
目的に応じて太さや形状などの
違いで複数のバリエーションが
存在
 同一のデザインに属する
フォントのグループを
「フォントファミリー」と呼ぶ
 太さや幅のことは「ウェイト」
22
フォントファミリーとスタイル
23https://fonts.adobe.com/collections
カラーの基礎
24
 RGB:色を混ぜ合わせるにつれて色が明るくなるため
「加法混色」
 CMYK:色を混ぜ合わせるにつれて色が暗くなるため
「減法混色」 25
色の三原色とは
 色相(Hue)
赤や青など色の種類
26
色の3属性
 明度(Saturation)
明度を上げると白になり、明度
を下げると黒になる。
 彩度(Brightness)
色の鮮やかさ。
彩度のない無彩色(白・灰色・黒)
彩度のある有彩色に分けられる。
彩度が高いと派手な印象。
v=ビビッド(鮮やかな)
b =ブライト(明るい)
s =ストロング(強い)
dp =ディープ(濃い)
lt =ライト(浅い)
sf =ソフト(柔らかい)
d =ダル(鈍い)
dk =ダーク(暗い)
p =ペール(薄い)
ltg =ライトグレイッシュ(明るい灰みの)
g =グレイッシュ(灰みの)
dkg =ダークグレイッシュ(暗い灰みの)
27
トーン
明度と彩度を合わせた呼び方
 補色性
– 他の色との関係性という点から色を見る方法。
色相環の逆端にある色を選ぶことで視覚的な調和をもたらす。
(2種類、3色配色、4色配色)
 コントラスト
– ユーザーの見るべきポイントを定め視覚への負担を減らす。
要素間でコントラストを適切に調整することによって、テキス
トを簡単に読める様にし、読む人の注意をひく。
 鮮やかさや力強さ
– 色の感情を表現
28
色彩の理論
 色には見た目以上の効能がある
 色には人を悲しくさせたり、信頼を構築したり、
ブランドの精神を反映したりする
 人の感情に大きなインパクトを与えるような社会的な
意味合いを持つ色もある
 国によって色が持つ意味合いは変わる場合がある
29
「色は刺激」という考え方
好きな色=どこでも使っていい色ではない
30
色には意味がある
赤 黃
青 緑
危険・重要・情熱 太陽・幸福・注意
快適・安心・信頼 自然・成長・成功
 配色イメージスケール
– ロマンチック
– カジュアル
– エレガント etc
 言語イメージ・スケール
– 可憐な
– あどけない
– ほがらかな
– 優美な etc
31
色を客観的に見える化「イメージスケール」
http://www.ncd-ri.co.jp/about/
image_system/imagescale.html
日本カラーデザイン研究所が研究・開発した感性マッピングツール
 ベースカラー:
背景など広い面積に使う色
 メインカラー:
テーマとなる色
 アクセントカラー:
注目させたいなどのポイントに使う色
32
配色の基本テクニック
 「HSB」を利用して色を作る
33
配色の作り方
 事前に配色チップを作る
34
デザインとは?
問題の本質を考え、
それらを解決するための設計をし、
設計を元に
表現や形を作っていくこと。
センスや思いつきのみで
やっている仕事ではない!
ご清聴ありがとうございました

More Related Content

What's hot

優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
hcdvalue
 

What's hot (20)

0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_ux
 
ゲーム開発とデザインパターン
ゲーム開発とデザインパターンゲーム開発とデザインパターン
ゲーム開発とデザインパターン
 
RPGにおけるイベント駆動型の設計と実装
RPGにおけるイベント駆動型の設計と実装RPGにおけるイベント駆動型の設計と実装
RPGにおけるイベント駆動型の設計と実装
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介
 
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイントスマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
 
面白いゲームを作る方法
面白いゲームを作る方法面白いゲームを作る方法
面白いゲームを作る方法
 
ゲームの企画って…
ゲームの企画って…ゲームの企画って…
ゲームの企画って…
 
MMORPGで考えるレベルデザイン
MMORPGで考えるレベルデザインMMORPGで考えるレベルデザイン
MMORPGで考えるレベルデザイン
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴
 
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
 
UX白書サマリー資料20111015
UX白書サマリー資料20111015UX白書サマリー資料20111015
UX白書サマリー資料20111015
 
プロジェクト予算と試算表_180815
プロジェクト予算と試算表_180815プロジェクト予算と試算表_180815
プロジェクト予算と試算表_180815
 
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
 
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
 
ゲームAIの基礎と事例
ゲームAIの基礎と事例ゲームAIの基礎と事例
ゲームAIの基礎と事例
 
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
 

Similar to Designer's Design Talk「デザインの基礎」

Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
lychee .
 

Similar to Designer's Design Talk「デザインの基礎」 (20)

お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
 
デザイナーがネイティブ実装に関わるメリットとコツ
デザイナーがネイティブ実装に関わるメリットとコツデザイナーがネイティブ実装に関わるメリットとコツ
デザイナーがネイティブ実装に関わるメリットとコツ
 
もっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Appsもっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Apps
 
Uno Platform か Blazor
Uno Platform か BlazorUno Platform か Blazor
Uno Platform か Blazor
 
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン 20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
20181019 エンジニア寄せ鍋#7 まだユーザーのいないプロダクトのユーザー視点デザイン
 
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
 
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
 
AwjoSP
AwjoSPAwjoSP
AwjoSP
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
 
開発者のためのUIデザイン入門
開発者のためのUIデザイン入門開発者のためのUIデザイン入門
開発者のためのUIデザイン入門
 
Devsumi2013 community
Devsumi2013 communityDevsumi2013 community
Devsumi2013 community
 
Web制作に便利な機能いろいろ!Microsoft Azureの概要
Web制作に便利な機能いろいろ!Microsoft Azureの概要Web制作に便利な機能いろいろ!Microsoft Azureの概要
Web制作に便利な機能いろいろ!Microsoft Azureの概要
 
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
 
ノンコーディングでここまでできる!LINE BOT を作ってみよう!
ノンコーディングでここまでできる!LINE BOT を作ってみよう!ノンコーディングでここまでできる!LINE BOT を作ってみよう!
ノンコーディングでここまでできる!LINE BOT を作ってみよう!
 
[OSC2018広島]自分にできる貢献のしかたを見つけよう(OSC2018広島Ver)
[OSC2018広島]自分にできる貢献のしかたを見つけよう(OSC2018広島Ver)[OSC2018広島]自分にできる貢献のしかたを見つけよう(OSC2018広島Ver)
[OSC2018広島]自分にできる貢献のしかたを見つけよう(OSC2018広島Ver)
 
【15-e-7】Kinectから始まったスタートアップ #devsumi
【15-e-7】Kinectから始まったスタートアップ #devsumi【15-e-7】Kinectから始まったスタートアップ #devsumi
【15-e-7】Kinectから始まったスタートアップ #devsumi
 
designing DARUYANAGI
designing DARUYANAGIdesigning DARUYANAGI
designing DARUYANAGI
 
グラフィックレコードの研究 / Tokyo Graphic Recorder 清水 淳子 日本デザイン学会 第62回研究発表大会 2015/06/14
グラフィックレコードの研究 / Tokyo Graphic Recorder 清水 淳子 日本デザイン学会 第62回研究発表大会 2015/06/14グラフィックレコードの研究 / Tokyo Graphic Recorder 清水 淳子 日本デザイン学会 第62回研究発表大会 2015/06/14
グラフィックレコードの研究 / Tokyo Graphic Recorder 清水 淳子 日本デザイン学会 第62回研究発表大会 2015/06/14
 
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
 
[DojoCon Japan 2018]自分にできる貢献のしかたを見つけよう by CoderDojo光
[DojoCon Japan 2018]自分にできる貢献のしかたを見つけよう by CoderDojo光[DojoCon Japan 2018]自分にできる貢献のしかたを見つけよう by CoderDojo光
[DojoCon Japan 2018]自分にできる貢献のしかたを見つけよう by CoderDojo光
 

More from 典子 松本

More from 典子 松本 (20)

ノーコードでAIサービスを使ってみよう!「AI Bulder」
ノーコードでAIサービスを使ってみよう!「AI Bulder」ノーコードでAIサービスを使ってみよう!「AI Bulder」
ノーコードでAIサービスを使ってみよう!「AI Bulder」
 
自社でつくれる生産性向上ツール 必要だと思ったらすぐに作れるビジネスアプリ
自社でつくれる生産性向上ツール 必要だと思ったらすぐに作れるビジネスアプリ自社でつくれる生産性向上ツール 必要だと思ったらすぐに作れるビジネスアプリ
自社でつくれる生産性向上ツール 必要だと思ったらすぐに作れるビジネスアプリ
 
ノーコーディングでAIサービスを使ってみた話
ノーコーディングでAIサービスを使ってみた話ノーコーディングでAIサービスを使ってみた話
ノーコーディングでAIサービスを使ってみた話
 
ノーコーディングでやってみよう!写真を色々加工して自動ツイートするLINE Botを作ってみた話。
ノーコーディングでやってみよう!写真を色々加工して自動ツイートするLINE Botを作ってみた話。ノーコーディングでやってみよう!写真を色々加工して自動ツイートするLINE Botを作ってみた話。
ノーコーディングでやってみよう!写真を色々加工して自動ツイートするLINE Botを作ってみた話。
 
「JPOHC」のロゴ制作の話
「JPOHC」のロゴ制作の話「JPOHC」のロゴ制作の話
「JPOHC」のロゴ制作の話
 
テキスト書き起こし&読み上げLINEボットを作ってみた
テキスト書き起こし&読み上げLINEボットを作ってみたテキスト書き起こし&読み上げLINEボットを作ってみた
テキスト書き起こし&読み上げLINEボットを作ってみた
 
タイムカード打刻チャットボット「ごえもん」誕生話 
タイムカード打刻チャットボット「ごえもん」誕生話 タイムカード打刻チャットボット「ごえもん」誕生話 
タイムカード打刻チャットボット「ごえもん」誕生話 
 
Microsoft Flow 改め、Power Automateはじめました。
Microsoft Flow 改め、Power Automateはじめました。Microsoft Flow 改め、Power Automateはじめました。
Microsoft Flow 改め、Power Automateはじめました。
 
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
 
古代エジプトの魅力について
古代エジプトの魅力について古代エジプトの魅力について
古代エジプトの魅力について
 
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
 
ノンコーディングでも!ここまでできるkintone
ノンコーディングでも!ここまでできるkintoneノンコーディングでも!ここまでできるkintone
ノンコーディングでも!ここまでできるkintone
 
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
 
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
 
ノンコーディングでやってみよう!Logic Appsのすゝめ
ノンコーディングでやってみよう!Logic Appsのすゝめノンコーディングでやってみよう!Logic Appsのすゝめ
ノンコーディングでやってみよう!Logic Appsのすゝめ
 
アクセシビリティを考えたalt属性を自動生成してみよう!
アクセシビリティを考えたalt属性を自動生成してみよう!アクセシビリティを考えたalt属性を自動生成してみよう!
アクセシビリティを考えたalt属性を自動生成してみよう!
 
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
 
ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話
 
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケWebデザイナーの私がMicrosoft Azureを使うようになったワケ
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
 
Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話Web制作的SendGridのススメ SendGridで色々やってみた話
Web制作的SendGridのススメ SendGridで色々やってみた話
 

Designer's Design Talk「デザインの基礎」