20180425 GOJAS Meetup Spring Special - KotomiTanaka

身
!
forgevision.inc
K O T O M I T A N A K A
に
つ
け
よ
う

田中ことみ
T A N A K A K O T O M I
webデザイナー 12年目
フォージビジョン株式会社所属

GOJASのロゴを作らせて
いただきました！

データの視覚化
本日のテーマ

プロローグ
『デザイン』するということ

あなたは「デザインして」と
言われたら、何を考えますか？
?

かっこよくすること？
難しくて
よく分からない・・
やっぱセンス？
?

Q.デザインとは何？
デザイン =
ちょっと考えてみてください

センス
デザイン =
「センスあるねー」とかよく言いますよね・・・

センス
ブー！
デザイン =

デザイン = センス
デザイナーは
感覚で作っている訳じゃ
ないんです！

デザイン =

設計デザイン =
設計。図案。意匠。
また、製品の機能や美的造形を考慮した意匠計画。
引用: wikipedia

Design is not just what it looks
like and feels like.
Design is how it works.
デザインとは、単にどのように見えるか、
どのように感じるかということではない。
どう機能するかだ。
‐ スティーブ・ジョブズ

人間の行動をアシストした
デザイン
機能美
=

では、そのルールとはなにか。

もくじ
3
インフォグラフィックを
作ってみよう
COOKING
1
視覚デザインの
基本
?
2
伝えたい情報には
優先順位をつける

1視覚デザイン
の基本
人の性質を使う
色を使う
ジャンプ率を
つける

1 . 種類別は見やすい

種類別に分けると情報が整理され、
それだけで見やすくなります
それを
「近接」の法則
と呼びます

KOTOMI TANAKA
web designer
forgevision.inc
03-1234-5678
東京都千代田区フォージ町-1-2-3
BEFORE
例（名刺

KOTOMI TANAKA
web designer
forgevision.inc
03-1234-5678
BEFORE
例（名刺
名刺本人の情報
会社の情報

KOTOMI TANAKA
web designer
forgevision.inc
03-1234-5678
BEFORE
例（名刺
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
AFTER
名刺本人の情報
会社の情報

KOTOMI TANAKA
web designer
forgevision.inc
03-1234-5678
BEFORE
例（名刺
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
AFTER

2 . 整列は美しい

全ての項目が視覚的に関連するように
意図的に配置するとスッキリまとまります
それを
「整列」の法則
と呼びます

整列の種類
左揃え中央揃え右揃え両端揃え
揃えることを常に意識しましょう！

整列の種類
左揃え中央揃え右揃え両端揃え
揃えることを常に意識しましょう！「整列」のご法度！
同じページで
3 つ以上使わない

KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
BEFORE
では先程の名刺を見てみると・・
ガッタガタなので整列を適用しましょう
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
AFTER

3 . 緩急は目に留まる

コントラストで楽しさを演出！
情報の組織化をつけましょう
緩急=コントラスト
私達の脳はコントラストが好きなのです

緩急で楽しさを演出！
情報の組織化をつけましょう
強弱=コントラスト
私達の脳は緩急が好きなのです
「コントラスト」のご法度！
臆病になっては
ならない

KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
AFTER
２の整列を適用した名刺に
コントラストを適用してみましょう
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
BEFORE

KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
AFTER
２の整列を適用した名刺に
コントラストを適用してみましょう
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
BEFORE
２
3
1
4 4

KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
AFTER
最初の状態と比べて見ましょう！
KOTOMI TANAKA
web designer
forgevision.inc
03-1234-5678
BEFORE

4 . 反復は一貫性を出す

色・レイアウト・装飾などを
繰り返し使うと
全体的に一体感が出て、
世界観を作ることができます
特徴的なものを
意識的に繰り返すこと
反復とは

先程の名刺を並べてみます・・
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc

お分かりいただけるだろうか・・・
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc

5.視覚の導線

目線の動きは文字を読む時の流れに影響されますので、
日本人は主に下記を基本としています。
横書きは上から下、
左から右。
上から下
左から右
横
縦書きは上から下、
右から左。
上から下
右から左
縦

