SlideShare a Scribd company logo
1 of 47
Download to read offline
HOW TO
   め
                        ma
              Aoi Ebinu




理 詰                          →→→色彩編




スラ
Tuesday, April 23, 13
で す。
                        重要          ま す。    とも
                      も          めし
                て と て
                               すす けでは    ない
             おい             をお るわ
          作に      、      ター くな
     印 象操     場 合
                     ィ ネー うま                とり
 色 は       たい     ーデ 使いが                 図の
       知り      ーコ                     、構
 正 確に       カラ      ら色             使い
        定 、      たか             る色
    彩検        おえ              使え
  色        強し              ら、
       、勉               なが
   ただ      。        混ぜ     す。
        ます       例を     いま
    思 い       具体     と思
         で は、     たい
     こ こ      いき
           って
      方 をや




Tuesday, April 23, 13
色の組み合わせ
                        色の使い方




                                色の意味




Tuesday, April 23, 13
色の組み合わせ
                        色の使い方




                                色の意味




Tuesday, April 23, 13
色の使い方




                                これがイイタイコトです。




Tuesday, April 23, 13
色の使い方




                 目次の色と帯の色を一致させることで、
                         イメージを喚起することができる。
                         色はイメージの補強を行います。




Tuesday, April 23, 13
色の使い方


                         伝えたいことがあるときには、
           補色(次ページで説明)をつかうと効果的。
                        ただ同じ明るさの色で補色を使うと
                        目がチカチカしますね。
                         これをハレーションと言います。
                          同じ強さの主張でどっちが
                         伝えたいことかわかりません!

Tuesday, April 23, 13
Mancell Color Circle(マンセル色相環)




                                             補色はそれぞれの180 の
                                             位置にある色を示します。
                                             混ぜると黒・灰色・白の
                                            彩度をもたない色になります。




Tuesday, April 23, 13
色の使い方



                           イメージを連想させる。
                            何かを際立たせたる。
                             誤った印象を防ぐ。
                          洗練されたスライドを作る。


                         必要なのは、色の経験です。

                          知識はいりません。
Tuesday, April 23, 13
色の組み合わせ
                        色の使い方




                                色の意味




Tuesday, April 23, 13
色の意味



                                作 で
                         象 操
                    印             に
                           き    手
                         聞          チ
                                 ロー
Tuesday, April 23, 13
                               プ
色の意味




             この色の理由は??
                 色にはそれぞれのイメージがある。
               プレゼンのイメージにあう色彩をえらぼう!


Tuesday, April 23, 13
Navy
                        【濃紺】:大人・落ち着き・誠実・消極性 

                        【Word】:    荒れた大海




Tuesday, April 23, 13
Ultra
                        Marine
                        【群青】:   爽快・快活・元気・好感

                        【Word】:    澄み切った青空




Tuesday, April 23, 13
Sky Blue
                         【水色】:華やか・晴れ・眩しさ・明るさ

                         【Word】:    南国




Tuesday, April 23, 13
Green
            【緑】:   自然・安らぎ・中性 

            【Word】:    森林




Tuesday, April 23, 13
Yellowish
  Green
            【黄緑】:  生命・始まり・春 

            【Word】:    芽吹いた若葉




Tuesday, April 23, 13
Yellow
        【黄】:  喜び・興奮・注意・知性

        【Word】:    もぎたてレモン




Tuesday, April 23, 13
Orange         【オレンジ】:太陽・自由・開放・陽気

                        【Word】:    新鮮オレンジ
Tuesday, April 23, 13
Pink
                        【ピンク】:女性らしさ・控えめ・かよわい・かわいい

                        【Word】:    純愛   
Tuesday, April 23, 13
Red
                         【赤】:情熱・活発・攻撃・刺激・勝負

                        【Word】:    キャンプファイヤー     
Tuesday, April 23, 13
Shocking
                          Pink

                        【蛍光ピンク】:性的・快活・子供・刺激

                          【Word】:    エロ




Tuesday, April 23, 13
Purple
                        【紫】:高貴・下品・二面性・欲

                        【Word】:    古代の神秘




Tuesday, April 23, 13
Black
                         【黒】:   重さ・吸収・機能美・調和・安定 

                         【Word】:    未知の不吉




Tuesday, April 23, 13
White
                         【白】:   純白・清純・無垢・平和・清潔

                         【Word】:    雪 




Tuesday, April 23, 13
Appropriate
                        それぞれの色のイメージを連想して、適切な配色を使えれば、
                               印象的なプレゼン作れます。




Tuesday, April 23, 13
色の組み合わせ
                        色の使い方




                                色の意味




Tuesday, April 23, 13
色の組み合わせ




                         配色のルール


Tuesday, April 23, 13
色の組み合わせ




             ひとつ、明度
             ふたつ、彩度
                                  を整える。

