【Schoo web campus】色を変えれば、その資料はもっと伝わる

1. ビジネス資料制作における「配色知識」を事例で学ぶ色を変えれば、その資料はもっと伝わる 2013-2-7 13年2月5日火曜日

2. 今日の内容配色について20分・配色に失敗する3つの原因・数値を使った色のコントロール・数値を使った配色方法・色の面積についてその後、ネットからの質疑応答20分 13年2月5日火曜日

3. 配色に失敗する3つの原因 13年2月5日火曜日

4. 1. コントラストが足らない 2. 色数が多い 3. 色がまぶしい 13年2月5日火曜日

5. 人には曖昧な色の組み合わせを好まない傾向があります 13年2月5日火曜日

6. コントラストが足らない例 13年2月5日火曜日

7. Lorem ipsum 2013-02-07 dolor sit amet Sit qualisque hendrerit te, ne sit torquatos interpretaris. Ius graece option legimus an, vix summo dolorem blandit an. Nisl patrioque quo ad. Ut duo augue paulo, fabulas sapientem ne mea, ut duo detraxit salutandi definiebas. Pro at unum petentium, meliore consetetur has in, et mutat percipit vim. In eruditi fabellas vis, ex eruditi legimus necessitatibus quo. Eos in alterum ceteros adipiscing, te accumsan pertinacia instructior ius. pro at justo commune copiosae At ipsum scripta efficiantur nec. Perpetua vituperata quaerendum vix ne, pri ne veri liber apeirian. Vidisse lucilius facilisi ei vix, vim ei quod esse atqui, error placerat molestiae eam cu. Denique albucius quo ad, eos eu malis assum. dicta fierent no his At malis laoreet his. Ex vix prima primis, ne qui iudico alienum. Te enim iriure fuisset eos, ei mei nihil saepe soleat, has alienum postulant in. Quem accusamus constituam qui ea, id dolorum expetendis per. Vis in ferri quaeque. Suscipit phaedrum vulputate cum eu. Usu te quot ignota timeam, ex sed magna nusquam, ex eum esse omnis. EURIPIDIS 13年2月5日火曜日

10. 色数が多い例 13年2月5日火曜日

14. 色がまぶしい例（これが一番多い） 13年2月5日火曜日

18. 曖昧でない組み合わせ 13年2月5日火曜日

