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

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

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

Gyo Zwackelmann @_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ディレクター @uki_mmr

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

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

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

2020-09-20 10:52:12
TAK / Web Creator. @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
かわはぎ @ka_wa_ha_gi

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

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

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

2020-09-20 13:42:43
りんご.ts🍎@個人開発がんばりんご @ringo_deve

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

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

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

2020-09-20 14:36:57
TAK / Web Creator. @tak_dcxi

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

2020-09-20 16:03:53
あだっつぁん@Webサイトつくるひと @sizzle0312

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

2020-09-20 16:25:52
izakikazuho @izakikazuho

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

2020-09-20 17:25:10
残りを読む(52)

コメント

Yeme @yer_meme 2020年9月20日
これはExcel方眼紙に類する話だと思ってるっス。 多種多様な環境で数ピクセルのズレを直すとかぶっちゃけ無駄な品質っスよ。
56
rambda @rambda2 2020年9月20日
デザイナーの人そこまで考えてないと思うよ。
5
takatakattata @takatakattata1 2020年9月20日
是非の前に、時代にそぐわない古い考えなので特定の装置限定とか特殊環境でない限り議論する意味がないような話
12
RGB000 @19666_61 2020年9月20日
最新機能もりもりは理想だけど、ユーザが、更新してくれねぇ(脱IEでこの辺かなり救われたろうが)
0
yuki🌾㊗️5さい🎉⚔ @yuki_obana 2020年9月20日
スケール不変性を重視したコーディングがされていないことのほうが多い。例えば竿の最終回で提示された例のサイトも拡大縮小表示で本来の意図してるであろうデザインからずれたものを表示させることができる。デザイナーの段階でそれで、コーダーがそのまま承継したらksデザインサイトしかできないで終わる訳で(´・ω・`)全部聞きなおしてるほどてめぇら暇なん?としか思わんあたりデザイナーのコーディングスキルと仕様周りのナレッジがないのが致命的って思うんだけど?
11
井水為史 @fh_wellwater 2020年9月21日
最初やってたけどデザイナーそこまで考えてなかったし、修正かけられるしやめた。 結局デザイン次第よ。 あとユーザビリティにどこまで影響あんのってとこも疑問だわ。
12
カレーライス @9dfo6gt6pr7pSBy 2020年9月21日
デザインされた状態を理想として、少なくても同じ画面幅ならピクセルパーフェクトに仕上げるのは難しくない。可変コンテンツでも合致するところはあるし、OSが同じならブラウザフォントも一緒だし。 ユーザーにとってもきちんとデザインされたUIを使えるというメリットしかなくて、デザイン軽視するのは力不足かやる気がないとしか思わない。
0
さとうあきひろ @akihirosato1975 2020年9月21日
そもそも現場ではデザイナーとコーダーが直接やり取りできない(クライアントがそれぞれ別会社に発注してて、クライアント側の担当者を通さないと連絡すらできない)ケースも多いから、そうなるとデザイナーの意図とかわからん状態でコーディングが走らざるを得ない。そうなると「だいたいこんな感じ」で作業進めるしかないのよ。
7
ポン酢太郎 @ponzoo2you 2020年9月21日
携帯もPCモニタもユーザーは一律の解像度じゃないからパーフェクトとか考えてもごく一部の環境のみパーフェクトまでにしかなりませんよってとこなんだよな。で、そこを追うかなんだけど
17
12月までに-5kg @yamabook2000 2020年9月21日
パーフェクト、じゃなくてもいいんだが明らかに余白がデザインデータと違うもん出してきた所は「あかん。」と思った。 解像度違うとはいえ、デザインする時は想定端末(大体iPhoneのその時主流のやつ)の縦画面での横幅で作ってるはず。 デザインデータもらったらなんでこの横幅なのか。はコーダーさんも気にして欲しい。
2
Mill=O=Wisp @millowisp 2020年9月21日
「どの環境で何使ってる誰に見せること想定してるの」を考えれば、環境バラバラの不特定多数を相手にする以上は9割型無駄なこだわりになってそうな印象を受ける
19
ラヌ @25ranai 2020年9月21日
自分はピクセルパーフェクトできるデザインだから君もピクセルパーフェクトしてくれ、ならいいんじゃない。デザイン段階でするものだよピクセルパーフェクトは
2
GAIA @2xpush 2020年9月21日
デザイナーからしたら今はモニタサイズ多すぎるし、アスペクト比だって違うデバイス山ほどあるし、レスポンシブが出たあたりで、こだわるだけ時間の無駄と思っている。多デバイスて全体のバランスを整えるのが最優先て、ppを目的にしたらアカンと思うよ。
18
レょ゛ @rgb4096- 2020年9月21日
ピクセルパーフェクトなコーティング後にWordpressに組み込まれて紙媒体の編集が自分のPC基準でコンテンツの改行やらゴチやら指示して顧客がこのスペースに広告入れたいってなってユーザーは好き放題なデバイスとフォントで見るんですよね。がんばってください。
10
alan smithy @alansmithy2010 2020年9月21日
デザイン決定前に時を戻そう>ピクパ
1
Wa @0000548C 2020年9月21日
素のHTMLが一番好き。リンクが下線付きの青文字で拡大しても崩れないので
1
じゃこうねこ @Jakoneko2 2020年9月21日
ちょっと前ならFlash使ってろ案件かな。
2
みさり@media screen (\\٩( 'ω' )و //) @misari 2020年9月21日
基本ピクセルパーフェクトで組むけどデザインがきちんとそれに沿ってない(特にスマホ)のに見たままで組んでくださいと言い放つ知識のないディレクターが多すぎるのが一番工数の無駄。
6
tibigame @tibigame 2020年9月21日
HTMLをピクセル単位で設計しないでくれ。全てレムかパーセントにしてくれ。あと拘るならここはマージン、ここはパディングでここのブロックの親はここのブロックとか全部指定してくれ。その方がコーディングで悩まなくて済むから。
28
SAKURA87@多摩丙丁督 @Sakura87_net 2020年9月21日
相手の環境によって表現が変わるのがWEBだから、あまり執拗に拘っても仕方ないだろうが。せめて客先が定義した環境ではデザイン通りに表示できていないと、どこかで問題が発生したときにどこが原因なのかが分からなくなると思う。例えば「コメントする」ボタンが押せない問題が発生したとして、一定の環境でデザイン通りに表示されている事が確証できれば原因究明も、さじを投げるのもある程度楽になるし。
3
しあわせ♬ @shiawase9643 2020年9月21日
こまめに(自分以外の)メンテする人がいて、ユーザーの為になるならやってもいい…かな…レベル。 ピクセルパーフェクトにこだわる時間をコンテンツ作りとか導線改修とか別の事に使いたい。
0
つら @tsuramisan 2020年9月21日
毎年変わるiPhoneやiPadの微妙な解像度やアスペクト比の違い……Appleはどうしてるのとは常々……
0
つら @tsuramisan 2020年9月21日
ところでiPhone 12 Pro MAXまた微妙に変態するらしいですね(^ω^)
0
いぬだわん @InuWang 2020年9月21日
最近触ってないけどレスポンシブなUI FWって大抵emとかremだよね。 UI FW導入しろ言ったリーダー(UIも担当)が拘り強くてピクセルパーフェクトにもしろ言って素直な若者達がUI FWのCSS上書きする微調整CSSを死ぬほど作ったんだけど、FWのバージョンアップで全て無駄になり書き直し。 途中から入ったんだけどFWのバージョンアップはやめさせた。 ピクセルパーフェクトとレスポンシブの両立は極端とは言え複数デバイス/複数ブラウザ対応でピクセルパーフェクトは工数掛かる事は認識して欲しいね。
4
alan smithy @alansmithy2010 2020年9月21日
レスポンシブレイアウトとかブラウザの差とか勉強しないでデザインするwebデザイナーって...
4
Web屋Layzy @layzy_glp 2020年9月21日
ピクセルパーフェクトって言葉があるの初めて知ったし、今はリキッドデザイン全盛の時代で限界はあるし、IEは滅んで欲しい(飛び火
1
d2b @d2breathe 2020年9月21日
冒頭に並んでる、ピクセルパーフェクト主義者の言い方が非常に良くない。 デザインに沿うのは大事なのは当然として、実現できないことにも大抵技術的な理由があるのに「コーダーがいい加減だから」ということしか想定していないように見える。 そりゃコーダーからすればムカつくよね。
13
saku @sakuuuuuuune 2020年9月21日
そろそろデザイナーが直接デザインして組み込めるようにしなよと思う 現代の複雑なデザインを、デザインの素養のないコーダーにさせてること自体が前時代的なんだよな
2
Shin Matsuda (syncbunny) @syncbunny 2020年9月21日
そもそもの前提としてピクセルパーフェクトじゃなくても破綻しないデザインとかできないものですかね。
1
Shin Matsuda (syncbunny) @syncbunny 2020年9月21日
色の再現の問題だってあるし。
1
Denullpo S. Hammerson @denullpo 2020年9月21日
とりあえず横幅依存なやつ、web UIとしては最悪
0
mikunitmr @mikunitmr 2020年9月21日
ディスプレイの差による幅の違いとかどうやって吸収するの?
0
ドロマイト @dolomite_ca_mg 2020年9月21日
0.5ピクセルとか言われないだけマシ
0
あごにー @Agony_01 2020年9月21日
モニタサイズもアス比もぜーんぶちがう環境でピクセルパーフェクトとかお花畑にお住いの方かなとしか思えないんですけど。
0
prad_bitt @pradbitt42 2020年9月21日
デザイナーが直接CSS書けばいいだけなのに、なんでイラレとかフォトショのデータが出てくんの? CSSなんて3日勉強すれば誰でもかけるようになるでしょ。
10
Shin Matsuda (syncbunny) @syncbunny 2020年9月21日
sakuuuuuuune デザイナーが自由にやりたいんなら、デザイナー自身がHTMLやCSSの素養を身に着けたほうが早いかな。
6
RENOWAN @renowan 2020年9月22日
pradbitt42 メンテナブルなcss設計とか、昔と比べてcssを触るのが大変になったから分業は仕方ない。
0
S.O. @so_rei 2020年9月22日
デザイナーはユーザーがみんなiPhoneと16:9サイズモニタを使ってると思ってるんだろうな…
0
30年寝太郎 @Avocado_Inside 2020年9月22日
こういう不毛な議論を見るたびに90年代後半に「MS帝国の支配から脱出しよう!」とかイキってた連中今どうしてんのかな?って思う。 ユニバーサルかつオープンになるはずだったHTMLにゴテゴテとリッチクライアント向け仕様を盛り付けた挙句の果てがこれでは、今からでもFLASHをセキュアに作り直す方がよっぽどマシだと思う。
0
prad_bitt @pradbitt42 2020年9月22日
renowan デザイナーがイラレとかフォトショとか勉強せず、最初からCSS勉強して書けばいいでしょ。コードも書けずにAdobe製品とMacしか使ったことなくてウェブデザイナーでございとかないわ。
4
解凍されたほえほえさん @WGwaihir 2020年9月22日
Avocado_Inside cssを使わずにjavaScriptのコードでデザインすればいいよ。TypeScriptならActionScriptとほぼ同じだし。
0
さうえささみ @SaueSasami 2020年9月22日
RTAinJapanの話かと思ったら全く関係なかった…
1
とまとプリン @hirobumi_mmo 2020年9月22日
テキストブラウザ相手にはどうにもなるまい
0
北斗柄@生涯六壬者.多分 @hokutohei 2020年9月22日
PDFって何のために開発されたんだっけ?
0
30年寝太郎 @Avocado_Inside 2020年9月23日
WGwaihir コードでUIの見映えを制御するのって、その昔、幾多のRADツールが徹底的に排除しようとした「悪しき」開発スタイルですよね。 HTML(+css)が万能レイアウトシステムを志向した結果、なし崩し的にいつの間にか「これがWEB開発のスタンダードですが何か?」みたいになってますけどね。
1
Hacchi @2mocccck 2020年9月23日
Avocado_Inside HTMLが万能レイアウトシステムを志向した以上に、コード側の最適化がCSSやHTML側の進化を上回ってしまったというのが実情じゃないですか? フロント側の挙動自体をMVC的に制御しようという動きまで出てきてるわけですが、これは抽象レイヤの多層化による役割の明確化が進んでいるとも言え、FLASHのようなボイラープレートに全てをゆだねるよりは効率上もセキュリティ上も好ましいと思いますけどね。
0
Shin Matsuda (syncbunny) @syncbunny 2020年9月23日
こういうのってピクセルパーフェクトにするかどうかはそこにかける工数(=お金)も含めてプロジェクトリーダーの判断なのかなと思ってたけど、Web業界ってデザイナーが決定権持ってるの?
1
みさ @misa_exchange_ 2020年9月23日
こういうお話で大抵デザイナーかコーダーかどちらかがが悪とされがちだけど、要は専門知識同士の摩擦なので無益なのよね…。デザイナーはマーケティングや閲覧者のユーザビリティ優先で考えるし、コーダーはシステム周辺のクリアさや快適度を優先するし…。どっちもがお互いの知識をちょっとずつ持ってれば多少は避けられるけど、ぶつかる時はぶつかる。顧客優先でその都度取捨選択していくしかない。そんでそれやるのがディレクターの仕事なのでDは頑張ろうね(疲労)
1
點面悪鬼百之助 @x743 2020年9月25日
今の時代にピクセルパーフェクトなんて本気で言ってんの?って感じだけど、コーディングする側もピンキリなので、よっぽどひどい人にお願いしちゃったんだろうなと
0
さーたん@もふもふ @tripleodd 2020年9月25日
スマホの画面の大きさだって違うし、デスクトップのブラウザーでフルスクリーンで見る人もいれば一定サイズに固定した状態で見る人もいる。下手すればVR眼鏡で見る人もいる。そんな状況でピクセルパーフェクトにこだわる方がおかしいよ。
0