ブログ ホームページ活用

気になるあのWEBサイトのカラーコード(色番号)を調べる方法

相談者・Hさん
三浦さん、今度新たにホームページをリニューアルすることにしました。 

イメージを一新したいので、これまでサイトで使っていたカラーを思い切って変えたいと思っています。 

そこで、色々なホームページを参考に見ていて、良いと思ったサイトで使われているカラーコードを知りたいのですが、コードの調べ方がわかりません。 

何か良い方法はありますか?

なるほど。 例えばデザイナーさんにホームページを作ってもらうにしても、ただ「明るめのベージュ系で」と伝えるより、使いたい色のカラーコードを伝えた方が話は早いですよね。

ホームページなどのWEBサイトで使われているカラーコードを調べる方法はとても簡単です。 

この機会に覚えてみてくださいね。

三浦さん

 

ホームページやブログを新しく作る時。 またはリニューアルする時。

どのような色を使ってWEBサイトを作っていくかは、自分のイメージカラーを定着させるうえで大事なことになります。

 

 

お気に入りのブランドのイメージカラーがあり、そのブランドのホームページの雰囲気が好みで、同じ色を使いたいということもあると思います。

でも、どうやってそこで使われている色を、同じように自分のWEBサイトで使うのか、そこから先がわからなくて悩まれる方も多いでしょう。

 

カラーコード(色の番号)とは?

まず初めに、「カラーコード」という言葉自体がわからない、という方のために。

#ffffff #000000など シャープ(#)から始まる6桁の英数字で組まれている、符号のことになります。

ホームページやブログなどのWEBサイトページ上で使用する色を指定するときに使うコードのことです。

#ffffffは白、#000000は黒、という感じですね。

白、黒、青、赤、黄、緑など、基本的な色や、基本色に近い形だけであれば、以下のサイトのようなWEB色見本サイトで調べればわかります。

HTMLカラーコード: WEB色見本 原色大辞典

WEBサイトで使われている全ての色は、このカラーコードが設定されています。

自分でホームページを作るときだけでなく、デザイナーに依頼する時も、このカラーコードがわかればスムーズに作業が進みます。

好みのブランドや、好きな著名人のホームページで使われている色を使いたい場合に役立ちますね。

そのカラーコードの調べ方は、専用のツールを使えばとても簡単です。

カラーコード調査ツールはたくさんありますが、ここでは最も使いやすく、代表的なものを紹介します。

 

GoogleChromeの拡張機能を使う ColorZilla

「ColorZilla」とは、GoogleChromeの拡張機能の一種で、WEBサイトで使われている色のカラーコードをワンクリックで簡単に調べられるツールです。

難しい専門知識や、アプリ・ソフトなどを取り扱う技術は全く不要です。

さらにはインストールも不要ですので、Google hromeブラウザに追加するだけで、すぐに簡単に利用できます。

 

GoogleChromeへColorZillaを設定する方法

1. Google ChromeブラウザでColorZillaへアクセスし、右上の「Chromeに追加」をクリックします。

ColorZillaはこちら

 

2.以下の画面が表示されれば、設置完了です。

 

 

ColorZilla の使い方

ブラウザの右上にあるスポイトマークのアイコンから、「 Pick Color From Page 」をクリックします。

 

カーソルが表示されるので、WEBページ上でカラーコードを調べたい色をクリックします。

例として、 twitterのロゴカラーのカラーコードを調べてみます。

 

 

クリックして取得したカラーコードは、自動でクリップボードにコピーされます。

 

調べたカラーコードを確認したい時は、「Color Picker」という箇所をクリックします。

 

下の箇所に「#」から始まるカラーコードが表示されますので、コピーしてコードを保存しておきます。

 

目的に応じて、コードを使えばOKです。

 

上記のように、WEB上に表示されているカラーコードを調べることは、ColorZillaを使えばとても簡単です。

バナー制作や、簡単なロゴ制作にも役立ちますので、WEBサイトで気になる色がありましたらぜひ活用されてみてください。

 

こちらの記事もお読みください。

ホームページ、ブログ・・・サイト作りに重要な「色」

 

三浦企画では、現在オンライン通話システム・ZOOMでのご相談を無料で承っております。

