「1ランク上を目指すためのWeb配色入門」に参加してきました。

Pocket

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


色でできること

1、美しく見せること
2、使いやすくすること
3、他のサイトと区別すること

上述の「1」はクライアントが気にする部分。ただ「2」と「3」はあまり意識しない。

配色で大事なこと

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

聞くべきことを聞き、言うべきことを言う。
色はセンスではなく知識とコミュニケーション

配色とは?

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

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

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

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

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

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

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

カラーブランディング

  • Webサイトは覚えてもらうことが重要
  • 他のメディアと組み合わせる場合、キチンと整合させる
  • 期待感を外さない⇒見に来た人が気持ちいいか?
他所が使ってない色でも、その業種のイメージに合うか、は重要
(歯医者で赤色は痛そうに感じる…とか)

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

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

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

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

書類を作ると…

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

何をかくの?

  • ロゴ
  • 使うべきキーカラー
  • キーカラーに選んだ理由
  • 他の色を避けたい理由
  • 競合サイトを並べる
色だけの承認ステップがあってもいいのでは?

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

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

基本の配色テクニック

  • 背景、文字、リンクの色(Webサイトの配色)
  • 色を分離する
    →情報を分離して見やすく
  • 彩度の高い暖色系の色が強力(周囲の色による)
  • 背景色と文字色の明度差が小さいと文字は読みにくくなる
    →文字の読めないサイトは価値が下がる
全体として見る、パーツとして見る、は大事
木と森を一緒に見よう。

ワークショップ

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

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

まとめ

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

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>