コーディング Web制作

【Chrome拡張機能】ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方

【Chrome拡張機能】ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方
ピクセルパーフェクトってどうやるの?

コーディングで最も重要かつ出来て当然を目指すものがピクセルパーフェクトです。

これはデザインと1pxもズレずにコーディングする事で、最も基本的なことでありながら出来ていない人が多いです。

そしてデザインと1pxもズレていない事を確認するのに必須なのが、今回ご紹介するChromeの拡張機能「PerfectPixel」になります。

正直これを使わずに目で確認するのは不可能に近いので、これはコーダーであれば使えるようにしておきましょう。

効率よくコーディングしたい人はこちら

ピクセルパーフェクトでコーディングするのに必須なPerfectPixelの使い方

冒頭でも書いた通り、デザインと1pxもズレないようにコーディングするのがピクセルパーフェクトで、それを実現するのに必要なのがPerfectPixelです。

これはどういう機能かというと、コーディングしたページの上にデザインカンプを重ね合わせることが出来る拡張機能です(ズレを調整してくれる機能ではありません)

非常にシンプルで分かりやすいですね。

画面と重ね合わせれば1pxでもズレていれば分かりますし、何よりコーディングしやすく作業効率もアップします。

手順は以下の通りです。

  1. Chrome拡張機能「PerfectPixel」をインストール(初めて使う時だけ)
  2. デザインデータを画像にする(jpgやpngで書き出す)
  3. コーディングした画面を表示させ、PerfectPixelを使ってデザインを重ねる
  4. ズレていたら検証ツールを使って微調整していく

それでは順番に見ています。

 

PerfectPixelをインストール

まずはChromeの拡張機能であるPerfectPixelをインストールします。

以下のページにアクセスします。

PerfectPixel

こちらが表示されるので、赤枠をクリックします。

するとこちらが表示されるので、Chromeに追加をクリックします。

そしてこちらがポップアップされるので、拡張機能を追加をクリックします。

そして右上の拡張機能表示エリアにこちらが表示されればインストールは完了です。

あとはこれを有効化します。

画面右上あたりのパズルのようなアイコンをクリックすると、インストールされてる拡張機能が表示されます。

ここでPerfectPixelのピンアイコンをクリックすればOKです。

こちらが有効化されたピンとアイコンです。

 

デザインカンプを画像にする(書き出す)

デザインカンプの種類によって画像を書き出す方法は変わります。

 

XDで画像の書き出し

まずは右上の拡大率を100%にします(必須ではありませんがこの方がやりやすいです)

次にページ名を1回クリックします。

するとページ全体に青い枠線が表示されるので、Macなら⌘+E(WindowsならCtrl+E)を押すとこちらが表示されるので、各種設定をして右下の書き出しをクリックすればページ全体の書き出しが完了です。

 

Figmaで画像の書き出し

FigmaもXDと似たような感じです。

まずはページ名を1回クリックします。

そして右上のExportを選択して、画像の種類をJPGかPNGにしてExportをクリックすれば完了です。

ついでにPreviewをクリックすると印刷プレビューが確認出来ます。

 

Photoshopで画像の書き出し

ファイル → 書き出し → 書き出し形式を選択します。

あとは右下の書き出しをクリックすれば完了です。

 

Illustratorで画像の書き出し

ファイル → 書き出し →スクリーン用に書き出しを選択します。

タブはアートボードを選択し、あとは書き出し先、拡大率、ファイル形式などを設定して右下のアートボードを書き出しをクリックすれば完了です(右側の設定はデフォルトでいいと思います)

書き出し先がデフォルトの場合は、デザインカンプと同じ階層に拡大率と同じ名前のフォルダがあり、ここに画像が書き出されています。

 

コーディングした画面と書き出した画像を重ねる

まずはコーディングした画面をChromeで開きます。

この時、検証ツールを開いて幅をデザインカンプと同じにするとやりやすいです(以下の例だと1280px)

検証ツールはMacならfn+F12、WindowsならF12で開き、右上のスマホ・タブレットアイコンをクリックすれば画面幅を変える表示になります。

以下の1280が横幅のpxになります。

 

ローカル環境でも使えるようにする

ここでPerfectPixelのアイコンをクリックしますが、ローカル環境だとこのように表示されます。

この設定をするには、画面右上の点3つをクリックして、その他のツール → 拡張機能を開きます。

そして拡張機能一覧が表示されるので、PerfectPixelの詳細をクリックします。

そして「ファイルのURLへのアクセスを許可する」をONにすれば完了です(自動で保存されます)

これでローカル環境でも使えるようになりました。

 

PerfectPixelを起動

それでは改めてコーディングしたページをブラウザで開き、検証ツールを開いた状態でPerfectPixelのアイコンをクリックしてみましょう(検証ツールを開くのは必須ではありません)

アイコンをクリックするとこちらが画面の上に表示されます。

これはドラッグ&ドロップで移動可能です。

またこれは閉じた状態なので、左の+をクリックして開いてみましょう。

この点線内に重ね合わせたい画像をドラッグ&ドロップで持ってくるか、クリックすればPC内から画像を選択する画面が表示されるので、画像を選択して下さい。

すると透過された画像が表示されます。

ブラウザの検証ツールで幅は1280pxにして、画像も1280pxで書き出した場合、サイズの倍率が0.5だと上記のようになります。

これを1.0に変更すればブラウザの幅と重ねる画像の幅が同じになるので、この場合は1.0にしましょう。

もちろん書き出した画像がブラウザの幅と違う場合は1.0では重ならず、両端を揃えるために微調整が必要になるのでちょっと面倒になります。

サイズの倍率以外で使うのは以下になります。

  • 表示のON / OFF:重ねた画像のON / OFFが出来る
  • 表示のロック:ONにすると重ねた画像がドラッグ&ドロップで動かなくなる
  • 透明度:0%は重ねた画像が見えなくなり、100%は全く透けないのでブラウザ画面の方が見えなくなる

透明度は50%くらいが見やすいかと思いますが、やりやすいように調整して下さい。

XとYは画像の位置(座標)になります。

画像を動かすときはドラッグ&ドロップでざっくりと動かし、上下左右の矢印をクリックすれば1px単位で動かせるので微調整はこちらでしましょう(「中」は左右中央で固定となります)

そしてブラウザと重ねた画像の幅を揃えてからズレがないかを確認していきます。

もしこのように重ねた画像がズレていたらサイズや位置がズレているので、検証ツールを使って調整 → コーディングで修正と進めていきます。

これで重ねた画像とブラウザの画面がピッタリ合えばピクセルパーフェクトです!

 

重ねる画像を変える

重ねる画像を変えたい時は新規追加から画像を追加すれば、今使っている画像と追加した画像の両方使えるようになります(同時には表示出来ないので、どちらか選択になります)

もし使わない画像があればレイヤーに表示されている画像の右上のバツ印をクリックすれば削除出来ます。

 

ピクセルパーフェクトは必要なのか?

実務でピクセルパーフェクトを求められる事は滅多にありませんが、基本的にはピクセルパーフェクトを目指してコーディングするようにしましょう。

もしデザインと5pxくらいズレていたらかなりズレていると言えますし、中には0.1pxでもズレていたら指摘してくるクライアントもいます。

実際はピクセルパーフェクトを目指してコーディングした方が修正回数も少なくなりますし、PerfectPixelを使いながらコーディングした方がズレていればすぐ分かるのでコーディングが楽になります。

以上になります。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-コーディング, Web制作
-,