-
ID:NvVDq4 さんの質問

デザイナーです。社内のコーダーからなかなかデザイン通りに仕上がってきません。得に複雑なデザインではないのですが、アキやマージン、フォントの大きさなど細かいところがバラバラになってしまいます。コーダーへデザインを渡すときに気をつけていることや、こうするとよいというのがありましたら教えてください。

みんなの回答 24 件

ID:HRL9cj さんの回答

仕様書を書けばいい

ID:pI10Ae

基本フォントサイズとかマージンルールとか共有しないまま PSDどおりにやると ほぼ 狂う。

ID:VEDej5 さんの回答

Fireworks使ってください。

シフトキー押すだけでガイドの間隔をピクセル数で出してくれます。

ID:RfynS.

ネタでないのならば。
確かにソフトで解決するのも一つだけど、そもそもコミュニケーションの問題だと思う。

ID:6fdtl2 さんの回答

能力が足りないのか、意識が足りないのかまず確かめる。

ID:C1oOH7 さんの回答

お前はコーディングできるの?できるのなら見本を見せてあげたら

ID:QzJCZO

関係ねーだろ。
デザイナーはデザイン。
コーダーはコーディング。
お前がやれとか言う奴は三流以下。

ID:0K4/QQ

↑釣りなのに反応するな、この低能が

ID:QzJCZO

↑お前が釣られてんじゃねーよ四流

ID:0K4/QQ

↑お前が釣られてんじゃねーよ6流

ID:kd9rWU

この流れに笑ったw

ID:ZVktWp さんの回答

揚げ足をとるわけではないですが、得に

ID:XM82km

って書いてる時点でダメと思います

ID:JZ1L57 さんの回答

余白やフォントはデザイン意識のないコーダーやプログラマは適当にやる人がたまにいますね。余白やフォントがいかにデザインで重要な要素であるか理解していないからだと思います。その点を一度きちんと指摘してカンプどおりにコーディングしてもらうように説明すればどうでしょう。

ID:57fhcO

左余白21px、右余白22pxとかやるバカデザイナーに先に言え

ID:aHcYNi

この主題のレベルのこと言ってんだろ?話広げて小さなことをつつくなよ。さてはおまえはバカコーダーだな?

ID:77AbWi さんの回答

デザインの一枚絵を背景に指定してオブジェクトをそれにあわせていく。
または組み上がったらスクショ撮ってデザインと重ねて許容範囲のズレに収まるまで調整。
仕様書きっちりはありだけど際限ないしデザイナー負担が大変になるだけ。

ID:UvTAC7 さんの回答

コーディングする側だけど、こっちでデザイン調整することは結構あるよ。
コンテンツ幅960pxなのにシャドウがはみ出てたり、要素のピクセルずれ、写真加工が微妙、ロールオーバー画像を作ってない、透過pngで置きたいのに背景付いたまま乗算とか。

デザイン渡すときは、最低でも構成要素ごとにグループ分けをきちんとして、ロールオーバーやオーバーレイ表示するコンテンツはレイヤーを色分けする程度はしてほしいなぁ...

ID:HRL9cj

あるある
ムダに多いガイドライン、しかも画像と全然合ってない…レイヤーは全く整理されていない…Web屋8年くらいの人がこれで、さすがに呆れる

ID:QzJCZO

シャドウはみ出してる?
コーディングスキルの無さを棚に上げてないで、そのシャドウをはみ出させたデザインをちゃんと実装してみせろよ。
それがお前の仕事だよ。

ID:UvTAC7

シャドウの実装なんてネガティブマージン使えば余裕だけど、明らかにおかしいデザインまで再現する必要性などない。何でもかんでも再現してるようじゃ、逆に仕事してるとは言えないぞw

ID:jNTB8W

コメ主の素人的主観のみを頼りに勝手に調整()されてテストアップされてもクライアントに見せられないんだけどさっさと直せカス。

ID:sNR73Z さんの回答

コーディングやったことないデザイナーのデザインはやりにくい。

実際、余白とかぴっちり合わせるのは結構大変だよ。
ブラウザによってline-heightの計算とか違うから。

ID:frkioe