22. Lorem ipsum 2013-02-07 dolor sit amet Sit qualisque hendrerit te, ne sit torquatos interpretaris. Ius graece option legimus an, vix summo dolorem blandit an. Nisl patrioque quo ad. Ut duo augue paulo, fabulas sapientem ne mea, ut duo detraxit salutandi definiebas. Pro at unum petentium, meliore consetetur has in, et mutat percipit vim. In eruditi fabellas vis, ex eruditi legimus necessitatibus quo. Eos in alterum ceteros adipiscing, te accumsan pertinacia instructior ius. pro at justo commune copiosae At ipsum scripta efficiantur nec. Perpetua vituperata quaerendum vix ne, pri ne veri liber apeirian. Vidisse lucilius facilisi ei vix, vim ei quod esse atqui, error placerat molestiae eam cu. Denique albucius quo ad, eos eu malis assum. Lorem ipsum dicta2013-02-07 no his fierent Lorem ipsum 2013-02-07 At malis laoreet his. Ex vix prima primis, ne qui iudico alienum. Te enim iriure fuisset eos, ei mei nihil saepe soleat, has alienum postulant in. Quem accusamus constituam qui ea, id dolorum expetendis per. Vis in ferri quaeque. Suscipit phaedrum vulputate cum eu. Usu te dolor sit amet quot ignota timeam, ex sed magna nusquam, ex eum esse omnis. dolor sit amet Sit qualisque hendrerit te, ne sit torquatos interpretaris. Sit qualisque hendrerit te, ne sit torquatos interpretaris. Ius graece option legimus an, vix summo dolorem blandit Ius graece option legimus an, vix summo dolorem blandit EURIPIDIS an. Nisl patrioque quo ad. Ut duo augue paulo, fabulas an. Nisl patrioque quo ad. Ut duo augue paulo, fabulas sapientem ne mea, ut duo detraxit salutandi definiebas. sapientem ne mea, ut duo detraxit salutandi definiebas. Pro at unum petentium, meliore consetetur has in, et Pro at unum petentium, meliore consetetur has in, et mutat percipit vim. In eruditi fabellas vis, ex eruditi legimus mutat percipit vim. In eruditi fabellas vis, ex eruditi legimus necessitatibus quo. Eos in alterum ceteros adipiscing, te necessitatibus quo. Eos in alterum ceteros adipiscing, te accumsan pertinacia instructior ius. accumsan pertinacia instructior ius. pro at justo commune copiosae pro at justo commune copiosae At ipsum scripta efficiantur nec. Perpetua vituperata quaerendum vix ne, pri ne veri liber At ipsum scripta efficiantur nec. Perpetua vituperata quaerendum vix ne, pri ne veri liber apeirian. Vidisse lucilius facilisi ei vix, vim ei quod esse atqui, error placerat molestiae eam apeirian. Vidisse lucilius facilisi ei vix, vim ei quod esse atqui, error placerat molestiae eam cu. Denique albucius quo ad, eos eu malis assum. cu. Denique albucius quo ad, eos eu malis assum. dicta fierent no his dicta fierent no his At malis laoreet his. Ex vix prima primis, ne qui iudico alienum. Te enim iriure fuisset eos, ei At malis laoreet his. Ex vix prima primis, ne qui iudico alienum. Te enim iriure fuisset eos, ei mei nihil saepe soleat, has alienum postulant in. Quem accusamus constituam qui ea, id mei nihil saepe soleat, has alienum postulant in. Quem accusamus constituam qui ea, id dolorum expetendis per. Vis in ferri quaeque. Suscipit phaedrum vulputate cum eu. Usu te dolorum expetendis per. Vis in ferri quaeque. Suscipit phaedrum vulputate cum eu. Usu te quot ignota timeam, ex sed magna nusquam, ex eum esse omnis. quot ignota timeam, ex sed magna nusquam, ex eum esse omnis. EURIPIDIS EURIPIDIS 13年2月5日火曜日

23. 曖昧になっていた原因を逆に考えると… 13年2月5日火曜日

24. コントラストが足らない >>> コントラストを強くする色数が多い >>>>>>>>>>>>>> 色数を減らす色がまぶしい >>>>>>>>>>>> まぶしさを抑える 13年2月5日火曜日

25. 配色が曖昧にならないようにする色が眩しすぎないようにする 13年2月5日火曜日

26. だが、目で見てそれを判別するのは難しい 13年2月5日火曜日

27. 色を数値で考えれば解決できます 13年2月5日火曜日

28. これを実践するためにちょっとだけ色について詳しくなりましょう 13年2月5日火曜日

29. 色の３要素 13年2月5日火曜日

30. それは「色相」「彩度」「明度」 13年2月5日火曜日

31. 無限にも思える「色」ですが、このたった3つの要素で全て表現できます 13年2月5日火曜日

32. 【色相】hue 【彩度】saturation 【明度】value 13年2月5日火曜日

33. 色相とは 13年2月5日火曜日

34. ０【色相】hue ０ ∼360 であらわします 180 13年2月5日火曜日

35. 彩度とは 13年2月5日火曜日

36. 【彩度】saturation ０%∼100%であらわします０% 100% 13年2月5日火曜日

37. 明度とは 13年2月5日火曜日

38. 【明度】value ０%∼100%であらわします０% 100% 13年2月5日火曜日

39. 「色相・彩度・明度」のコントロール 13年2月5日火曜日

40. 様々な色の選択方法がありますが… 13年2月5日火曜日

41. 様々な色の選択方法がありますが… HSV 13年2月5日火曜日

42. 色を人に伝えるような感覚です 13年2月5日火曜日

43. 赤くて、主張が強すぎず、暗め 13年2月5日火曜日

