1ランク上を目指すためのWeb配色入門 に参加してきた #webcolor_tokyo

• 7月10日 1ランク上を目指すためのWeb配色入門(夜)（東京）(東京都)

Webの「色」のみをテーマとした、ピンポイントなセミナーを開催いたします。 
普段何気なく選んでいる色。しかし、見る方にとっては非常に印象に残りやすい要素でもあります。

「色」のことをじっくりと考える、そんな貴重に機会をご一緒に味わいましょう！

『Web配色』という、自分が普段参加している勉強会とは若干テーマの異なるものでしたが、内容を拝見するに興味深かったので＆Webに関わる要素であれば知っておいて損は無い知識であると思ったので参加してきました。

開催会場はKDDIウェブコミュニケーションズ　セミナールーム＠麹町。以前『アジャイルサムライ』著者ジョナサンのセミナー等でも時折訪れた場所ですね。

内容としては講習で2時間。昼バージョンでは講習プラス演習的なものも行われたようです(演習自体にも興味はあったが、昼間は仕事で都合付かなかったので断念)。以下ざっくりメモ。

本編

• 坂本 邦夫氏 (カラー&Webデザイン フォルトゥナ代表 カラーコンサルタント・Webデザイナー 日本色彩学会正会員)

• 自己紹介
  • 大阪在住。40年近く経ちます
  • 普段の業務は色の事、Web制作全般。
  • 色に関する執筆アリ。
  • bizyou.jp

• 当日の流れ
  • はじめに
  • サイトを見てみよう
  • 場面ごとに色を考える(ヒアリングから制作・運用まで)
  • まとめ

• • 当日参加者：デザイナが3〜4割、後はそれぞれ個別にパラパラと
  • デザイナが手を動かす前にしなきゃいけないことは多い。
  • ○○さんに全部任せます！→そんな人は滅多にいません
  • すごく気の難しい人もいます。適当な言葉は通じない。担当者レベルで／上に立つような人の場合出てこられると相当しんどい…
  • 『色』はひっくり返りやすい要素。好みもある。

• 配色で大事なこと
  • Webサイトの目的を汲み取り、それを達成させること：目的を外すと逃げられる場合もある。
  • 目的を汲み取っても、デザイナーにきちんと指示できなければ、工数が増えるだけ
  • とりあえず3案とか言わせない

• 聞くべき事を聞き、言うべき事を言う…これが出来ると、自然に色も決まります。
  • 色も無数にあるように思えるが、絞れてくる。

• 実サイトを見てみよう
  • 某美容専門学校
  • 某スマホ関連サイト
  • 某演劇興行劇場
  • いろいろな面から『色』を考えることが出来る。考える事は多そう…
  • でも、順番に見れば大丈夫。

• 場面毎に色を考える
• その前に…配色とは？
  • 色を決めることではなく、適切な場所に適切な色を配色すること

• 制作の大雑把な流れ
  • 一番はじめのどうしよう
    • クライアントの希望
    • 口頭ではわかりません
    • 抽象的な言葉を具体化する
  • 企画段階
    • 本当に色を変えていいの？
    • カラーブランディング
    • コカ・コーラ？
    • 色を統一させるもの
    • 競合サイトと違う色を使う
      • 競合を避けるというのは色を決めるための十分な根拠
    • 近所の競合サイト・気にするべき競合サイト
    • 競合サイトを並べる
    • 情報量と面積
    • 出来ればこの段階でキーカラーは決めたい…そのために書類を作ろう！
      • 打ち合わせに参加していない第三者にも見せることが出来る
      • 決定兼を持つ人に見てもらわないと…早期段階で意見を合わせておく事が出来る
      • 色だけの承認ステップがあってもいい。
      • 書類、何を書く？
      • 書けそうな理由例

• • ワイヤーフレーム
    • ワイヤーフレームに着色すると、完成図を想像させやすくなる
    • 可能であればできるだけ早く出すことでデザインがひっくり返りにくくなる
    • 手戻りを減らす重要なステップ
    • ワイヤーフレームの承認とは別のステップと考える

• • カンプ作成・作り込み
    • Webサイトの配色
      • ドミナントカラー配色：同系色の配色。明度とか彩度は問わない
      • ドミナントトーン配色：トーンを抑えた配色
      • トーンオントーン配色：比較的明度差のある同系色の配色、メリハリを付ける。サイト配色では一番多いのでは？
      • トリコロール配色：コントラストのある3色配色。背景・文字・プラス1色
      • セパレーション：ぼんやりしたり、鮮やか過ぎる配色を引き締めたり和らげたりする。色の分離はコンテンツを見せるのに重要
    • ぼんやりしたり、鮮やか過ぎる配色を引き締めたり和らげたりする
    • 色の分離はコンテンツを見せるのに重要 彩度の高い暖色系の色が強力。
      • ただし周囲の色による
      • 派手な色を使わなくても、周囲の色との兼ね合いでそこまで派手色でなくても目立つ場合も。
    • 明度差で読ませる
      • 背景色と文字色の明度差が小さいと文字は読みにくくなる
      • 読めなければサイトの価値を下げる

• • • 木と森を一緒に見よう。
      • 全体だけ見ても使いやすいサイトにならない。
      • 部分しか見なくなりがち。
      • 画面から離れたり近寄ったりして色々確認。

• • 運用
    • 更新時の色彩破壊 ：おかしなことになりますよね？
    • 何でダメなのか？
    • 原因を考えてみる
    • どうやって防ごう
    • 文字色の統一
    • 禁止事項の指示
    • 強調色の指示
    • ツールのオススメ
      • ColorSelector : 富士通
        • ○×表示が可能、JIS X8341-3:20101には未対応。
      • Contrast-A: Find Accessible Color Combinations
        • Win/Mac両方で使える。Adobe AIR版もあり
      • カラー・コントラスト・アナライザー 2.2 日本語版／ツール＆ダウンロード − インフォアクシア
        • 実は一番使ってます。

• 1つ、言い忘れてました
  • 良く撮れた写真は無敵！
  • 写真で予算を取ってくれ！

• まとめ
  • コミュニケーションのために
    • 指差し出来る色見本を持とう
    • 好み以外に話せる材料を見つけよう
    • 競合サイト探しは重要
    • 決めたことは書類にしよう

• • よりよいビジュアルのために
    • 色の分量はディレクターが決めよう
    • 抽象的な言葉の指示だとデザイナーは理解できません
    • どこをどうみせたいかを考えれば、配色テクニックは自ずと絞られる

• 質疑応答
  • [Q].お勧めの本などあれば教えてください。
    • [A].実はあんまりない。配色の本はいっぱい出ているけれど…
      • Webに特化したものであれば…拙著を！

ウェブ配色 コーディネートカタログ

Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)

• • • • • Web配色デザインのセオリー
      • 色見本帳については、2冊目以降に知識の補助として使うのが有効。
      • Webデザインのカタログ的なものが一番良いのではないか。色にも触れているし。

(※ホントはもっとメモを取ってたんだけど、事情により幾つかは端折りました。時期が来たら追記修正等するかも。)

---

重要な要素ではあると認識してるものの、直接決定を下す(または交渉の場に立つ)機会もそんなになかった『配色』。実はかなり早期の段階から出来る事があり、決めるべきものでもあったんですね。デザイナ以外の人でも基礎知識を勉強しておくのは十分に効果がありそうです。

講演をして頂いた坂本さん、スタッフの皆様、会場ご提供頂いたKDDIウェブコミュニケーションズの皆様、ありがとうございました！