『色』の使い方、気をつけてますか??

僕一人でのもくもく会デビュー

どうも、JimdoCafe 久留米でスタッフをしております、豚骨あんどうです。
今回は3月16日(水)におこなわれた、JimdoCafe 久留米の『もくもく会』での模様をお伝えします。

普段はディレクターの英二さんと二人でもくもく会をさせていただくのですが、今英二さんは長期の東京出張中…

ということで、なんと!!今回は初めて!!一人で対応させて頂きました。

JImdoCafe 久留米
豚骨あんどうでございます。

逆効果を招く色の使い方とは?

初めて1人で対応のもくもく会。まずは、参加された方が制作されたWebサイトを拝見させてもらいました。

すると1つ気になる点が…。

それは、電話番号やメールアドレスを記載しているテキストのカラーです。

色味なのですが、紫がかっている暗い青色を使われていました。

JImdoCafe 久留米
このような感じでした。

サイトは、全体的に穏やかな色で統一されています。その中に異色のアピールを放つテキストカラー。

アピールしたい気持ちはすごくわかります。だた、僕の目には、悪い印象を与えるようにしか見えませんでした。


"問い合わせをしてほしい" + "悪い印象を与えてしまう色" では、1 - 1 = 0 という結果になってしまいます。

ということは、これって逆効果になっているんです(><)。

 

僕がよく意識するのは、サイトの中にうまく溶け込む色を使うこと。

過剰なアピールは、閲覧者に悪い印象を与えてしまいます。

 

男性が女性にアピールするときと似てませんか?

ストーカーまがいなアピールをすると嫌われてしまいます。 アピールしたいという自分だけの気持ちが優先してしまった結果ですね。アピールはしているけど、嫌な印象を与えない色加減。すごく難しいところでは、ありますが(恋愛と一緒で)。

 

というわけで、「お問い合わせに使われているカラーのトーンを少し落としたほうが効果的です」とお伝えしました。

 

魚釣りもされる方だったので、魚釣りにおける色の話なども盛り上がってしまいました。せっかく色の話で盛り上がったので、『Chrome』のすごく便利な拡張機能も覚えてもらうことにしました。

色の世界が広がる『ColorZilla』

『Chrome』には、まさざまな拡張機能が備わっています。その中のひとつが

ColorZilla

もともとFirefox用だったものが、Chrome用でも登場。カラーピッカー機能のほかに、スポイト機能、グラデーション作成機能など多彩です。

 

色のお話をしましたが、実際にどんな色にしたらいいのでしょうか。

一番早いのは、ご自分のサイトと同じ色使いをしてるサイトを探すこと。参考にするサイトをいくつか見つけて、「この文字の色がいいな~」と思ったら、カラーピッカーの機能を使います。

JImdoサイトでテキストカラーを反映

『ColorZilla』を拡張機能に追加すると、『Chome』で開いたとき、右上にスポイトマークが出てきます。

スポイトマークを押したら、最初に出てくる『Pick Color From Page』という項目をクリックしてください。

JImdoCafe 久留米

閲覧してるページの「この色だ!」と思う所にカーソルを当てると、画面上部にカラーコードが表示されます。

JImdoCafe 久留米

このカラーコードをメモしてくださいね。

では、『ColorZilla』のカラーピッカーで調べたカラーコードを、Jimdoのテキストカラーに反映させていきます。

Jimdoの編集画面に入ってみましょう。編集画面からテキストを入力し、『テキストカラー選択』をクリックします。

JimdoCafe 久留米

カラーコードが記載されているところがあります。カラーピッカーで調べたカラーコードをそこに入力してください。

JimdoCafe  久留米

うまく入力できれば、お好みのカラーを使ったテキストが出来上がりです。

JImdoCafe 久留米

『Chrome』を使って便利拡大!!

『Chrome』を使うことで、Web制作の幅が広がります。

まずは、『Chrome』をダウンロードして環境を整えましょう。

『Chrome』を使うなんて当たり前だろうと思っているWeb制作者のみなさま。当たり前と思っていることが当たり前じゃないことはいっぱいありますよ。Webサイトを見るのは、Web制作者ではなくユーザーなのですから。

Webサイトを閲覧するユーザーは『Chrome』を使っていないのが当たり前かもしれませんよ。