ブログ ホームページ活用

気になるあの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でのご相談を無料で承っております。

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

 

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

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

 

 

 

SEO プラグイン ブログ

2021/1/23

【保存版 2021年最新】 WordPressプラグイン All in One SEOの基本設定

  All in One SEOとは? WordPressにはSEO対策系のプラグインが複数ありますが、その中でも最もポピュラーで利用者数が多いのが「All in One SEO(旧 All in One SEO pack)」です。 All in One SEO   All in One SEOでできること ・タイトル・メタディスクリプションの設定 ・Twitter、FacebookなどのSNS設定 ・メタキーワードの設定 ・Googleアナリティクス、サーチコンソールの設定 ・noi ...

ReadMore

SNS ブログ 三浦猛から

2021/1/21

コロナ禍の今、ブログ・SNS毎日更新、投稿のメリット

外出自粛生活が続くことで、これまでのライフスタイルが一転しました。 とにかく、人と会うこと、会って話すことが大好きな身としては、何が辛いかというと外出そのものができないということではなく。 大切なお客さまや、気の合う仲間の皆さんと会えないことが一番辛いと感じます。 だから、例え会えなくてもブログやSNSなどで、仲間の投稿を見ると安心するし、嬉しくなります。 TwitterでもFacebookでも。 SNSを通じて、元気でいることがわかると、嬉しくなりますね。 その為にも、やはり発信は大事なんだなと、改めて ...

ReadMore

SNS ブログ 三浦猛から

2021/1/18

コロナの影響でSNSのタイムラインを見る時間が長くなった方へ

誰かの意見が気になる。 誰かの行動が気になる。 誰かが成功しているかどうか気になる。 誰かが今、幸せなのかが気になる。 誰かがやろうとしていることが気になる。 誰かが私のことをどう思っているかが気になる。     再び発令されたコロナによる緊急事態宣言で自粛生活が長引くと、SNSのタイムラインを眺める時間が増える方もいるでしょう。 そのタイムラインに流れてくる他人の情報が気になって気になって仕方がなく、ブログも仕事も手につかない、という方もいるようです。 人生は短いです。 やること、や ...

ReadMore

WordPressの使い方 サイトヘルス ブログ

2021/1/16

WordPressのサイトヘルス改善項目 【プラグインの更新】

WordPressはver5.2以降、「サイトヘルス」という機能が新しく追加されました。 サイトヘルス機能とは? あなたのホームページの健康診断 WordPressのサイトヘルス機能とは   WordPressで作成したサイトに何らかの問題点がある場合、改善点が項目に別れて表示されます。 今日はその表示される改善点の中から、「更新可能なプラグインがあります」という項目についての対処法を説明いたします。   こちらの記事もお読みください WordPressのサイトヘルス改善項目 「停止中 ...

ReadMore

WordPressの使い方 サイトヘルス ブログ

2021/1/14

WordPressのサイトヘルス改善項目 「停止中のプラグインの削除」

WordPressはver5.2以降、「サイトヘルス」という機能が新しく追加されました。 サイトヘルス機能とは? あなたのホームページの健康診断 WordPressのサイトヘルス機能とは   WordPressで作成したサイトに何らかの問題点がある場合、改善点が項目に別れて表示されます。 今日はその表示される改善点の中から、「停止中のプラグインを削除してください」という項目についての対処法を説明いたします。   WordPressのプラグインとは? プラグインは、WordPressの機 ...

ReadMore

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

三浦 猛

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

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

Copyright© 三浦企画・MIU PROJECT  , 2021 All Rights Reserved.