DTP→WEB

スポイトツールの多様はNG。色は厳密に管理/DTP→Web両方

DTP→Webに脱皮中デザイナーのバタコです。DTP・Web両方できるよう違いを調査中。「モニタによって色の見え方が変わるWEBは、大まかな色指定でいい?」ではなかったんですね。

たしかにWebはモニタによって色の感じ方が変わるので「完成後」をイメージする事は難しいです。DTPのように色校もありません。

でも

  • コードで色指定する(#FFFFFFなど)
  • 共同作業が多い(他のデザイナーやコーダーもデータを触る)
  • アップ後に改修(デザインや情報は随時変わる)

といった点を考えると、Webの方がきちんと色を管理する必要があります。

見た目が同じなのにカラーコードが違う=手間だけ増える

パット見は同じ赤色でもRGBの数値が少し変わっただけで・・

コーダーはカラーコードを書き変える事に。見出し・ボタン・パーツ、最近はどれも画像ではなくコードで色指定されています。数値が微妙に変わると混乱しますね。制作するときコピペも簡単にできません。

Webサイトはパーツの入れ替え・動きの変化が多いので管理が大変。「デザイン効果が変わらないのに手間だけ増える」なんてトラブルの元ですね。気軽に似た色をドンドン使うのではなく、事前に色を決める事にしました。

最初に使う色を決めてスウォッチに登録

使う色はスウォッチに登録します。これはDTPでもやってきましたが、Webの違いは「この色を使っています」と他の人に伝える役割がある所。

そのため見出しやテキストカラーだけでなく、リンク色、ロールオーバー(カーソル当てた時)、訪問済みリンクカラー(既読済)も登録します。「スウォッチを見れば、使う色だけがひと目で分かる」状態がいいです。

大手サイトはリンク色を微妙に変える

余談ですが大手サイトはリンク色を微妙に変える事が多いらしいです。例えばBingは「#0000FF」から「#0044CC」 に変えた結果、年間売上高が8,000万ドル増えた・・ちょっとやってみたくなりますね。(参考:impress)

Photoshopのプリセット機能でスウォッチを共有

Photoshopの「プリセット共有」を使えば、psdデータ以外でもスウォッチを共有する事ができます。私は職場で使った事ないのですが、スウォッチの保存でacoファイルを作ると、他の人がacoファイルをダブルクリックをすればスウォッチを読み込めます。

2021年2月9日Photoshopの最新アップデートでは、プリセットの同期対応や共同編集機能が追加されたそうです。

[同期できるプリセット]ブラシ・グラデーション・スウォッチ・スタイル・シェイプ・パターン(フォルダ構造やグループ化、順序も保持した状態)

DTPと違ってWebは「微妙な色の変化」が伝わりにくい。色はハッキリ変える

ページ数が多いパンフレットを作る時、ページごとに少しずつトーンを変えるとキレイですが、WEBはあまり意味が無いようです。

パラパラと通して目を通す冊子と違って、モニタ画面で見えている所はほんの一部。見たい所にピョンピョン飛びますし、ページごとの微妙な色の違いは分かりにくいです。そう考えると、スウォッチに登録する色数も減りそうですね。「違いをわかりやすく伝えたい時」にハッキリ色わけすると良さそう。