ピクセルパーフェクトの定義

Transcript

1. 1 うえむー 2/24 ピクセルパーフェ クトの定義
2. Name:うえむー Job : フロントエンドエンジニア・リードエンジニア Skill : HTML / CSS / JavaScript / jQuery / PHP / Liquid / TypeScript / SCSS / Pug / Laravel / Symfony / React.js / Next.js / WordPress / Movable Type / microCMS / Shopify etc... Hobby : ゴルフ・ランニング・ボードゲーム・麻雀・学習 Link : https://x.com/uemuragame5683/ 2
3. ピクセルパーフェクト、デザイン文化、ジレンマ ⚫現場のジレンマ ピクセルパーフェクトは 昔とくらべて実現が難しい認識 であり、多くの作業者においても 本当にそこまで 1px 単位で揃える必要があるのか？ っておもっている人が 多い 3 ピクセルパーフェクトとは？:デザインカンプを１pxのずれもないように完全再現させること。 だからといって、みんながそう思っているからよしなにやっていけばいいのかといえばそうでもありません！ ⚫強いデザイン文化を持つ企業 ピクセルパーフェクトにおいて、デザインに強い会社 は、デザインカンプを揃えるように 実装して欲しいとい う期待感・文化は強く残っている。
4. “昔のサイト” と “今のサイト” の比較 昔のフロント実装の前提（ 2012） ・固定幅（例：960px / 1024px） ・サイトのレイアウトがシンプルなのが多い ・レスポンシブなし、SP別 ・フォントも種類・環境が限定的(画像をスライスして掲載) ・グローバルナビやボタンなども 画像でスライスして配置 が一般 的 4 イメージとして、大枠なピースをペタペタして作る時代 から、 細かいピースを組み立てる時代 になり、だいぶ難易度が上がっている！！！ 今のフロント実装の前提（ 2025） ・可変幅（vw / % / clamp） ・レスポンシブ必須 ・グローバルナビやボタンやフォントなどがHTML/CSSで対応が 一般的 ・動的なアニメーションも増えてよりデザインの再現度が難しくな る。
5. 強いデザイン文化を持つ企業 技術的制約が比較的少な かった時代は「デザインカン プを高い精度で再現する」 こ とが比較的現実的であり、実 際にそれが可能なケースも 多く存在していました。 5 つまり、「高い再現度で実装できていた」という過去の成功体験が、 今も期待値として固定化され続けている可能性がある ということです。 その結果、 「ここまで揃える ことができる」という成功体験 が積み重なり、“それが品質 基準” として定着していったと 考えられます。 しかし、CSS 前提条件が大 きく変わった現在において も、当時の基準が無意識の まま引き継がれているケース がある、というのが現状では ないかと思います。
6. 現場でよく起きている「すれ違い」 6 こうした 「過去の成功体験」 と 「現在の前提条件」 のズレ によって、 現場では衝突や認識のギャップが生まれやすくなっています。 実装者側の声 ・今の前提だと同じことをやるのは正直かなり難しい ・1px 単位で合わせるために時間がかかりすぎる ・レイアウトが破綻していなければ問題ないのでは？ クライアント様側の声 ・今までは、こういう実装ができていた ・だから今回もできるはず ・できないと言われても、理由がよくわからない
7. どう解決していくか？ 無理をしなくてよいもの ・各モジュール間のマージン差(2px - 3px程度) ※ ただし、一見してズレて見えるものは NG そこはパーフェクトピクセルを利用して違和感ない様に揃える 事 7 まず、クライアント側が安心できる整理 をしておくことが重要です。 「揃えない」という話ではなく、 “揃える基準を整理する ” という考え方です。 判断基準として大事にしたいこと　 >「違い」より「違和感」を見る ・数値として違っているかではなく、見た瞬間に「おかしい」と感じるかどうか 必ず揃える（特にデザインガイドラインで定義されている場 合は必須） ・フォントサイズ階層 ・行間・字間 ・色・配色ルール ・主要UI(ボタン・入力欄・ヘッダー・フッター・カード・リスト) ・モジュール ・余白のリズム
8. 本国サイトが存在し、日本側にデザインがない場合 本国サイトは存在するページが、日本側に明確なデザイ ンカンプがない場合、「本国サイトに合わせてほしい」と いう要望をいただくことがあります。 この場合は、本国サイトを“デザインカンプ（判断基準)”と して扱い、その仕様・挙動に合わせて実装することを前 提にします。 8 本国サイトが存在し、日本側にデザインがない場合の対処法 実際の現場でも、「大体、本国サイト通りでお願いします」 と言われるケースは少なくありません。
9. 『できない理由』を『代替案の提案』へ変換し、合意を形成する 9 説明の質を変えて、感情ではなく合意で決める 目的は「感情」ではなく「合意」で決められる状態にすることです。 このフローを通すことで、 「なんとなく気持ち悪い／なんとなく嫌」ではなく、 前提と根拠を共有したうえで、合意ベースで判断ができる状態 をつくることができます。 抽象的な説明 「技術的に難しい」 「制約があります」 なんか嫌だ！ 具体的かつ根拠を伴った説明 1.条件 2.理由 3.影響 合意ベースで判断 ？ ☑— ☑— 伝え方をかえる
10. まとめ 10 　・デザインカンプを厳密に揃える文化は、今も確実に存在する。 　・しかし、 昔は揃えやすかったが、今は技術・環境の複雑化により難易度が上がっている。 　・その結果、 「過去の成功体験」と「現在の前提条件」のズレから 、すれ違いが生まれやすい。 　・まずは、“今の時代のピクセルパーフェクトとは何か ” を整理することが重要。 　・クライアント様との 衝突を減らすためのプロセスを合意ベースで整理しておく ことが重要。
11. 11 11 Thank You!!