ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【Chrome拡張機能】ピクセルパーフェクトをPerfectPixelを使ってする方法

ツール関連
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

Web制作でピクセルパーフェクトって聞くけどそもそも何?

ピクセルパーフェクトをする方法を具体的に教えて欲しい!

今回の記事では、Web制作のフロントサイドにおいて99点のページを制作するにはピクセルパーフェクトは必須のスキルです。

ピクセルパーフェクトとは簡単にいうと、デザインカンプ(完成見本)と100%同じ見た目を作ることを言います。

ピクセルパーフェクトを要求してくるクライアントはそれほど多くはいませんが、閲覧数の多いサイトをリニューアルする際などに必要になってきます。

  • ピクセルパーフェクトとはそもそも何なのか?
  • ピクセルパーフェクトが必要な時はいつ?
  • ピクセルパーフェクトをする方法

この辺りを現役エンジニアの僕が解説していきます!

Hiko
Hiko

HTML,CSSを学習中の方もピクセルパーフェクトをすることによって、非常に高いスキルが身につくのでぜひトライしてみましょう!

こんな方にオススメ
  • ピクセルパーフェクトをする必要があるがどうすればいいか分からない方
  • ピクセルパーフェクトを簡単にする方法を知りたい方
  • もうワンランク上のコーディング技術を習得したい方
スポンサーリンク

そもそもピクセルパーフェクトとは?

ピクセルパーフェクトとは、Web制作をする際に、デザインカンプをみながら見た目を作っていきますが、そのデザインと実際に作ったページが100%一致することを言います。

100%同じということは、、、

  • 余白の幅(margin,padding)
  • 画像の大きさ
  • 文字の間隔
  • 文字の大きさ

これらの要素が全てデザインと同じことを指します。

つまり、ピクセルパーフェクトを目指すには、高度なコーディング技術と、時間が必要になってきます!

ピクセルパーフェクトが必要な時はいつ?

Web制作をする際に、毎回毎回ピクセルパーフェクトを目指す必要はなく、クライアントに応じて対応する必要があります。

クライアント側が、デザインとほぼほぼ同じように作って欲しいと要望があった際には、

  • ピクセルパーフェクトなのか(100%同じ)
  • 多少はずれてもいいが、綺麗な見た目にして欲しい

このようにどう対応すればいいかヒアリングするようにしましょう!

そもそも、ピクセルパーフェクトを実現するには、高度な技術、コーディングする時間が必要になってくるので、ピクセルパーフェクトを要求された際には予算を追加で請求すると良いでしょう!

自ら進んでピクセルパーフェクトを目指す必要はありませんが、デザインカンプと誤差10px以内には収める意識でコーディングするようにしましょう!

Hiko
Hiko

ピクセルパーフェクトに近ければ近いほど、クライアントも喜んでくれますし、自分の実力も評価されることでしょう!

ピクセルパーフェクトをする方法

ピクセルパーフェクトをするには、Chromeの拡張機能を使うと簡単にすることができます。

(Chromeの拡張機能が自動的に調節してくれる訳ではありません。汗)

ピクセルパーフェクトをする手順としては、、、

  1. デザインデータを写真(jpeg,png)に書き出す
  2. ブラウザ幅と、書き出した写真を同じ幅にする
  3. Chromeの拡張機能「PerfectPixel」で実物とデザインを比較する
  4. 検証ツールを使って微調整していく

大まかにはこのような流れとなっています。この辺りを詳しく解説していきます。

スポンサーリンク

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の使い方

アイコンをクリックすると、このような画面が右端に表示されると思うので、画面をクリックして、先ほど書き出した画像をアップロードしてください!


アップすると、作ったページの上に見本の画像が重なる状態になるので、左端のアイコンや要素をまずは合わせます。

ネコ君<br>
ネコ君

うわー!全然見本と同じじゃない。。。

左のロゴを見本とぴったり合わせると、作ったページと見本のどこがズレているかが明らかになります。

左隅のロゴがぴったりとあったら、鍵マークをクリックして、写真をロックします。

ロックしないと、スクロールした時にズレたり、透明度が変化するのでロックするようにしましょう!

5.Chromeの検証ツールを使って微調整していく

作ったページと見本がズレていることが分かったら、Chromeの検証ツールを使って微調整をしていきます!

↓Chromeの検証ツールの使い方を初めに勉強するようにしましょう!↓

Chromeの検証ツールを使って、ズレている要素を選択します。

CSSをテストで色々試してみて、見本と近くなるように微調整していきます。

この場合だと、font-sizeを調整したらピッタリと合いました!

ズレている要素を選択→CSSを微調整

これを繰り返していくと、見本のデザインとほぼ同じにページを作ることが可能です!

ピクセルパーフェクト まとめ

ネコ君
ネコ君

時間がかかったけど、見本デザインとほぼ同じにページを作ることができたよ!

いかがでしたでしょうか!!

コーディングしたページを納品する前には、必ずこの方法でデザインとページの大きなズレがないかしっかりと確認し、納品するようにしましょう!

このピクセルパーフェクトは模写コーディングの答え合わせにも使えるので、HTML,CSS学習者の皆さんも、より完成度の高いページを目指してコーディングしていきましょう!

最後までご覧頂きありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
ツール関連
HikoPro Blog

コメント

タイトルとURLをコピーしました