44. H：0 S：60％ V：40％ 13年2月5日火曜日

45. もうちょっと明るくしたい 13年2月5日火曜日

46. H：0 H：0 S：60％ S：60％ V：40％ V：60％ 13年2月5日火曜日

47. 地味すぎるので派手にしたい 13年2月5日火曜日

48. H：0 H：0 H：0 S：60％ S：60％ S：90％ V：40％ V：60％ V：60％ 13年2月5日火曜日

49. その赤を青にかえたい 13年2月5日火曜日

50. H：0 H：0 H：0 H：200 S：60％ S：60％ S：90％ S：90％ V：40％ V：60％ V：60％ V：60％ 13年2月5日火曜日

51. 青を緑にかえたい 13年2月5日火曜日

52. H：0 H：0 H：0 H：200 H：150 S：60％ S：60％ S：90％ S：90％ S：90％ V：40％ V：60％ V：60％ V：60％ V：60％ 13年2月5日火曜日

53. 組み合わせ例 13年2月5日火曜日

56. H：200 H：200 H：200 S：80％ S：80％ S：80％ V：30％ V：60％ V：90％ 13年2月5日火曜日

57. この選択方法はパレットから選ぶのとは違い数値で色を管理できるので曖昧になりにくいです曖昧になりやすい曖昧になりにくい 13年2月5日火曜日

58. 色の3要素を使った配色方法 13年2月5日火曜日

59. 同一調和と対比調和という配色方法を使います 13年2月5日火曜日

60. 難しそうに聞こえますが「色相・彩度・明度」で考えれば大丈夫です 13年2月5日火曜日

61. Lorem ipsum 2013-02-07 H：200 S：80％ dolor sit amet V：30％ Sit qualisque hendrerit te, ne sit torquatos interpretaris. Ius graece option legimus an, vix summo dolorem blandit an. Nisl patrioque quo ad. Ut duo augue paulo, fabulas H：200 sapientem ne mea, ut duo detraxit salutandi definiebas. Pro at unum petentium, meliore consetetur has in, et S：80％ mutat percipit vim. In eruditi fabellas vis, ex eruditi legimus necessitatibus quo. Eos in alterum ceteros adipiscing, te V：60％ accumsan pertinacia instructior ius. pro at justo commune copiosae H：0 At ipsum scripta efficiantur nec. Perpetua vituperata quaerendum vix ne, pri ne veri liber apeirian. Vidisse lucilius facilisi ei vix, vim ei quod esse atqui, error placerat molestiae eam S：0％ cu. Denique albucius quo ad, eos eu malis assum. V：100％ dicta fierent no his At malis laoreet his. Ex vix prima primis, ne qui iudico alienum. Te enim iriure fuisset eos, ei mei nihil saepe soleat, has alienum postulant in. Quem accusamus constituam qui ea, id H：20 dolorum expetendis per. Vis in ferri quaeque. Suscipit phaedrum vulputate cum eu. Usu te quot ignota timeam, ex sed magna nusquam, ex eum esse omnis. S：100％ EURIPIDIS V：100％ 13年2月5日火曜日

62. 同一調和とは？ 13年2月5日火曜日

63. 色相を固定して明度を変化させる配色方法 H：200 H：200 H：200 S：80％ S：80％ S：80％ V：30％ V：60％ V：90％ 13年2月5日火曜日

64. 対比調和とは？ 13年2月5日火曜日

65. メインで選んだ色から遠い色を選択する配色方法（いわゆる補色） 20 H：200 H：20 S：80％ S：80％ 200 V：90％ V：90％色相（H）は全部で360 なので、180 反対側が一番遠い 13年2月5日火曜日

66. 同一調和と対比調和を組み合わせる場合の面積バランス 13年2月5日火曜日

67. 色の面積に注意 13年2月5日火曜日

69. 背景の白同一調和対比調和 H：0 + H：200 H：200 + H：20 S：0％ S：80％ S：80％ S：80％ V：100％ V：30％ V：60％ V：90％ベースメインアクセント 13年2月5日火曜日