それな。それとか、一ヶ所でしか出てこない(=CSSの使い回しが出来ない)スタイルを多数強要するようなデザインをして来る。

ID:n4Uo2X

確かに、余白はぶらうざ毎に違うから全く同じにしなければおかしいという考え方もちょっと違うね。
あと、スクショ撮って重ね合わせて確認とか(笑)

どこまでが妥協のラインなのかも含めて仕様書なりコミュニケーションなりでお互いの認識を擦り合わせないとトラブルになるね。

ID:sNR73Z

全部違うならいいんですが、1箇所しか出てこないのが微妙にあるとうんざりですね。
それが相応の効果を生むのならわかりますが、そうでないのならそれは感覚でデザインしてるだけだなーと思います。

ブラウザごとにIE7、IE8、IE9と1つずつデザインしてくれるなら、やれと言われればやりますけどね。
その辺り決めずに(知らずに)、デザイン通りに〜って言うのも変な話。

ID:dvdWEk

じゃぁデザイナになれば?

ID:r6JDQo さんの回答

ルール作ってマージン取ったりしてるならコーダーのせい。
雰囲気で毎回適当にマージン取ってるならデザイナーのせい。

ID:3Z87m5 さんの回答

デザイン通りにちゃんとコーディングできないなら死んでください!って言うしかないよね〜
だってそんなコーダーいらないじゃん

ID:QzJCZO

ほんとこれ。

ID:FkaYFq

そういうデザイナーの退職率は高そう。

ID:QzJCZO

↑そしてクソコーダーの居ないまともな企業に転職したよ

ID:iwTp17

↑おなじ理由で転職した。もちろんそれだけが理由じゃないけど

ID:QzJCZO さんの回答

デザインもコーディングもできるけど、デザインをピクセル単位で正確に再現できないやつはコーダー名乗る資格無し。

ID:QzJCZO

これすげーコーディングしづらいんだけど、とか文句や言い訳する奴は、もうこの業界から消えてくれ。
金と時間がもったいない。

ID:n4Uo2X

デザインとコーディング出来るけどってわざわざ言うって事はデザインしか出来ない人とかコーディングしか出来ない人っているの?
いや、本当にケチつけてる訳じゃなくて本気でびっくりした。

ID:QzJCZO

いるいる。
実際、コーディングしかできないやつほど、簡単に再現できないデザインに安易に文句つける。
再現が難しいデザインを再現するのは、コーダーの腕の見せどころのひとつなのにねぇ。

ID:r6JDQo

再現出来る技術は必要だけど、正直もうピクセル単位で正確に再現することより運用上有用な設計優先する事の方が求められてるんだよね。LPとか小規模ばかり作ってるんじゃないかぎり。まぁ、その辺の仕様をデザイナーと共にデザイン前に決めておくべきなんだけど

ID:bwlxFw

↑そうだと思う。
そしてこれができないコーダーが多すぎ。ただ、運用上有用な設計をするのは当たり前のことで、それは実作業前の上流工程で決めておくことなので、再現や実装する能力の低さとは無関係だと思う。
自分がコーダー上がりのデザイナーだからかも知れないけど、デザインをピクセル単位で再現できないやつはコーダー名乗る資格は無いと思うな。
設計云々は言い訳でしかない。

ID:sNR73Z

ブラウザごとの差異はどのようにしてますか?

ID:UvTAC7

以前はpixel perfect使ってデザインを完璧に再現、ブラウザの1pxのずれもわざわざハックかけたりしてたw
今は↑でも言ってるけど、細かいピクセル単位の再現より運用・サイト設計に、時間割いたほうが何倍もマシだから、カラム落ちとか大きなずれ以外はスルー。

ID:QzJCZO

ブラウザ毎の差異なんてコーディング上のデバッグで潰すべき問題で、コーダーのスキル次第。
解消できないのはカーニングだけだけど、それもWebフォントを使えば解消される。

ID:RgZkPP さんの回答

グリッドシステム使ってデザインしないのか??

ID:bwlxFw

グリッドシステムが大正義だった時代って何年前だっけ

ID:RgZkPP

グリッドシステム使わないでコーディングしろってコーダーさんマジ大変だな…。

ID:QzJCZO

