色を瞬時に抽出して効率よくホームページを作成しよう!Chrome拡張機能「Palette Creator」の使い方

色を瞬時に抽出して効率よくホームページを作成しよう!Chrome拡張機能「Palette Creator」の使い方

ホームページを作成する際に重要な要素のひとつとして、配色があります。
色は、ホームページをみる人の心情にも影響を与えますので、ないがしろにすることはできません。
ferret内の以下の記事では、色が与える印象についてご紹介していますので、ぜひ参考にしてみてください。
【事例あり】色の効果を利用して、ホームページが与える印象をコントロールしよう|ferret

今回は、簡単に色をチェックすることができるChrome拡張機能「Palette Creator」をご紹介します。
このツールを使用すれば、他のホームページなどで使用されている色を抽出することができますので、すぐにそのカラーコードを把握して再現することができます。
無料で使用することができますので、まずはインストールして使用してみてはいかがでしょうか。

このニュースを読んだあなたにオススメ

CSSの基本~スタイルシートとは
人気の赤色でホームページをデザインしている大手7社が使っている色の割合を分析
配色に悩んだときに、きっっと役立つ7つの配色技法

Curriculum pt1

「Palette Creator」とは

Palette_Creator.png
ダウンロードはこちらから

「Palette Creator」は、Chromeで開いているホームページ等の中で使用されている画像に含まれる色を一瞬で抽出することができる、Chrome拡張機能です。
抽出した色の幅は4色から256色までカスタマイズできるほか、カラーパレットとして表示されます。

使用方法

step1.

1.jpg
まずは先に記載しましたダウンロードURLから、Google Chromeへインストールします。
インストールボタンをクリックすると、アクセス権限を許可するかどうか問われますので、問題なければ「拡張機能を追加」をクリックしてください。

step2.

2.png
正常にインストールされると、画面右上にメニューバーに拡張機能が追加されたことが表示されます。
パレット型のアイコンが追加されていることが確認できれば、準備完了です。

step3.

3.png
実際に使用してみます。
色を抽出した画像を右クリックしてください。
するとメニューが表示されますので「Palette Creator」を選択します。

step4.

4.png
カラーパレットを何色表示するのか選択することができますので、任意のパレット数を選択してください。
なお、パレット数はカスタマイズすることも可能です。

step5.

5.png
パレット数を選択すると、カラーコードが表示されたパレット画面が別画面で開きます。

「COPY」をクリックすると、パレットないに表示されているカラーコードをすべてコピーすることが可能です。
「DOWNLOAD」では、カラーパレットをダウンロードすることができます。
「SETTINGS」では、カラーコードの表示書式を選択することができます。
作成するホームページの言語に合わせて、任意の表示方法を選択してください。

まとめ

ホームページ作成前に、他のホームページ等を閲覧していてイメージに沿った色を見つけた際に、その色を一から再現することはなかなか難しい作業です。
色はホームページで紹介している商品やサービス、機能のイメージカラーともなるためなんでもいいというわけではありませんので、イメージの沿った色を使用することが好ましいことも事実です。

今回ご紹介したツールを使用すれば、瞬時に色を抽出することができますでので、これからホームページを作成する方や配色にお悩みの方は活用してみることをオススメします。

このニュースを読んだあなたにオススメ

CSSの基本~スタイルシートとは
人気の赤色でホームページをデザインしている大手7社が使っている色の割合を分析
配色に悩んだときに、きっっと役立つ7つの配色技法

このニュースに関連するカリキュラム

CSSの基本~スタイルシートとは
現在のホームページは、内容とデザインとをわけてプログラミングすることが増えています。デザイン部分を担うプログラミング言語をCSSといいます。文字サイズやレイアウトなどを細かく指定します。

おすすめ資料ダウンロード

Ferret marketing method

ferretマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全83ページ)

Profile

この記事の著者

林 きらら

Profile

林 きらら

2015年卒、新入社員の新米ライターです。どうぞあたたかく見守ってください。
毎日の業務の中で気になったことを綴っているブログ、Twitterともに毎日更新しています。よろしければそちらもチェックしてみてください。
ブログ:新卒きらら、ライターになる。
Twitter:@kirara_basic

webマーケター診断
会員になると、お気に入りに保存ができたり、
便利な機能が使えるようになります。

or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

会員になると、限定記事を全て読めるようになります。
他にも便利な機能が使えます。

or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

Wp banner

現会員310,949

会員になると限定機能が使えます。
or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

Line medium
Curriculum pt r4

この記事に関連したタグ

人気記事ランキング

  • 昨日
  • 週間
  • 殿堂
  • はてブ

4月17日(日)にアクセスの多かった記事

1Thumb

どれを選んでもオシャレに見える!英語の筆記体フリーフォント80選

2Thumb

インストール不要!超お手軽に画像加工ができる無料サービス20選

3Thumb

ブログ作成におすすめしたい、人気無料ブログサービス21比較まとめ

4Thumb

意外と知らないロジカルシンキングの基礎。アナタは使い分けができていますか?

5Thumb

【商用可】和風な日本語のフリーフォント40選

Sponsored

現会員310,949

会員になると限定機能が使えます。
or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)