Web制作のピクセルパーフェクトに関して

どうも、くまだ です。

Web制作をする上でピクセルパーフェクトを前提に制作する人(やって当たり前)、 ピクセルパーフェクトは必須ではない人、ピクセルパーフェクトは制作側の自己満でしょっていう人、

様々な意見があると思います。

ピクセルパーフェクトに関して、超個人的な意見を書きます。

ピクセルパーフェクトとは

そもそもピクセルパーフェクトは何かというと、ざっくりいうと自分が制作したデザインカンプなりデザイナーさんが制作したデザインカンプなりどちらでも良いのですが、そのデザインカンプ通りに、1pxの狂いもなく全く一緒のとおりつくることです。

ちなみにですが、デザインカンプを見ながら数字も全くいっしょに作ったとしても、おそらくピクセルパーフェクトにはならないです。(多少ずれる)

ずれたかどうかの確認ですが、PerfextPixel(パーフェクトピクセル)という拡張機能を使えばわかります。

AdobeXdなりFigmaなりからデザインカンプを画像として書き出しして、Chromeの拡張機能にあるPerfectPixelを使用してコーディングすれば、ピクセルパーフェクトにはなります。(難しいけど)

これのやり方は、検索すればやり方はいくらでも載っているので、あらためてここでは説明しません。

拡張機能PerfectPixelの代替方法

参考までに拡張機能を使わずにやる場合だと以下のようなスタイルでも同じような感じでできます。

// css
.mock {
    /* モック画像 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 375px; //カンプ幅と同じ数字にする
    opacity: 0.3;

    /* 反転 */
    filter: hue-rotate(180deg);
    pointer-events: none;

    z-index: 999;

}

<img src="" class="mock" />

透かしたい画像(例:XdやFigmaからデザインカンプ書き出し)にクラス名をつけます。

上記だと、.mockというクラス名をimgタグにつけています。

これをやると、画像を透かしてみることができるので、それを検証ツール上でデザインカンプの幅にぴったりあわせて、背景の画像とぴったり重ねるようにコーディングします。

上だとモバイル用(widthが375px)になっているので、それをPC用の画像でやりたい場合はPCのデザインカンプが1440pxであれば、.mockのwidthを1440pxにすればだいじょうぶです。

これを上から下までできれば、ピクセルパーフェクトになります。ね、簡単でしょ?(にっこり)

Web制作の品質に関わる

ピクセルパーフェクトができていない私が偉そうにはまったく言えないんですけど、やったほうがいいかそうでないか、でいえばやったほうがいいです。というのも、

デザイナーさんがあれこれ考えて調整したデザインであり、それとクライアント様と打ち合わせしてそのデザイナーさんがあれこれ悩んでつくったデザインで合意したのであれば、コーディング側で勝手にデザインを変更することはよろしくない話です。

コーダー側としては、デザイナーさんがあれこれ考えて調整して作ったものとクライアント様と打ち合わせして合意したものを、その通りに再現することが前提となるでしょう。

もちろんピクセルパーフェクト自体が、例えばサービスの売り上げに繋がるかというとまたそれは別の話ですが。

ピクセルパーフェクトにしたぶん余計に費用がかかるだとか、工数がかかるだとか、クライアント側は早くサービスを提供したい、早くWebサイトを公開したいというのであればそこまで求める必要はないのかなとも思ったり。

でも、そもそもピクセルパーフェクトを当然のようにやりつつ早く実装している人もいるでしょうし、(オマケにIE対応込み、みたいな)なかなか難しいところです。品質に関わる問題なので 制作側はきっちり出来る限りやるべきだとは思います。

せっかくデザイナーさんが高品質なものを作ってくれたのにコーディング側がデザインカンプ通り再現しないで品質を落とすのは間違っていると思います。

これが仮に自分が同じ立場だったらどうかなと思ってしまいます。自分が書いたコーディングファイルを、別な人に任せたときにその人がぐちゃぐちゃのコーディングで自分のところに戻ってきたら、、、と考えるとどう思うだろうか。

というわけで、ピクセルパーフェクトでコーディングすることをおすすめします。

ここまで読んでくださりありがとうございました。

この記事を書いた人