だからいつの時代の話をしてんだよ。
コーダーが楽してて許される時代は終わったよ。

ID:bLxBtP さんの回答

もっと腕のいいデザイナーだったらもっといいコーダーのいる会社にいけるのにね

ID:bwlxFw

腕のいいコーダーは腕のいいデザイナーのいる会社に行けるけど、腕のいいデザイナーは腕のいいコーダーのいる会社に行けるとは限らない不思議。

ID:aHcYNi

↑なんからしいこと言ってそうだけど全然入ってこないから不思議。

ID:QzJCZO

↑それ読解力の問題やで

ID:.63YzR さんの回答

どんなデザインにも対応できて、ここが何pxで何pxでなんて細かな仕様なんか書かなくてもきっちり上げてくんのがプロのコーダー。
いちいち全部採寸して仕様書いてやらなきゃあげれねぇとか、プロやめろ。

ID:bwlxFw

そうだそうだ!

ID:sNR73Z

作業工数や納期や予算など、全体を作業を行うべきでは?
その辺も考えられるのがWebデザイナーじゃないですかね。
一人で作るのならなんでもいいですけど。

ID:sNR73Z

全体を把握して です。

ID:.63YzR

全体を把握しないでなど誰が言ったのか。
予算、日程とか当たり前のことを考えて仕事するとか最低ラインだからそれ以下は前提として話には含まないよ。
基本的に各ポジション同士の思いやりがあり、お互いに無理できる部分、頑張りどこな部分なんか共有しながらいい物を作り上げて行く。
デザイナー様が作った何でもかんでもをコーダーにやれと行ってる訳ではないのよ。

ID:FkaYFq さんの回答

トピ主の方は、写植時代からのベテランDTPデザイナの方でしょうか。

定型紙やサイズの決まった屋外広告物と違い、WEBデザインはひとつのソース(プログラム)でさまざまな端末(PCはもとよりiPhoneなど)の画面サイズ毎のレイアウトを意識しなければならなかったり、MAC,Windowsの違いや、そのほかいろんなアプリケーション毎の対応はもちろん、そのバージョン違いごとの表示確認も必要になってきます。

表示結果にお互いが納得できないのであれば、あいだにデキルWEBディレクターを挟むのが必須です。

ID:bwlxFw

言い訳してんじゃねえよ。

ID:FkaYFq

なるほど、トピ主の方の経験的な問題でしょうか。

ID:FkaYFq

なんだ、トピ主(ID:NvVDq4Yxl4HH)の方じゃなかったのか。すみません、スルーです。

ID:aHcYNi

表示結果にお互いが納得?
もういっかいトピ見ろよ。
そういったレベルじゃないだろ?
それにな、デキるディレクターはさめとかじゃねぇだろ。まずは制作レベルで話し合って解決しろよ。なんでも他人任せにすんじゃねぇ。

ID:QzJCZO

納得するかしないかって、とんでもなくレベル低いな。

ID:V89Iof さんの回答

単に毎回FB出せば良いのでは?
指摘しないと「これでいいんだ」となってしまうから、面倒でも毎回やる

もしかしたらツールの使い方を正しく把握してないのかもしれない
なにでデザインしてるか知らないけど、定規ツールを使ってマージンをはかるとか、フォントサイズの表示の仕方とかを知らない可能性はない?

デザイナーさんに気をつけてほしいことは

  • デバイスフォントと画像の箇所は明確にわかるように(アンチエイリアス切るとか)してほしい
  • 上の方で言ってる人もいるけどロールオーバーの画像をちゃんと用意してほしい
     しなくていいならいいけど
  • 釈迦に説法だけどデザイナーさんもピクセルにこだわってほしい
     縦並びや横並びのボックスの間隔が全部違ったり、同じデザインなのにページごとに微妙に位置がズレてたりすると何ともいえない気分になる
     勝手に調整してほしくないなら、デザインもズレがないよう気をつけてほしい
  • 内容が縦に伸びたとき(+横に伸びたとき)を考慮してほしい
     デバイスフォントはその名のとおりデバイスによってフォントが違うから、改行位置がズレて縦に伸びることがよくある

すでに全部対応してたらごめん

ID:0K4/QQ

