Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

配色を楽にするコミュニケーション

79,248 views

Published on

大阪・名古屋・東京で開催された出版テキ年セミナーのスライドを一部改変して公開します。

Published in: Design
  • Be the first to comment

配色を楽にするコミュニケーション

  1. 1. 配色を楽にするコミュニケーションフォルトゥナ 坂本邦夫
  2. 2. 自己紹介
  3. 3. 坂本邦夫• カラー&Webデザイン フォルトゥナ代表• Webデザイナー• カラーコンサルタント
  4. 4. Web制作・コンサルティング
  5. 5. 色に関する執筆 コンサルなど
  6. 6. ウェブ配色 決める! チカラ問題を解決する色彩とコミュニケーション特別価格です! 入口付近で販売中!
  7. 7. さて本編に行きましょう
  8. 8. Web制作での色の使いどころ
  9. 9. Webの制作から公開の流れ• ヒアリング• 企画• ワイヤーフレーム• カンプ作成・作り込み• 公開後の運用
  10. 10. 配色はデザイナーの仕事
  11. 11. デザイナーだけじゃないよねクライアント ディレクター デザイナー 営業
  12. 12. 社内だとこうディレクター デザイナー営業
  13. 13. この人一番大事じゃないの?ディレクター営業
  14. 14. ヒアリング時の注意
  15. 15. こんなブログがありましたクライアントよ、お前の依頼の大変さを思い知れ!これがデザイナーにとっての「デザイン修正」だ!
  16. 16. ないわ∼
  17. 17. とか言いたくなりますが言うことを聞く方が問題
  18. 18. なん とあまり配色を知らなくても少しの努力で楽はできます
  19. 19. 「学問に王道なし」と昔の偉い人は言いました
  20. 20. ではどうすればいいのか?
  21. 21. 抽象的な言葉• すっきりとした感じで• 緑とか青を使って• 暖かみを感じさせる色で ...etc
  22. 22. ここで出てくる疑問• すっきりってどんな色を?• 緑なの?青なの?• 暖色はわかるけど、赤・オレンジ?
  23. 23. 漠然としすぎで色が絞り込まれていない
  24. 24. 最近聞いたのは綺麗で清潔感があり斬新なイメージが希望です
  25. 25. で、誰が色を絞り込むの?
  26. 26. デザイナーの私ですか 丸投げですよね そうですか・・・
  27. 27. 無意味に孤独な戦い
  28. 28. そこで演習
  29. 29. 演習1あなたの好きな色を1色教えてください周囲の人にも聞いてみてください。
  30. 30. 演習2今選んだ色を具体的なものに例えて説明できますか?またその色から連想される他のものはありますか? 良いイメージと悪いイメージの両方を考えてみましょう。
  31. 31. 抽象的な色の指示が来たら• 具体的な色が連想できるまで、 何の色か聞いてみる• その色のよい面と悪い面の両方を考え、 デメリットがあれば避けることを勧める• 得た情報は共有して文書かメールか みんなが見れるところに置いておく
  32. 32. よい配色は• その色を選んだ合理的な理由がある• 気分によって変わらない• 否定材料をはねのける力がある
  33. 33. 制作側からの提案も大事でもクライアントの想いがどれくらいあるのかを知ろう
  34. 34. 悩んでいるうちはデザイナーを動かさない
  35. 35. 聞いた情報は全てデザイナーに!!
  36. 36. 制作時の話に移ります
  37. 37. デザインが上がってきたよ• 色の基本知識がなくても、 重要な情報が読めるかどうかくらいは 十分に判断できる• 目立たせたい部分が目立っているか、 見出しがちゃんと読めるかが重要
  38. 38. 最低限の配色の知識でもう少し分析できるかも
  39. 39. 最低限読みやすくする• 文字と背景のコントラストをチェック• 読めない文字なんて、配置するだけ無駄• モノクロでプリントアウトすると わかりやすい
  40. 40. 最低限読みやすくする
  41. 41. 最低限読みやすくする
  42. 42. 目立っている事と見やすいことは別
  43. 43. 私が一番使うのは• カラー・コントラスト・アナライザー (Windows版・Mac版)職業はスパマーです職業はスパマーです職業はスパマーです職業はスパマーです
  44. 44. このツールを使うと• 背景と文字のコントラスト比を 計算できる• 白と黒の組み合わせは   21:1 同じ色同士の組み合わせは  1:1• 最低でも 4.5:1 、できれば 6:1 以上 理想は 7:1 以上
  45. 45. 基本の配色を見る
  46. 46. 補色配色• 色相環の正反対の 位置にある色同士の 配色
  47. 47. トーンオントーン配色• 比較的明度差のある 同系色の配色
  48. 48. ドミナントトーン配色• トーンを揃えた配色
  49. 49. トリコロール配色• コントラストの強い 3色配色
  50. 50. セパレーション• ぼんやりしたり、鮮やか過ぎる配色を 引き締めたり和らげたりする• 色の分離はコンテンツを見せるのに重要
  51. 51. それ以外にもありますが これくらい知ってればある程度の判断はできます
  52. 52. 配色チェック• キーカラーを押さえること• 細部は気にせずに、 大事な部分が読めるかどうかを確認• 全体を見て、それから各パーツへ。 分けて考えるようにする
  53. 53. ここで次の演習
  54. 54. 演習3次のページを見て、キーカラーを探してみましょう。また使われている配色テクニックを探しだしましょう。 さえき矯正・小児歯科医院
  55. 55. まとめ
  56. 56. 細かく細かく聞く• 抽象的な言葉は使わない・使わせない• 色と物をセットで表現できるように• 読めない部分は最優先でつぶす• 配色はあくまで手段 目的が達成できるように 配色テクニックを利用する
  57. 57. 打ち合わせで15分頑張ればデザインは楽になります!
  58. 58. http:// www.facebook.com/ websitecolor https://twitter.com/ kunio_sakamoto ありがとうございましたCopyright © Kunio Sakamoto, Color & Web Design Fortuna. 58
  59. 59. ウェブ配色 決める! チカラ問題を解決する色彩とコミュニケーション特別価格です! 入口付近で販売中!

×