- Web制作でピクセルパーフェクトって聞くけどそもそも何？
- ピクセルパーフェクトをする方法を具体的に教えて欲しい！
今回の記事では、Web制作のフロントサイドにおいて99点のページを制作するにはピクセルパーフェクトは必須のスキルです。
ピクセルパーフェクトとは簡単にいうと、デザインカンプ（完成見本）と100%同じ見た目を作ることを言います。
ピクセルパーフェクトを要求してくるクライアントはそれほど多くはいませんが、閲覧数の多いサイトをリニューアルする際などに必要になってきます。
- ピクセルパーフェクトとはそもそも何なのか？
- ピクセルパーフェクトが必要な時はいつ？
- ピクセルパーフェクトをする方法
この辺りを現役エンジニアの僕が解説していきます！
HTML,CSSを学習中の方もピクセルパーフェクトをすることによって、非常に高いスキルが身につくのでぜひトライしてみましょう！
✔︎こんな方にオススメ
- ピクセルパーフェクトをする必要があるがどうすればいいか分からない方
- ピクセルパーフェクトを簡単にする方法を知りたい方
- もうワンランク上のコーディング技術を習得したい方
そもそもピクセルパーフェクトとは？
ピクセルパーフェクトとは、Web制作をする際に、デザインカンプをみながら見た目を作っていきますが、そのデザインと実際に作ったページが100%一致することを言います。
100%同じということは、、、
- 余白の幅（margin,padding）
- 画像の大きさ
- 文字の間隔
- 文字の大きさ
これらの要素が全てデザインと同じことを指します。
つまり、ピクセルパーフェクトを目指すには、高度なコーディング技術と、時間が必要になってきます！
ピクセルパーフェクトが必要な時はいつ？
Web制作をする際に、毎回毎回ピクセルパーフェクトを目指す必要はなく、クライアントに応じて対応する必要があります。
クライアント側が、デザインとほぼほぼ同じように作って欲しいと要望があった際には、
- ピクセルパーフェクトなのか（100%同じ）
- 多少はずれてもいいが、綺麗な見た目にして欲しい
このようにどう対応すればいいかヒアリングするようにしましょう！
そもそも、ピクセルパーフェクトを実現するには、高度な技術、コーディングする時間が必要になってくるので、ピクセルパーフェクトを要求された際には予算を追加で請求すると良いでしょう！
自ら進んでピクセルパーフェクトを目指す必要はありませんが、デザインカンプと誤差10px以内には収める意識でコーディングするようにしましょう！
ピクセルパーフェクトに近ければ近いほど、クライアントも喜んでくれますし、自分の実力も評価されることでしょう！
ピクセルパーフェクトをする方法
ピクセルパーフェクトをするには、Chromeの拡張機能を使うと簡単にすることができます。
（Chromeの拡張機能が自動的に調節してくれる訳ではありません。汗）
ピクセルパーフェクトをする手順としては、、、
- デザインデータを写真（jpeg,png）に書き出す
- ブラウザ幅と、書き出した写真を同じ幅にする
- Chromeの拡張機能「PerfectPixel」で実物とデザインを比較する
- 検証ツールを使って微調整していく
大まかにはこのような流れとなっています。この辺りを詳しく解説していきます。
1.デザインデータを写真（jpeg,png）に書き出す
デザインデータは基本的に、IllustratorかPhotoshopで支給されると思います。
Illustratorの場合は、アートボードを選択し、「ファイル」→「書き出し」→「スクリーン用に書き出し」をクリックします。
するとこのような画面になるので、幅をブラウザ幅と同じにして、画像形式（jpg,png）を選択して「アートボードを書き出し」します。
2.ブラウザと画像の幅を同じにする
次にブラウザ幅と、書き出した画像の幅が同じでなければ、同じにしていきます。
自分のブラウザ幅を見るにはChromeの検証ツールを使うと簡単にわかります。
Chromeの検証ツールを開いたまま、ブラウザ幅を大きくしたり小さくしたりすると、右上の方に「1440px×585px」のように横幅と高さが表示されます。
この場合だと、「1440px×585px」がブラウザ幅になるので、書き出した画像も横幅のみ1440pxにすればOKです！
ブラウザの横幅のpxと書き出した画像の横幅のpxが一致していればOK！
3.Chrome拡張機能「PerfectPixel」をインストール
PerfectPixel by WellDoneCode (pixel perfect)
上記のURLからChromeの拡張機能をインストールしてください！
インストールが完了すると、メニューバーにピンク色のアイコンが表示されると思うので、それがインストールした「PerfectPixel」になります。
アイコンをクリックすると、右の方に画面が表示され、ここで書き出した写真と、作ったページを擦り合わせていきます！
4.PerfectPixelの使い方
アイコンをクリックすると、このような画面が右端に表示されると思うので、画面をクリックして、先ほど書き出した画像をアップロードしてください！
アップすると、作ったページの上に見本の画像が重なる状態になるので、左端のアイコンや要素をまずは合わせます。
” class=”speech-icon-image”>うわー！全然見本と同じじゃない。。。
左のロゴを見本とぴったり合わせると、作ったページと見本のどこがズレているかが明らかになります。
左隅のロゴがぴったりとあったら、鍵マークをクリックして、写真をロックします。
ロックしないと、スクロールした時にズレたり、透明度が変化するのでロックするようにしましょう！
5.Chromeの検証ツールを使って微調整していく
作ったページと見本がズレていることが分かったら、Chromeの検証ツールを使って微調整をしていきます！
↓Chromeの検証ツールの使い方を初めに勉強するようにしましょう！↓
Chromeの検証ツールを使って、ズレている要素を選択します。
CSSをテストで色々試してみて、見本と近くなるように微調整していきます。
この場合だと、font-sizeを調整したらピッタリと合いました！
ズレている要素を選択→CSSを微調整
これを繰り返していくと、見本のデザインとほぼ同じにページを作ることが可能です！
ピクセルパーフェクト まとめ
いかがでしたでしょうか！！
コーディングしたページを納品する前には、必ずこの方法でデザインとページの大きなズレがないかしっかりと確認し、納品するようにしましょう！
このピクセルパーフェクトは模写コーディングの答え合わせにも使えるので、HTML,CSS学習者の皆さんも、より完成度の高いページを目指してコーディングしていきましょう！
最後までご覧頂きありがとうございました！
