豊田の明日をクリエイト こいけやクリエイト

豊田市、長久手市 各種印刷物&ホームページ制作 こいけやクリエイト

最近の制作実績

  • 最近の制作実績サムネイル
  • 最近の制作実績サムネイル
  • 最近の制作実績サムネイル
  • 最近の制作実績サムネイル
  • 最近の制作実績サムネイル
  • 最近の制作実績サムネイル
耕Life とよたまちさとミライ塾 こいけやクリエイトWebストア 主催イベント情報

こいけやクリエイトは
愛知県豊田市のデザイン事務所です。
デザインを通じて人と人、人とまちを
繋ぐお手伝いをしております。

お気軽にお問合せください

主な営業エリア
豊田市、長久手市、みよし市、岡崎市
知立市、刈谷市、安城市、名古屋市

こいけやクリエイトのTwitter こいけやクリエイトのfacebookページ

2012年8月6日 1ランク上を目指す為のWeb配色入門に参加しました

スタッフの吉村です!

2012年8月4日(土)、1ランク上を目指すためのWeb配色入門の
勉強会に行って参りました。

配色って深いですね。とても勉強になりました。
簡単ですが、ザッと内容の方をご紹介したいと思います。

まず色でできることとは何か?
・美しく見せる事
・使いやすくする事
・他のサイトと区別、差別すること
 そして配色で大事な事とは?
・Webサイトの目的をくみ取り、それを達成させること
・目的をくみ取っても、デザイナーにきちんと指示できなければ工数が増えるだけ
・とりあえず3案とか言わせない(←これ良くあるな〜と)

○色はセンスではなく、知識とコミュニケーション
○配色とは色を決める事ではなく適切な場所に適切な色を配置すること

例えば……
〈クライアントの希望する色〉
 頭の中にある色は皆共通ではない事を認識したうえで、どうするか?
 ・色見本での指定をする
 ・できれば16進数のRGB値
 ・同じ環境で見られるもので指定

〈クライアントの抽象的な言葉〉
 「高級感が欲しい」→「○○○のように高級な感じ」
 出来るだけ、具体化してあげる

と言ったようにクライアントと作り手が同じ共通認識の元制作していくと
何案もだしたり、クライアントの好みなどに流されずに1案で進めていく事ができる。
(大事ですね☆)

企画段階『どうしたいのか??』その後の見通しも考える
例えば……
 ○今あるサイトの色を本当に換えていいのか?
 ・売れているサイトの色を無理に換えることはない。
 ・商品力も販売力もあるなら機能性を追求する。
 ・変なオリジナリティは厳禁!(この色飽きた〜とかは、ユーザーはそこまで思ってない)

 ○カラーブランディングをする
 ・webサイトの場合は、覚えてもらう事が重要
 ・他のメディアと合わせる場合は、きちんと整合させる(パンフ、名刺etc)
 ・期待感を外さない(業種カラーから外れないようにする、奇をてらわない)

 ○競合サイトと違う色を使う
 ・同業である以上、似るのはしかたがない
 ・せめて超有名店、近所の店とデザインと色がかぶらないようにする
 ・競合を避けるというのは色を決める為の十分な根拠になる

 ○情報量と面積
 ・情報が多いとキーカラーは減る
 ・微妙な色の違いは売り上げに関係ない(中小企業は)

「きちんと作られた」サイトそのものに意味が存在する場合がある。(費用次第)
先に色を使って競合を制する。

 ○小さいお店はブランディングして戦う必要がある
 できれば、この段階でキーカラーを決めたい。
 その為には書類を作ろう。

 なぜ書類を作るのか?
 ・理由をつける事で反論されにくい
 ・明るいものと暗いもの両方作って!と言われにくい
 ・打合せに参加していない第三者に見せる事ができる
 (決定権を持つ人に見てもらう事ができる)←最後に覆ることも減らせそうですね。

 何を書くの?書けそうな理由
 ・ロゴのイメージカラー
 ・競合が使ってるから
 ・情報が少ないからイメージで埋めようとか etc

A4、1枚くらいであっさりめ。流れがわかれば十分です。
その中に競合サイトをいくつか並べてみる。
ワイヤーフレームに着色したものを載せると完成予想図を想像させやすくなる。
これは、できるだけ早い段階で出すことでデザインがひっくり返りにくくなるのと
手戻りを減らす事ができる利点がある。

■□■基本配色のテクニック■□■

よく使われるテクニック
・常にいくつかのテクニックの組み合わせで出来上がっている
・背景や周囲との色の差を常に考える
・情報の固まりに色を配色する

〈ドミナントカラー配色〉
・同系色の配色
・トーンでそろえた配色〉

〈トーンオントーン配色〉
・比較的に明度差のある同系色配色

〈トリコロール配色〉
・コントラストの強い3色で使う配色

〈セパレーション〉
・引き締めたり、和らげたりする
・色の分離はコンテンツを見せるのに重要
・余白の取り方も大切

視線を引きつける色は?
・彩度の高い暖色系の色は強力。(ただし周囲の色による)

明度差で文字を読ませる
(読めないサイトは価値を下げる)
・必ずモノクロにしてチェックしよう(重要な情報が見えているか?)
モノクロで読めないものはカラーでも伝わらない
Windowsではカラードクターでモノクロに簡単に見られる。

『サイトを作る上で、いい写真は無敵である』
写真にお金をかけられるならその方がいい。
(サイトだけじゃないけど、私も常にそれを思っていた。写真にお金かけよう!)

■□■最後のまとめとして■□■ 

○コミュニケ−ションの為に
・指示できる色見本を持って行こう
・好み以外に話せる材料を持って行こう
・競合サイト探しは重要ですよ!
・(ここは聞き逃してしまいました。。)

○より良いビジュアルの為に
・色の分量はディレクターが決めよう!(デザイナーが困る)
・どこをどう見せたいか考えれば、配色テクニックは自ずと絞られてる

です。

配色も奥が深いですね。
安易にセンスだと思っていた自分が情けなくなりました。
より良い仕事の為に勉強会で学んだ事を実践していきたいと思います。

ありがとうございました。


ページ上部へ