2020年7月4日（土） https://wpzoom.connpass.com/event/179791/

2. ⑥ 効果的なデザイン物って？

4. オーストラリア発の
ブラウザー上でデザインが
できるウェブサービス
Canva キャンバ

5. •ライセンス費が高い
（数万円/年）
•パソコンにインストー
ルが必要
•操作が難しい
•デザインの知識が必
要
•無料で使える
•ブラウザー上で行え
る
•クリックとドラッグ
で操作
•おしゃれなデザイン
が簡単に作れる
•スマホアプリもある
•ライセンス費
•パソコンにインストー
ルが必要
•思い通りのデザイン
がしずらい
•そもそもデザインツー
ルではない

7. はじめまして
会社員・OAインストラクターを経て、
2000年よりWeb制作を中心とする活動を開始。
クライアントのニーズに合わせたコンサルティングから
企画・制作、運用保守の業務をやっています。
ウェブアクセシビリティとSNS発信の重要性を意識した
サイト作りを提案
山本和泉やまもといずみ
ウェブデザイナー/トレーナー ウェブ解析士

9. おしながき
① Canvaってなに？
② Canvaをはじめよう
③ Canvaを使ってみよう
④ Canvaをカスタマイズしてみよう
⑤ デザインの基本
⑥ 効果的なアイキャッチ画像って？

10. Canvaってなに？
1

11. オーストラリア発の
ブラウザー上でデザインが
できるウェブサービス
Canva キャンバ
① Canvaってなに？

12. Canvaでできること
1. クリックやドラッグでかんたんにデザインができる
2. 色や文字・写真を入れ替えるだけでデザインができ
る
3. 無料で使える素材が豊富に用意されている
4. 目的別にテンプレートが用意されている
5. テンプレートは自由にカスタマイズできる
① Canvaってなに？

13. 1. かんたんにデザイン
直感的な操作性でかんたんにデザインができる
① Canvaってなに？

14. 2. 入れ替えるだけ
テンプレートを使って、色や文字を変えたり写真を入れ替えるだけで
プロが作成したようなデザインを作成
① Canvaってなに？

15. 3. 素材が豊富
無料で使用できる写真やイラストなどの素材が豊富
① Canvaってなに？

16. 4. 目的別テンプレート
名刺やポストカード、チラシやポスターなど、作りたいデザインの目的に
応じてテンプレートを用意
① Canvaってなに？

19. 5. 自由にカスタマイズ
テンプレートは自由度の高い編集カスタマイズが可能
① Canvaってなに？

20. ① Canvaってなに？

22. デザイン共有もできる
編集できる
見るだけ
① Canvaってなに？

23. Canvaをはじめよう
2

24. 必要なもの
1. パソコン or スマホ
2. インターネット
3. メールアドレス
② Canvaをはじめよう

25. アカウント取得方法
https://www.canva.com/
② Canvaをはじめよう

26. ② Canvaをはじめよう

27. ② Canvaをはじめよう

28. Canvaを使ってみよう
3

29. Canvaの基本手順
1. デザインの種類を選ぶ
2. テンプレートを選ぶ
3. 写真を差し替える
4. 文字を差し替える
5. 文字のデザインを変える
6. 図形の色や大きさを変える
7. 完成したデザインをダウンロードする
③ Canvaを使ってみよう

30. 1.デザインの種類を選ぶ
③ Canvaを使ってみよう

31. 2.テンプレートを選ぶ
③ Canvaを使ってみよう

32. 3.写真を差し替える
③ Canvaを使ってみよう

33. 4.文字を差し替える
③ Canvaを使ってみよう

34. 5.文字のデザインを変える
③ Canvaを使ってみよう

35. 6.図形の色や大きさを変える
③ Canvaを使ってみよう

36. 6.図形の色や大きさを変える
③ Canvaを使ってみよう

37. 7.完成したデザインをダウンロード
③ Canvaを使ってみよう

38. カスタマイズしてみよう
4

39. 新しいページを追加
④ カスタマイズしてみよう

40. ページをコピー
④ カスタマイズしてみよう

41. ページを移動
④ カスタマイズしてみよう

42. グリッド
④ カスタマイズしてみよう

43. 写真をアップロード
④ カスタマイズしてみよう

44. 著作権
写真やイラスト、文章など、作った人が表現したもの
を「著作物」といいます。
この著作物を作った人のことを「著作者」といい、
法律で著作者に与える権利のことを「著作権」といい
ます。
著作権は、著作物を作った時点で自動的に発生します。
④ カスタマイズしてみよう

