DTP→WEB

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

DTP→Webに脱皮中デザイナーのバタコです。DTP・Web両方できるよう違いをスキマ時間に独学中。

「モニタによって色の見え方が変わるWEBは、大まかな色指定でいい」と思っていました。WEBって、DTPより色指定が大事だったんですね!

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

といった理由です。

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

同じような赤色でも、RGBの数値が少し変わっただけで・・

コーダーさんの書くコードが変わります。

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

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

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

使う色はスウォッチに登録します。

見出しやテキストカラーだけでなく、リンク色、ロールオーバー(カーソル当てた時)、訪問済みリンクカラー(既読済)も登録します。

「スウォッチを見れば、使う色がひと目で分かる」状態がいいです。

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

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

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

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

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

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

パラパラと通して目を通す冊子と違って、モニタ画面で見えている所はほんの一部。見たい所にピョンピョン飛びます。ページごとの微妙な色の違いは分かりにくいです。

「違いをわかりやすく伝えたい時」にハッキリ色わけすると良さそう。

ふーーーーーー。