今回は、デザインカンプを完全に再現するためのツールであるPerfectPixelのダウンロード方法と使い方をご紹介したいと思います。
なお、今回は、Google Chromeでの使い方をご紹介します。
目次
PerfectPixelのダウンロード方法
1.公式ページからchrome web storeをクリック
まずは、以下のリンクから公式のページに飛んでください。
https://www.welldonecode.com/perfectpixel/
その後、以下の画像の赤い矢印で指しているところをクリックしてください。
2.Chromeの拡張機能に追加
以下の画像の『Chromeに追加』をクリックしてください。
その後、 『拡張機能を追加』をクリック してください。
3.アイコンの確認！
アイコンを確認してダウンロードが出来たか確認しましょう！
赤い丸で囲んだアイコン があれば、ダウンロード完了です！
Google ChromeでのPerfectPixelの使い方
今回は、 Google ChromeでのPerfectPixelの使い方 を解説していきます！
なお今回使用するサイトは、私が受講しておりました『デイトラ』さんの2ndの最終課題を使わせていただきます。
1.デザインカンプをダウンロードする。
まずは、デザインカンプを取得しましょう！
デザインカンプは、PhotoshopやAdobeXDなどから取得しましょう。
Photoshopからの書き出しに関しては、『はにわまん』さんの以下の記事がわかりやすいので、ぜひ参考にしてください！
また、FirefoxでのPerfectPixelのやり方も説明されてますので、FirefoxでPerfectPixelをやりたい方もぜひ参考にされてください。
2.コーディングしたサイトで、PerfectPixelのアイコンをクリック
コーディングしたサイトで、PerfectPixelのアイコンをクリックしてください。
以下の画像で矢印を指しているアイコンです。
すると以下の項目が出るので、矢印で指している『PerfectPixel by WellDoneCod…』をクリックしてください。
3.デザインカンプの画像をPerfectPixelにダウンロードする。
以下の画像の矢印で指しているところをクリックしてください。
Finderが出てくると思うので、デザインカンプの画像を選択して『開く』をクリックしてください。
すると、以下の画像のように、デザインカンプの画像がサイトに反映されます！
また、赤で囲んだところが、画像の位置やサイズを調整する場所になります。
4.デザインカンプのサイズを、コーディングしたサイトのサイズに合わせる
まずは、デザインカンプの端とコーディングしたサイトの端を合わせましょう。
以下の画像の赤線に合わせる。（手動でスライドさせながら）
次に、サイズを合わせます。
サイズの変更は、以下の画像の赤い矢印が指しているところで行います。
まずは、1.1で設定しましたが、青の矢印ぶんはみ出しているので、微調整していきます。
その方法は、以下の画像のように、小数をどんどん追加していくだけです！
まずは、1.06で設定しましたが、狭くなりすぎたので、小数を足していきます。
微調整を重ねて、最終的には、1.0679で合いました！
このように、画像のサイズは、小数を重ねることで合わせるようにしましょう。
また、矢印で指した項目の1つ上の『Y』は、0にしてください！
5.ズレを確認しましょう！
これで、デザインカンプの画像とコーディングしたサイトを照らし合わせることが出来たと思います！
私もコーディングしたサイトを確認すると、、、
めちゃくちゃズレてました、、、笑
これからの課題ですね！
ということで、今回は、PerfectPixelのダウンロード方法とGoogle Chromeでの使い方を解説させていただきました。
また独学でHTML&CSSを学んでいる方に向けて、以下の記事はすごく参考になります！
つまずかずにスムーズに学習したい人は、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