70. それぞれが均等だと、よくありません上のようなバランスがよい 13年2月5日火曜日

72. まとめると… ・白が一番面積が広い・メインとなる色を一色選ぶ・メインの薄い色を選ぶ・メインと一番遠い色を選ぶ（アクセント）・アクセントの面積は小さく 13年2月5日火曜日

73. エクセルのような表組みや組織図 13年2月5日火曜日

74. 表組み 13年2月5日火曜日

75. 色ナシ数値１数値１数値１数値１備考液晶テレビ 123,456 0.00 0.00 0.00 プラズマテレビ 14,984 0.00 0.00 0.00 液晶保護フィルム 15,988,959 0.00 0.00 0.00 テレビリモコン 5,646 0.00 0.00 0.00 テレビオプション 598 0.00 0.00 0.00 外付けハードディスク 416,559 0.00 0.00 0.00 ブルーレイ 526,878 0.00 0.00 0.00 DVD プレーヤー 1,355 0.00 0.00 0.00 ブルーレイプレーヤー 897,156 0.00 0.00 0.00 ポータブル DVD 123,456 0.00 0.00 0.00 携帯テレビ 14,984 0.00 0.00 0.00 モニタ・ディスプレイ 15,988,959 0.00 0.00 0.00 デジタルテレビ 5,646 0.00 0.00 0.00 地デジアンテナ 598 0.00 0.00 0.00 BS・CS アンテナ 416,559 0.00 0.00 0.00 テレビブースター 526,878 0.00 0.00 0.00 AV セレクター 1,355 0.00 0.00 0.00 プロジェクタ 897,156 0.00 0.00 0.00 プロジェクタスクリーン 123,456 0.00 0.00 0.00 HDD レコーダー 14,984 0.00 0.00 0.00 ビデオデッキ 15,988,959 0.00 0.00 0.00 13年2月5日火曜日

76. 失敗例数値１数値１数値１数値１備考液晶テレビ 123,456 0.00 0.00 0.00 プラズマテレビ 14,984 0.00 0.00 0.00 液晶保護フィルム 15,988,959 0.00 0.00 0.00 テレビリモコン 5,646 0.00 0.00 0.00 テレビオプション 598 0.00 0.00 0.00 外付けハードディスク 416,559 0.00 0.00 0.00 ブルーレイ 526,878 0.00 0.00 0.00 DVD プレーヤー 1,355 0.00 0.00 0.00 ブルーレイプレーヤー 897,156 0.00 0.00 0.00 ポータブル DVD 123,456 0.00 0.00 0.00 携帯テレビ 14,984 0.00 0.00 0.00 モニタ・ディスプレイ 15,988,959 0.00 0.00 0.00 デジタルテレビ 5,646 0.00 0.00 0.00 地デジアンテナ 598 0.00 0.00 0.00 BS・CS アンテナ 416,559 0.00 0.00 0.00 テレビブースター 526,878 0.00 0.00 0.00 AV セレクター 1,355 0.00 0.00 0.00 プロジェクタ 897,156 0.00 0.00 0.00 プロジェクタスクリーン 123,456 0.00 0.00 0.00 HDD レコーダー 14,984 0.00 0.00 0.00 ビデオデッキ 15,988,959 0.00 0.00 0.00 13年2月5日火曜日

