もっと詳しく

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

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

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

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

PerfectPixel

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

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

簡単な使い方

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

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

等倍

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

レイヤーに追加して確認

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

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

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

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

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

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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！

求人応募してみる！