DTPとWEB制作での違いあれこれ

こんにちは、ナカガワです。

サイト制作3日目の本日は、ヘッダーの修正と、ヘッダー・サイドナビの作成をしました。
実習当初からだいぶPhotoshopの操作になれてきたとはいえ、まだまだ速度が遅いです。
「あれ、段組設定ってできないんだっけ？」「四角って、Photoshopだと途中で角丸にするのってどうするんだろう」、などなど。本当に次から次に疑問が沸いて出ては、webで検索してメモしてを繰り返しています。
私が訓練校で受講したコースはDTPとweb併用（6ヶ月）で、基本的に制作物はDTPのほうが多かったためか、webとの習慣の違いに戸惑ってしまいます。

そこで本日は、これまでの期間で学んだきたことの中でDTPとwebの違いについて、2つほどご紹介させていただきます。

webでは極力カーニング調節をしない

たとえば、DTPでは文字を打ち込んでそのままにするのはご法度です。詳しくは「文字組み」について解説しているwebサイトをご参照いただけるといいと思いますが、簡単にいえば、「カーニング」の調節です。
文字それぞれ余白が違うので、それを見栄えよくalt + ↑ もしくは option + ↑ で調節していきます。

なので、私は今回のサイト制作でも同じように「ああでもない」「こうでもない」と苦戦しながら文字組みしたのです。
そして、本日の成果として実習担当の小薮さんにチェックをお願いしたら、

「webはキービジュアルなど大きく目立つもの以外は、文字をそのまま打ち込んでください」

とご忠告をいただきました。理由としては、

「コーダーの負担を減らすため」

です。

要するに、一つ一つにかかっているカーニングをcssで調節するとなると、コーダーさんは恐ろしいほど労力がかかってきます。
なので、どうしてもここは文字にこだわりたい、つまりロゴやキービジュアル以外はそのまま流すのが良いということなんです。

分りにくい場合は、文字ではなく「絵」として見てもらいたいところ以外はカーニングしたらダメだと覚えていただけるとよろしいのではないでしょうか？

危なかったです、このままそれに気づかずにコーディングにいっていたら膨大な時間が掛かっていたのは容易に想像できます。

やはり、現場のご意見をいただけるというのは本当にありがたいです。

レイヤーの管理

ここからは、webだけしかしていないという方には蛇足に思えるかもしれませんが、「そんなものなんだ」という軽い感じで読んでいただけるとありがたいです。

DTPをされた方なら、一番最初の制作の際に「下準備」のような工程を先生や先輩に説明されると思います。
私の訓練校でも同じで、最初は「トリムマーク」とレイヤーの話から入りました。
トリムマークとは、カンバスの四隅に設定する目印です。すなわち、「ここまでが紙のサイズですよ」ということを示すために設定します。
ただこれだけだと、わかりづらいので「ガイド」を実際のチラシなどの大きさに引いていきます。

そうしてできるレイヤーは下のようになります。

「トリムマーク」

「ガイド」

「文字」

「画像」

「背景」

上からの順番ままで、大体書きますとこうなります。多分、他の方も大体このような感じなのではないでしょうか。

これらのグループの中にレイヤーを加えていくわけですが、最終的にDTPの場合他の人にレイヤーを見せることはあまりないので、もしくは見せても身内だったりするので、そこまで拘る必要はありません。

しかし、webの場合デザイナーさんはその後コーダーさんにカンプデータを託すことになります。しかも、その場合コーディングは別会社にお願いするパターンも中々にあります。
特に私が現在実習している「ふたっぱ」さんはコーディングを主業務にしているので、余計にその傾向が強くなります。

なので、レイヤーはかならず他人が見ても分りやすく命名して、グループで固めておく必要があります。
さらに、コーディングも意識するならばその後 html で打ち込む際のことも意識して、「h1」「h2」などのおおまかなタグの記述もしていると連携がとりやすくなります。

今回は私一人でデザインとコーディングをするので、まだ許されますが、正直なところ小薮さんにご指摘いただくまで、だいぶ汚かったです。

職場に出て、なるべく現場の方と円滑にお仕事をするためには、こうしたルールや慣習をできるだけ吸収する必要があります。

本当に、この期間に知ることが出来てよかったです。

最後に

今日はなんだか取り留めの無い感じになってしまいましたが、一つ一つのメモを全て書いていくと散文詩のようになりかねないので本日は２つだけとさせていただきました。

今頭の中は残りの実習期間とサイト制作にかけられる時間のことで頭が一杯です。

本当に終わるのだろうか、焦りがどうしても沸いてきますが、強い気持ちと前向きな姿勢で残りの期間に臨みたいと思います。

本日もお読みいただきありがとうございました。