2018年1月20日（土）「Canva Caravan in 大阪」でお話したスライドです。デザイナーではない人向けに、Canvaを使ってデザインをするときのデザインのポイントをまとめました。

1. 画像をワンランクアップさせる
デザインのポイント
2018.1.20
CANVA CARAVAN IN ⼤阪
Presented By
坂本典⼦

2. はじめまして、坂本典⼦はこんな⼈です
坂本典⼦ フリーランスデザイナー
ウェブデザイナー
グラフィックデザイナー
イラストレーター
カーペットメーカーで企画・デザインや広報
印刷会社で営業、⾷品メーカーの販促
グラフィックデザイン事務所でウェブデザイナー
職 歴

4. 序章というか⼤前提のお話
今からお話することは、デザイン画像を作るとき
に私が注意しているポイントです。
Canvaではポイントをおさえたテンプレートが最
初からそろっていますが、英語のテンプレートを
⽇本語に打ち替えたり写真を⼊れ替えたときな
ど、もとのテンプレートのデザインから変わって
しまうことがあります。

5. スマホで⾒ないと
ダメですよ！！

6. ⽂字 ⾊
写真
×
⽂字
デザインのポイント
⽂字のふるまい 写真と⽂章の組み合わせ 配⾊

7. ⽂字のふるまい
Canvaは英語のテンプレートが圧倒的に多い
英語を⽇本語に打ち替えて
アレンジするケースが多い
⽇本語は同じ意味でも英語に⽐べて⽂字数が⼤くなる

8. ⽂字のふるまい
⽂字の⼤きさは
読めるかどうかで決める
タイトルや⾒出しは、Canvaだとテンプレート内で⽇本語
に打ち替えた時に、⽂字のスペース内に⼊るように⽂字サ
イズを⼩さくすることが多い
字数が増えるとくことは「⽂字が⼩さくなる」ということ

9. ⽂字のふるまい
⼩さい⽂字サイズに変えて
読めるのかどうか
いろんなデバイスで⾒ることを考えて、
実際にスマホで⾒て⽂字のサイズを
決めよう

10. ⽂字のふるまい
⽇本語の⽂章に打ち替えるときは⽇本語⽤のフォントを使う
英語を⽇本語に変更するときのポイント
プリントした時にキレイ

11. ⽂字のふるまい
⽂字の⼤きさ
情報の優劣によって、⽂字サイズに強弱をつけよう
⼤きい⽂字
タイトルや⾒出しなど⼀番伝えたいことを端的に
⼩さい⽂字
タイトルや⾒出しを補助するための概要、説明

12. ⽂字のふるまい
余⽩は均⼀のサイズに
余⽩は「余った⽩」と書くように、それだけでデザインを
構成する要素
⽂章間の余⽩は上下左右の余⽩を⾒て、⼤きさを揃えるこ
とでスッキリと⾒える

13. 上下左右の余⽩を合わせている

14. ⽂字のふるまい
ツラをそろえる
左揃え・右揃えの⽂章を複数
のせるときは、それぞれの⽂
頭もしくは⽂末をそろえると
スッキリ⾒える

15. ⽂字のふるまい
フォントの種類は2∼3種類
までにおさえる
出来るだけテイストをそろえて、クセのないシンプルなフォ
ントを選び、⽬⽴たせたい部分だけにデザイン書体を使うな
どメリハリをもたせよう
たくさん書体を使うと、垢抜けないイメージにる可能性⾼い

16. ⽂字のふるまい
⽂字はむやみに強調しない
⽂字や⽂章を強調したい時、いろんな⾊やデザインに⽂字を
変えたくなりますが、種類が多すぎるとうるさくなって何が
重要なのか分かりづらくなる
強調する⽂⾔は最も強調したい部分のみ
にしよう

17. ⽂字 ⾊
写真
×
⽂字
デザインのポイント
⽂字のふるまい 写真と⽂章の組み合わせ 配⾊

18. 写真と⽂字の組み合わせ
写真を⾒せるのか、⽂字を読ませるのか
どちらを優先するかで使うテンプレートが変わってくる

19. 写真と⽂字の組み合わせ
⽂字を読ませることが⽬的なので、背景の写真は加⼯するか
⽂字の背景にボックスをしいて
「読めるようにすること」を優先しよう
写真は雰囲気づくり
背景に⼤きく写真を使うときは
⽂字が主役

20. 写真と⽂字の組み合わせ
⽂字は読めなければ意味がない
⽂字と写真を組み合わせるときのふるまいを知っておこう

21. 背景の写真を加⼯

22. ⽂章の後ろに塗りのボックスをしく

