コーディングで最も重要かつ出来て当然を目指すものがピクセルパーフェクトです。
これはデザインと1pxもズレずにコーディングする事で、最も基本的なことでありながら出来ていない人が多いです。
そしてデザインと1pxもズレていない事を確認するのに必須なのが、今回ご紹介するChromeの拡張機能『PerfectPixel』になります。
正直これを使わずに目で確認するのは不可能に近いので、これはコーダーであれば使えるようにしておきましょう。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方
冒頭でも書いた通り、デザインと1pxもズレないようにコーディングするのがピクセルパーフェクトで、それを実現するのに必要なのが『PerfectPixel』です。
これはどういう機能かというと、コーディングしたページの上にデザインカンプを重ね合わせることが出来る拡張機能です（ズレを調整してくれる機能ではありません）
非常にシンプルで分かりやすいですね。
画面と重ね合わせれば1pxでもズレていれば分かりますし、何よりコーディングしやすく作業効率もアップします。
手順は以下の通りです。
- Chrome拡張機能『PerfectPixel』をインストール（初めて使う時だけ）
- デザインデータを画像にする（jpgやpngで書き出す）
- コーディングした画面を表示させ『PerfectPixel』を使ってデザインを重ねる
- ズレていたら検証ツールを使って微調整していく
それでは順番に見ています。
PerfectPixelをインストール
まずはChromeの拡張機能である『PerfectPixel』を追加します。
以下のページにアクセスします。
こちらが表示されるので、赤枠をクリックします。
PerfectPixelを追加
するとこちらが表示されるので『Chromeに追加』をクリックします。
『Chromeに追加』をクリック
そしてこちらがポップアップされるので『拡張機能を追加』をクリックします。
『拡張機能を追加』をクリック
そして右上の拡張機能表示エリアにこちらが表示されればインストールは完了です。
PerfectPixel追加完了
あとはこれを有効化します。
画面右上あたりのパズルのようなアイコンをクリックすると、追加されている拡張機能が表示されます。
追加されている拡張機能一覧
ここで『PerfectPixel』のピンをクリックすればOKです。
こちらが有効化されたピンとアイコンです。
『PerfectPixel』のピンが有効化された状態
『PerfectPixel』のアイコンが有効化された状態
デザインカンプを画像にする（書き出す）
デザインカンプの種類によって画像を書き出す方法は変わります。
XDで画像の書き出し
まずは右上の拡大率を100%にします（必須ではありませんがこの方がやりやすいです）
XD：拡大率100%
次にページ名を1回クリックします。
XD：ページ名を1回クリック
するとページ全体に青い枠線が表示され、Macなら⌘＋E（WindowsならCtrl＋E）を押すとこちらが表示されるので、各種設定をして右下の書き出しをクリックすればページ全体の書き出しが完了です。
XD：書き出し
Figmaで画像の書き出し
FigmaもXDと似たような感じです。
まずはページ名を1回クリックします。
Figma：ページ名を1回クリック
そして右上の『Export』を選択して、画像の種類をJPGかPNGにして『Export』をクリックすれば完了です。
Figma：Exportをクリック
ついでに『Preview』をクリックすると印刷プレビューが確認出来ます。
Photoshopで画像の書き出し
『ファイル → 書き出し → 書き出し形式』を選択します。
Photoshop：書き出し形式
あとは右下の『書き出し』をクリックすれば完了です。
Photoshop：書き出し
Illustratorで画像の書き出し
『ファイル → 書き出し → スクリーン用に書き出し』を選択します。
Illustrator：スクリーン用に書き出し
タブはアートボードを選択し、あとは書き出し先、拡大率、ファイル形式などを設定して右下の『アートボードを書き出し』をクリックすれば完了です（右側の設定はデフォルトでいいと思います）
Illustrator：アートボードを書き出し
書き出し先がデフォルトの場合はデザインカンプと同じ階層に拡大率と同じ名前のフォルダがあり、ここに画像が書き出されています。
Illustrator：書き出し後のファイル
コーディングした画面と書き出した画像を重ねる
まずはコーディングした画面をChromeで開きます。
この時、検証ツールを開いて幅をデザインカンプと同じにするとやりやすいです（以下の例だと1280px）
検証ツールはMacならfn＋F12、WindowsならF12で開き、右上のスマホ・タブレットアイコンをクリックすれば画面幅を変える表示になります。
検証ツール：スマホ・タブレットアイコンをクリック
以下の『1280』が横幅のpxになります。
検証ツール：横幅1280px
ローカル環境でも使えるようにする
ここで『PerfectPixel』のアイコンをクリックしますが、ローカル環境だとこのように表示されます。
PerfectPixel：ローカル環境で使用可能にする
この設定をするには、画面右上の点3つをクリックして『その他のツール → 拡張機能』を開きます。
PerfectPixel：その他のツール → 拡張機能
そして拡張機能一覧が表示されるので、PerfectPixelの『詳細』をクリックします。
PerfectPixel：『詳細』をクリック
そして『ファイルのURLへのアクセスを許可する』をONにすれば完了です（自動で保存されます）
PerfectPixel：『ファイルのURLへのアクセスを許可する』をON
これでローカル環境でも使えるようになりました。
PerfectPixelを起動
それでは改めてコーディングしたページをブラウザで開き、検証ツールを開いた状態で『PerfectPixel』のアイコンをクリックしてみましょう（検証ツールを開くのは必須ではありません）
PerfectPixel：アイコン
アイコンをクリックするとこちらが画面の上に表示されます。
PerfectPixel
これはドラッグ&ドロップで移動可能です。
またこれは閉じた状態なので、左の＋をクリックして開いてみましょう。
PerfectPixel：＋クリックで開いた状態
この点線内に重ね合わせたい画像をドラッグ&ドロップで持ってくるか、クリックすればPC内から画像を選択する画面が表示されるので、画像を選択して下さい。
すると透過された画像が表示されます。
PerfectPixel：重ねた画像の調整
ブラウザの検証ツールで幅は1280pxにして、画像も1280pxで書き出した場合、サイズの倍率が0.5だと上記のようになります。
これを1.0に変更すればブラウザの幅と重ねる画像の幅が同じになるので、この場合は1.0にしましょう。
もちろん書き出した画像がブラウザの幅と違う場合は1.0では重ならず、両端を揃えるために微調整が必要になるのでちょっと面倒になります。
サイズの倍率以外で使うのは以下になります。
- 表示のON / OFF：重ねた画像のON / OFFが出来る
- 表示のロック：ONにすると重ねた画像がドラッグ&ドロップで動かなくなる
- 透明度：0%は重ねた画像が見えなくなり、100%は全く透けないのでブラウザ画面の方が見えなくなる
透明度は50%くらいが見やすいかと思いますが、やりやすいように調整して下さい。
XとYは画像の位置（座標）になります。
画像を動かすときはドラッグ&ドロップでざっくりと動かし、上下左右の矢印をクリックすれば1px単位で動かせるので微調整はこちらでしましょう（「中」は左右中央で固定となります）
そしてブラウザと重ねた画像の幅を揃えてからズレがないかを確認していきます。
もしこのように重ねた画像がズレていたらサイズや位置がズレているので、検証ツールを使って調整 → コーディングで修正と進めていきます。
PerfectPixel：重ねた画像がズレている場合
これで重ねた画像とブラウザの画面がピッタリ合えばピクセルパーフェクトです！
重ねる画像を変える
重ねる画像を変えたい時は新規追加から画像を追加すれば、今使っている画像と追加した画像の両方使えるようになります（同時には表示出来ないので、どちらか選択になります）
PerfectPixel：画像追加
もし使わない画像があれば、レイヤーに表示されている画像の右上のバツ印をクリックすれば削除出来ます。
ピクセルパーフェクトは必要なのか？
実務でピクセルパーフェクトを求められる事は滅多にありませんが、基本的にはピクセルパーフェクトを目指してコーディングするようにしましょう。
もしデザインと5pxくらいズレていたらかなりズレていると言えますし、中には0.1pxでもズレていたら指摘してくるクライアントもいます。
実際はピクセルパーフェクトを目指してコーディングした方が修正回数も少なくなりますし、PerfectPixelを使いながらコーディングした方がズレていればすぐ分かるのでコーディングが楽になります。
以上になります。
