このような疑問に答えます。
ピクセルパーフェクトはデザインカンプと1pxも違わずにコーディングで再現すること。
Perfect Pixel（パーフェクトピクセル）はそれを支援するChrome拡張機能のこと。混同しがち。
コーディングでピクセルパーフェクトは当たり前ですよ
こういった言説は2019年~2020年あたりに特に盛り上がっていた(主にSNSで)印象ですが、実は2000年代がピークの考えだったりします。
そこで今回は以下の事項を解説します。
- Perfect Pixelを使ったピクセルパーフェクトの実現方法
- コーディングの際の、現実的なピクセルパーフェクトの行い方
- ピクセルパーフェクトとの向き合い方、ずれる、諦め方
そもそも
ピクセルパーフェクトて初見…なんぞ…？
こういった方は是非最後まで見ていただきたいですし、ピクセルパーフェクトの存在は知っていても試したことがない方は、是非今回の記事をきっかけに試して欲しいです。
「コーディングの意識と品質がガラリと変わります」
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
前提：ピクセルパーフェクトについての考え方
ピクセルパーフェクトの2000年~2010年代
ピクセルパーフェクトとは、そもそもレスポンシブが一般的でない、2000年代の品質保証の話です。
昔はデバイスサイズが今ほど多様でもなく、ある程度固定pxでコーディングしていても問題なかったのだと思います。
しかし2010年代からは、レスポンシブデザインが当たり前になりました。
それによって、
ピクセルパーフェクトを再現するのむずくない？
となった経緯があります。
ピクセルパーフェクトの概念はとても大事だ
後ほど解説しますが、複数のデバイス・ブラウザ幅で、ピクセルパーフェクトを実現するのは、実際はほぼ不可能です（特にXDデザインの場合）
なので、「ルック・アンド・フィール」で合わせるのが最良の手段になります。
ではピクセルパーフェクトは無用の存在なのかというと、全くそんなことはなく。
ピクセルパーフェクトを目指すことによって、デザインカンプを極力再現する習慣を形成する
私個人は、これがピクセルパーフェクトを行う最大の理由であると考えています。
ピクセルパーフェクトで鍛えられたコーダーはデザインカンプを忠実に再現するのがうまいです。
しかし、ピクセルパーフェクトを蔑ろにしてきたコーダーは、実案件の経験が豊富でも、デザインカンプと割と異なる初稿を出してきます。
だから、ピクセルパーフェクトをまず行う癖をつけて、コーディングの品質を上げて欲しいのです。
PerfectPixelの使いかた
❶拡張機能PerfectPixelをセットアップ
まずは下記ページより拡張機能をダウンロードします。
ダウンロードした後は、chrome://extensionsにアクセスすると拡張機能一覧に行けるので、「詳細」をクリック。
その後、以下の項目をオンにしてください。
これでセットアップ完了です。
❷重ね合わせるためのデザイン画像をダウンロード
デザインカンプのフレームごとダウンロードします。
Figmaからコーディングしている場合は、フレーム全体を2xでエクスポートします。
Adobe XDからコーディングしている場合は、「ファイル→書き出し→選択したオブジェクト」を選択。
同様に2xで書き出しを行います。
❸PerfectPixelにアップロードして調整
まずは検証ツールのレスポンシブ機能を使って、ブラウザの幅をデザインカンプと揃えます。
今回は1366pxなので、それに合わせます。
その後、拡張機能をクリックして、画像をアップロード。
その後鍵マークをクリックしてオンにし、倍率が0,5、透明度が50%になっているのを確認したらOKです。
デザインとブラウザ表示が重なり、差異がある部分が可視化されました。
検証ツールで微調整しつつコードに反映
今回は試しに以下の部分を改善してみます。
まずデザインカンプを確認すると、line-heightが設定されてないので、CSSから除きます。
また、デザインカンプではArialが当たっているのに、CSSでは違うフォントが当たっていたので、Arialを指定します。
ブラウザで当たっているフォントは検証ツール下部のComputedから確認できます。
これによって、ほぼ揃えることができました。
次に、以下の部分を見てみます。これは流石にブレブレですね…
まずデザインカンプを確認すると、上下の余白が31pxです。
なのに、CSSは32pxになっていました。
また、font-sizeが14pxだったり、font-weightが未設定だったり、letter-spacingが勝手に当たっていたので、そこを調整しました。
結果、だいたいデザインカンプと一致したようです（まだ若干ずれていますが…）
XDとブラウザでline-heightが異なる問題
実はXDとブラウザ(Web)ではline-heightがもたらす影響が異なります。
キーワードは「ハーフ・レディング（half-leading）」です。
例えば以下はfont-size: 16px; line-height: 2;の時の表示です。
XDの場合、テキスト間に16px空けることでline-height: 2;を表現していますが、ブラウザやFigmaの場合はテキストの上下に8pxずつ分割して余白を空けます。
行間が半分に分割されることを「ハーフ・レディング（half-leading）」といい、これがブラウザとFigmaにはあります。
よって、ブラウザのほうがXDよりテキストが少し下がって見えるのです。
これを解决する手段として、ネガティブマージンの設定すれば合わせられますが、そこまですべきなのかは判断が分かれるところです。
デザイナーがこだわりを持ってる部分ならハーフ・レディングも考慮したいですけど、実際は工数が厳しいことが多いですかね。
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
ピクセルパーフェクトにすべき部分としなくてよい部分
やはり、1pxもずれなくコーディングとか、無理ゲーでは？
そうじゃなくても、どれぐらい合わせれば良いのか…
そういった方に、「ルック・アンド・フィール」という考えをお伝えします。
ルック・アンド・フィール
以下の画像を見て下さい。同じに見えますか？
実は❶と❷の部分に差異があります（詳しくは引用元記事にて）
デザインカンプとブラウザを同じ画面サイズでパッと見たときに
「どちらがデザインで、どちらがブラウザなのか判別できない」
これがルック・アンド・フィールが合った状態でゴールとも言えます。
ディレクションで様々なコーディングを見ますが、パーフェクトピクセル以前にルック・アンド・フィールの段階で「あ、ずれてるな」とわかるものも多いですね…
初稿提出からルック・アンド・フィールで合っている状態にするためには、そもそも普段からピクセルパーフェクトを心がけないと、できない。
1pxずれててもいいという意味ではない
伝え方がとっても難しいのですが、
ルック・アンド・フィール、つまり雰囲気！！
1pxとかずれてても問題なし！！
こういうことじゃないんですよね。特にボタンとか細かなコンポーネントは1pxずれてるだけで、割とデザイナーなら気づきます。
油断召されぬよう。
デザイナーの意図を感じないミスの場合はよしなに
デザイナーの意図しないミスは以下のような部分です。
ここでは余白が片方だけ1px多いです。この場合はどちらかに統一するのが筋で、必ずしもデザイン通りである必要はないでしょう。
以下の必須ラベルも、上下の余白が異なりますが、デザイナーの単純なミスの可能性が高いです。よって、Y軸中心に実装して問題ない箇所かと思います。
デザイナーが意図してこうした余白を取ることはまずないでしょう。
ピクセルパーフェクトを習慣づける
今回はPerfect Pixel（パーフェクトピクセル）の使い方や、そもそものピクセルパーフェクトへの向き合い方を書きました。
私個人の見解ですが、ピクセルパーフェクトで重要なのは、以下です。
ピクセルパーフェクトを目指すことによって、デザインカンプを極力再現する習慣を形成する
実際にピクセルパーフェクトにできなくても問題ありませんが、「デザインカンプに極力合わせようと努力することで、正確にコーディングをする意識が湧く」ことが重要なのだと思います。
現在コーディングを学習中の方は、是非学習段階からパーフェクトピクセルを意識してもらえるといいかなと。
まずはファーストビューから始めましょう！！
現場レベルでも適当なコーディングが割りと上がってきたりもするので、これを読んでる皆さんには丁寧にコーディング頂きたいです（自戒含め…）(；・∀・)
Responsive Viewerもセットで利用せよ
デザインカンプ通りならこれでもいいですが、デザインカンプ以外のレスポンシブサイズでも確認が必要ですよね？
その時に使える拡張機能「Responsive Viewer」を以下で紹介しているので、こちらも必ず使えるようにしておいてください。
Web制作コーディングの品質チェックについて
「Responsive Viewer」と「Perfect Pixel」を含めたWeb制作コーディング全体の品質チェックに関しては以下の記事を参考にしてください。
超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。
最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか？」
この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、
- 見積書提出
- 実装→初稿提出
- レビュー→修正
- 再修正→納品
- 請求書
この流れを実践していただき、最後にzoomであなたに全体レビューを行います。
- 学習はだいたい終わったけど、納期までに納品できるか不安
- 中々継続と紹介で案件が回らない
このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。
あなたの挑戦を待っています！！
＼レビューを受けて圧倒的な自信を身につける！／
ご寄付を頂けると今後の更新の励みになります！