主に
紙媒体
主に
WEB
紙媒体では「Z型」、webでは「F型」が多いとされています。
Z型 F型

動くものに目線が行く

すぐに見つかりましたか？
情報が並列に並んでいると
意図したコンテンツに
注目集めることは難しいですよね

そういう時は動かすのが効果的です！

❤ ❤
❤❤
アニメーション

また、順番に動かすことで
目線を誘導することができます

♠ ❤ ♦ ♣
♦ ♠ ♣ ♦
♠
♣
♦ ♠ ♣ ❤♠ ❤
逆に言えば、
優先順位が低いコンテンツは
絶対に動かさないように
しましょう！

♠ ❤ ♦ ♣
♦ ♠ ♣ ♦
❤
♦
♠
♣
♦ ♠ ♣ ❤♠ ❤
このスペードが気になって
見せたかったものが
しっかり伝わってないですよね？

発表資料などでよく見かける、
優先順位が低い要素が移動しちゃう問題。
タイトル
ここの内容が
優先順位が高い
- 1 -
タイトル
ここの内容が
- 2 -
タイトル
ここの内容が
- 3 -

優先順位が低ければ、
思い切って省いてしまってOK！
タイトル
ここの内容が
タイトル
ここの内容が
タイトル
ここの内容が

人
の
性
質
を
使
 う
まとめ
1. 種類別は見やすい（近接）
2. 整列は美しい（整列）
3. 緩急は目に留まる（コントラスト）
4. 反復は一貫性を出す（反復）
5. 動くものに目線が行く
｝
デ
ザ
イ
ン
の
４
大
原
則

1. 色の三大要素
色を使う

色の三大要素
色相明度彩度

色相
赤、青、緑のような
色味の違いのことを表します。
色相はイメージの違いを
最も表現することが出来る属性です。

明度
色の明るさを表す属性です。
明度が高くなるごとに白に近づき、
低くなると黒に近づきます。
高
低

彩度
色の鮮やかさ・強さを表す属性です。
彩度が高くなると純色に近づき、
低くなると無彩色に近づきます。
高
低

色を使う
2 . 色の決め方

t
物体にはそれをイメージ出来る色があります。
コンセプトカラーなどを決める際は
その物からイメージされる色をベースにすると
より伝わりやすくなります。
秋春冬夏

色の持つイメージ（例
生命
活動的
情熱的・衝動的
破壊・暴力
家庭・仕事
自由・暖かい
深い知恵
推察力
好奇心
向上心・知識
幸福・軽快
カジュアル

色の持つイメージ（例
平和・安全
冷静・誠実
清潔
若い・爽やか
穏やかさ
調和・自然
平和・バランス
協調
エキゾチック
繊細・華麗
高貴・高級
不安定

イメージに合わない色を使った例
春夏秋冬
違和感ありますよね・・

色を使う
3 . 7 0 : 2 5 : 5 の法則

まとまりやすい色数＝ 3
70% 25% 5%
ベースカラー : メインカラー : アクセントカラー

色
を
使
う
まとめ
1. 色には「三大要素」（色相・明度・彩度）がある
2. イメージにあった色を使う
3. 色は３つに絞る（70:25:5）

タイトル
見出し
本文本文本文本文本文本文本文本文本文
本文本文本文本文
見出し
本文本文本文本文本文本文
見出し
ジャンプ率
本文の文字サイズに対する、
タイトルや見出しの文字サイズの比率
のことを表します。
要素から要素へ、視線がジャンプしながら
飛び移るので「ジャンプ率」と言います。

タイトル
見出し
見出し
見出し
ジャンプ率が低い
タイトル
見出し
本文本文本文本文本文本文本文本文本文本文
本文本文
見出し
本文本文本文
見出し
本文本文
ジャンプ率が高い

イメージ
落ち着き、高級感、格調
信頼、安定、緊張
注意点
• 退屈に感じやすい
• 可読性が低くなりやすい
タイトル
見出し
見出し
見出し
ジャンプ率が低い

