TOPICS

2024.07.29

PerfectPixelの使い方:デザイン通りのコーディングを実現


記事の概要

今回は、デザイン通りにサイトを作成するために欠かせないツール「PerfectPixel」をご紹介します。
「PerfectPixel」は、作成したWEBページ上にデザインカンプを重ねて表示し、ピクセル単位でズレを確認できる便利なChrome拡張機能です。
本記事では、その使い方と効果的な活用法について詳しく解説します。

使い方

1.PerfectPixelのインストール

まず、Chromeウェブストア(https://chromewebstore.google.com/)からPerfectPixelをインストールします。

Chromeを開き、検索バーに「PerfectPixel」と入力します。拡張機能の一覧からPerfectPixelを選択し、「追加」ボタンをクリックします。
これで、Chromeの拡張機能にPerfectPixelが追加されます。

2.デザインカンプの書き出し

次に、WEBページと重ねるためのカンプを書き出します。
画像の書き出し方法は割愛しますが、画像の荒れを防ぐために2倍の解像度で書き出すことをおすすめします。

3.デザインカンプとの重ね合わせ

作成したページと書き出したデザインカンプを重ね合わせます。WEBページの上で右クリックし、PerfectPixelのアイコンをクリックして有効にします。
「最初のレイヤーを追加してください!」という文言と共に、カンプの画像をアップロードするエリアが表示されます。
カンプ画像はドラッグ&ドロップまたはコピー&ペーストで追加できます。

画像の追加に成功すると、WEBページにデザインカンプが重ねて表示されます。

4.幅の調整と微調整

最後に、デザインカンプとブラウザの幅を調整し、カンプとWEBページの両端が揃うようにします。
例えば、ブラウザの検証ツールで幅を1280pxに設定し、画像も1280pxで書き出した場合、サイズの倍率を1.0に変更すると、ブラウザの幅と画像の幅を揃えられます。
(微調整が必要な場合があります)

※微調整が必要であれば「レイヤーの配置」セクションにある矢印ボタンで画像の位置を調整できます。

これで、必要な操作は完了です。目視でカンプとサイトを見比べるよりも正確かつ効率的ですね!
「PerfectPixel」は無料でインストールできるので、ぜひ一度使ってみてください。

まとめ

今回は制作に役立つ拡張機能の使い方について、説明しました。

Google Chromeにはまだまだ便利な拡張機能がたくさんあります。
気になる方は、こちらの記事(https://star-kid.jp/topics/note/website/chrome-extention1/)で紹介しているので、ぜひ読んでみて下さい。


いいねありがとうございます!

この記事を書いた人

小林 真莉菜

アシスタントコーダー / アシスタントディレクター

《 仕事で大切にしていること 》
ディレクター兼コーダーとして、クリエイター側が理解しやすい指示出しができるように心がけています。
元システムエンジニアなので、その経験も生かして仕事ができればと思います。

CONTACT

お客様のお悩みを聞かせてください。お気軽にご連絡ください。

PAGE TOP