ピクセルパーフェクトは必要なのか? HTMLコーダーの考え方まとめ

デザインデータどおりにぴったりHTMLコーディングすることは、「ピクセルパーフェクト」と呼ばれています。 ピクセルパーフェクト精度のHTMLコーディングをするのは大変ですが、それの是非について議論がおこなりました。
62
平尾誠@ARUTEGA.Inc @Makopontass

コーディングを外に出すことが増えてきた。 やはり経験値が少ない人の品質管理は大変だと感じつつも、しぶとくピクセルパーフェクトを狙ってくる方に仕事を任せてよかった。 この再現性への執着心がないと伸び代を感じれない。

2020-09-20 00:34:07
吉本 集 / aru inc. @tsuDoi220

いやー、実際そうなんですよねー。 ピクセルパーフェクトに、そもそも拘っていない人に、仕事お願いしたくない。テクニックどうこうより、全然こっちのほうが大事。ほんとに。 後、速度とちゃんと納期守ること。 当たり前のようだけど、意外とね、、、 twitter.com/makopontass/st…

2020-09-20 00:45:27
平尾誠@ARUTEGA.Inc @Makopontass

@tsuDoi220 そうそう、テクニック以前ですね。 ピクセルパーフェクトにならないデザインもあることぐらい、デザインしてたらわかる。 ただ、しないのと、できないとの間にはマークアップエンジニアとしての遺伝子レベルでの違いがありますよね。

2020-09-20 00:48:10
吉本 集 / aru inc. @tsuDoi220

@Makopontass スタンスの問題ですよねー。 最初からピクセルパーフェクトはいいや、って思ってやってる人、自分無理だー。

2020-09-20 00:50:55
吉本 集 / aru inc. @tsuDoi220

デザインのことは詳しくないけど、8の倍で揃えると綺麗だー、とかあって、デザイナーさんは細かくデザインされるんですよね。 で、いざ、実装するときに、1pxとか別によくね?って、実装するの? デザイナーさんが拘ったのに? マジか、ってなる。

2020-09-20 00:59:48

ピクセルパーフェクト肯定の意見

Gyochan @_gyochan_

自分の場合、カンプを背景に敷いてその上にオニオンスキン化したパーツをレイアウトしていくのが一番速いので結果的に必ずピクセルパーフェクトになる。執着というよりワークフローかな

2020-09-20 01:58:10
大林良平(ryohei obayashi) @ryohei_obayashi

デザイナーさんへのリスペクトがなく、工数を無駄にしてる事になる。 僕はピクパは前提として、実装での疑問点ご相談は、必ずにデザイナーさんします。 twitter.com/tsudoi220/stat…

2020-09-20 02:18:21
kayaman @kayamandayo

実際サイトにした時に自分のデザインに思わぬ穴があることもあるので、ピクセルパーフェクトよりユーザーのことを考えてくれる人がいいかな。もちろん20px30pxズレてくるようだとちょっと...ってなるけども。

2020-09-20 08:38:17
津村 省吾 @tsumura78

わかります。 ピクセルパーフェクトに拘らない=最初から再現性を放棄していると思ってしまいます。心構の問題と申しますか、プロとしてお金をもらっていてそれはどうなのだろうと思うことが、仕事をしていると時折ありますね... twitter.com/tsudoi220/stat…

2020-09-20 09:20:34
しゃけの人 @syake_

コードレビュー頼まれたときにピクセルパーフェクトまでは指摘しないつもりだったけど、マージンの間隔がデザインと比べて倍以上違ってたから、その時はさすがに「いい加減な仕事してんじゃねーよ」と思ったわ たぶん、ピクセルパーフェクトを軽視する人って、そこら辺の許容範囲が適当なんだろうな

2020-09-20 09:48:36
ゆうきもちこ|Webディレクター @yuki_mochico

「ピクセルパーフェクトじゃなくていいい」のスタンスでいる人はデザインをなんだと思っているのか。 コーディング知識ゼロだったりで考慮が足りないデザイナー側に問題がある部分もわかる。 だったら無断で「これでいいや」じゃなくて「ここ相談したい」って話せばいいのに口がついてない人が多い。 twitter.com/tsudoi220/stat…

