ブログ ホームページ活用

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

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

 

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

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

 

 

 

ブログ ホームページ構築 ホームページ活用

2020/11/23

ホームページにおけるフッターバーの重要性

ホームページを構成するうえで、大変重要な箇所であるのが、「メニューバー」と呼ばれるものです。 他にも、「ナビゲーションメニュー」とか、「ナビゲーションバー」「グローバルメニューバー」とも呼ばれています。 TOPページのヘッダーの上下、各ページの上部に設置することが一般的ですね。   赤枠線内が「メニューバー」になります。   ホームページからの離脱を防ぐために重要なこと そのメニューバーの役割は、ホームページにアクセスしたユーザーが、迷わずに目的の各ページまでたどり着くことを文字通り「 ...

ReadMore

ブログ ホームページ活用 顧客対応

2020/11/21

売れる店員、売れない店員。売れるブログ、売れないブログ。

サラリーマン時代、百貨店勤務をしていました。 今から30年前のことになります。 時代はバブル経済真っ只中。 今ではまったく考えられないことですが、大した努力をしなくても、店の棚に商品を並べてさえおけば、勝手にモノが売れていく時代でした。 世の中が不景気になることなんて、想像もできない時代。 収入も待遇もよく、仕事もプライベートも充実していて、毎日が楽しくて仕方ありませんでした。 あれから30年。 未だに何名かの人とはお付き合いが続いていますが、30年間まったく顔を合わせていない方の方が多いですね。 たまに ...

ReadMore

ブログ ホームページ活用

2020/11/20

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

相談者・Hさん三浦さん、今度新たにホームページをリニューアルすることにしました。  イメージを一新したいので、これまでサイトで使っていたカラーを思い切って変えたいと思っています。  そこで、色々なホームページを参考に見ていて、良いと思ったサイトで使われているカラーコードを知りたいのですが、コードの調べ方がわかりません。  何か良い方法はありますか? なるほど。 例えばデザイナーさんにホームページを作ってもらうにしても、ただ「明るめのベージュ系で」と伝えるより、使いたい色のカラーコードを伝えた方が話は早いで ...

ReadMore

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

2020/11/18

【制作実績】長野県上田市 ホームサロン英里人~えりーと~様

この度、長野県上田市の小顔矯正サロン、ホームサロン英里人(えりーと)様のホームページを制作いたしました。 サロンの最大のウリは、「見た目年齢を若返らせる!」下がってきたまぶたや頬をリフトアップさせる小顔矯正。 むくみ・たるみという、女性のお顔の悩みを改善し、フェイスラインがスッキリしたお顔へ導く施術が人気のサロンです。 そのことを証明するかのように、この度のホームページの「ビフォー・アフター」ページ、「お客様の声」ページには、たくさんのお客様の変化と喜びの声が掲載されています。   サロンオーナ ...

ReadMore

お知らせ 無料ホームページ相談

2020/11/17

【満席御礼】2020年12月東京開催 無料ホームページ相談会

募集を受け付けていました、2020年12月17、18日開催の、東京・無料ホームページ相談会は、おかげさまで満席となりました。 お申し込みくださりましたお客様、誠にありがとうございました。 現在、キャンセル待ちを受付中です。 無料ホームページ相談   また、来年1月の名古屋・大阪開催は、11月25日配信の公式メールマガジンで、先行受付を開始いたします。 名古屋、関西地区で相談会来場をご希望の方は、メールマガジンへのご登録をお勧めいたします。 メールマガジンへのご登録はこちらから   なお ...

ReadMore

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

三浦 猛

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

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

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