Tuesday, April 23, 13
明度




             まずは、明度
                             を知る。




Tuesday, April 23, 13
明度




             まずは、明度
                                             い
                                            か
                              量が多いほど、明度は    た
        明度は、白の絵の具の量。

                             量が少ないほど、明度は   ひく
                                             い
Tuesday, April 23, 13
明度




             まずは、明度
  高
             まずは、明度          低



             まずは、明度
Tuesday, April 23, 13
彩度




         つぎに、彩度
                             を知る。




Tuesday, April 23, 13
彩度




             つぎに、彩度
                             彩度は、色の鮮やかさのことをいう。


       彩度が0とは灰色に近づいていくなどの、色彩にメリハリがなくなっていくことです。


                               上は彩度が整っています。




Tuesday, April 23, 13
彩度




             つぎに、彩度
             つぎに、彩度
             つぎに、彩度
                             これは彩度がある状態。
Tuesday, April 23, 13
彩度




             つぎに、彩度
             つぎに、彩度
             つぎに、彩度
                             これは彩度がない状態。
Tuesday, April 23, 13
配色のルール




                         配色のルール
                   色カラーさんのWeb Site がおすすめ。
                       http://iro-color.com/
                   色見本でイメージに合った構図を作ろう。


Tuesday, April 23, 13
色の組み合わせ




                         配色のルール


                           あ 。
Tuesday, April 23, 13
色の組み合わせ



                           後 に
                         最      】
                              象
                         配色のルール
                            印
                          【    ー ル
                           の ル
Tuesday, April 23, 13
印象のルール




                                      =
                                          !
  メインの色面積                        色数       印象



Tuesday, April 23, 13
印象のルール


                                      快活・子供




            第一印象                       =
                                           !
  メインの色面積                        色数           印象
  ※面積には文字も含まれます



                                 0 落ち着き・大人
Tuesday, April 23, 13
ためしに、




    Theme :TGIF
Tuesday, April 23, 13
華金。




                        Thank God. It’s Friday.


Tuesday, April 23, 13
華金。

                        白をメインにモダンで洗練
                         された配色、色の面積。

                           Thank God. It’s Friday.


Tuesday, April 23, 13
om n t o
                        M e
                         mor i
Tuesday, April 23, 13
5色以上の配色、彩度が高く陽気な色使い
       で、wiki の写真がparty nightに変わる。


                         om n t o
                        M e
                         mor i
Tuesday, April 23, 13
印象のルール



                             色は試行錯誤。




                         作った分だけ
                         うまくなる。
                                       責任は取れませんが。


Tuesday, April 23, 13

More Related Content

What's hot

つたわるスライド
つたわるスライドつたわるスライド
つたわるスライドKazuyoshi Goto
 
サイバーエージェントにおける計算社会科学
サイバーエージェントにおける計算社会科学サイバーエージェントにおける計算社会科学
サイバーエージェントにおける計算社会科学Masanori Takano
 
伝えたいことを一瞬で伝えるスライド作成講座プラス
伝えたいことを一瞬で伝えるスライド作成講座プラス伝えたいことを一瞬で伝えるスライド作成講座プラス
伝えたいことを一瞬で伝えるスライド作成講座プラスTakashi Fujimoto
 
Webデザインのための配色セオリー
Webデザインのための配色セオリーWebデザインのための配色セオリー
Webデザインのための配色セオリーwebcampusschoo
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !Naoki Kanazawa
 
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方MOCKS | Yuta Morishige
 
伝わるプレゼンをする方法
伝わるプレゼンをする方法伝わるプレゼンをする方法
伝わるプレゼンをする方法Hideaki Miyake
 
はじめての欧文書体
はじめての欧文書体はじめての欧文書体
はじめての欧文書体Shohei Itoh
 
新卒社会人の仕事術20160210 sapporo
新卒社会人の仕事術20160210 sapporo新卒社会人の仕事術20160210 sapporo
新卒社会人の仕事術20160210 sapporoTsuyoshi Ohta
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインRoy Kim
 
フーリエ変換を用いたテクスチャ解像度推定とその応用
フーリエ変換を用いたテクスチャ解像度推定とその応用フーリエ変換を用いたテクスチャ解像度推定とその応用
フーリエ変換を用いたテクスチャ解像度推定とその応用Hajime Uchimura
 
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなすUnity Technologies Japan K.K.
 
リアルタイムレンダリングでのマテリアル表現
リアルタイムレンダリングでのマテリアル表現リアルタイムレンダリングでのマテリアル表現
リアルタイムレンダリングでのマテリアル表現kurosaurus
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】MOCKS | Yuta Morishige
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomCliptakaaya
 
プログラミングコンテストでのデータ構造 2 ~動的木編~
プログラミングコンテストでのデータ構造 2 ~動的木編~プログラミングコンテストでのデータ構造 2 ~動的木編~
プログラミングコンテストでのデータ構造 2 ~動的木編~Takuya Akiba
 

