デザインデータのコーディングについてお聞きします。

質問

デザインデータのコーディングについてお聞きします。

フリーでWEB製作をしています。
デザインは得意ではなくコーディングやプログラミングまわりが得意ですが、今まで全て自分でしていました。

最近デザインだけデザイナーさんに頼むということをはじめたのですが、このような場合どこまで忠実にデザインを再現できればいいのでしょうか？

Illustratorでもらったデザインデータのピクセル数にあわせて作っていくことはできるのですが、ブラウザ間の微妙なずれを調整しているとどうしてもデザインと完全に同じにはなりません。

パーツの取り出しは正確にできるのですが。文字の大きさや行間をブラウザごとにあわせていると、色々やっているうちにけっこう違ってきてしまいます。

コーディングはCSS＋XHMTLでしなければなりません。

TABLEタグを使ったりソフトを使えばやりやすくなるということはわかるのですが、それをしない場合、どの程度の正確さがあればいいのか知りたいのです。

「例えば１ページ内に３ピクセルのずれがひとつくらいまでなら許せる」とか。
「見た目がおかしくなければいい」「ＩＥ最新バージョンで完璧ならいい」
など、実務で通用するための目安がわかるといいと思います。

対応させるブラウザはIE6以上、Firefox 1.5以上、Safari2 以上、Opera9 以上、Google Chromeです。

WEBデザイナーさんやコーダーの経験や実務現場の知識がある方、教えて下さい。

回答No.1

BellBell · ベストアンサー

私は貴殿と同じ立場、デザイナーさんから貰ったデータをHTMLコードにする立場です。
最も私が貰うのは、IllustratorではなくPhotoshopデータですが。

で、画面デザインを正確に再現させる事はまったく考えてません。
デザイン意図をかなり正確に再現させる事に心を砕きます。

少なくともピクセル単位では必ずずれるものなので、当然無視です。
心を砕くのは、『揃える』ということ。
行頭を揃える。
左右余白を同サイズになるように揃える。
フォントサイズを揃える。
色の指定を揃える。

デザイナーさんから上がってくるデータは、その指示であると解釈してコード打ちしています。

あとは、各ページデザインの統一感、それも揃えるです。

さらに言えば、Webの常識に揃えるという事もやります。
独自の芸術的デザインよりも、一般的な事務的デザインの方がユーザーが使いやすいですから。(ま、実際には事務的デザインはダメですが、極論としては事務的デザインの方がマシと言うぐらいの意味で)
この場合は、デザイナーさんにダメ出しって形で対応しますね。

あくまで、デザイナーさんから上がってくるデータは画面デザインであり、それをWebデザインに起こすのはコーダーの仕事って感じの分業制です。

ちなみに、デザイナーさんから上がったデータを忠実に再現しようとテンパッた人間が、HTMLにベタッとJPEG画像を貼りつけて、『これで完璧』とばかりにドヤ顔してるのを見たことがあります。文字まで画像(/_;)。
とりあえず怒鳴り散らして修正させましたが、『忠実に再現しなければいけないから、これで完璧なのに』と最後まで納得していませんでした。

私自身がクライアントと打ち合わせをして、企業カラーなどから、そのプロジェクトのメインカラーを決めたりと、デザイナーに指示出しもする、ディレクター兼、コーダー兼、プログラマなんで、どちらかと言えば特殊例かも知れませんが、ご参考まで。

お礼

やはりピクセル単位ではずれますよね。

「かなり正確に再現させる」という姿勢で行こうと思います。

貴重なご意見、ありがとうございました。大変参考になりました。

回答No.2

神崎 渉瑠（@taloo）

> 最近デザインだけデザイナーさんに頼むということをはじめたのですが、このような場合どこまで忠実にデザインを再現できればいいのでしょうか？

それはディレクターに相談すればいいと思います。
もし自分自身がディレクター業務を行うのであれば、自分で決めればいいと思います。

デザイナーが作成したイラレデータをもとにHTMLコーディングをした経験がありますが、
忠実な再現を主とするか、ユーザビリティーを主として加工して良いかはディレクター（デザイナーとコーダをとりまとめをしている人）に依存しますね。

１ピクセル単位で忠実に再現することを要求されれば、１ピクセル単位で忠実に再現することが最重要課題になります。
たとえば装飾文字100%のデザインなら、スライスして貼り付けただけになることもありますし、
最悪のパターンでは、フォントサイズ、フォント名ともに「統一しなければならない」という要求が「絶対条件」で提示された場合は、すべて画像になります。

この場合は、「装飾文字を使う」「フォント名を指定する」というデザイナーが悪いと思いますが、
コンピューターの制限を受けるためできないと説明しても、相手（デザイナー、およびディレクター）が言うことを聞かない場合は、その条件で作るしかないですね。
（でなければ仕事を受けない＝収入がなくなる、ですから。）

お礼

ディレクターさんが決定権ありということですね。

今回の仕事の場合、ディレクターはお客さんなのですが、ＨＴＭＬやデザインのことはわからないので、私が一任されています。自分で決めて差し使えないですが、念のためデザイナーさんと打ち合わせしようと思います。

参考になりました。ありがとうございました。