無料ホームページ相談の詳細はこちら

 

三浦企画・三浦猛のメールマガジンでは、個人事業主のビジネス活用についても配信しています。

メールマガジンのご登録はこちらから

 

 

 

ブログ 無料ホームページ相談

2022/6/20

60分から90分に時間延長 6月28日(火)・29日(水) 大阪・無料ホームページ相談会

  来る6月28日(火)・29日(水)に、大阪・無料ホームページ相談会を開催いたします。 2018年から開催を続けてきた、この対面による無料相談会。 これまで、実に80名を超える方にご参加いただけました。 実際に、無料相談会にお越しくださり、そこでホームページを作ることを決断され、現在しっかりとそのホームページから集客に結びつけている方もたくさんいらっしゃいます。   2019年11月 東京開催ご来場 行政書士 立花技術法務事務所 立花信一様  https://tachibana-of ...

ReadMore

ブログ ホームページ制作実績

2022/6/3

【制作実績】千葉県八街市 桜NEXT整体院様

この度、千葉県八街市の整体院 桜NEXT整体院様のホームページを制作いたしました。 院長の片岡信彦先生とは、三浦企画がまだ現在のデザイン制作業をから、約10年のお付き合いになります。 2015年。三浦企画が当時提供していたサービスが、アメブロカスタマイズ制作サービス。 その記念すべき、最初のお客さまが片岡先生でした。 それ以来、開催するセミナー・イベントにお越しくださったり、プライベートでは食事をご一緒させてもらうなど、公私共に約10年間大変お世話になっている方です。     片岡先生 ...

ReadMore

ブログ ホームページ制作実績

2022/6/2

【制作実績】京都府舞鶴市 舞vent様

この度、京都府舞鶴市の個人デザイン事務所、舞vent様のホームページを制作いたしました。 舞ventは京都府舞鶴市を拠点に、チラシ・フライヤー・パンフレット・はがきや名刺などの紙媒体デザイン、ポスティングなどのデザイン・印刷事業全般を営まれています。 代表の中道一帆さんとは、Twitterを通じて知り合い、その後交流をさせていただきました。 グラフィックデザインとWEBデザインということで、職種として専門分野は違いますが、同業者として共感することが多く。 中道さん自身、本業が大変お忙しく、自社のホームペー ...

ReadMore

ブログ ホームページ制作実績

2022/6/1

【制作実績】レディース鍼灸かなめ様

この度、愛知県安城市 女性専門鍼灸施術院 レディース鍼灸かなめ様のホームページを制作いたしました。 代表・菅谷明佳さんは鍼灸あんまマッサージ指圧師、日本不妊カウンセリング学会認定 不妊カウンセラーとしてご活躍。 2015年に札幌で鍼灸施術院、「レディース鍼灸かなめ」を開業。 その後、横浜へと院を移した後、この度6月に愛知県安城市に新たにオープンすることになりました。   菅谷さんと初めてお会いしたのが今から5年前の2017年6月。 その後SNSを通じて交流を続けさせていただき、この度店舗リニュー ...

ReadMore

ブログ ホームページ制作実績

2022/5/7

【制作実績】認可外保育施設 Amica(あみーか)様

この度、埼玉県さいたま市見沼区 託児・一時預かり 認可外保育施設 Amica(あみーか)様のホームページを制作いたしました。   保育施設不足が問題となっている中、多様な保育ニーズに対応する「認可外保育施設」の需要が高まっています。   Amica(あみーか)主催の北村聡美さんは、5歳と1歳の男の子を育てながら、保育施設を運営されています。 また、認可外保育施設事業の他に、「ママのための親子教室」も提供されています。 ●赤ちゃんを抱っこしたり寝かしつけたりするときに使う、「おくるみ」の ...

ReadMore

  • この記事を書いた人
  • 最新記事

三浦 猛

三浦企画代表  細部までこだわり、徹底した「お客さま目線」でのWEBサイト作りは、お客さまから「お申し込みが3倍になった」「これまで1件もなかったホームページからの売上件数が月に8件になった」というお声をいただいています。 デザイン制作100作以上。

-ブログ, ホームページ活用

© 2022 三浦企画・MIU PROJECT