45. 著作物の例
• 音楽（曲、歌詞など）
• バレエやダンスなどの振り付け
• 絵画や彫刻、マンガ
• 建築（寺院や橋、庭園など）
• 地図や図形
• 写真、グラビア
• 映画やCM、ドラマ、ホームビデオ、テレビゲームなど
の映像
• プログラム
④ カスタマイズしてみよう

46. 著作物を扱う
アップロードする際は、必ず写真やイラストの著作権
を確認するようにしましょう。
転売をしたり再配布をしたりするなど、あたかも自分
の著作物のように扱うことは禁止されています。
④ カスタマイズしてみよう

47. フレーム
④ カスタマイズしてみよう

48. フィルター
④ カスタマイズしてみよう

49. 無料と有料
• 8,000点以上の無料テンプ
レート
• 100種類以上のデザインタ
イプ
• 数多くの無料の写真とグラ
フィックス
• 60,000点以上の無料テンプ
レート
• 6,000万以上の有料素材
• サイズ変更
• 透過書き出し
無料 有料

50. デザインの基本
5

51. 整列の基本
⑤ デザインの基本

55. 整列の基本
⑤ デザインの基本

56. フォントの基本
⑤ デザインの基本

57. フォントの基本
⑤ デザインの基本

58. 欧文フォント読めない問題
⑤ デザインの基本

59. 欧文フォント読みづらい問題
⑤ デザインの基本

60. 色の基本
1画像について3色までに限定すると統一感が出やすい
• メインで使う色（7割）
• サブで使う色（2割）
• アクセントに使う色（1割）
メイン サブ アクセント
⑤ デザインの基本

61. 写真の色をベースにする
⑤ デザインの基本

62. 背景色と文字色
背景色と文字色のコントラストの比率を上げる
⑤ デザインの基本
16.68 : 1 2.43 : 1
5.85 : 1 1.91 : 1

63. 背景色と文字色
⑤ デザインの基本
4.5 1https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

64. 背景色と文字色のコントラストの比率を上げる
背景色と文字色
⑤ デザインの基本
16.68 : 1
5.85 : 1
2.43 : 1
1.91 : 1

68. 効果的なアイキャッチ画像って？
6

69. 効果的なアイキャッチ画像って？
見た人がこちらの意図した通りに
行動してもらえる画像
• クリックしてもらう
• シェアしてもらう
• お店に来てもらう
• お問い合わせをしてもらう
• 商品を買ってもらう etc..
⑥ 効果的なデザイン物って？

70. 行動してもらうためには
いつ どこで だれが なにを
なぜ どのように いくら
⑥ 効果的なデザイン物って？

71. ⑥ 効果的なデザイン物って？

72. 行動してもらうためには
いつ どこで だれが なにを
なぜ どのように いくら
⑥ 効果的なデザイン物って？

73. 行動してもらうためには
いつ どこで だれが なにを
⑥ 効果的なデザイン物って？

74. 行動してもらうためには
いつ どこで だれが なにを
⑥ 効果的なデザイン物って？

75. 行動してもらうためには
いつ どこで だれが なにを
⑥ 効果的なデザイン物って？

76. SNS / バナー

78. 欧文フォント読みづらい問題
⑤ デザインの基本

79. OGP
Open Graph protocol

87. OGP確認ツール
https://ogp.buta3.net/

92. お客さんには当たり前じゃないことばかり
私たちの当たり前は
• 業種（そもそも）
• 何年？（2019年？2020年？2021年？）
• お店や商品名が読める？（外国語・あて字など）
⑥ 効果的なデザイン物って？
紅爐餐廳 éloge de l'ombre Кафе Россия.

93. ゼッタイにあってはいけないこと
• 誤字脱字
• スペルミス
• 数字の間違い
• 情報の間違い
（電話番号・番地・営業時間・値段・日付・時間など）
＊間違った行動をされてしまう＊
⑥ 効果的なデザイン物って？

94. 失敗しないために
第三者の目を必ず入れる
⑥ 効果的なデザイン物って？

95. デザイン共有もできる
編集できる
見るだけ

96. まとめ
6

97. おさらい
• Canvaとはブラウザー上でデザイン
ができるウェブサービス
• カッコよさの前に、
読みやすさ、見やすさを意識する
• 伝わる（行動してもらう）情報を
準備してから作るとさらに効果的
https:www/izuizu.jp
まとめ