
デザインデータのコーディングについてお聞きします。
フリーでWEB製作をしています。
デザインは得意ではなくコーディングやプログラミングまわりが得意ですが、今まで全て自分でしていました。
最近デザインだけデザイナーさんに頼むということをはじめたのですが、このような場合どこまで忠実にデザインを再現できればいいのでしょうか?
Illustratorでもらったデザインデータのピクセル数にあわせて作っていくことはできるのですが、ブラウザ間の微妙なずれを調整しているとどうしてもデザインと完全に同じにはなりません。
パーツの取り出しは正確にできるのですが。文字の大きさや行間をブラウザごとにあわせていると、色々やっているうちにけっこう違ってきてしまいます。
コーディングはCSS+XHMTLでしなければなりません。
TABLEタグを使ったりソフトを使えばやりやすくなるということはわかるのですが、それをしない場合、どの程度の正確さがあればいいのか知りたいのです。
「例えば1ページ内に3ピクセルのずれがひとつくらいまでなら許せる」とか。
「見た目がおかしくなければいい」「IE最新バージョンで完璧ならいい」
など、実務で通用するための目安がわかるといいと思います。
対応させるブラウザはIE6以上、Firefox 1.5以上、Safari2 以上、Opera9 以上、Google Chromeです。
WEBデザイナーさんやコーダーの経験や実務現場の知識がある方、教えて下さい。
No.1ベストアンサー
- 回答日時:
私は貴殿と同じ立場、デザイナーさんから貰ったデータをHTMLコードにする立場です。
最も私が貰うのは、IllustratorではなくPhotoshopデータですが。
で、画面デザインを正確に再現させる事はまったく考えてません。
デザイン意図をかなり正確に再現させる事に心を砕きます。
少なくともピクセル単位では必ずずれるものなので、当然無視です。
心を砕くのは、『揃える』ということ。
行頭を揃える。
左右余白を同サイズになるように揃える。
フォントサイズを揃える。
色の指定を揃える。
デザイナーさんから上がってくるデータは、その指示であると解釈してコード打ちしています。
あとは、各ページデザインの統一感、それも揃えるです。
さらに言えば、Webの常識に揃えるという事もやります。
独自の芸術的デザインよりも、一般的な事務的デザインの方がユーザーが使いやすいですから。(ま、実際には事務的デザインはダメですが、極論としては事務的デザインの方がマシと言うぐらいの意味で)
この場合は、デザイナーさんにダメ出しって形で対応しますね。
あくまで、デザイナーさんから上がってくるデータは画面デザインであり、それをWebデザインに起こすのはコーダーの仕事って感じの分業制です。
ちなみに、デザイナーさんから上がったデータを忠実に再現しようとテンパッた人間が、HTMLにベタッとJPEG画像を貼りつけて、『これで完璧』とばかりにドヤ顔してるのを見たことがあります。文字まで画像(/_;)。
とりあえず怒鳴り散らして修正させましたが、『忠実に再現しなければいけないから、これで完璧なのに』と最後まで納得していませんでした。
私自身がクライアントと打ち合わせをして、企業カラーなどから、そのプロジェクトのメインカラーを決めたりと、デザイナーに指示出しもする、ディレクター兼、コーダー兼、プログラマなんで、どちらかと言えば特殊例かも知れませんが、ご参考まで。
やはりピクセル単位ではずれますよね。
「かなり正確に再現させる」という姿勢で行こうと思います。
貴重なご意見、ありがとうございました。大変参考になりました。
No.2
- 回答日時:
> 最近デザインだけデザイナーさんに頼むということをはじめたのですが、このような場合どこまで忠実にデザインを再現できればいいのでしょうか?
それはディレクターに相談すればいいと思います。
もし自分自身がディレクター業務を行うのであれば、自分で決めればいいと思います。
デザイナーが作成したイラレデータをもとにHTMLコーディングをした経験がありますが、
忠実な再現を主とするか、ユーザビリティーを主として加工して良いかはディレクター(デザイナーとコーダをとりまとめをしている人)に依存しますね。
1ピクセル単位で忠実に再現することを要求されれば、1ピクセル単位で忠実に再現することが最重要課題になります。
たとえば装飾文字100%のデザインなら、スライスして貼り付けただけになることもありますし、
最悪のパターンでは、フォントサイズ、フォント名ともに「統一しなければならない」という要求が「絶対条件」で提示された場合は、すべて画像になります。
この場合は、「装飾文字を使う」「フォント名を指定する」というデザイナーが悪いと思いますが、
コンピューターの制限を受けるためできないと説明しても、相手(デザイナー、およびディレクター)が言うことを聞かない場合は、その条件で作るしかないですね。
(でなければ仕事を受けない=収入がなくなる、ですから。)
ディレクターさんが決定権ありということですね。
今回の仕事の場合、ディレクターはお客さんなのですが、HTMLやデザインのことはわからないので、私が一任されています。自分で決めて差し使えないですが、念のためデザイナーさんと打ち合わせしようと思います。
参考になりました。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
奇数のフォントサイズ指定について
-
入力規則のリストの文字の大き...
-
CSSで文字に青や紫の枠線が出て...
-
ペイント3Dのテキストサイズ変更
-
テキストエディタmiの表示文字...
-
CSSです。英数字のみArial書体...
-
MoveWindowで位置だけ変更する...
-
efx40について
-
マイクロ(μ)の文字を半角で出...
-
HTMLで行間隔調整の方法をお教...
-
outlook 文字を揃えたい。tab...
-
リストの前後の行間をなくす方...
-
印刷ダイアログの印刷ボタンを...
-
VBのDataGridView印刷
-
教えてください。
-
Excel VBAで文字列の可視長を得...
-
HTMLって印刷するとずれるんで...
-
cssファイルの名称付け
-
Excel:一部のフォントでセルの...
-
スタイルシートでリンクの色が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
テキストエディタmiの表示文字...
-
alertで表示させる文字サイズは...
-
コピーライト記号の表示が小さい
-
奇数のフォントサイズ指定について
-
VBAでListViewのフォントを変更...
-
ペイント3Dのテキストサイズ変更
-
<pre>タグ内のフォントサイズに...
-
”ヒラギノ明朝Pro”をWindowsで...
-
CSSです。英数字のみArial書体...
-
パスワード欄の"●"文字を小さく...
-
共有メモリについて
-
英字と日本語が並んだhtmlの自...
-
HTMLテキストボックス内の文字...
-
英サイト(UTF-8)内での全角文字...
-
プルダウンメニュー内のフォン...
-
hタグのスタイルシート指定が...
-
HTMLでHGPゴシックEを表現する...
-
【スタイルシート】 半角と全角...
おすすめ情報