なげーよ。もっと簡潔に

ID:aHcYNi

なげーし、そんなレベルのことをトピは言ってないんだよ。自分の思いの丈を書いてんじゃねぇ。
ちゃんと質疑応答しろや。

ID:QzJCZO

コメ主のレベルが低いことは伝わったよ!

ID:C1oOH7 さんの回答

コーダーって、ストレス溜まってそうだね。少しでも上流工程にあるデザイナーが気を使うべき。

だからお前が率先して、コーダーとコミュニケーションをきちんと取るべきなんだよ

ID:9JbboL

ここのコメをみるとむしろデザイナーが荒れてないか?w

ID:0K4/QQ

だいたいHTMLとCSSなんぞ、デザイナーがすべきなんだよ。HTMLとCSSしかできないコーダーなんて消えろよ。だからこんな議論がおきる。解決策なんてあるかヴォケ!

ID:kZASzd

HTMLとCSSしかできないコーダーなんているの?食ってけないよね

ID:C1oOH7

結局、自分のデザインには自分が責任を持つってのが、1番の解決策。

ID:QzJCZO

つーかまともに再現できずに言い訳するコーダーが大杉

ID:0K4/QQ

簡潔にまとめると「コーディングを理解できるデザイナー」と「デザインを理解できるコーダー」が存在して、はじめて効率の良い分業体制が実現する。

ID:761Lsp さんの回答

1pxに拘れないのって、デザイナーもコーダーも両方失格でしょ。

ID:6fdtl2 さんの回答

デザインのできないコーダーと、コーディングのできないデザイナがいること自体が問題。そんなの分かり合えるわけがない。まぁ、体制の問題というか、会社が無知なのが問題だな。

ID:6fdtl2

コーダーがデザインできないのと、デザイナがコーディングを理解できないのは、どちらが深刻な問題かっていう議論になってるっぽいから、それがどちらかに決定されたとしても、根本的解決にはならないよって話。

ID:QzJCZO

中途半端にデザインできると思い込んでるコーダーが一番厄介なわけだが。

ID:0K4/QQ

コーディングの基本的知識がないデザイナも一番厄介。紙出身とか細かいことは長くなるので書かない

ID:0K4/QQ

しかしトピ主やったな。久しぶりに大漁に釣れたなー

ID:NvVDq4 さんの回答

トピ主です。ご回答ありがとうございます。
さまざまなご意見がありますね。とても興味深いです。
1pxのズレも許さないとか、ブラウザごとの違いとか、「コーディング知識0のデザイナ」や「デザインできないコーダー」の話になりがちですが、上がってきたデザインについて「意図と意味を理解しながら」適宜コーディングするということ、そしてそのためにデザイナがすべきこと、より完成度を高めるにはどういったやりかたが考えらるのでしょうか。

ID:LdmlqL

案件始まる最初に担当のコーダーとどのように作業進めるか話して、デザイン渡すときにフォントやマージン、アニメーションとかその他諸々指示すれば問題ないと思います。

最初はうまくいかなくても打ち合わせと指示を繰り返せば、うまくいかないのでしょうか?

ID:C1oOH7

ちゃんとコミニケーションできてる?

ID:6fdtl2 さんの回答

■まずデザイナが基本的なWeb知識を持つことが前提
hoverのデザインが必要だとか、レスポンシブになるとどれだけデザイン量が増えるだとか、コーダーは足りない部分を一から説明していられない。最悪、デザインを知らないコーダーがデザインしたほうが仕事が成立しやすくなってしまう。

■デザインとコーディングの作業境界線を明確に持つこと
エフェクト関連とか、画面遷移など、どちらが担当すべきか曖昧なところをすべて明確にする。

■デザイナはもっとデザインを勉強すること
たとえばグリッドデザインは、Web以前に存在する論法なので、コーディングの段階でグリッドに矛盾が生じるなんてことは、手がけたデザイナがデザインを知らないとしか言いようがない。たぶん、紙の方をやらせても大したものができない。たぶん、組版とか知らない。繰り返すけど、Web以前にスタイルの概念はある。むしろ、紙で培われた技術がWebに移植されただけ。スタイルを使ったデザインを想定できないのは、単にデザインを知らないだけ。

