デザイン再現の精度をあげるのに便利なツール – PerfectPixel

こんにちは、 Gaji-Labo フロントエンドエンジニアの鈴木です。

フロントエンドのお仕事をしていると頻繁に「デザイン再現できているか」の確認をすると思います。みなさんはどのように確認していますか？

デザインの再現が全てではありませんが（UI として機能する、仕様を満たしている、パフォーマンス面などなど）、大切にしたいことの一つです。少なくとも弊社ではそこを担保したいと思いますし、レビューの中でも頻繁に話題にあがります。

以前、社内向けに私が使っているツールと使い方を共有したことがあったので、今回はそれをブログにもまとめておこうと思います。

PerfectPixel

すでにブログタイトルに入っていますが、私はこちらを使用しています。

Chrome 拡張機能の一つです。詳細は以下のリンクから ⚙️ https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja

簡単な使い方

より丁寧な解説記事などあるかと思いますが、新メンバーに共有したりする時に使いたいので簡単に書いておきます。

1. 確認したいデザインのスクリーンショットを等倍で撮る
2. レイヤーに追加し、確認したいページで重ねて表示確認

等倍

表示が100%になっていれば大丈夫です。例えばFigma だとこの状態になっていれば OK です。

レイヤーに追加して確認

確認する時の動きをキャプチャにしてみました。透明度の調整も可能です。目のアイコンで表示/非表示の切り替えができます。

以下のような場面で使う事が多いです。

• Storybook などコンポーネント単位での確認
• ページへのコンポーネント組み込みで全体の確認

基本となる品質があったうえでの提供価値

プロジェクトの性質や状況に合わせながら、なにが重要かを見極めつつ、基本となる品質はしっかり押さえたいと思っています。その上でより良くできることや課題に注力できるよう、質とスピードの両方を高めていきたいです。

こんなやり方もあるよ、これが便利だよ、などがありましたらぜひお教えください。（ついつい使い慣れたものを使ってしまう）