タイトル
見出し
本文本文
見出し
本文本文本文
見出し
本文本文
ジャンプ率が高い
イメージ
躍動感、華やかさ、
若々しさ、明るさ
注意点
• 読み飛ばしをされる率が高くなる

ジ
ャ
ン
プ
率
を
つ
け
る
まとめ
・イメージに合わせた比率にする
・読みやすくなるよう、
　要素別にジャンプ率をつける

2伝えたい情報には

「目立たせたい」と思った時、
まず何をしますか？
Q

目立たせる＝赤
はもうやめよう

確かに赤は目立つ
この考えは間違いではありません。
しかし、必ずしもそれが正しいとも限らないのです。

なぜ赤は目立つ？
- 赤の持つイメージ-

潜在的に命の危険を感じるから
単に「優先順位が高いもの」に使うというよりかは
「注意点」や「重度のエラーメッセージ」等に
使用すると本来のイメージと合います。

潜在的に命の危険を感じるから
単に「優先順位が高いもの」に使うというよりかは
「注意点」や「重度のエラーメッセージ」等に
使用すると本来のイメージと合います。
では、赤を使わないとすると
どんな方法があるのか？

目立たせる方法
(赤を使わず)
・色をつけるアクセントカラーを使用する
ジャンプ率をつける・位置を工夫する視覚の導線を使用する
・装飾をつける太さ・線・飾りをつける
・サイズを変えるジャンプ率をつける

適用する順番
1. サイズを変えるジャンプ率をつける
2. 位置を工夫する
2. 装飾をつける
ジャンプ率をつける視覚の導線を使用する
太さ・線・飾りをつける
3. 色をつけるアクセントカラーを使用する

適用する順番
1. サイズを変える
2. 位置を工夫する
2. 装飾をつける
ジャンプ率をつける
3. 色をつける
ジャンプ率をつける視覚の導線を使用する
太さ・線・飾りをつける
アクセントカラーを使用する
色は最後！

日本全国
色弱・色盲
大多数の方の色の見え方と明らかに異なる色覚のこと。
3,000,000人以上

色弱・色盲
大多数の方の色の見え方と明らかに異なる色覚のこと。
20人/
日本人男性日本人女性
500人/

普通の見え方
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
元の名刺
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
要素に赤を適用

色弱 ( P 型 ) の方の見え方
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
元の名刺
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
P型＝L錐体(赤～黄緑)が働かない色覚異常のこと

色弱 ( P 型 ) の方の見え方
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
元の名刺
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
P型＝L錐体(赤～黄緑)が働かない色覚異常のこと
全く赤に
見えない！

太字で強調した場合
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
通常の方の見え方
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
色弱(P型)の方の見え方

太字で強調した場合
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
通常の方の見え方
KOTOMI TANAKA
web designer
03-1234-5678
forgevision.inc
色弱(P型)の方の見え方
これで誰が見ても同じになりました！

3インフォグラフィックを
作ってみよう！

3インフォグラフィックを
1. なぜ大事？
2.今日の献立
使ってみよう
3.レシピ COOKING

インフォグラフィックが
なぜ大事なのか？
?

インフォグラフィック
インフォグラフィック（英語: infographics）とは、
情報、データ、知識を視覚的に表現したものである。
情報を素早く簡単に表現したい場面で用いられ、
標識、地図、報道、技術文書、教育などの形で使われている。
また、計算機科学や数学、統計学においても、概念的情報を
分かりやすく表現するツールとしてよく用いられる。
科学的情報の可視化にも広く適用される。
@wikipedia

インフォグラフィック（英語: infographics）は、
@wikipedia
「視覚的」とは？
「見た」だけで解る

インフォグラフィック（英語: infographics）は、
@wikipedia
「見た」だけで解る
ピクトグラム図・グラフなど

文字だけの場合
見る
1 2
読む
・・・
考える
3
!
理解
4

