配色を楽にするコミュニケーション
- 2. 自己紹介
- 3. 坂本邦夫 • カラー&Webデザイン フォルトゥナ代表 • Webデザイナー • カラーコンサルタント
- 6. ウェブ配色 決める! チカラ 問題を解決する色彩と コミュニケーション 特別価格です！ 入口付近で販売中！
- 7. さて本編に行きましょう
- 9. Webの制作から公開の流れ • ヒアリング • 企画 • ワイヤーフレーム • カンプ作成・作り込み • 公開後の運用
- 10. 配色はデザイナーの仕事
- 11. デザイナーだけじゃないよね クライアント ディレクター デザイナー 営業
- 12. 社内だとこう ディレクター デザイナー 営業
- 14. ヒアリング時の注意
- 16. ないわ∼
- 20. ではどうすればいいのか？
- 21. 抽象的な言葉 • すっきりとした感じで • 緑とか青を使って • 暖かみを感じさせる色で ...etc
- 22. ここで出てくる疑問 • すっきりってどんな色を？ • 緑なの？青なの？ • 暖色はわかるけど、赤・オレンジ？
- 25. で、誰が色を絞り込むの？
- 26. デザイナーの私ですか 丸投げですよね そうですか・・・
- 27. 無意味に孤独な戦い
- 28. そこで演習
- 31. 抽象的な色の指示が来たら • 具体的な色が連想できるまで、 何の色か聞いてみる • その色のよい面と悪い面の両方を考え、 デメリットがあれば避けることを勧める • 得た情報は共有して文書かメールか みんなが見れるところに置いておく
- 32. よい配色は • その色を選んだ合理的な理由がある • 気分によって変わらない • 否定材料をはねのける力がある
- 36. 制作時の話に移ります
- 37. デザインが上がってきたよ • 色の基本知識がなくても、 重要な情報が読めるかどうかくらいは 十分に判断できる • 目立たせたい部分が目立っているか、 見出しがちゃんと読めるかが重要
- 39. 最低限読みやすくする • 文字と背景のコントラストをチェック • 読めない文字なんて、配置するだけ無駄 • モノクロでプリントアウトすると わかりやすい
- 40. 最低限読みやすくする
- 41. 最低限読みやすくする
- 44. このツールを使うと • 背景と文字のコントラスト比を 計算できる • 白と黒の組み合わせは 21:1 同じ色同士の組み合わせは 1:1 • 最低でも 4.5:1 、できれば 6:1 以上 理想は 7:1 以上
- 45. 基本の配色を見る
- 46. 補色配色 • 色相環の正反対の 位置にある色同士の 配色
- 50. セパレーション • ぼんやりしたり、鮮やか過ぎる配色を 引き締めたり和らげたりする • 色の分離はコンテンツを見せるのに重要
- 52. 配色チェック • キーカラーを押さえること • 細部は気にせずに、 大事な部分が読めるかどうかを確認 • 全体を見て、それから各パーツへ。 分けて考えるようにする
- 53. ここで次の演習
- 54. 演習3 次のページを見て、キーカラーを探してみ ましょう。 また使われている配色テクニックを探しだ しましょう。 さえき矯正・小児歯科医院
- 55. まとめ
- 56. 細かく細かく聞く • 抽象的な言葉は使わない・使わせない • 色と物をセットで表現できるように • 読めない部分は最優先でつぶす • 配色はあくまで手段 目的が達成できるように 配色テクニックを利用する
- 58. http:// www.facebook.com/ websitecolor https://twitter.com/ kunio_sakamoto ありがとうございました Copyright © Kunio Sakamoto, Color & Web Design Fortuna. 58
- 59. ウェブ配色 決める! チカラ 問題を解決する色彩と コミュニケーション 特別価格です！ 入口付近で販売中！