23. 写真と⽂字の組み合わせ
⼤きな写真を1枚背景に使いたい場合、被写体が⽂章に
重ならない写真をえらぶ
写真をしっかり⾒せるときは
⽂字を重ねない
写真と⽂字を分ける
⼈の顔には⽂字を重ねない

24. 写真と⽂字を左右に切り分ける

25. 被写体が⽂字に重ならない
顔に⽂字を重ねない
被写体を⽚側に寄せて要素を切り分けることで、⽂章を読みやすく

26. ⾸で切るようなトリミングは「⾸切り」で縁起が悪い
⼝元まで⼊るようにトリミングしよう

27. 写真と⽂字の組み合わせ
SNSでシェアしたときに出てくるOGPイメージは左右が切り
取られて正⽅形で表⽰されることもある
SNSには中央揃えのテンプレート
中央に被写体や⽂字を配置したテンプレートの⽅がおさまり
がいい

28. 正⽅形で切り抜かれても⼤丈夫なデザインに

29. 正⽅形で切り抜かれても⼤丈夫なデザインに

30. 坂本典⼦のTwitterカバー

31. 坂本典⼦のTwitterカバー

32. ⽂字 ⾊
写真
×
⽂字
デザインのポイント
⽂字のふるまい 写真と⽂章の組み合わせ 配⾊

33. 印刷とディスプレイの⾊の違い
加法混⾊ 減法混⾊
RGB CMYK

34. カラーマネージメントシステム

35. 配⾊
CMYKでプリントしたら濁った鈍い⾊になることもある
Canvaで作ったデザインは、そのままの
⾒た⽬の⾊で印刷できないこともある
印刷とはそういうもの

36. ⽬が痛くなるような
⾼彩度の⾊は使わない

37. 迷ったら同形⾊！！
⾊はそろえる⽅がスッキリ洗練されて⾒える

38. 配⾊
写真の⾊も考えよう
写真にはいろんな⾊が⼊っている
写真本体の⾊を考えて⾊合わせを考えよう

39. ⼿作り⼯作に便利な切って貼れる樹脂ミラー
テキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキス
ト
テキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキス
ト

40. ⼿作り⼯作に便利な切って貼れる樹脂ミラー
テキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキス
ト
テキストテキストテキストテキストテキストテ
キストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキス
ト

41. ⾊み(⾊相)は2⾊+1⾊
同形⾊＋ポイント⾊
⼤体3⾊ぐらいにまとめると
まず失敗しない

42. 配⾊
ロゴがある時はそこから配⾊

43. ⻘い服の⼥性 ⻘いコーヒーカップ
上にのせた⽩い⽂字が読めるように
背景はロゴから少し暗くしたブルー
イベントページ⽤アイキャッチ画像
※Canvaの素材を使⽤

44. マジックリサイズで同じデザインを展開

45. ブログからイベントページにリンクするバナー

46. 郵便局や周りのお店に
置いてもらうチラシ

47. イベント会場の誘導⽤
ポスター

48. 配⾊
読みやすい配⾊にしよう
配⾊の基本はコントラストのある、⽂字が読める⾊合わせ
Canvaでは背景の⾊を転調すると、⽂字が⾃動的に読みや
すい⾊に変えてくれる
※操作の途中で⾃動的に⽂字と背景が反転して変わってし
まうこともあるので、後から⾃分で調整しよう

49. 配⾊
何を連想する⾊？
⺟の⽇のカーネーションは⾚、ひなまつり・お花⾒はピンク
葬儀は⿊など、⼈が無意識に連想する⾊がある

50. どちらが美味しそうにみえる？

51. どちらが美味しそうにみえる？

52. 配⾊
サービス・業態によって
使わない⽅がいい⾊もある
「料理をより美味しそうに⾒せる」
「⼼から安らいで気持ちを落ち着かせる」
「元気で楽しい気持ちになる」
⾊の⼼理的効果を知っておく

53. まとめ

54. 要素はできるだけそろえる
強調する箇所は少なく
フォントと⾊は3種類まで
⽂章は絶対に読めるように
同じ⾊をしつこく使う
1
2
3
4
5
迷ったらこの つ5

55. 参考書籍
ノンデザイナーズ・デザインブック
[第4版]
出版社:マイナビ出版
RobinWilliams(著),⼩原司(監修,翻訳),
⽶⾕テツヤ(監修,翻訳),吉川典秀(翻訳)

56. 参考サイト
https://hajimeteweb.jp/column/color_guide/
「エキスパートコラム」
業種別カラーガイド

57. Twitter
Facebook
https://www.facebook.com/
noriko.sakamoto.7921
ありがとうございました
@8823nori