ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ
-
clockmaker
- 59962
- 235
- 234
- 139
-
- いいね！139
にゃんこ🍥マークアップの人（お仕事募集中）
@ake_nyanko
きちんと設計されたデザインは、イレギュラーですら規則性がある。 そこまでされたら流石に極力対応せざるを得ない。 デザインデータの状態を正とするか、設計通りにパーツ配置した結果を正とするかは案件による。 マジで。
2020-09-20 11:41:18
TAK
@tak_dcxi
結局これなんすよね。ピクセルパーフェクトを目指すのは大切だけど、デザインがしっかりしているのが前提。どんなデザインでもピクセルパーフェクトじゃなきゃダメって方は少数ピクセル含まれていたらどうコーディングするのか知りたい。 twitter.com/ake_nyanko/sta…
2020-09-20 11:45:42
にゃんこ＠マークアップの人（減量中）
@ake_nyanko
ピクセルパーフェクトにするのはデザイン自体がきちんと設計されていてかつデータもキッチリ作り込んである場合だけだな。感覚で配置してるデザインデータを元にピクセルパーフェクトなんかした日には設計どころじゃなくなるし。 twitter.com/tak_dcxi/statu…
2020-09-20 11:38:30
イクナガ｜便利ツール屋
@blog_ikunaga
ピクセルパーフェクト、サイズや余白をガン無視するコーダーは論外として、ブラウザの行間（line-height）や約物（句読点やカギ括弧）の挙動を知らないデザイナーも問題だと思っている派。 pic.twitter.com/3Y46JMh8Zq
2020-09-20 17:38:07
拡大
コミュニケーションが問題では
Takeshi Igarashi | 五十嵐武志
@takeshi81
ピクセルパーフェクト。これは表層的な問題で、各工程間のコミュニケーションの問題です。デザインもマークアップも他者への押し付けでは進まないのです。なぜそれが必要なのか、課題を共有するべきでしょう。
2020-09-20 02:46:31
池田 泰延
@clockmaker
・この表現はCSSだと面倒くさいし、やる意味あるのかな ・HTMLコーティングを難しくするようなデザインはやめてほしいな デザイナーもデザイナーでしか見えない視点でウェブサイトの価値最大化を目指しています。 HTML化工程の負担を主張するのではなく、互いのゴールを理解しあいたいものですね。
2020-09-20 02:07:30
azu☕︎
@azdesude
お互いの良いところを活かし合う仕事がしたいもんですやね😁 私たちは同業者パートナーの気持ちや思いは大切にしたい。 お客様の想いより願いを叶えたい。 私たちはお客様の想いが叶うように願いを叶える。その為には仲間の気持ちを大切にしないとなぁ、なんて思う。 …ぅん。まだ寝ぼけてます、私🤣 twitter.com/tsudoi220/stat…
2020-09-20 08:27:48
吉本 集 / aru inc.
@tsuDoi220
デザインのことは詳しくないけど、8の倍で揃えると綺麗だー、とかあって、デザイナーさんは細かくデザインされるんですよね。 で、いざ、実装するときに、1pxとか別によくね？って、実装するの？ デザイナーさんが拘ったのに？ マジか、ってなる。
2020-09-20 00:59:48
Jay
@Jay_1oo3
綺麗に見えるからデザイナーのエゴで8の倍数を使ってるんじゃなくて、どちらかというと実装とかデザインシステムを考慮した結果8の倍数を使ったりしてるんだよね なのでエンジニアがピクセルパーフェクトに拘ってくれないとかであれば、普通にコミュニケーション不足 みんなで作ってくもんだと思うよ
2020-09-20 08:25:10
トモ
@tomopict
ピクセルパーフェクトは理想的だけど、デザイナーと密にコミュニケーションできないときついなぁ。 そもそものデザインカンプの精度に問題がある場合も少なからずあるし、設計上必要な変更の交渉が必要な事もあるので。もちろんUXが設計によって落ちる事は避けなければならないけど。
2020-09-20 11:51:05
吉本 集 / aru inc.
@tsuDoi220
「デザイナーだってミスでズラしちゃう時だってある」 これ、実装者、気づきます、ズレてるって。 もしミスでズレちゃっているのか、わざとなのか判断が微妙だったらデザイナーに相談します。 それでも、わからない場合は、そのデザインでクライアントからOKもらってるんだから、それでいいかと。
2020-09-20 14:15:16
けんじ / UX Designer
@kenji_clown5
僕もそう思います。お互いの専門領域をリスペクトした上でのコミュニケーションが大事ですね。理由のあるデザインを忠実に再現する、というのがどちらの立場から見ても最高ですね！ twitter.com/takeshi81/stat…
2020-09-20 11:33:17
けんじ / UX Designer
@kenji_clown5
同意…ですが、このようなデザインをデザイナー側だけで作り上げるのは至難の技なので、実装側と一緒に仕上げていきたい所存です。最近めちゃくちゃ作り込まれたデザインする方と仕事してるけど、微妙に設計が合わない部分などはこちらからコメントして、お互いにさらに良いと思えるものを目指します。 twitter.com/ake_nyanko/sta…
2020-09-20 14:18:41
池田 泰延（勉強会用）
@clockmaker_bot
熟練のデザイナーと仕事をしたときは、Photoshopでレイヤー名も配置も完璧に仕上がったデータでもらったので、それに応えるのは義務のように思ったことがあります。
2020-09-20 20:05:27
池田 泰延（勉強会用）
@clockmaker_bot
デザイナー全員が熟練者でもないでしょうし、デザイナーも人なので、少なからずどうしても間違い（ズレ）を残すことはあるでしょう。 HTML/CSSはロジカルに組むので、論理的なズレに気付きやすいわけです。
2020-09-20 20:09:28
池田 泰延（勉強会用）
@clockmaker_bot
・どれが意図したレイアウトか ・どこか人為的ミスなのか それを見極める力がHTMLコーダーに課せられているわけで。 デザイナーのミスばかりに不満を言い、デザイナーの意図したレイアウトを放棄していては、お互い気持ちいい仕事はできないはず。
2020-09-20 20:13:51
ほかり(株)イロコト代表取締役
@irokoto_hokari
この内容が同意出来るなと感じます。 - HTMLとCSSで、デザインと1pxのずれもなく正確に実装する必要はあるのか？ ピクセル パーフェクトの現状 | コリス coliss.com/articles/build…
2020-09-20 19:58:14
鈴木ナオミ🇭🇺
@tofutechxyz
ピクセルパーフェクト、ある程度は努力はするべきだと思いますが、そこに拘って膨大な時間を費やすのはオススメしないですね。 一つの寸法で100点目指すのではなく、より多くのブラウザや寸法で90点が出るウェブサイトを目指す方がユーザーファーストかと。 そもそも殆どのユーザーは気づきませんし。
2020-09-20 21:52:32こんな対策も
𝒚𝒖𝒌𝒊
@yukiloz7
ピクセルパーフェクトといえば、現在進行形でLeading-trimというCSSプロパティの導入が検討されているそうで、これを指定するとline-height: 1でも削れないテキストのHalf-leadingという部分を削れるらしい🙄 これが導入されたら余白の計算が楽になりそうですね🙄 medium.com/microsoft-desi…
2020-09-20 19:00:53
池田 泰延
@clockmaker
HTMLコーディングでの「ピクセルパーフェクト」が話題になっているので便乗して紹介。 2019年のAdobe MAX Japanで発表したのですが、HTMLのピクセルパーフェクトを自動検証できるツールを開発し社内運用しています。 これを使えば、数十・数百あるウェブページも完璧にチェックできます。 twitter.com/SIHO_o/status/…
2020-09-20 19:27:26
SIHO＠木地師研修中/螺鈿行燈（らでんあんどん）
@SIHO_o
さすがの@clockmaker 池田さんのセッション。 qiitaに書いてくれるのを楽しみにしてるー。 4枚目picはデザインとコーディングした結果を比較して違う箇所を教えてくれるプラグインの結果画面。スゴイ。 #adobeMAXjapan pic.twitter.com/k5aN8sS9ix
2019-12-03 13:31:29
