日記

色番号をパパっと取得するのが10倍速くなる「トリカラーパレット」

Webサイトを作っている時に、人の作ったものを複製したり、ちょっとボタンを追加したり、果ては自分で作ったのに元素材が無くなった、とかって時に意外と困る二大要素が「フォントがどれか分からなくなる」というのと「色番号が何か正確に分からない」ってことだったりしないでしょうか?

その中で今回は「色番号を正確に取得する」のに便利なツールのご紹介。

いざ「このフォントと同じ色で、マウスオンのフォントカラー指定をCSSに設定・・・・」って時に「フォントの色」を調べる時、これまで名村は、


  1. 画面をキャプチャ
  2. PhotoshopやFireworksに貼り付け
  3. スポイトで色を取って、番号取得

って流れを取ることが殆どでした。

もちろん画像だったりしたら元素材とか、CSSを簡単に展開してフォントのカラー指定の場所がすぐに分かればいいのですが、細かい作業においては往々にして元素材もないとか、別の制作会社が作ったものにならって複製(やっぱり元素材なんていいものは無い)なんて場合にはそうした方が早かったりしました。

それを便利にさくっと色番号を取得できるのがこのツール。


色の組み合わせを比較しながらカラーコードを取得「トリカラーパレット


トリカラーパレット

トリカラーパレット

このツールは基本的には地色とフォントの色とかのコントラストとかをさくっと見るためのツールかは始まっていたっぽいのですが、何が便利かって、「画面の色」を取得する機能があるってことです。

ツールを立ち上げると、横の様な画面がでるのですが、その中段ぐらいにある「画面の色」ボタンを押すと、


色取得画面

色取得画面

横の様な画面が出てきて、マウスカーソルのある場所がもの凄いズームされています。

その画面を見ながら、1ピクセル単位で色を取得できるのがこのツールの便利な所です。

もちろんこれは画像ソフトでもできるのですが、この用途のみに特化している意味では、アプリケーションとしての起動も一瞬ですし、レジストリに登録をしない単体稼働するアプリケーションですし、特にCSSでのフォントカラーとか背景色指定の為に色番号を調べるってことではかなり便利です。

もちろん本来の目的として、地色とフォントカラーの調整をするって意味では、それもかなり便利ですし。

色番号系で毎回「面倒だなぁ・・・」と思っている方は是非一度お試しください!


著者・名村晋治のプロフィール

名村晋治

株式会社サービシンク

代表取締役 / テクニカルディレクター

名村晋治

1996年よりWeb制作に携わり、キャリア25年目のWebディレクター

大学在学中の1996年「Web制作集団ネイムヴィレッジ」を設立し100社を超えるサイト制作の企画、ディレクション、デザイン、マークアップ、システム開発に携わる。

2000年不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
2005年からはWeb制作会社に合流し取締役を歴任。同社ではフロント実装からディレクションまでを担当。

2010年東京のWeb制作会社・ホームページ制作会社、株式会社サービシンクを立ち上げる。 不動産業界に特化したサイト制作の、アートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。基軸としてはクライアントの商売に寄り添う為に、徹底的に思考を巡らせる為のディレクションを行う。

Webブランディングの入門教科書」、「変革期のウェブ」を「マイナビ出版」から出版。

2000年から「Webディレクター育成講座」を独自開催し、40時間のカリキュラムを通し「仕事を回す事ができる」Webディレクター育成手法には定評があり。
首都圏のみならず地方でも講座実施、参加者は延べ700人を超える。

詳しいプロフィール

もう一つのキャリアとしてプロとして舞台俳優、声優。 1996年から養成所に通い始め2004年に廃業するまでの間はWebディレクターと二足のわらじでの活動。

俳優としては、東京の小劇場でシェイクスピアやマリヴォーといった古典を中心に舞台に出演、またNHK海外ドラマや、洋画等、ゲームでの声優を行っていました。

俳優時代の経験を活かし、演劇の訓練メソッドを利用した「コミュニケーションスキル」向上を目指したセミナー・研修も実施しています。

最新の記事