普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、
IllustratorでWeb用のデザインカンプを作ることが多いと思います。
別にIllustratorからでもコーディングはできるのですが、後工程の人を困らせないために、
ちょっとだけ気に留めておいて欲しいことがあります。
1.色モードはRGBで。
普段DTPをやっているとついCMYKモードのままで作ってしまうことがあるかもしれません。
でもWebはRGBの世界です。変換すると意図した色にならなかったりしますので、
最初からRGBで作ってください。埋め込む画像も同じです。
2.どこがデバイスフォントなのか分かるように指示を。
紙の世界では文字は文字でしかありませんが、Webの世界では「テキストデータ」にするのか
「画像」にするのか決めなければなりません。本文は原則「テキストデータ」ですが、
判断に困るのは「見出し類」と「ナビゲーション・ボタン類」です。
見出し こんなのとか
見出し こんなのとか
メニュー | メニュー | メニュー | こんなのとか
「テキストデータ+CSS」で表現出来ちゃうような見出しをイラレで作られちゃうと、画像にしたいのかテキストでいいのか判断にとても迷うので、できれば最初から分かるようにしておいてもらえると助かります。
デバイスフォントだけ別レイヤーにしておくとか、赤字レイヤーで指示入れておくとか。手段は何でも構いません。画像なのか、テキストなのか、そんなことで頭を悩ませなくてもいいようにしておいて欲しいのです。
3.ロールオーバ時のデザインも作って下さい。
紙と違ってWebはユーザーさんが欲しい情報を見るためにコンテンツをクリックします。
そうしたクリック可能な部分をユーザーさんにはっきり示すために、カーソルが乗った時のデザインが必要です。
シンプルなテキストリンクから、ナビゲーションバーや凝ったボタン類まで、クリックできるものに関しては「通常時」のデザインと、「ロールオーバー時」のデザインを両方用意しておいてください。
ロールオーバー用の画像は、それだけをまとめて別レイヤーにしておいてもらえると助かります。
4.単位は「ピクセル」、すべて整数で。
Webデザインは「ピクセル」が基準単位です。是非、Webデザインを作るときにはピクセル単位で作成してください。そして、何か数字でサイズや位置を指定する時、小数点の数字は使わないでください。パソコンのモニタでは1pxより小さいドットは打てません。小数点で指定されたものはとなりのピクセルにまたがって滲んでしまいます。
数値は全て整数で指定してください。お願いします。
5.白でもボックスには「塗り」を設定してください。
紙なら「白」=透明 ということで何も設定しなくていいところですが、Webは「白」≠「透明」です。
イラレで作ったデータをPhotoshopに持って行くと、塗りが設定されていないところは全部透明になってしまいます。塗りが無いとPhotoshop上で効果が付けられません。ナビゲーションパーツやボタン類の作り込みをする時に塗がないと結構困ったりします。
6.テキストデータは原則として文字組できません。
画像化するテキストは存分にツメでも組みでもやっていただいて構わないのですが、デバイステキストで表示する部分にイラレ上で細かい文字詰めなどの処理をしないでください。Webは紙のDTPと違って画面上での文字組処理がとっても苦手です。苦手というか、ほぼ出来ません。時間をかけて美しく文字詰めしてもらっても、ブラウザの上ではベタ組み成り行きでしか表示できないので、たぶんとてもがっかりします。禁則処理もジャスティファイもできません。諦めてください。ごめんなさい。
7.文字サイズも枠のサイズも「可変」だと意識してください。
DTPとWebのデザインで一番違うのは、多分ここだと思います。テキストデータ状態の文字のサイズは、ユーザー環境でいくらでも変わってしまいます。決まったサイズの枠の中にテキストを確実に収める手段は無いと思ってください。もし文字サイズが大きくなったり、コンテンツ量が増えたりした場合、それを収めているHTMLの枠は縦方向に自動的に伸縮します。作り方によっては横方向のサイズも可変にすることだってできます。DTPのように固定サイズの枠の中にギュウギュウに詰め込むことができない代わりに、Webでは枠のサイズそのものを無限に広げていくことができます。
何が言いたいかというと、「可変コンテンツ(テキスト等)が入る予定なのに、固定サイズを前提としたデザインをしないで欲しい」ということです。こればっかりはどうにも出来ません。HTMLもCSSも万能には程遠いので、出来ないことはできないのです。それ以外のことなら大抵のことは何とかします。でもこればっかりは勘弁してください。お願いします。
いろいろうるさく言いましたが、こういう細かいことにちょっと気を使ってもらえるだけで、コーダーはとってもハッピーになれます( ´∀`) お互いに気持ちよくお仕事するために、是非ご協力ください。