MENU
ブログランキング・にほんブログ村へ

    【センスが無くても大丈夫!!】上手に作れる、ホームページの色使いの鉄則。

     
    かっこいいホームページって何が違うのですか?
    色使いのコツも含めて教えてほしいです。

    この記事では、上記のようなお悩みを解決します。

     
    こんにちは、ジュンチャムです。

    内容はともかく最近、少しづつ『おしゃれなブログ』認定をされることが増えてきたので調子に乗って、今日は、『上手なホームページの色使い』についてかいていこうと思います。

     
    ホントにこんな記事書いて大丈夫?
     
    大丈夫じゃないかもしれません。
    でも「工事現場のホームページはこうやって作るんだよ!!」って言ってやっている以上、色使いについては触れないといけないと思うので勇気を出して書きます。

    「ダサイ土木屋がブログ書いてるくせによくこんな記事書けたな」って少しでも思った方は恥ずかしいので読み飛ばして別の記事を見て下さい。

    ホームページ作りで序盤につまづく事の一つが、『ホームーページの色使い』だと思います。

    『建設会社のコーポレートサイト』ならともかく『工事現場のホームページ』なんて工事が終わればほとんどがURLごと消滅するので参考にできるサイトなんてほとんどないですし、迷う気持ちはものすごくわかります。

    カッコいいホームページを作ろうとしすぎてたくさんの色を使ってしまうと、逆に見づらくなってしまったり、逆にシンプルにまとめようとしすぎると何となく未完成な寂しい印象になってしまったりして、なかなか難しい部分はありますが、ここに書いてある内容を実践すると、見に来てくれた人が快適にホームページを見られるような色使いの基本を身につけることができるので、是非、参考にしてみて下さい。

    ・ホームページの色使いの決め方がわからない
    ・シンプルにしようとしてショボい見た目になりそう
    ・色を使いすぎてごちゃごちゃした印象になりそうな気がする

    もくじ

    公共工事のホームページに相応しい色使いの基本

     
    正直、工事用ホームページに相応しい色使いがわかりません。
     
    わかりました。では、最初に色選びの基本の話からしていきましょう。

    ホームページの色使いはシンプルに

    先にホームページの色使いについての結論から言いますと、ホームページの色は『シンプルが一番』です。

    洋服選びにも通じる部分はあるんですが、使う色は『3色以内(使っても4色)』、かつ『原色は1種類まで』が基本です。

    基本的に、公共工事の場合、サイト自体のカッコよさよりも、安心感を与えられるような配色が良いと思います。

    色が持つイメージを利用しよう

     
    色には、それぞれが持つ『イメージ』があります。
    そのイメージについて、少し考えてみましょう。

    私達は、無意識のうちに『色が持つイメージ』を利用しています。

    例えば、ビジネスマンが大事な会議がある時に『赤色のネクタイをする』とか気持ちを落ち着かせるために『海を見に行く』みたいな行動がそれに当たります。

    一般的に知られる『色のイメージ』がこちらです。

    印象プラス効果マイナス効果
    赤(RED)生命力
    強さ
    刺激を与える
    興奮させる
    頑固 怒り
    激しさ
    ピンク(PINK)優しさ
    やわらかさ
    若返り
    女子力を上げる
    子供っぽさ
    軽薄
    オレンジ(ORENGE)あたたかさ
    活発
    食欲を上げる
    興奮させる
    短気
    黄色(YELLOW)活動的
    明るさ
    喜び
    希望を与える
    臆病
    ひがみ
    緑(GREEN)平和
    安全
    リラックスさせる
    ストレスを軽減
    退屈
    平凡
    青(BRUE)落ち着き
    信頼
    落ちつかせる
    集中力を高める
    冷たさ
    憂鬱
    紫(PURPLE)気品
    神秘
    瞑想を誘う
    自分を見つめなおす
    不安
    うぬぼれ
    茶色(BROWN)落ち着き
    温もり
    心を静める
    慰める
    地味
    古臭さ
    白(WHITE)無垢
    清潔
    清める
    浄化する
    無機質
    冷たさ
    黒(BRACK)威厳
    重圧感
    清める
    浄化する
    威圧
    悲しみ
    鼠色(GRAY)控え目
    大人っぽさ
    すっきり見える
    協調する
    曖昧
    没個性
     
    こうして見ると、確かにその通りな気がします。
     
    そうですよね。
    そして、こうやって見ると公共工事のホームページに相応しい色と、そうでない色がも何となくわかると思います。

    相応しい色
    オレンジ 黄色 緑 青 白

    使い方が難しい色
    赤 黒 ピンク

    どちらとも言えない色
    紫 鼠色 茶色

    様々な年代の人が見る可能性があるホームページなので、活発な印象が持たれやすい『オレンジ』や『黄色』はもちろん、安心感を与える事ができる『緑』辺りも、工事用ホームページに相応しい色と思います。

     
    爽やかな印象を持つ青色も、もちろんおすすめの色ではありますが、場合によっては冷たい印象を与えてしまう場合があるので注意が必要です。
    使用する場合は水色のような薄目の配色を意識するとお洒落にまとめることができるでしょう。

    色選びの基本を理解しよう

    色は大きく分けて、白、黒、グレー等の『無彩色』とそれ以外の『有彩色』に分ける事ができます。

    『有彩色』にははっきりとした色から、くすんだ色、パステルカラーと言われる淡い色、濃い色等、様々な色があるのですが、どの色も色の『3原色』(赤色・青色・黄色)を混ぜ合わせてできています。

     
    なるほど、冒頭で『使っても1種類まで』と言っていた『3原色』とは(赤・青・黄色)のことだったんですね。
     
    その通りです。
    例えば、ホームページのメインカラーを『原色に近い青色』にするなら、『赤色』と『黄色』は使わないようにするか、できるだけ淡い色にする等の配慮が必要です。

    この3つの色にその中間の色(オレンジ・緑・紫等)を加えた下図の右側のものを『色相環』と言います。

    基本的に、色を選ぶ時は『服選び』であれ、『インテリア選び』であれ、『ホームページの配色選び』であっても全てこの色循環を参考にするとまとまった印象にすることができます。

     
    基本的には、メインカラーを決めてその両隣の色で構成すると落ち着いた印象になり、ちょうど真正面の色を使うとシャープな印象になりやすいです。

    基本の色相の組み合わせパターン

    類似色相色相の両隣との組み合わせ。メインカラーが『赤』なら『オレンジ』と『赤紫』。
    補色色相の反対側の色との組み合わせ。メインカラーが『赤』なら『青緑』。
    反対色相補色とその両隣2つの組み合わせ。メインカラーが『赤』なら『青緑』『緑』『青』。
     
    何となくわかってきました。
    このサイト『ドボクジゾー』のロゴの青とオレンジは補色の関係にあるということですね。
     
    よくわかりましたね、その通りです。
    補色の関係にある『青』と『オレンジ』をメインに、『赤』『黄色』(たまに『青緑』)を使ってアクセントにしています。

    この方法であれば、全くセンスがない私のような人でも、それなりにまとまったホームページにする事ができます。

    実際に色を選んでみよう

     
    では、実際にホームページで使用する色を選んでみましょう。
     
    待ってました。
    いってみましょう。

    ホームページの色選びに役立つツール

    ホームページの色選びに役立つツールは、インターネット上にものすごくたくさんあるのですが、あまり紹介しすぎると『色選びツール選び』に時間がとられて進まなくなってしまうので、今回はその中でも無料で使える本当に役立つ2つだけを紹介します。

    おすすめ1 Adobe Coler CC

    Adobe Coler CC

    Adobeといえば、『Photoshop』とか『illustrator』のような、画像編集関連のソフトを販売しているメーカーなのですが、このツールは無料で使用する事ができます。

    使い方は『カラーハーモニールール』を『類似色』、『補色』等、好きなものに選んでマウスでグルグル回すだけなので簡単です。

     
    このサイト『ドボクジゾー』の配色はこのツールを使って決めました。

    おすすめ2 Canva デザインをセンスアップする配色パターン100選!!

    デザインをセンスアップする“いけてる配色パターン”100選

    これは、私も利用している『Canva』というアイキャッチ画像やサムネイルをWEB上でデザインするツールの広告ページの1つなのですが、この『Canva』を利用するかしないかは別として、写真付きのイケてる配色パターンがカラーコード付きで100通り見る事ができるので、これを参考にすると簡単に色を決める事ができます。

     
    今回は、これを利用してホームページを作ってみようと思います。

    実際に色を決めてみよう

    では、実際にホームページで使用する色を決めてみます。

    色々悩みましたが、今回は一番最初のこれに決めました!!

     
    うわっ、適当!!
     
    ちがいます。
    全部見てこれに決めています!!

    Adobe Coler CCで見てみると、この配色はほぼ、補色の関係ですね。

    前章で説明したように、赤は攻撃的に見えてしまったり、ピンクは子供っぽくみえてしまい、公共工事では使い方が難しい色なので、基本的にはグリーン系の色を中心に、ポイントで赤・ピンクの色を使っていきたいと思います。

    基本の色が決まったら、この色はかなり重要なので忘れないようにカラーコードををメモしておきましょう。

    カラーコードとは#から始まる『#○○○○○○』のような英数字の羅列です。

     
    そのノート、無くさないですか?

    大丈夫です。たぶん・・・。

    ホームページの『黒』は『黒ではない』

     
    ここで大事な話をします。
    ホームページで使用する文字の色は『黒』ではないほうがいいです。
     
    ごめんなさい。
    ちょっと意味がわからないので詳しく教えてもらってもいいですか?

    ホームページで使われる文字の色とは

    まず前提として、多くのホームページの背景色は『白色』です。そして文字の色は『黒色』と誰もが思っています。

    本当にそうでしょうか?

    では、皆様が普段インターネットで調べる時に利用している『Google』を見てみましょう。

    Google
     
    こうして気にして見ると、黒ではないですね。
    どちらかと言うとねずみ色に近いです。
     
    私が思うに、Googleは特に薄いと思います。
    白背景(#ffffff)に黒色(#000000)は印象が強すぎて、読んでいると疲れてしまう為、避けた方が無難です。

    実際に、日本の大手サイトがどうなっているか見てみましょう。

    会社名背景色文字色
    Amazon#ffffff#333333
    楽天市場#ffffff#333333
    Google#ffffff#4d5156(説明分)
    Yahooニュース#ffffff#333333
     
    文字色は#333333が多いですね。
     
    そうですね。
    これがホームページの『一般的な文字色』と言えそうです。背景色は『#ffffff』が多いですが、柔らかい印象にしたければ少しだけ色を入れてもいいと思います。

    実際に、この二つの色(#000000と#333333)を比べるとこれぐらい違います。

    左が『#000000』で右が『#333333』です。

     
    やっぱり比べると違いますね。
    このサイト(ドボクジゾー)もこの設定なのですか?
     
    このサイトでは、文字色は『#333333』ですが、背景に少しだけ黄色が入って『#fffdf9』になっています。

    決まった色をWordPressに設定しよう

     
    これでこれから作成するサイトの色が決定しました。
    使用箇所カラーコード
    メインカラー#80BD9E
    サブカラー#89DA59
    補色1#F98866
    補色2#FF420E
    文字色#333333
    背景#FFFFFF

    では、この決まった色をWordPress(SWELL)に設定したいと思います。

    WordPressのテーマカラーの設定方法

    とは言っても、このWordPressテーマSWELLは直感的に操作できる上、本当にユーザーマニュアルが親切なので下手に書くよりリンクから飛んで見に行った方が早いです。

     
    SWELLの使い方を書いたブログが他のWordPressテーマと比べて少ないのはきっとこのマニュアルがわかりやすいからだと思います。

    一応、文章でさらっと説明しますと、『サイト表示画面』→『カスタマイズ』→『サイト全体設定』→『基本カラー』です。

     
    このそれぞれの色を変更していきます。
     
    メインカラーはともかく、テキストカラーは最初から#333333になっています。背景は#fdfdfdです。
     
    undefined
    親切設計ですね。
    では、メインカラーだけ#80bd9eに変えて、文字色はそのまま、せっかくなので背景色も#fdfdfdでいきましょう。

    打ち込み終わったら右上の『公開』をクリックします。

     
    少し雰囲気が変わりましたね。
     
    そうですね。
    すごく爽やかになりました。

    色の変更が終わったので今日はここまでにしようと思います。

    まとめ

    今日は『上手なホームページの色使い』についての説明と、これから作るホームページで使用するいろについて書きました。

    この記事を最後までみた方は、もう何色をベースカラーに選んだとしてもきれいなホームページにまとめることができるようになったと思います。

    次回は、サイトのヘッダー(一番上の工事名)の部分を変えてみたいと思いますので、気になった方は当サイト(ドボクジゾー)を見にきてみて下さい。

    それでは、ご安全に。

    よかったらシェアしてね!
    • URLをコピーしました!
    • URLをコピーしました!

    コメント

    コメント一覧 (1件)

    コメントする

    もくじ