紙媒体DTPデザイナーがウェブデザインをするための10の心得
今まで紙媒体のデザインを中心にやってきたけど、最近お客様からウェブサイトも作ってほしい、という要望が増えてきていて……というデザイナーさん。私の周りでもそういう方、最近多いです。
紙媒体のデザインもウェブデザインもそんなに変わんないでしょ？って思っているとしたら、それは違うよ。
考え方を中心にまとめてみました。
目次
1. イラレでやっていいよ
まずはじめに、デザインカンプを何で作るか？イラレでやっていいよ！もしあなたがイラレが好きなら。レイアウトを組むのにはイラレのほうが便利で間違いない。そのためのツールなんだから。
ウェブは絶対にPhotoshopで作るべき！とかって非難してくる人たちはど素人だからほっといていいよ。どっちでもだいたい同じようなことができます。
2. 単位px、色RGB、ピクセルを滲ませるな
イラレでもフォトショでもいいけど、次のことだけは必ず守るようにしてください。まあこれはググればいっぱい出てくることだから簡潔に。
- 単位はpxで（mm、ptになっていないか？ドキュメント設定を確認）
- 色はRGBで（ドキュメント設定、配置画像も）
- オブジェクトの位置、サイズはぴったりのpx数で表されるようにする。
pxに小数点以下の値をつけない（画像ボケの原因。スナップ機能やカーソル移動値を使う。アートボードの位置&サイズもチェック） - 文字サイズは13〜16pxが標準。11pxを下回るサイズは使わない
pxというのはモニタの一個の点を指す単位なんで、0.5pxなんてものはそもそも存在しません。アプリケーション上では入力できちゃうけど。イラレの「変形」パネルをいつもチェックしておこう。
3. レティーナディスプレイのことを忘れるな
めっちゃかんたんに言いますと「スマホ表示用に、2倍のサイズの画像が要る」って覚えておいてください。対応してない画像をiPhoneなどのレティーナディスプレイで見ると、な〜んか解像度低いぼやけた感じになりますので、コーディング担当はそのへんはちゃんと考えて作業するはずです。
デザインカンプじたいは、そのままのサイズ（例えばスマホなら幅480pxとか）で組んで大丈夫です。ウェブ用に画像を書き出すときにイラレの場合は「アセットの書き出し」パネルを使います。これで1倍と2倍の書き出しを一度にできます。
4. 画面の大きさは3種類
紙は印刷してしまえば固定の大きさです。でもウェブは、ありとあらゆる端末でアクセスされます。見ている人がどんな大きさで見ているか、作る側はまったく把握できないしコントロールできない。まずはそれを知っておくこと。
でもとりあえずはかんたんに考えよう。次の3つの画面サイズ（幅）で作っておけばだいたいオッケーです！
- 480px または 320px……スマホ用
- 768px……タブレット端末用
- 1280px……Mac,PC用
みっつも作るの？って感じだけどポイントは、同じ内容を違う画面サイズで見たときどう見えるか、なのでそこまで手間にはならないはずです。逆に色が大幅に変わったり劇的に形が変わったりしたらおかしいからね。
5. CSSでできることを知れ
CSS（カスケーディングスタイルシート）は、見た目の制御をする記述です。あなたの作ったデザインカンプを、ウェブ上に再現するべくコーディング担当者が書くのがそれです。
CSSは、じつはかなりのことを表現できます。例えばグラデーションカラーの角丸ボタン、なんていうのも昔は画像を用意しなくては再現できなかったのが、今はCSSだけでできたり。
CSSだけで再現できると何が嬉しいかというと、書き出す画像が少なくて済む。逆に、見出しやちょっとしたあしらいを何でもかんでも画像で再現させようとすると、後が面倒くさいのです。なぜなら、複数の画面に対応させなければならなかったり、ちょっとだけ色を変えたくてもそのために新たに画像を書き出す必要があるからです。
なので、わざわざ画像を作らなくてもいいところはそうしましょう。そうすればあなたもコーディング担当者もラクだし、ウェブサイトの容量も軽くできてお客様も万々歳です。
そのために、どういうのならCSSで作れるのかを知っておこう。そしてコーディング担当にデザインファイルを渡すとき「ここはCSSでやって」って伝えよう。
CSSでできること
- ドロップシャドウ
- 角丸の四角形
- 画像やオブジェクトを半透明にする
- 背景にグラデーションを使う
- 四角形の塗りをグラデーションにする
- いくつかの要素をレイヤーのように重ねる（3,4つ）
CSSでできないこと
次の例なんかはDTPデザイナーさんが自然に使ってしまいそうな表現じゃないでしょうか。でもこれらはCSSではとても再現しにくい（今のところ）ので画像で置き換えるしかない。
- 文字の塗りにグラデーションを使う
- 複雑な形の罫線
- 罫線で囲った吹き出し
- 透明は透明でも「乗算」「オーバーレイ」など（イラレフォトショでいうところの「通常」しか使えない）
無理ではないんだけど、一部のブラウザが対応してないので実質使えなかったり、CSSではかえって面倒だったり、てのもあります。デザイン上どうしても外せないものは仕方ないですが、本当に必要か検討しましょう。
6. フォントが限られていることを知れ
紙もののデザインではMacに入っているフォントをどれでも自由に使えるけど、ウェブではそうはいかない。
持っているフォントの種類は見ている人のコンピュータによって違うから、基本はシステムフォントしか使えないと思ってください。
基本じゃないフォントを使いたい場合は、そのフォントのデータそのものを組み合わせてウェブ上に提供してあげないと、見ている人が再現できません。なおかつ、ウェブフォントとして使えるフォントは限られているし、ウェブサイトの動作も重くなる。
覚悟（と相談）の上で使ってください。
7. 詰め込むな
「縦30mm、横50mmの中に文字を全部収める」ようなことを常日頃やっていた人は、ウェブではもうちょっとゆったりしていいよ。
たまに「この中身はここまでに収めたほうがいいな」みたいなこともあるんですが、より余白を持たせること、ゆったりさせることを意識したほうがうまくいきやすいと思います。横書き文章の行送りも、印刷では135%くらいが標準ですが、ウェブでは160%とかときには200%くらいがふつうです。
それと、画面全体が縦に長くなってしまうことはほとんどの場合、全く気にしなくて大丈夫です。長いことはいいことだ的なセオリーも場合によってはあるくらいで。
どうしてもこの枠内に収めないと！ぎゅうぎゅう！文字めっちゃ小さくしよ！……という考え方はウェブではNGです。Googleボットもそういうところチェックしに来るしね。
8. 文字の折り返し位置は制御不能と知れ
読みやすいように、文章に合わせて改行を入れていくのは印刷のデザイナーさんがナチュラルにやることですが、ウェブではそれは基本、NG行為って思ってください。
文章やコピーが中途半端なところで折り返されても、それはそういうものとして受け入れます。または、折り返しても変じゃない文章にします。それがウェブの流儀。
なぜなら、文字の大きさ、フォントによる幅の違い、どちらも制作側はコントロールできないからです。文字の大きさなんて、訪問者がブラウザで自由に変えられるしね。そもそも誰がどんな端末で読むかなんてわからないしね。
気を遣って細かく改行を入れた結果、たぶんどれかの端末ではめっちゃ読みづらい見た目になってます。そういうのウェブではめっちゃ嫌われるんです。
お客様が「ここで折り返して欲しい」みたいな指摘をしてくることもあるけど、できかねますってちゃんと言ってね。
9. 長体、字詰め、均等配置を使うな
ウェブでは、フォントの細かい制御はできないと思ってください。ここをもうちょっと詰めたほうが綺麗だな、とか、収まらないから長体かけてしまおう、とかは紙を作っていると日常的にあることですけど、ウェブデザインを組むときは長体も字詰めも使わないでください。
均等配置、両端揃えもできないので使わないでください。
いちおう字間の調整はCSSの機能でありますけど、前述の文字折り返しとかサイズとか、あるいはブラウザごとの解釈の違いなどいろんな事情があって完全制御は難しいので、できるけどあんまり使いたくないもの、って感じです。
10. デザインと設計は別モノと知れ
「ウェブデザインってのはデザイナーが考えるかっこいい表現をいくらでも自由に作って良くて、それを何とかして再現するのがコーディング担当の仕事」みたいな考えは捨てましょう。それやるとだいたい、クソサイトができあがります。
ウェブにおいては、デザイナーらしい「自由にクリエイティブに表現する」みたいな態度はあまり喜ばれません。なんでかっていうと次のとおりです。
ウェブサイトってそのほとんど全てが、何かしらの広告的役割を期待して生み出されます。そこでのひとつのゴールは、閲覧者がアクションを起こしてくれる（商品を買ってくれるとか、問い合わせをしてくれるとか）ことです。
かっこいいデザインを作ったからって、閲覧者がアクションしてくれる＝売上が向上するかというと、別にそんなことないんです。
むしろかっこよさにこだわればこだわるほど余計なコードが増えるので、閲覧者から見ると重い・遅い・うっとおしいサイトになりがちです。
見た目はかっこいいけど集客効果が全くなくてしかもウザいウェブサイトなんて、誰も望んでません。
じゃあ一体どうしたらありがたがられるサイトを作れるのかというと、戦略を考えなきゃいけません。デザインの前に。閲覧者がアクションを起こすのにはこういうコンテンツをこう配置すべし、という心理作戦ですね。しかも、誰が見て触っても問題なく使える設計も必要です。
紙中心の経験しかないデザイナーさんに戦略や構造まで考えろというのはコクだと思います。なので、できれば、ウェブに精通したディレクター的立場の人に素案を書いてもらって（ワイヤーフレームって言います）、それに味付けをする感じでデザインを考えてください。それがベストです。
お客様は素人考えで「ウェブでもチラシでもそんな変わんないでしょ、とりあえずデザイナーに頼めばいいんでしょ」って適当に思っていらっしゃることが多いです。というか悲しいことにデザイナーさん自身もそう思ってたりしますが、ナメんといてください。そこにはウェブ独特のセオリーがたくさんあります。
周りに全くウェブ経験者がいないのにウェブデザインを引き受けることになった場合、そしてそれが続きそうな場合は、腹をくくってウェブの考え方を勉強したほうがいいよ。
勉強したい人を応援するよ！