見る
1 2
読む
・・・
考える
3
!
理解
4
考えさせてはいけない！
「理解する」までが長ければ長いだけ、
人はストレスを感じます。
人間は”余計なこと”を考えるのが億劫な動物なんですね。
も
やもや
不便さを感じるストレスを感じる =

「視覚的」にした場合
見る
1 2
読む
・・・
考える
3
!
理解
4
脳
直

「視覚的」にした場合
見る
1 2
読む
・・・
考える
3
!
理解
4
脳
直
ストレスフリーの
優しい世界

ピクトグラムや図を
用いた場合
理解するまで時間がかかる😭 脳直で理解できる☺
😭 言葉が通じる前提
😭 読む気になれない
😭 文字量分のスペースが必要
☺ 言葉が分からなくて
も理解できる
☺ 情報を整理しやすい
☺ スペースがなくてもOK

インフォグラフィックの
必要項目
ピクトグラム図・グラフなどストーリーインパクト

見てみよう

文京区版地震防災マニュアル
参照元：http://www.u-bunkyo.ac.jp/faculty/business/2016/03/post-27.html

ANA歴代CA制服年表 1955∼2015
参照元： https://www.ana.co.jp/travelandlife/infographics/
vol02/

よくわかる！電力自由化の全て
参照元： http://kakaku.com/energy/liberalization/about.html

ヨーグルトに関する
作ってみたいと思います
COOKING

COOKING
があるページは
このヨーグルトのインフォグラフィックを
作っている工程です
COOKING

レシピ
COOKING

インフォグラフィックのレシピ
利用目的STEP1
題材STEP2
リサーチSTEP3
内容の選定STEP4
デザインSTEP5
検証STEP6

利用目的STEP1
題材STEP2
リサーチSTEP3
内容の選定STEP4
デザインSTEP5
検証STEP6
データ解析
インフォグラフィックのレシピ
視覚化

レシピ
STEP1
利
用
目
的
まずはじめに３つの項目を
確認しましょう
Why?
- なぜ -
なぜインフォグラフィック
を用いるのか、
用途や目的を
明らかにしておきましょう
Where?
- どこで -
どこで公開するのかを
明らかにしておきましょう
場所によって
作成するサイズなど
変わります
Who?
- 誰に -
ターゲットを
明らかにしましょう
ターゲットによって
見せ方が
変わります

レシピ
STEP1
利
用
目
的
ヨーグルトのインフォグラフィックを
作る目的を決める
Where?
- どこで -
webで公開
（スマホでの閲覧を想定）
Who?
- 誰に -
・健康を気にする人
・若干女性向け
COOKING
Why?
- なぜ -
効果別でまとめられて
いるのが見当たらなか
ったから

レシピ
STEP2
題
材
COOKING
ヨーグルトについての調査
ヨーグルトの意識調査
ヨーグルトの効果について
etc..

レシピ
STEP3
リ
サ
COOKING
ー
チ

レシピ
STEP4
内
容
の
選
定
1.情報整理
・ターゲットに合った内容か？
・ストーリーはどうするか？
・一番伝えたい内容はどれか？
2.補足情報の追加
インフォグラフィックは一枚絵の為、
本題が理解できるように補足情報も記載しておく

レシピ
STEP4
内
容
の
選
定
3.共通フォーマットを用意
・タイトル
・ソース出典
・公開/制作クレジット
4.データをまとめる
Wordなどのテキスト文書へまとめる

COOKING
レシピ
STEP4
内
容
の
選
定

レシピ
STEP4
内
容
の
選
定
COOKING
ターゲットに合った内容か？
「購買数は女性の比率が高い」という調査結果があったため、合っていると言える。
ストーリーはどうするか？
ヨーグルトの意識調査結果をもとに一般的に「効果については意識が低い」ことの
裏付け提示、その後効果について説明。
一番伝えたい内容は？
「整腸」以外の効果もあること。味だけでなく体質改善を意識して選んでほしい。

レシピ
STEP4
内
容
の
選
定
COOKING
補足情報の追加
・日本でのヨーグルトの普及時期
・効果別の乳酸菌
共通フォーマット
[タイトル]　あなたは何をたべる？効果で選ぶヨーグルト
[ソース出典]　まとめに記載
[公開/制作クレジット]　KOTOMI TANAKA (forgevision.inc)

