【Photoshop】「スウォッチ」を利用してサイト内の色を管理する方法

Webデザインを行う際、いいなと思った色をカラーピッカーで適当に拾っていくと、「同じ様な色味だけどカラーコードが微妙に異なる色」がサイト内で無数に増えていってしまいます。これでは統一感がなくなってしまいますし、都度色を選択するのに時間がかかってしまいます。そして、コーディングを担当する人が「どのカラーコードが正解?」となってしまいます

今回は、カラーコードを一元管理して作業効率を上げるべく、Photoshopでのスウォッチパネルの活用についてまとめたいと思います。

スウォッチパネルを表示

スウォッチパネルは「ウィンドウ」メニューの中にあります。クリックしてチェックを入れます。

任意のフォルダを作成

フォルダはスウォッチパネル右下のアイコンをクリックすると新規作成出来ます。制作するサイトごとに使いたいカラーは異なってくるかと思うので、制作するサイトごとにフォルダを作ります。ここでは「LPサイト制作用」としました。

追加したいカラーコードを取得する

参考サイトの使用している色を追加したい場合は、プラグインを使うなり、ソースコードを確認するなどして、取得したいカラーコードを調べます。

描画色にカラーコードを入れる

取得したカラーコードを入力し、描画色を変更します。

任意のフォルダに入れたい色を追加する

描画色を変更すると、スウォッチパネル上部にその色が追加されていることが分かります。ここまで出来たら、任意のフォルダ(ここでは「LPサイト制作用」)を選択した状態で右下の「スウォッチを新規作成」をクリックします。するとスウォッチ名を入力する画面になるので、使用用途やカラーコードなどで名前を付けます。

スウォッチの活用は時短に繋がる

スウォッチに使用したい色を登録しておけば、いちいちページ内や他社サイトのカラーコードを調べにいく必要もなくなりますし、似たような色を乱発することもなくなります。とても便利なので活用していきたいですね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です