デザイナーです。社内のコーダーからなかなかデザイン通りに仕上がってきません。得に複雑なデザインではないのですが、アキやマージン、フォントの大きさなど細かいところがバラバラになってしまいます。コーダーへデザインを渡すときに気をつけていることや、こうするとよいというのがありましたら教えてください。
仕様書を書けばいい
基本フォントサイズとかマージンルールとか共有しないまま PSDどおりにやると ほぼ 狂う。
Fireworks使ってください。
シフトキー押すだけでガイドの間隔をピクセル数で出してくれます。
ネタでないのならば。確かにソフトで解決するのも一つだけど、そもそもコミュニケーションの問題だと思う。
能力が足りないのか、意識が足りないのかまず確かめる。
お前はコーディングできるの?できるのなら見本を見せてあげたら
関係ねーだろ。デザイナーはデザイン。コーダーはコーディング。お前がやれとか言う奴は三流以下。
↑釣りなのに反応するな、この低能が
↑お前が釣られてんじゃねーよ四流
↑お前が釣られてんじゃねーよ6流
この流れに笑ったw
揚げ足をとるわけではないですが、得に
って書いてる時点でダメと思います
余白やフォントはデザイン意識のないコーダーやプログラマは適当にやる人がたまにいますね。余白やフォントがいかにデザインで重要な要素であるか理解していないからだと思います。その点を一度きちんと指摘してカンプどおりにコーディングしてもらうように説明すればどうでしょう。
左余白21px、右余白22pxとかやるバカデザイナーに先に言え
この主題のレベルのこと言ってんだろ?話広げて小さなことをつつくなよ。さてはおまえはバカコーダーだな?
デザインの一枚絵を背景に指定してオブジェクトをそれにあわせていく。または組み上がったらスクショ撮ってデザインと重ねて許容範囲のズレに収まるまで調整。仕様書きっちりはありだけど際限ないしデザイナー負担が大変になるだけ。
コーディングする側だけど、こっちでデザイン調整することは結構あるよ。コンテンツ幅960pxなのにシャドウがはみ出てたり、要素のピクセルずれ、写真加工が微妙、ロールオーバー画像を作ってない、透過pngで置きたいのに背景付いたまま乗算とか。
デザイン渡すときは、最低でも構成要素ごとにグループ分けをきちんとして、ロールオーバーやオーバーレイ表示するコンテンツはレイヤーを色分けする程度はしてほしいなぁ...
あるあるムダに多いガイドライン、しかも画像と全然合ってない…レイヤーは全く整理されていない…Web屋8年くらいの人がこれで、さすがに呆れる
シャドウはみ出してる?コーディングスキルの無さを棚に上げてないで、そのシャドウをはみ出させたデザインをちゃんと実装してみせろよ。それがお前の仕事だよ。
シャドウの実装なんてネガティブマージン使えば余裕だけど、明らかにおかしいデザインまで再現する必要性などない。何でもかんでも再現してるようじゃ、逆に仕事してるとは言えないぞw
コメ主の素人的主観のみを頼りに勝手に調整()されてテストアップされてもクライアントに見せられないんだけどさっさと直せカス。
コーディングやったことないデザイナーのデザインはやりにくい。
実際、余白とかぴっちり合わせるのは結構大変だよ。ブラウザによってline-heightの計算とか違うから。
それな。それとか、一ヶ所でしか出てこない(=CSSの使い回しが出来ない)スタイルを多数強要するようなデザインをして来る。
確かに、余白はぶらうざ毎に違うから全く同じにしなければおかしいという考え方もちょっと違うね。あと、スクショ撮って重ね合わせて確認とか(笑)
どこまでが妥協のラインなのかも含めて仕様書なりコミュニケーションなりでお互いの認識を擦り合わせないとトラブルになるね。
全部違うならいいんですが、1箇所しか出てこないのが微妙にあるとうんざりですね。それが相応の効果を生むのならわかりますが、そうでないのならそれは感覚でデザインしてるだけだなーと思います。
ブラウザごとにIE7、IE8、IE9と1つずつデザインしてくれるなら、やれと言われればやりますけどね。その辺り決めずに(知らずに)、デザイン通りに〜って言うのも変な話。
じゃぁデザイナになれば?
ルール作ってマージン取ったりしてるならコーダーのせい。雰囲気で毎回適当にマージン取ってるならデザイナーのせい。
デザイン通りにちゃんとコーディングできないなら死んでください!って言うしかないよね〜だってそんなコーダーいらないじゃん
ほんとこれ。
そういうデザイナーの退職率は高そう。
↑そしてクソコーダーの居ないまともな企業に転職したよ
↑おなじ理由で転職した。もちろんそれだけが理由じゃないけど
デザインもコーディングもできるけど、デザインをピクセル単位で正確に再現できないやつはコーダー名乗る資格無し。
これすげーコーディングしづらいんだけど、とか文句や言い訳する奴は、もうこの業界から消えてくれ。金と時間がもったいない。
デザインとコーディング出来るけどってわざわざ言うって事はデザインしか出来ない人とかコーディングしか出来ない人っているの?いや、本当にケチつけてる訳じゃなくて本気でびっくりした。
いるいる。実際、コーディングしかできないやつほど、簡単に再現できないデザインに安易に文句つける。再現が難しいデザインを再現するのは、コーダーの腕の見せどころのひとつなのにねぇ。
再現出来る技術は必要だけど、正直もうピクセル単位で正確に再現することより運用上有用な設計優先する事の方が求められてるんだよね。LPとか小規模ばかり作ってるんじゃないかぎり。まぁ、その辺の仕様をデザイナーと共にデザイン前に決めておくべきなんだけど
↑そうだと思う。そしてこれができないコーダーが多すぎ。ただ、運用上有用な設計をするのは当たり前のことで、それは実作業前の上流工程で決めておくことなので、再現や実装する能力の低さとは無関係だと思う。自分がコーダー上がりのデザイナーだからかも知れないけど、デザインをピクセル単位で再現できないやつはコーダー名乗る資格は無いと思うな。設計云々は言い訳でしかない。
ブラウザごとの差異はどのようにしてますか?
以前はpixel perfect使ってデザインを完璧に再現、ブラウザの1pxのずれもわざわざハックかけたりしてたw今は↑でも言ってるけど、細かいピクセル単位の再現より運用・サイト設計に、時間割いたほうが何倍もマシだから、カラム落ちとか大きなずれ以外はスルー。
ブラウザ毎の差異なんてコーディング上のデバッグで潰すべき問題で、コーダーのスキル次第。解消できないのはカーニングだけだけど、それもWebフォントを使えば解消される。
グリッドシステム使ってデザインしないのか??
グリッドシステムが大正義だった時代って何年前だっけ
グリッドシステム使わないでコーディングしろってコーダーさんマジ大変だな…。
だからいつの時代の話をしてんだよ。コーダーが楽してて許される時代は終わったよ。
もっと腕のいいデザイナーだったらもっといいコーダーのいる会社にいけるのにね
腕のいいコーダーは腕のいいデザイナーのいる会社に行けるけど、腕のいいデザイナーは腕のいいコーダーのいる会社に行けるとは限らない不思議。
↑なんからしいこと言ってそうだけど全然入ってこないから不思議。
↑それ読解力の問題やで
どんなデザインにも対応できて、ここが何pxで何pxでなんて細かな仕様なんか書かなくてもきっちり上げてくんのがプロのコーダー。いちいち全部採寸して仕様書いてやらなきゃあげれねぇとか、プロやめろ。
そうだそうだ!
作業工数や納期や予算など、全体を作業を行うべきでは?その辺も考えられるのがWebデザイナーじゃないですかね。一人で作るのならなんでもいいですけど。
全体を把握して です。
全体を把握しないでなど誰が言ったのか。予算、日程とか当たり前のことを考えて仕事するとか最低ラインだからそれ以下は前提として話には含まないよ。基本的に各ポジション同士の思いやりがあり、お互いに無理できる部分、頑張りどこな部分なんか共有しながらいい物を作り上げて行く。デザイナー様が作った何でもかんでもをコーダーにやれと行ってる訳ではないのよ。
トピ主の方は、写植時代からのベテランDTPデザイナの方でしょうか。
定型紙やサイズの決まった屋外広告物と違い、WEBデザインはひとつのソース(プログラム)でさまざまな端末(PCはもとよりiPhoneなど)の画面サイズ毎のレイアウトを意識しなければならなかったり、MAC,Windowsの違いや、そのほかいろんなアプリケーション毎の対応はもちろん、そのバージョン違いごとの表示確認も必要になってきます。
表示結果にお互いが納得できないのであれば、あいだにデキルWEBディレクターを挟むのが必須です。
言い訳してんじゃねえよ。
なるほど、トピ主の方の経験的な問題でしょうか。
なんだ、トピ主(ID:NvVDq4Yxl4HH)の方じゃなかったのか。すみません、スルーです。
表示結果にお互いが納得?もういっかいトピ見ろよ。そういったレベルじゃないだろ?それにな、デキるディレクターはさめとかじゃねぇだろ。まずは制作レベルで話し合って解決しろよ。なんでも他人任せにすんじゃねぇ。
納得するかしないかって、とんでもなくレベル低いな。
単に毎回FB出せば良いのでは?指摘しないと「これでいいんだ」となってしまうから、面倒でも毎回やる
もしかしたらツールの使い方を正しく把握してないのかもしれないなにでデザインしてるか知らないけど、定規ツールを使ってマージンをはかるとか、フォントサイズの表示の仕方とかを知らない可能性はない?
デザイナーさんに気をつけてほしいことは
すでに全部対応してたらごめん
なげーよ。もっと簡潔に
なげーし、そんなレベルのことをトピは言ってないんだよ。自分の思いの丈を書いてんじゃねぇ。ちゃんと質疑応答しろや。
コメ主のレベルが低いことは伝わったよ!
コーダーって、ストレス溜まってそうだね。少しでも上流工程にあるデザイナーが気を使うべき。
だからお前が率先して、コーダーとコミュニケーションをきちんと取るべきなんだよ
ここのコメをみるとむしろデザイナーが荒れてないか?w
だいたいHTMLとCSSなんぞ、デザイナーがすべきなんだよ。HTMLとCSSしかできないコーダーなんて消えろよ。だからこんな議論がおきる。解決策なんてあるかヴォケ!
HTMLとCSSしかできないコーダーなんているの?食ってけないよね
結局、自分のデザインには自分が責任を持つってのが、1番の解決策。
つーかまともに再現できずに言い訳するコーダーが大杉
簡潔にまとめると「コーディングを理解できるデザイナー」と「デザインを理解できるコーダー」が存在して、はじめて効率の良い分業体制が実現する。
1pxに拘れないのって、デザイナーもコーダーも両方失格でしょ。
デザインのできないコーダーと、コーディングのできないデザイナがいること自体が問題。そんなの分かり合えるわけがない。まぁ、体制の問題というか、会社が無知なのが問題だな。
コーダーがデザインできないのと、デザイナがコーディングを理解できないのは、どちらが深刻な問題かっていう議論になってるっぽいから、それがどちらかに決定されたとしても、根本的解決にはならないよって話。
中途半端にデザインできると思い込んでるコーダーが一番厄介なわけだが。
コーディングの基本的知識がないデザイナも一番厄介。紙出身とか細かいことは長くなるので書かない
しかしトピ主やったな。久しぶりに大漁に釣れたなー
トピ主です。ご回答ありがとうございます。さまざまなご意見がありますね。とても興味深いです。1pxのズレも許さないとか、ブラウザごとの違いとか、「コーディング知識0のデザイナ」や「デザインできないコーダー」の話になりがちですが、上がってきたデザインについて「意図と意味を理解しながら」適宜コーディングするということ、そしてそのためにデザイナがすべきこと、より完成度を高めるにはどういったやりかたが考えらるのでしょうか。
案件始まる最初に担当のコーダーとどのように作業進めるか話して、デザイン渡すときにフォントやマージン、アニメーションとかその他諸々指示すれば問題ないと思います。
最初はうまくいかなくても打ち合わせと指示を繰り返せば、うまくいかないのでしょうか?
ちゃんとコミニケーションできてる?
■まずデザイナが基本的なWeb知識を持つことが前提hoverのデザインが必要だとか、レスポンシブになるとどれだけデザイン量が増えるだとか、コーダーは足りない部分を一から説明していられない。最悪、デザインを知らないコーダーがデザインしたほうが仕事が成立しやすくなってしまう。
■デザインとコーディングの作業境界線を明確に持つことエフェクト関連とか、画面遷移など、どちらが担当すべきか曖昧なところをすべて明確にする。
■デザイナはもっとデザインを勉強することたとえばグリッドデザインは、Web以前に存在する論法なので、コーディングの段階でグリッドに矛盾が生じるなんてことは、手がけたデザイナがデザインを知らないとしか言いようがない。たぶん、紙の方をやらせても大したものができない。たぶん、組版とか知らない。繰り返すけど、Web以前にスタイルの概念はある。むしろ、紙で培われた技術がWebに移植されただけ。スタイルを使ったデザインを想定できないのは、単にデザインを知らないだけ。
■おまけコーディングをしないデザイナにとって、「そのまま100%再現すればOK」というWebデザインを仕上げるのは不可能です。コーダーは、「1pxずれてたけど、再現するのが仕事なのでそのまま仕上げました」なんていう子供の遣い以下の仕事をしないこと。そのレベルのデザインへの不理解は職務放棄とみなせる。
上ふたつの項目は納得。それで十分だったのに、それ以下は文を打つ手が進んで自己陶酔気味の内容。紙とWebの格差論もわかるにはわかるがいまや古いというか、Webデザインの意味をきちんとわかっている人は「紙で培われた技術がWebに移植されただけ」とは言わない。その論理で言ってしまえば、紙のデザイナーが手掛けたWebデザインはどうなのかという話になってしまう。
自己陶酔したのは否定しないけど、間違ったこと書いたつもりないけどなあ。Webより紙の方が優れていると捉えたのであれば、それは誤解だよ。単にデザイナーがデザイナーの仕事していないって言いたいだけ。
>「紙で培われた技術がWebに移植されただけ」とは言わない。この点も、指摘されていることがよくわからんね。紙とWebの技術が100%同じなはずがないし、WebはWeb技術として進んだ部分がある。双方の長所短所もある。でも、紙の基本技術があれば、Webの基本技術はたやすく習得できるはずよ。基本は同じだから。それを否定されるのであれば、むしろ、まったく別物といえるのかどうかを問いたいよ。
紙で培われた技術がWebに移植されただけって自分で書いてんじゃん。書いてるから指摘されたものをわからんとはなんぞや。ちゃんと自分の意見まとめなよ。それに、紙の基本技術があればwebの基本技術の習得は容易いというのも傲慢だな。あなたがいうデザインというのが単なる見た目という範囲ならまだわかるけどデザインの真意は違う。webはwebとして進んだ部分があると分かってるならば、紙とwebの比較論がいかに説得性の欠けるか考えたらわかるようなもん。
表面的には君の言っていることはおそらく正しい。でも、私が書いたことについて、何ひとつ反論が成立していない。話が噛み合っていないんだ。自己陶酔しているのはどちからと言いたいが、結論だけ書く。
なぜデザインにグリッドが必要になってくるのか、なぜデザインにスタイル管理が必要なのか、これはWebも紙も同じだと言っているんだ。概念も目的も同じだ。ただ、手段が違うだけ。先に私が書いた「(デザイン)基本技術」とは、つまり「概念とその目的」のことを言っている。繰り返すが、紙の「(デザイン)基本技術」があれば、それをWebに応用するのはとても容易い。だから、Webデザイナはもっとデザインを勉強すべきだと言っている。
もし、君が、私の書いたことについて「紙デザインができればWebデザインは簡単」と捉えるのであれば、もうこれ以上の議論は必要がない。反論するなら的確に要所を捉えてくれ。
レベル低い奴にいろいろ言ってもレベル低い頭でしか受け取れないんだからその辺にしてあげて。
1pxにこだわらなきゃいけない部分と、そうでない部分両方存在するわけで、モノがないのにあーだーこーだ言っても空虚だなあと思うよ。
最低限「ここを守ってれば、後は気にしなくてもおk」という仕様を何かしらのコミュニケーションで共有することが大事なわけで。
再現しなかった、或いはできなかった理由をそのコーダーさんは相談や説明すらしないの?ワイヤーフレームだけのコーディングでも支障が出そうなレベルに聞こえてならんけど。コーディングに納得できなかった該当デザインをトピ主さんの思い通りに仕上げてくれるとこに外注してソースを一度見せてあげるとか無理かしら。そこで得た技術的なやりとりやボーダーラインを良くも悪くもフィードバックしてみたらお互いに認識変わってくるんじゃない?もしくは経費でコーダーさんとガッツリ飲む。
みんなの回答 24 件
仕様書を書けばいい
Fireworks使ってください。
シフトキー押すだけでガイドの間隔をピクセル数で出してくれます。
能力が足りないのか、意識が足りないのかまず確かめる。
お前はコーディングできるの?できるのなら見本を見せてあげたら
揚げ足をとるわけではないですが、得に
余白やフォントはデザイン意識のないコーダーやプログラマは適当にやる人がたまにいますね。余白やフォントがいかにデザインで重要な要素であるか理解していないからだと思います。その点を一度きちんと指摘してカンプどおりにコーディングしてもらうように説明すればどうでしょう。
デザインの一枚絵を背景に指定してオブジェクトをそれにあわせていく。
または組み上がったらスクショ撮ってデザインと重ねて許容範囲のズレに収まるまで調整。
仕様書きっちりはありだけど際限ないしデザイナー負担が大変になるだけ。
コーディングする側だけど、こっちでデザイン調整することは結構あるよ。
コンテンツ幅960pxなのにシャドウがはみ出てたり、要素のピクセルずれ、写真加工が微妙、ロールオーバー画像を作ってない、透過pngで置きたいのに背景付いたまま乗算とか。
デザイン渡すときは、最低でも構成要素ごとにグループ分けをきちんとして、ロールオーバーやオーバーレイ表示するコンテンツはレイヤーを色分けする程度はしてほしいなぁ...
コーディングやったことないデザイナーのデザインはやりにくい。
実際、余白とかぴっちり合わせるのは結構大変だよ。
ブラウザによってline-heightの計算とか違うから。
ルール作ってマージン取ったりしてるならコーダーのせい。
雰囲気で毎回適当にマージン取ってるならデザイナーのせい。
デザイン通りにちゃんとコーディングできないなら死んでください!って言うしかないよね〜
だってそんなコーダーいらないじゃん
デザインもコーディングもできるけど、デザインをピクセル単位で正確に再現できないやつはコーダー名乗る資格無し。
グリッドシステム使ってデザインしないのか??
もっと腕のいいデザイナーだったらもっといいコーダーのいる会社にいけるのにね
どんなデザインにも対応できて、ここが何pxで何pxでなんて細かな仕様なんか書かなくてもきっちり上げてくんのがプロのコーダー。
いちいち全部採寸して仕様書いてやらなきゃあげれねぇとか、プロやめろ。
トピ主の方は、写植時代からのベテランDTPデザイナの方でしょうか。
定型紙やサイズの決まった屋外広告物と違い、WEBデザインはひとつのソース(プログラム)でさまざまな端末(PCはもとよりiPhoneなど)の画面サイズ毎のレイアウトを意識しなければならなかったり、MAC,Windowsの違いや、そのほかいろんなアプリケーション毎の対応はもちろん、そのバージョン違いごとの表示確認も必要になってきます。
表示結果にお互いが納得できないのであれば、あいだにデキルWEBディレクターを挟むのが必須です。
単に毎回FB出せば良いのでは?
指摘しないと「これでいいんだ」となってしまうから、面倒でも毎回やる
もしかしたらツールの使い方を正しく把握してないのかもしれない
なにでデザインしてるか知らないけど、定規ツールを使ってマージンをはかるとか、フォントサイズの表示の仕方とかを知らない可能性はない?
デザイナーさんに気をつけてほしいことは
しなくていいならいいけど
縦並びや横並びのボックスの間隔が全部違ったり、同じデザインなのにページごとに微妙に位置がズレてたりすると何ともいえない気分になる
勝手に調整してほしくないなら、デザインもズレがないよう気をつけてほしい
デバイスフォントはその名のとおりデバイスによってフォントが違うから、改行位置がズレて縦に伸びることがよくある
すでに全部対応してたらごめん
コーダーって、ストレス溜まってそうだね。少しでも上流工程にあるデザイナーが気を使うべき。
だからお前が率先して、コーダーとコミュニケーションをきちんと取るべきなんだよ
1pxに拘れないのって、デザイナーもコーダーも両方失格でしょ。
デザインのできないコーダーと、コーディングのできないデザイナがいること自体が問題。そんなの分かり合えるわけがない。まぁ、体制の問題というか、会社が無知なのが問題だな。
トピ主です。ご回答ありがとうございます。
さまざまなご意見がありますね。とても興味深いです。
1pxのズレも許さないとか、ブラウザごとの違いとか、「コーディング知識0のデザイナ」や「デザインできないコーダー」の話になりがちですが、上がってきたデザインについて「意図と意味を理解しながら」適宜コーディングするということ、そしてそのためにデザイナがすべきこと、より完成度を高めるにはどういったやりかたが考えらるのでしょうか。
■まずデザイナが基本的なWeb知識を持つことが前提
hoverのデザインが必要だとか、レスポンシブになるとどれだけデザイン量が増えるだとか、コーダーは足りない部分を一から説明していられない。最悪、デザインを知らないコーダーがデザインしたほうが仕事が成立しやすくなってしまう。
■デザインとコーディングの作業境界線を明確に持つこと
エフェクト関連とか、画面遷移など、どちらが担当すべきか曖昧なところをすべて明確にする。
■デザイナはもっとデザインを勉強すること
たとえばグリッドデザインは、Web以前に存在する論法なので、コーディングの段階でグリッドに矛盾が生じるなんてことは、手がけたデザイナがデザインを知らないとしか言いようがない。たぶん、紙の方をやらせても大したものができない。たぶん、組版とか知らない。繰り返すけど、Web以前にスタイルの概念はある。むしろ、紙で培われた技術がWebに移植されただけ。スタイルを使ったデザインを想定できないのは、単にデザインを知らないだけ。
■おまけ
コーディングをしないデザイナにとって、「そのまま100%再現すればOK」というWebデザインを仕上げるのは不可能です。コーダーは、「1pxずれてたけど、再現するのが仕事なのでそのまま仕上げました」なんていう子供の遣い以下の仕事をしないこと。そのレベルのデザインへの不理解は職務放棄とみなせる。
1pxにこだわらなきゃいけない部分と、そうでない部分両方存在するわけで、モノがないのにあーだーこーだ言っても空虚だなあと思うよ。
最低限「ここを守ってれば、後は気にしなくてもおk」という仕様を何かしらのコミュニケーションで共有することが大事なわけで。
再現しなかった、或いはできなかった理由をそのコーダーさんは相談や説明すらしないの?ワイヤーフレームだけのコーディングでも支障が出そうなレベルに聞こえてならんけど。
コーディングに納得できなかった該当デザインをトピ主さんの思い通りに仕上げてくれるとこに外注してソースを一度見せてあげるとか無理かしら。
そこで得た技術的なやりとりやボーダーラインを良くも悪くもフィードバックしてみたらお互いに認識変わってくるんじゃない?
もしくは経費でコーダーさんとガッツリ飲む。
関連するトピックス