2020-09-20 10:15:33
忍者プログラマーまさ @ninja_masa

逆に数字にこだわってないデザイナーさんの場合、ピクパ目指そうとする意味がないので、事前に「どれぐらいこだわってますか?」をヒアリングしてますtwitter.com/tsuDoi220/stat…

2020-09-20 10:52:12
TAK @tak_dcxi

ChromeにPerfectPixelインストールしてデベロッパーツールで画面幅をカンプのサイズと同じにしてコーディングすればピクセルパーフェクトなんて簡単にできる。ただ、これだとあくまでCSSを書いただけで設計して書くとなったら面倒になるわけで😅

2020-09-20 11:08:08
りんごく @RinGoku99

ピクセルパーフェクトはベストエフォートで目指すべきだけど、何が何でもピクセルパーフェクトにする意味は大してないし、そこまでいくとデザイナーのエゴ

2020-09-20 11:48:28
まうみ @haluhitoooo

完全に同意なんだけど、ピクセルパーフェクトに見合った工数と予算を事前にしっかり提示してくれるクライアントはとても貴重だったりもする。 twitter.com/Makopontass/st…

2020-09-20 12:13:20
eights @eights_net

ピクセルパーフェクトを作る技術力はコーダーデザイナー共に絶対に必要だけど、webサイト全体で見たときにピクセルパーフェクト工数にお金かけるよりもコンテンツにお金かけた方がいいよね、みたいな視点はコーダーでも持っておきたいな🤕(慣れちゃえばそんなに工数かからないだろうけど) twitter.com/tak_dcxi/statu…

2020-09-20 12:38:57
TAK @tak_dcxi

結局これなんすよね。ピクセルパーフェクトを目指すのは大切だけど、デザインがしっかりしているのが前提。どんなデザインでもピクセルパーフェクトじゃなきゃダメって方は少数ピクセル含まれていたらどうコーディングするのか知りたい。 twitter.com/ake_nyanko/sta…

2020-09-20 11:45:42
かわはぎ @ka_wa_ha_gi

実装者としてはパーフェクトピクセルを目指してはいるな。 面倒くさいってのもわかるけどいざ他の人がマークアップしたものをチェックする際に何をチェックするかってデザインが再現されてるかとコードだしな。

2020-09-20 13:38:45
かわはぎ @ka_wa_ha_gi

代理店系の案件でパーフェクトピクセル多かったな…

2020-09-20 13:42:43
りんご @ringo_deve

@tsuDoi220 1pxズレてたら、見てもわからない鈍感な人もいる一方で、1px違うと雰囲気変わるなーって思う人もいますよね。 杜撰な仕事してる人が近くにいたら叱ります。

2020-09-20 14:31:49
Maiko Ishikawa@Kids Code Club @_mishikawa

意図的かそうでないか、都度確認することでスピードが落ちたりするので、何度か一緒にお仕事させて頂くまでは、なかなか判断が難しい。こちらで調整することを期待されるケースもあります。メンテナンス性とか。基本的にはデザインを尊重する姿勢です。ピクセルパーフェクト。

2020-09-20 14:36:57
TAK @tak_dcxi

デザインシステムがしっかりしていれば自然と(line-height以外は)ピクセルパーフェクトっぽくなるので、そこまでコストはかからないと思います…。確かに部分最適化ですが、何かお問い合わせを増やすために意図あってそのデザインにしている【はず】なので忠実にコーディングするのは大切かと…。 twitter.com/eights_net/sta…

2020-09-20 16:03:53
あだっつぁん@フロントエンドの人 @sizzle0312

ピクセルパーフェクトのコーディングできない人は、多分だけど、ものすごく細かいプロパティの仕様を理解しきってないと思う。vertical-alignで高さ方向を揃えるのとか、結構な変態的探究してないとできないかもしれない。私的わかりにくさナンバー1・2を争うと思う。

2020-09-20 16:25:52
いざき @izakikazuho

ピクセルパーフェクトがどうこうの話が荒れてるのがよくわかんなくて、デザインをなるべく完璧に再現しようと努める(+α)の当たり前では?としか思わない。

2020-09-20 17:25:10
1 ・・ 4 次へ