1.
自分をアピールする
「名刺」デザインを考えよう！
2015年1月17日(土)
森和恵

2.
@r360studio 森和恵
• Web系のセミナー講師（iMedio）
• 書籍執筆「 よくわかるFireworksの教科書 」
• 勉強会「 HTML5とCSS3を書籍と学ぼう！ 」
• r360studio.com
• Twitter @r360studio

3.
• テーマの理由
• 名刺に必要な情報
• デザイン基礎知識
• 名刺のredesign
をやってみた
• 名刺交換マナー
本日の内容

4.
身近なモノのデザイン
を本気で考える機会
仕事を取る
商品を販売するなど
日頃の仕事では
「アピールする力」が大切
今回は『自分という商品』を
題材にその力を身につけたい
名刺を題材にした理由

5.
名刺に必要な情報
名刺というコンテンツに必要なことは何か？

6.
自分を誤解なく、正しく伝えるために
• 掲載する情報の範囲はどこまで？
• 情報に強弱をつける
• 相手により、フィルターを変化

7.
相手の記憶に残るためのひと工夫
• 相手が「いいね！」となる
相手が得をするキャッチコピー
（「●●」ならこの人に）
• 相手に与えたい印象に合わせて
雰囲気づくり
（色・形・装飾・用紙の種類など）

8.
渡した後に、話を弾ませるための工夫
• 名刺は後の話を進めるツール
• 名刺を渡した後の話を想定しておく
• 突っ込みどころを準備する
（売り込みせずに相手から話を引き出す）

9.
名刺を構成する要素の一例
• 会社名・役職
• 名前
• 住所（郵便番号有）
• 電話
（代表/直通/個人の表記も）
• メールアドレス
• 関連のあるビジュアル
（顔写真・ロゴ・イラスト）
• キャッチコピー
• 業務内容
 相手に提供できること
 何屋なのか？
 宣伝は程々に
（自己紹介の一環）
• 自分を表すキーワード
 出身地、居住地、略歴、
資格や特技、趣味など

10.
デザインの基礎知識
デザイナーでなくても「これだけは知っておきたい」

11.
デザインなんてしてない風の単純なロゴ

12.
文字を打った直後は、こんな感じ

13.
“打ちっぱなし”だと文字の見ためがバラバラ

14.
数字に合わせて英字のサイズを調節したり

15.
フォントの太さや形で印象が変わる

16.
フォントの選択にこだわる

17.
Windowsの標準フォントも、太さ違いがある

18.
フォントを購入してみる（例：Adobeフォント）

19.
同じフォントの太さ違いは、フォントファミリーで

20.
文字詰めを調整して、印象を変える

21.
文字詰めにとことんこだわる

22.
文字の強弱・ジャンプ率

23.
基本のテーマカラーを３色選ぶ
• ベースカラー：使用する面積の広い色
• サブカラー：次に面積の広い色
• アクセントカラー：ワンポイントで使う色

24.
色の３つの要素
明度
（明るさ/暗さ）
(濃い/薄い)
色相
（色味の違い)
彩度
（鮮やかさ)

25.
HSB・HSLカラーを使う
H・・・色相
S・・・彩度
B・・・明度
H・・・色相
S・・・彩度
L・・・輝度

26.
同系色で選ぶ
B
• 無難で失敗が少ない
• 面白みや変化に欠ける

27.
同じトーンで選ぶ
• トーンとは、「明暗・彩度」が同じ色
色相(Hue)だけが異なる色
• 「トーン＝調子」が同じ色

28.
トーンのグループ

29.
レイアウトの４原則
• 近接
• 整列
• 繰り返し
• コントラスト

30.
近接
• 関連する項目を近づけてまとめる
• 項目ごとにグループ化
• グループの違う項目は離す

31.
整列
• 左/右/上/下を基準に要素を揃える
• ガイド線を基準に引くとわかりやすい
• 大判で要素が多い場合は、
中央揃えは避ける（わかりにくい）

32.
繰り返し
• デザイン的要素は統一し、繰り返す
• デザイン的要素とは
色、文字、余白、揃え、飾りなど
• デザインの統一感やリズムを揃える

33.
コントラスト
• 大きさ、太さ、配置、色を変えて
画面に強弱をつける
• 文字のジャンプ率もコントラスト
• メリハリとリズムが生まれる

34.
名刺のredesign をやってみた
今回、リデザインした自分の名刺のまとめ

35.
いただいた名刺の
レイアウトを見比べ
傾向を分類してみた
レイアウトの傾向調べ

36.
• 渡し＆見やすいように
横置きに
• 強調したいものが
多かったので左塗りを
レイアウトの決定

37.
Before
↓
After

38.
自分で印刷する名刺のススメ
• 印刷屋さんに依頼すると
たくさんできてしまい、変更がしづらい
• 自分で印刷するなら
少しづつ印刷できるので、いろいろ試せる
• ある程度固まって来たら、印刷に出してもいい
• 自分で印刷した名刺は信頼度が低い場合もある
ので注意

39.
私が使っている用紙
A-ONE（エーワン）
マルチカード インクジェットプリンタ専用紙
A4判 10面 名刺サイズ
・マイクロミシンカットタイプ
・両面印刷対応
・文字、写真、イラスト用
● 白無地 特厚口タイプ
● 白無地 厚口タイプ

40.
名刺交換のマナー
名刺交換のマナーと
一歩進んだコミュニケーションテクニック

41.
基本のおさらい
【参考サイト】
好印象を与えるビジネ
スでの名刺交換

42.
意外と知らない？細かいルール（1）
• 目下が先に差し出し、
肩書や年齢の上の人から順に渡す
• 訪問者が先に差し出す。
出遅れた時は「申し遅れました」と添える
• こちらが準備もしていなかったとっさの時は、
「お先に頂戴いたします」と先に頂く
• テーブルを挟んで渡さず、相手に近づく

43.
意外と知らない？細かいルール（2）
• 両手で差し出す。同時に交換する時は
右手で渡して左手で文字を隠さないように受け取
る。もらったらすぐ右手を添える
• 渡す前に必ず名乗る「●●会社で、××をやって
います、○○と申します。」などと手短に
• 渡す前に顔を見て笑顔。渡す時にお辞儀
（敬礼・30度）
• 交換した後に笑顔とお礼+お辞儀（会釈・15度）

44.
意外と知らない？細かいルール（3）
• 名刺の裏も見る
• すぐに名刺入れにしまわない。名刺入れの上に置
き、左側へ。複数人の場合は、テーブルの上に席
順に並べても
• 帰宅後は、場所・紹介者・話したこと・印象など
を名刺に書き込むとよい。思い出しやすいように、
もらった順に重ねて持ち帰ること

45.
本日の振り返り
• 名刺に必要なこと
 正しく伝える
 記憶に残る
 会話を弾ませる
• デザインの基礎知識
 文字・カラー
 レイアウト4原則
• あなたのredesign
• 名刺交換マナー

46.
今後のセミナー予定
担当講座は、下記ページで紹介しています
http://r360studio.com/seminar/

47.
2015年1月17日(土)
森和恵
http://r360studio.com/ にてスライド公開予定