■おまけ
コーディングをしないデザイナにとって、「そのまま100%再現すればOK」というWebデザインを仕上げるのは不可能です。コーダーは、「1pxずれてたけど、再現するのが仕事なのでそのまま仕上げました」なんていう子供の遣い以下の仕事をしないこと。そのレベルのデザインへの不理解は職務放棄とみなせる。

ID:JZ1L57

上ふたつの項目は納得。
それで十分だったのに、それ以下は文を打つ手が進んで自己陶酔気味の内容。紙とWebの格差論もわかるにはわかるがいまや古いというか、Webデザインの意味をきちんとわかっている人は「紙で培われた技術がWebに移植されただけ」とは言わない。その論理で言ってしまえば、紙のデザイナーが手掛けたWebデザインはどうなのかという話になってしまう。

ID:6fdtl2

自己陶酔したのは否定しないけど、間違ったこと書いたつもりないけどなあ。Webより紙の方が優れていると捉えたのであれば、それは誤解だよ。単にデザイナーがデザイナーの仕事していないって言いたいだけ。

>「紙で培われた技術がWebに移植されただけ」とは言わない。
この点も、指摘されていることがよくわからんね。紙とWebの技術が100%同じなはずがないし、WebはWeb技術として進んだ部分がある。双方の長所短所もある。でも、紙の基本技術があれば、Webの基本技術はたやすく習得できるはずよ。基本は同じだから。それを否定されるのであれば、むしろ、まったく別物といえるのかどうかを問いたいよ。

ID:aHcYNi

紙で培われた技術がWebに移植されただけって自分で書いてんじゃん。
書いてるから指摘されたものをわからんとはなんぞや。ちゃんと自分の意見まとめなよ。
それに、紙の基本技術があればwebの基本技術の習得は容易いというのも傲慢だな。あなたがいうデザインというのが単なる見た目という範囲ならまだわかるけどデザインの真意は違う。webはwebとして進んだ部分があると分かってるならば、紙とwebの比較論がいかに説得性の欠けるか考えたらわかるようなもん。

ID:6fdtl2

表面的には君の言っていることはおそらく正しい。
でも、私が書いたことについて、何ひとつ反論が成立していない。
話が噛み合っていないんだ。
自己陶酔しているのはどちからと言いたいが、結論だけ書く。

なぜデザインにグリッドが必要になってくるのか、なぜデザインにスタイル管理が必要なのか、これはWebも紙も同じだと言っているんだ。概念も目的も同じだ。ただ、手段が違うだけ。先に私が書いた「(デザイン)基本技術」とは、つまり「概念とその目的」のことを言っている。繰り返すが、紙の「(デザイン)基本技術」があれば、それをWebに応用するのはとても容易い。だから、Webデザイナはもっとデザインを勉強すべきだと言っている。

もし、君が、私の書いたことについて「紙デザインができればWebデザインは簡単」と捉えるのであれば、もうこれ以上の議論は必要がない。反論するなら的確に要所を捉えてくれ。

ID:dvdWEk

レベル低い奴にいろいろ言っても
レベル低い頭でしか受け取れないんだから
その辺にしてあげて。

ID:qh9XNJ さんの回答

1pxにこだわらなきゃいけない部分と、そうでない部分両方存在するわけで、モノがないのにあーだーこーだ言っても空虚だなあと思うよ。

最低限「ここを守ってれば、後は気にしなくてもおk」という仕様を何かしらのコミュニケーションで共有することが大事なわけで。

ID:O4FZjr さんの回答

再現しなかった、或いはできなかった理由をそのコーダーさんは相談や説明すらしないの?ワイヤーフレームだけのコーディングでも支障が出そうなレベルに聞こえてならんけど。
コーディングに納得できなかった該当デザインをトピ主さんの思い通りに仕上げてくれるとこに外注してソースを一度見せてあげるとか無理かしら。
そこで得た技術的なやりとりやボーダーラインを良くも悪くもフィードバックしてみたらお互いに認識変わってくるんじゃない?
もしくは経費でコーダーさんとガッツリ飲む。

最終更新日:2014-02-12 (17,376 views)

関連するトピックス

ページ上部に戻る