Tweet

Pocket

8月25日に北九州で行われたWebカラーセミナー「1ランク上を目指すためのWeb配色入門」に参加してきました。
講師は『ウェブ配色 コーディネートカタログ』や『Web配色デザインのセオリー』などの書籍を執筆されているフォルトゥナ代表の坂本 邦夫さん！
「クライアントや社内でスムーズに話をするための色彩コミュニケーション」について、座学ありワークショップありの大満足なセッション内容。
期待通り、参加してよかったー！と思えるセミナーでした♪
以下、自分のメモ用に書いたのをまとめます。

色でできること

１、美しく見せること
２、使いやすくすること
３、他のサイトと区別すること

配色で大事なこと

• Webサイトの目的をくみとり達成すること
• 目的をくみとってもデザイナーに指示できないと意味がない
  ⇒工数が増えるだけ。
  コミュニケーションがキチンと取れていればデザインの捨て案は無くなるのでは？

配色とは？

適切な場所に適切な色を置くこと

頭の中にある色はみんな共通ではない

• 色見本での指定推奨（16進数のRGBがオススメ）
• モニタごとの色の差も説明し共通のモノを提供する

抽象的な言葉を具体化する

「高級感が欲しい」→漠然としている…
○○のように高級な感じというように、できるだけ具体化する。

本当に色を変えていいの？

• 売れてるサイトの色を無理に変えることはない
• 商品も販売もあるなら機能性追求
• 変なオリジナリティはいらん！

カラーブランディング

• Webサイトは覚えてもらうことが重要
• 他のメディアと組み合わせる場合、キチンと整合させる
• 期待感を外さない⇒見に来た人が気持ちいいか？

競合サイトと違う色を使う

• 同業である以上、似るのは仕方ない
• せめて超有名店や近所の店とデザイン・色がかぶらないようには気をつける

できれば企画段階でキーカラーを決めたい

そのために書類を作ろう！

書類を作ると…

• 理由付きで説明すると反論されにくい
• おかしなことを言われにくい
• 打ち合わせに参加してない人にも見てもらえる

何をかくの？

• ロゴ
• 使うべきキーカラー
• キーカラーに選んだ理由
• 他の色を避けたい理由
• 競合サイトを並べる

手戻りを最低限にするための準備

ワイヤーフレームに着色する。（ワイヤーフレームが決まっていたら）
→ワイヤーフレームに着色すると完成図をクライアントに想像してもらいやすくなる。

基本の配色テクニック

• 背景、文字、リンクの色（Webサイトの配色）
• 色を分離する
  →情報を分離して見やすく
• 彩度の高い暖色系の色が強力（周囲の色による）
• 背景色と文字色の明度差が小さいと文字は読みにくくなる
  →文字の読めないサイトは価値が下がる

ワークショップ

座学のあと３人〜４人のグループを作り、演習をやりました。

• 演習１：言葉を具体化する
• 演習２：キーカラーと配色テクニックを見つける

まとめ

結構長時間だったのに、坂本さんのお話が面白いし内容も楽しいしで飽きる暇もなくあっという間に終わってしまいました。
「座学は眠くなるから苦手だわ…」って言う人でも大丈夫かとｗ
次回またセミナーがあったら私は絶対参加したいなーと思ってます。今回参加できなかった方、チャンスがあれば参加することをおすすめしますです！