What's hot (20)

つたわるスライド
つたわるスライドつたわるスライド
つたわるスライド
 
サイバーエージェントにおける計算社会科学
サイバーエージェントにおける計算社会科学サイバーエージェントにおける計算社会科学
サイバーエージェントにおける計算社会科学
 
伝えたいことを一瞬で伝えるスライド作成講座プラス
伝えたいことを一瞬で伝えるスライド作成講座プラス伝えたいことを一瞬で伝えるスライド作成講座プラス
伝えたいことを一瞬で伝えるスライド作成講座プラス
 
Webデザインのための配色セオリー
Webデザインのための配色セオリーWebデザインのための配色セオリー
Webデザインのための配色セオリー
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
 
超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方超簡単でハイセンスな表紙スライドの作り方
超簡単でハイセンスな表紙スライドの作り方
 
伝わるプレゼンをする方法
伝わるプレゼンをする方法伝わるプレゼンをする方法
伝わるプレゼンをする方法
 
はじめての欧文書体
はじめての欧文書体はじめての欧文書体
はじめての欧文書体
 
新卒社会人の仕事術20160210 sapporo
新卒社会人の仕事術20160210 sapporo新卒社会人の仕事術20160210 sapporo
新卒社会人の仕事術20160210 sapporo
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
フーリエ変換を用いたテクスチャ解像度推定とその応用
フーリエ変換を用いたテクスチャ解像度推定とその応用フーリエ変換を用いたテクスチャ解像度推定とその応用
フーリエ変換を用いたテクスチャ解像度推定とその応用
 
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
【Unity道場スペシャル 2017博多】TextMesh Pro を使いこなす
 
全域木いろいろ
全域木いろいろ全域木いろいろ
全域木いろいろ
 
リアルタイムレンダリングでのマテリアル表現
リアルタイムレンダリングでのマテリアル表現リアルタイムレンダリングでのマテリアル表現
リアルタイムレンダリングでのマテリアル表現
 
ARC#003D
ARC#003DARC#003D
ARC#003D
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
 
プログラミングコンテストでのデータ構造 2 ~動的木編~
プログラミングコンテストでのデータ構造 2 ~動的木編~プログラミングコンテストでのデータ構造 2 ~動的木編~
プログラミングコンテストでのデータ構造 2 ~動的木編~
 
画像処理(二値化)
画像処理(二値化)画像処理(二値化)
画像処理(二値化)
 

