WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >作業効率化

こんにちは！
今回は以前に書いた「未経験からコーダーとしてのスタートラインに立てるまで」で紹介した、「PerfectPixel」について紹介したいと思います！

以前にも書きましたが、私は職業訓練校でWEBデザインを学びました。
念願のWEBデザイナーデビューを果たしましたが、コーディングの仕事はコードを組むだけではなく、デザイナーさんが作り上げた”デザインカンプとの差”もチェックしなければならない事を知りました・・・

デザインとの差が無い状態で初めて”完成”となるんです。

そんな中知った「PerfectPixel」
この拡張機能、もっと早く知っておけば・・・
と思うほど便利です！
※Firefoxにもありました！→「Firefox版」

自主練する時に様々な方法で寸法を測りますが、この機能を使えば実務さながらの練習にもなりますし、スキルアップにも繋がると思います！

PerfectPixelとは

現場でコーディングをする時、デザインと照らし合わせて余白や幅、画像の位置が合っているかを見比べます。

コーディングの仕事はただコードを組むだけでなく、デザインとの差異がないかもチェックしないと最終的な納品物がデザインとかけ離れたものになってしまいます！

そのチェック作業が結構楽しかったりします。
（文字サイズは様々な要因が関わってくるので難しいですが）

そんな時に活躍するのがこのPerfectPixelです！
とってもカンタンに1つの画面上で見比べる事ができちゃいます！

使ってみよう

※あらかじめfull-page-screen-captureやPhotoshop等でデザインカンプの画像データを用意しておく必要があります！

1、ダウンロード

※今回はGoogle Chromeのブラウザで行っていきますよ～
まずは「PerfectPixel」をダウンロードしましょう！

2、イメージの選択

画面右上にピンクの四角いアイコンが表示されます。
クリックすると、
「最初のレイヤーを追加してください！」
と表示されるので、クリックして画像を選択します。

そうすると、うっすら比べたいイメージが表示されます！

これでデザインとの差異が一目瞭然で分かります。

3、基本操作

アイコンの説明

①目のマークで画像の表示/非表示を決めます
②鍵のマークで画像を固定します（固定しないと、スクロール時に画像が薄くなったり濃くなったりします）
③画像の表示を薄く/濃くできます

大体使用するのはこの3つです！

④、⑤は画像の位置を調整・拡大できますが、あまり調整しすぎると照らし合わせの意味が無くなってしまいますので・・・

操作
1、①をクリック（色が青色になります）して画像を表示
2、横幅や位置に差異がなければそのまま②をクリックしてズレない様に固定
3、スクロールしてデザインとのズレをチェック！

これでデザインとの差異チェックが完了です！

画像の濃度は③で変更できるので、好みの薄さにすると見やすいですよ。

コーディング練習にはかなり役立ちますので、ぜひ使ってみて下さい！