ブログを作ってはみたものの、なかなか配色を決められない。。。
副業Webライターこのような悩みを持つ方に向けて、ブログ歴5年以上の副業Webライターが答えていきます。
私もブログ初心者の頃は、ブログの配色が決まらずに「ああでもない、こうでもない」と悩んだことがあります。
しかし、配色にこだわってもブログのアクセスや収益にはほぼ影響ないので、「もっと早く、根拠を持って決められる方法はないものか？」とも思っていました。
そこである方法を編み出して、ブログの配色に悩む時間は劇的に減らせるようになったのです。
最近では新しいブログを立ち上げるたびにこの方法を使って、15分ほどで配色を決めて、執筆に打ち込むようにしています。
この記事では、そんな私が実際に使っている配色の手順を公開していきます。
配色は基本パクればよい
結論から言うと、配色はパクればよいです。
パクったら著作権上の問題があるのでは？
副業Webライター見た目のデザインをまるまるパクってはだめですけど、配色をパクるのは問題ありませんよ。
ただし、個人ブログの配色をパクることは避けています。
たとえばこのブログで使っているワードプレステーマ「Swell
」は、多数の人に使われていて（シェアNO.1です！）、その人から配色をパクったら、見た目もまるまる同じになってしまうからです。
ですので、私は企業サイトの配色をパクるようにしています。
配色を真似る手順
ここからは、私が実際にやっている配色を決める手順を解説していきます。
配色がよと思うサイトを選ぶ
まずは配色がよいなと思うサイトを選びましょう。
先ほども書いたように、個人ブログだとデザインまで似た雰囲気になってしまうので、企業サイトから配色をパクります。
大手の企業サイトのデザインにはそれなりのデザイナーが関与しているので、自分のブログの配色にそのデザイナーの知恵を拝借することができます。
私は海外のサイトからよく配色を拝借しています。
ここでは例として、「Away」というスーツケースを直販するブランドのホームページを選んでみました。
サイトに使われているキーカラーを抽出する
よいなと思うサイトを選んだら、そのサイトが主に使っているカラーを確認します。
このサイトでは白地の部分を除くと、トップのバーにある黒と、ファーストビューに使われているベージュがメインで使われていることがわかります。
フッターまで見ると、やはり使われているのはこの2色です。
カラーを抽出する方法はいくかありますが、私はパワーポイントを使います。（ちなみにアイキャッチ画像やブログに使う図も、全てパワーポイントで作っています）
パワーポイントに参考にするサイトのトップページを貼り付けて、色を抽出するためのブロックを作ります。
ブロックを作ったら、ブロックを選択して、右上にある「図形の塗りつぶし」から「スポイト」を選びます。
「スポイト」を選んで、自分が抽出したいベージュのところで選択すると、ブロックが抽出したい色と全く同じ色になります。
同じ要領で黒の方も抽出します。
色を抽出できたら、そのブロックの色が何色なのかを確認します。
「図形の塗りつぶし」から「塗りつぶしの色」を選択します。
すると色コードがわかるようになり、このベージュは「＃F7F0EA」であることがわかりました。
同じ要領で黒を見てみると「#111111」であることがわかります。（真っ黒だと「#000000」ですが、少しだけグレー味かかった色になっていました）
自分のブログに反映する
参考にしたいサイトに使われている色を抽出できたら、自分のブログに反映させます。
Swellなら、「外観」⇒「カスタマイズ」から、「サイト全体設定」⇒「基本カラー」と進みます。
同じ要領で操作をすれば、アクセントカラーやボタンなどを参考とするサイトから抽出できます。
今回の例では海外サイトを使いましたが、もちろん日本の企業サイトを参考にしてもよいです。
日頃からよく見ているサイトの中で、よいと思うものから「配色」だけを上手にパクってしまいましょう。
なお私はパワーポイントを使っていますが、Google Chromeの拡張機能である「ColorPick Eyedropper」を使って色を抽出する方法もあります。
同じ手順でボタンの色も抽出できる
これまで解説した色を抽出した手順を使えば、ボタンの色も遷移先のサイトの色にあわせられるようになります。
副業Webライターボタンの色と遷移先の色をあわせることで、訪問者に違和感を抱かせることなく移動してもらえるメリットがあります。
たとえば私が今使っているワードプレステーマ「Swell」へのボタンリンクを貼ることを考えてみます。
Swellのホームページを見ると、濃い青がメインカラーになっているようなので、ボタンリンクをこの色にあわせます。
先ほどと同じ手順で色を調べると、「#04384C」であるとわかります。
色のコードがわかれば、ボタンリンクにその色を反映させるだけです。
実際に反映させたボタンが以下のボタンです。
実際に確かめてみると、ボタンの色と遷移先のサイトの雰囲気を合わせられていることがわかります。
まとめ
以上、ブログの配色をすぐに決めてしまう方法でした。
配色自体は著作権で保護される対象ではないので、好みサイトの配色を見つけたらパクってしまいましょう。
配色以外のレイアウトまで含むデザインそのものを真似しない限りは、問題ありません。
同じ要領でボタンリンクの色を遷移先に合わせることで、ユーザーに遷移先のページを違和感なく見てもらえるようになります。