レシピ
STEP4
内
容
の
選
定
COOKING
資料にまとめる
デザイナーに分かるフォーマットであれば、
この段階でのデータのグラフ化は必要ありません
(グラフや図解で渡す場合、変更可であることを伝えてください)

レシピ
STEP5
デ
ザ
イ
ン
1.デザイナーが考えること
・ターゲットに合うテイスト
・用途にあうレイアウト
・図の選定
2.ラフ作成
手描きやワイヤーフレームを使って全体の構成
を考える
3.清書

レシピ
STEP5
デ
ザ
イ
ン
COOKING
ターゲットに合うテイスト
考えた結果
レイアウト
WEB用。
スマホで閲覧しやすい
縦型レイアウト
図の選定
女性が好みやすい柔らかいフォントを使用。ヨーグルトをイメージしやすい配色。
・お腹痛い時何を食べる？は
比較しやすい縦型棒グラフ
・効果は知っている？は
(レイアウトを考慮)円グラフ

レシピ
STEP5
デ
ザ
イ
ン
ラフ案作成
COOKING

レシピ
STEP5
デ
ザ
イ
ン
清　書
COOKING

レシピ
STEP6
検
証
最後にもう一度内容を確認し、
照らし合わせます
・データと差異がないか
・視覚化したストーリーに差異はないか
・ターゲットのイメージに差異はないか
・共通フォーマットは入っているか

１. タイトルと追加情報
COOKING
レシピ
STEP6
検
証
データ視覚化

レシピ
STEP6
検
証
2. 調査結果グラフ
COOKING
Q. お腹が痛い時、何を食べる？
データ視覚化

レシピ
STEP6
検
証
2. 調査結果グラフ
COOKING
Q. ヨーグルトの効果を知っている？
視覚化データ

レシピ
STEP6
検
証
データ
3. 効果別のヨーグルト一覧
COOKING

レシピ
STEP6
検
証
視覚化
3. 効果別のヨーグルト一覧
COOKING

レシピ
STEP6
検
証
COOKING
4. 引用元とクレジット
データ視覚化

BEFORE
見る
1 2
読む
・・・
考える
3
!
理解
4

BEFORE
2
読む
・・・
考える
3
見る
1
!
理解
4
脳
直

ツール
- おまけ -

piktochart
https://piktochart.com/
easel.ly
https://www.easel.ly/
- おまけ -

Adobe Project Lincoln
リリース未定
引用: https://料理撮影.net/adobe-sensei/ProjectLincoln
- おまけ -

1
基本
まとめ
3
作ってみよう
2
・人の性質を理解し、設計に
　活かそう
・色はイメージに合わせて
　選定し、３色にまとめよう
・ジャンプ率もイメージづける
　大切な要素
・デザイナーに追加要素を依頼
　する時は、色指定ではなく、
　「優先順」を伝えよう！
・ピクトグラムや図を使用し
　脳直でストレスフリーな
　デザインにしよう
・ストーリーとインパクトも
　忘れずに！
・便利なツールがあるよ
・色は最後！

人間の行動をアシストした
デザイン
機能美
=
思いやり

1
基本
今日のまとめ
3
使ってみよう
2
・人の性質を利用しよう！
・色はイメージ合わせて選定し
　３つに絞るとまとまりやすい
・イメージ合わせたジャンプ率
色で指示するのではなく
「優先順位」でお願いします
・ピクトグラムや図を使って
　脳直で伝えよう
・ストーリーとインパクトを
　忘れずに！
・簡単に作れるツールもあるよ
ご清聴ありがとうございました！
KOTOMI TANAKA
forgevision.inc
『伝わる』デザインを身につけよう
〜デザインの基礎からインフォグラフィックまで〜

20180425 GOJAS Meetup Spring Special - KotomiTanaka

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

20180425 GOJAS Meetup Spring Special - KotomiTanaka