アクセシビリティ重視のウェブ制作

チャコウェブ

株式会社CyberCats

受付時間:9:00~17:00(月曜日~金曜日)

中小企業のホームページ制作で事業の価値を引き出します。良いホームページの作り方や運営の方法、集客に役立つヒントをお届けします。

【初心者でも安心、サンプル配色付き】ホームページのテーマカラーを決める方法を解説-CHACO-WEBかんたんマニュアル

【初心者でも安心、サンプル配色付き】ホームページのテーマカラーを決める方法を解説-CHACO-WEBかんたんマニュアル

CHACO-WEBかんたんマニュアルとして、ホームページのテーマカラーの決め方をお伝えします。

テーマカラーを設定する場合、2つのパターンがあります。

1. ホームページ以外で、すでにテーマカラーがある場合
2. テーマカラーの設定自体が初めての場合

今回はその2つのパターンどちらでも対応ができるようマニュアルをお送りします。

 

1. ホームページ以外ですでにテーマカラーがある場合

・チラシや名刺などの印刷物や、店舗の看板などで決まったカラーを使いながら営業している
・ロゴがあり、そこでテーマカラーが使われている

など、ホームページ以外ですでにテーマカラーがある場合、そのテーマカラーとホームページのテーマカラーを統一させると良いでしょう。

印刷物で使われているカラーをどう制作者に伝えればいいのか?

「看板やチラシ・ロゴは手元にあるけど、具体的にどうやって色を伝えればいいの?」

例えば、看板でオレンジ色がメインで使われていたとします。しかし、オレンジ色といっても具体的にはどんな色なのかとても曖昧です。

そのような場合、色を特定させるには2つの方法があります。

【1】制作したデザイナーに確認する。

看板やチラシ・名刺などを制作したデザイナーに確認をします。
「ホームページでも同じカラーを使いたいので、実際に利用したカラーコードを教えて欲しい」
と聞いてみましょう。

【2】WEB用に色を抽出する無料ツールを利用する。

WEB用に色を抽出するツールが無料で使えます。
チラシや名刺などの印刷物や、店舗の看板で使われている色が、実際にどんな色なのか調べることができます。

①看板や名刺などをスマホで撮影します。

②【WEB色変換】へアクセスし、①で撮影した画像をアップロードします。

【WEB色変換】 https://colorcodesearch.com/colorpicker/

【WEB色変換】へアクセスし、①で撮影した画像をアップロードします。

③スマホで撮影した画像が表示されますので、抽出したい場所をクリックし、右側に表示される「HEX」の項目に書かれている#から始まる数字6桁を控えます。

以上で取得した#から始まる数字6桁を制作担当者に伝えましょう。

 

2. テーマカラーの設定自体が初めての場合

名刺や看板・ロゴなども一切なく、初めてテーマカラーを設定する場合、お客様に対して、どのような印象・イメージを与えたいか、から決めるのがオススメです。

今回は、テーマカラーの設定が初めての方向けに、業種や与えたいイメージのサンプルをいくつか提示しますので、ぜひ参考になさってください。

児童発達支援・放課後等デイサービス・養護支援系ホームページ

【イメージ・印象】温かい・安心・軽やか
【配色サンプル】

 

整体・接骨院系ホームページ

【イメージ・印象】温かい・安心・軽やか
【配色サンプル】

 

美容室・サロン系ホームページ

【イメージ・印象】
ナチュラル・シンプル・清潔・洗練
【配色サンプル】

 

士業系ホームページ

【イメージ・印象】
信頼・知的・洗練・クール
【配色サンプル】

 

医療系ホームページ

【イメージ・印象】
安らぎ・不安解消・癒し
【配色サンプル】

 

占い系ホームページ

【イメージ・印象】
魅惑的・神秘的・抽象的
【配色サンプル】

 

テーマカラーとサブカラーの2色を決めたい時は

テーマカラーの他にサブカラーも追加して、合計2色使いたい。そういう方は、AIで自動的にオススメの配色をピックアップしてくれる無料のツールも利用すると便利です。

【PALETTABLE】 https://www.palettable.io/

①テーマカラーのカラーコード(#から始まる数字6桁)を入力し、「Like」ボタンを押す。

テーマカラーのカラーコード(#から始まる数字6桁)を入力し、「Like」ボタンを押す。

②右側にオススメの配色カラーが出てきます。

他の候補が見たい時は「Dislike」を押すと、違うカラー候補が出てきます。

②右側にオススメの配色カラーが出てきます。

以上で取得した、テーマカラーとサブカラーの2色の#から始まる数字6桁を制作担当者に伝えましょう。

まとめ

今回の記事では、ホームページのテーマカラーの決め方をご紹介しました。

・ホームページ以外の、名刺やチラシ、看板などで、すでにテーマカラーがある方
・テーマカラーの設定自体が初めての方

どちらの場合でも、テーマカラーの設定ができるようマニュアルとしてお伝えしました。

ホームページ用のウェブ配色見本のサイトがありますので、
これらのサイトから色をピックアップして伝えるのも良いでしょう。

【原色大辞典】 https://www.colordic.org/

選んだカラーに自信のない方は迷わず制作担当者に聞いてみましょう。同業種のこれまでのホームページ制作実績をもとに的確なアドバイスをいたします。

また、以前の記事でも効果的なテーマカラーの決め方をご紹介していますのでぜひ参考にしてください。


          この記事を書いた人        
タク制作部長
株式会社Cyber Cats 制作部長。2011年よりWebサイト制作業界に入り、日々デザインとにらめっこしています。 美しい文字組みに関心があり、どうしたら相手に伝わるデザインができるか切磋琢磨する日々です。 奇抜な料理とロック好き。
詳しいプロフィールはこちらから
SNSでフォローする