77. 例１数値１数値１数値１数値１備考液晶テレビ 123,456 0.00 0.00 0.00 プラズマテレビ 14,984 0.00 0.00 0.00 液晶保護フィルム 15,988,959 0.00 0.00 0.00 テレビリモコン 5,646 0.00 0.00 0.00 テレビオプション 598 0.00 0.00 0.00 外付けハードディスク 416,559 0.00 0.00 0.00 ブルーレイ 526,878 0.00 0.00 0.00 DVD プレーヤー 1,355 0.00 0.00 0.00 ブルーレイプレーヤー 897,156 0.00 0.00 0.00 ポータブル DVD 123,456 0.00 0.00 0.00 携帯テレビ 14,984 0.00 0.00 0.00 モニタ・ディスプレイ 15,988,959 0.00 0.00 0.00 デジタルテレビ 5,646 0.00 0.00 0.00 地デジアンテナ 598 0.00 0.00 0.00 BS・CS アンテナ 416,559 0.00 0.00 0.00 テレビブースター 526,878 0.00 0.00 0.00 AV セレクター 1,355 0.00 0.00 0.00 プロジェクタ 897,156 0.00 0.00 0.00 プロジェクタスクリーン 123,456 0.00 0.00 0.00 HDD レコーダー 14,984 0.00 0.00 0.00 ビデオデッキ 15,988,959 0.00 0.00 0.00 13年2月5日火曜日

78. 例２数値１数値１数値１数値１備考液晶テレビ 123,456 0.00 0.00 0.00 プラズマテレビ 14,984 0.00 0.00 0.00 液晶保護フィルム 15,988,959 0.00 0.00 0.00 テレビリモコン 5,646 0.00 0.00 0.00 テレビオプション 598 0.00 0.00 0.00 外付けハードディスク 416,559 0.00 0.00 0.00 ブルーレイ 526,878 0.00 0.00 0.00 DVD プレーヤー 1,355 0.00 0.00 0.00 ブルーレイプレーヤー 897,156 0.00 0.00 0.00 ポータブル DVD 123,456 0.00 0.00 0.00 携帯テレビ 14,984 0.00 0.00 0.00 モニタ・ディスプレイ 15,988,959 0.00 0.00 0.00 デジタルテレビ 5,646 0.00 0.00 0.00 地デジアンテナ 598 0.00 0.00 0.00 BS・CS アンテナ 416,559 0.00 0.00 0.00 テレビブースター 526,878 0.00 0.00 0.00 AV セレクター 1,355 0.00 0.00 0.00 プロジェクタ 897,156 0.00 0.00 0.00 プロジェクタスクリーン 123,456 0.00 0.00 0.00 HDD レコーダー 14,984 0.00 0.00 0.00 ビデオデッキ 15,988,959 0.00 0.00 0.00 13年2月5日火曜日

79. 例３数値１数値１数値１数値１備考液晶テレビ 123,456 0.00 0.00 0.00 プラズマテレビ 14,984 0.00 0.00 0.00 液晶保護フィルム 15,988,959 0.00 0.00 0.00 テレビリモコン 5,646 0.00 0.00 0.00 テレビオプション 598 0.00 0.00 0.00 外付けハードディスク 416,559 0.00 0.00 0.00 ブルーレイ 526,878 0.00 0.00 0.00 DVD プレーヤー 1,355 0.00 0.00 0.00 ブルーレイプレーヤー 897,156 0.00 0.00 0.00 ポータブル DVD 123,456 0.00 0.00 0.00 携帯テレビ 14,984 0.00 0.00 0.00 モニタ・ディスプレイ 15,988,959 0.00 0.00 0.00 デジタルテレビ 5,646 0.00 0.00 0.00 地デジアンテナ 598 0.00 0.00 0.00 BS・CS アンテナ 416,559 0.00 0.00 0.00 テレビブースター 526,878 0.00 0.00 0.00 AV セレクター 1,355 0.00 0.00 0.00 プロジェクタ 897,156 0.00 0.00 0.00 プロジェクタスクリーン 123,456 0.00 0.00 0.00 HDD レコーダー 14,984 0.00 0.00 0.00 ビデオデッキ 15,988,959 0.00 0.00 0.00 13年2月5日火曜日

80. 失敗例例１例２例３ H：305 H：300 H：210 H：162 S：100％ S：50％ S：50％ S：32％ V：60％ V：40％ V：83％ V：73％ H：305 H：300 H：210 H：162 S：50％ S：5％ S：5％ S：5％ V：100％ V：95％ V：95％ V：90％ H：0 H：0 H：0 H：0 S：0％ S：0％ S：0％ S：0％ V：20％ V：80％ V：80％ V：80％ 13年2月5日火曜日

