ピクセルパーフェクトとは、デザインデータとコーディングデータが1ピクセル単位で完全に一致する状態を指します。Perfect Pixelはその際に利用するツールのことです。
このような疑問に答えます。
コーディングでピクセルパーフェクトは当たり前ですよ
こういった言説は2019年~2020年あたりに特に盛り上がっていた(主にSNSで)印象ですが、実は2000年代がピークの考えだったりします。
そこで今回は以下の事項を解説します。
- Perfect Pixelを使ったピクセルパーフェクトの実現方法
- コーディングの際の、現実的なピクセルパーフェクトの行い方
- ピクセルパーフェクトは時代遅れ？向き合い方、ずれる、諦め方
そもそも
ピクセルパーフェクトて初見…なんぞ…？
こういった方は是非最後まで見ていただきたいですし、ピクセルパーフェクトの存在は知っていても試したことがない方は、是非今回の記事をきっかけに試して欲しいです。
「コーディングの意識と品質がガラリと変わります」
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
ピクセルパーフェクト(Perfect Pixel)とは？
ピクセルパーフェクトとは、デザインデータと実際のコーディングが1ピクセル単位で完全に一致する状態を指します。デザインカンプからのコーディングで求められることの多い技術です。
Perfect PixelはChromeの拡張機能で、デザインカンプをブラウザ上に重ねて表示し、ズレを確認するツールです。これを使うことで、ピクセルパーフェクトなコーディングを効率的に行うことができます。
ピクセルパーフェクトは時代遅れでいらない？
ネット上には「ピクセルパーフェクトは時代遅れで、いらない」という意見もあります。そもそもピクセルパーフェクトとはいつからあるものなのでしょうか。
ピクセルパーフェクトの2000年~2010年代
ピクセルパーフェクトとは、そもそもレスポンシブが一般的でない、2000年代の品質保証の話です。昔はデバイスサイズが今ほど多様でもなく、ある程度固定pxでコーディングしていても問題なかったのだと思います。
しかし2010年代からは、レスポンシブデザインが当たり前になりました。それによって、
Perfect Pixel使っても、ピクセルパーフェクトを再現するのむずくない？
となった経緯があります。
ピクセルパーフェクトの概念はとても大事だ
後ほど解説しますが、複数のデバイス・ブラウザ幅で、ピクセルパーフェクトを実現するのは、実際はほぼ不可能です（特にXDデザインの場合）
なので、「ルック・アンド・フィール」で合わせるのが最良の手段になります。ではピクセルパーフェクトは無用の存在なのかというと、全くそんなことはなく。
ピクセルパーフェクトを目指すことによって、デザインカンプを極力再現する習慣を形成する
私個人は、これがピクセルパーフェクトを行う最大の理由であると考えています。ピクセルパーフェクトで鍛えられたコーダーはデザインカンプを忠実に再現するのがうまいです。
しかし、ピクセルパーフェクトを蔑ろにしてきたコーダーは、実案件の経験が豊富でも、デザインカンプと割と異なる初稿を出してきます。
だから、ピクセルパーフェクトをまず行う癖をつけて、コーディングの品質を上げて欲しいのです。
PerfectPixelの使いかた
ここからはピクセルパーフェクトを行う上で必須の拡張機能「PerfectPixelの使いかた」を解説します。
- 拡張機能PerfectPixelをセットアップ
- 重ね合わせるためのデザイン画像をダウンロード
- 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制作コーディング全体の品質チェックに関しては以下の記事を参考にしてください。
「Web制作学習は終わったけど、その後の営業が上手くいかない。。。」
こんな方にいつもおすすめしているサービスが3つあるので、ご紹介。
✅️コードスルー：Web制作営業と案件を1on1で強力サポートしてくれるサービス。受講生の多くが月30万を超えることに成功し、しょーごログ経由で登録した人も月40万を達成している実績あり
→コードスルー公式LINEはこちら
✅️WEBMARKS：SEOスキルを案件獲得レベルまで高められるスクール。Web制作スキルを持っている場合、いきなり時給3000円のSEO案件を獲得するケースが多い
→WEBMARKS公式LINEはこちら
✅️WSSクラス：Web制作のエンド営業を徹底して学べるスクール。毎週のLIVE配信やチーム企画などに参加することで強制アウトプットの機会も作れる
→WSSクラス公式LINEはこちら
ただし、いずれのサービスも常時募集しているわけではありません。掲載のサービスは全て公式LINEから申し込みが可能なため、まずはLINEに登録する所から始めてみてください。
ご寄付を頂けると今後の更新の励みになります！