理詰めスライド(色彩編)

  • 1. HOW TO め ma Aoi Ebinu 理 詰 →→→色彩編 スラ Tuesday, April 23, 13
  • 2. で す。 重要 ま す。 とも も めし て と て すす けでは ない おい をお るわ 作に 、 ター くな 印 象操 場 合 ィ ネー うま とり 色 は たい ーデ 使いが 図の 知り ーコ 、構 正 確に カラ ら色 使い 定 、 たか る色 彩検 おえ 使え 色 強し ら、 、勉 なが ただ 。 混ぜ す。 ます 例を いま 思 い 具体 と思 で は、 たい こ こ いき って 方 をや Tuesday, April 23, 13
  • 3. 色の組み合わせ 色の使い方 色の意味 Tuesday, April 23, 13
  • 4. 色の組み合わせ 色の使い方 色の意味 Tuesday, April 23, 13
  • 5. 色の使い方 これがイイタイコトです。 Tuesday, April 23, 13
  • 6. 色の使い方 目次の色と帯の色を一致させることで、 イメージを喚起することができる。 色はイメージの補強を行います。 Tuesday, April 23, 13
  • 7. 色の使い方 伝えたいことがあるときには、 補色(次ページで説明)をつかうと効果的。 ただ同じ明るさの色で補色を使うと 目がチカチカしますね。 これをハレーションと言います。 同じ強さの主張でどっちが 伝えたいことかわかりません! Tuesday, April 23, 13
  • 8. Mancell Color Circle(マンセル色相環) 補色はそれぞれの180 の 位置にある色を示します。 混ぜると黒・灰色・白の 彩度をもたない色になります。 Tuesday, April 23, 13
  • 9. 色の使い方 イメージを連想させる。 何かを際立たせたる。 誤った印象を防ぐ。 洗練されたスライドを作る。 必要なのは、色の経験です。 知識はいりません。 Tuesday, April 23, 13
  • 10. 色の組み合わせ 色の使い方 色の意味 Tuesday, April 23, 13
  • 11. 色の意味 作 で 象 操 印 に き 手 聞 チ ロー Tuesday, April 23, 13 プ
  • 12. 色の意味 この色の理由は?? 色にはそれぞれのイメージがある。 プレゼンのイメージにあう色彩をえらぼう! Tuesday, April 23, 13
  • 13. Navy 【濃紺】:大人・落ち着き・誠実・消極性  【Word】:    荒れた大海 Tuesday, April 23, 13
  • 14. Ultra Marine 【群青】:   爽快・快活・元気・好感 【Word】:    澄み切った青空 Tuesday, April 23, 13
  • 15. Sky Blue 【水色】:華やか・晴れ・眩しさ・明るさ 【Word】:    南国 Tuesday, April 23, 13
  • 16. Green 【緑】:   自然・安らぎ・中性  【Word】:    森林 Tuesday, April 23, 13
  • 17. Yellowish Green 【黄緑】:  生命・始まり・春  【Word】:    芽吹いた若葉 Tuesday, April 23, 13
  • 18. Yellow 【黄】:  喜び・興奮・注意・知性 【Word】:    もぎたてレモン Tuesday, April 23, 13
  • 19. Orange 【オレンジ】:太陽・自由・開放・陽気 【Word】:    新鮮オレンジ Tuesday, April 23, 13
  • 20. Pink 【ピンク】:女性らしさ・控えめ・かよわい・かわいい 【Word】:    純愛    Tuesday, April 23, 13
  • 21. Red 【赤】:情熱・活発・攻撃・刺激・勝負 【Word】:    キャンプファイヤー      Tuesday, April 23, 13
  • 22. Shocking Pink 【蛍光ピンク】:性的・快活・子供・刺激 【Word】:    エロ Tuesday, April 23, 13
  • 23. Purple 【紫】:高貴・下品・二面性・欲 【Word】:    古代の神秘 Tuesday, April 23, 13
  • 24. Black 【黒】:   重さ・吸収・機能美・調和・安定  【Word】:    未知の不吉 Tuesday, April 23, 13
  • 25. White 【白】:   純白・清純・無垢・平和・清潔 【Word】:    雪  Tuesday, April 23, 13
  • 26. Appropriate それぞれの色のイメージを連想して、適切な配色を使えれば、 印象的なプレゼン作れます。 Tuesday, April 23, 13
  • 27. 色の組み合わせ 色の使い方 色の意味 Tuesday, April 23, 13
  • 28. 色の組み合わせ 配色のルール Tuesday, April 23, 13
  • 29. 色の組み合わせ ひとつ、明度 ふたつ、彩度 を整える。 Tuesday, April 23, 13
  • 30. 明度 まずは、明度 を知る。 Tuesday, April 23, 13
  • 31. 明度 まずは、明度 い か 量が多いほど、明度は た 明度は、白の絵の具の量。 量が少ないほど、明度は ひく い Tuesday, April 23, 13
  • 32. 明度 まずは、明度 高 まずは、明度 低 まずは、明度 Tuesday, April 23, 13
  • 33. 彩度 つぎに、彩度 を知る。 Tuesday, April 23, 13
  • 34. 彩度 つぎに、彩度 彩度は、色の鮮やかさのことをいう。 彩度が0とは灰色に近づいていくなどの、色彩にメリハリがなくなっていくことです。 上は彩度が整っています。 Tuesday, April 23, 13
  • 35. 彩度 つぎに、彩度 つぎに、彩度 つぎに、彩度 これは彩度がある状態。 Tuesday, April 23, 13
  • 36. 彩度 つぎに、彩度 つぎに、彩度 つぎに、彩度 これは彩度がない状態。 Tuesday, April 23, 13
  • 37. 配色のルール 配色のルール 色カラーさんのWeb Site がおすすめ。 http://iro-color.com/ 色見本でイメージに合った構図を作ろう。 Tuesday, April 23, 13
  • 38. 色の組み合わせ 配色のルール あ 。 Tuesday, April 23, 13
  • 39. 色の組み合わせ 後 に 最 】 象 配色のルール 印 【 ー ル の ル Tuesday, April 23, 13
  • 40. 印象のルール = ! メインの色面積 色数 印象 Tuesday, April 23, 13
  • 41. 印象のルール 快活・子供 第一印象 = ! メインの色面積 色数 印象 ※面積には文字も含まれます 0 落ち着き・大人 Tuesday, April 23, 13
  • 42. ためしに、 Theme :TGIF Tuesday, April 23, 13
  • 43. 華金。 Thank God. It’s Friday. Tuesday, April 23, 13
  • 44. 華金。 白をメインにモダンで洗練 された配色、色の面積。 Thank God. It’s Friday. Tuesday, April 23, 13
  • 45. om n t o M e mor i Tuesday, April 23, 13
  • 46. 5色以上の配色、彩度が高く陽気な色使い で、wiki の写真がparty nightに変わる。 om n t o M e mor i Tuesday, April 23, 13
  • 47. 印象のルール 色は試行錯誤。 作った分だけ うまくなる。 責任は取れませんが。 Tuesday, April 23, 13