81. 表組み 13年2月5日火曜日

82. ○○○1 課 ○○○事業所第 ○○○部一監 ○○○2 課 ○○○事業所事査業役本 ○○○事業所部 ○○○事業所 △△△1 課 ○○○事業所 △△△2 課第株取二 △△△部 ○○○事業所主締社常事 △△△3 課総役長務業会会本 △△△部 ○○○事業所部 △△△4 課 ○○○事業所 △△△5 課 ○○○事業所総務部 △△△1 課管 ○○○事業所理財務経理部本 △△△2 課 ○○○事業所部事業管理部 △△△3 課 ○○○事業所 13年2月5日火曜日

83. 失敗例 ○○○1 課 ○○○事業所第 ○○○部一監 ○○○2 課 ○○○事業所事査業役本 ○○○事業所部 ○○○事業所 △△△1 課 ○○○事業所 △△△2 課第株取二 △△△部 ○○○事業所主締社常事 △△△3 課総役長務業会会本 △△△部 ○○○事業所部 △△△4 課 ○○○事業所 △△△5 課 ○○○事業所総務部 △△△1 課管 ○○○事業所理財務経理部本 △△△2 課 ○○○事業所部事業管理部 △△△3 課 ○○○事業所 13年2月5日火曜日

84. 例１ ○○○1 課 ○○○事業所第 ○○○部一監 ○○○2 課 ○○○事業所事査業役本 ○○○事業所部 ○○○事業所 △△△1 課 ○○○事業所 △△△2 課第株取二 △△△部 ○○○事業所主締社常事 △△△3 課総役長務業会会本 △△△部 ○○○事業所部 △△△4 課 ○○○事業所 △△△5 課 ○○○事業所総務部 △△△1 課管 ○○○事業所理財務経理部本 △△△2 課 ○○○事業所部事業管理部 △△△3 課 ○○○事業所 13年2月5日火曜日

85. 例２ ○○○1 課 ○○○事業所第 ○○○部一監 ○○○2 課 ○○○事業所事査業役本 ○○○事業所部 ○○○事業所 △△△1 課 ○○○事業所 △△△2 課第株取二 △△△部 ○○○事業所主締社常事 △△△3 課総役長務業会会本 △△△部 ○○○事業所部 △△△4 課 ○○○事業所 △△△5 課 ○○○事業所総務部 △△△1 課管 ○○○事業所理財務経理部本 △△△2 課 ○○○事業所部事業管理部 △△△3 課 ○○○事業所 13年2月5日火曜日

86. 失敗例例１例２ H：220 H：210 H：210 H：210 S：70％ S：15％ S：60％ S：15％ V：100％ V：85％ V：30％ V：85％ H：185 H：160 H：160 H：160 S：70％ S：15％ S：60％ S：15％ V：100％ V：85％ V：30％ V：85％ H：50 H：50 H：50 S：15％ S：60％ S：15％ V：85％ V：30％ V：85％ H：270 S：15％ V：85％ V：85％ V：85％ 13年2月5日火曜日

87. 色を作るツールの紹介 13年2月5日火曜日

88. 実はMicrosoft Oﬃce標準のツールでは「色相・彩度・明度」の方法で色を選べません 13年2月5日火曜日

89. FE - Color Palette 色相・彩度・明度（HSV）で色を選択することができます www.ﬁeldeast.com/soft/ 13年2月5日火曜日

90. 使い方 13年2月5日火曜日

91. 【色相】hue 【彩度】saturation 【明度】value H S V 0 ∼360 0%∼100% 0%∼100% 13年2月5日火曜日

92. FE - Color Palette Microsoft Oﬃce標準 13年2月5日火曜日

93. ありがとうございました 13年2月5日火曜日

【Schoo web campus】色を変えれば、その資料はもっと伝わる

Recommended

More Related Content

Viewers also liked (15)

More from schoowebcampus (20)

Recently uploaded (9)

【Schoo web campus】色を変えれば、その資料はもっと伝わる