デザイン通りに見た目を再現できたかフローティングウィンドウで確認する

こんにちは、 Gaji-Labo 横田です。デザインと実装の差分をパッと可視化できるフローティングウィンドウ「Pennywise」を紹介します。

任意のWebサイトやメディアを開けるフローティングウィンドウ

Pennywise はフローティングウィンドウで任意のWebサイトやメディアを開けるアプリです。導入は簡単で、Mac の場合は Homebrew からインストールできます。

brew install --cask pennywise

もしくは GitHub からリポジトリを clone して以下コマンドで動きます。

yarn install
yarn start

Readme にショートカット色々や、気になるアプリ名の由来も紹介されています。

デザイン再現のデバッグに使える

フローティングウィンドウは様々な使いどころがあると思いますが、デザイン通りに見た目を再現できたかの基本的なコーディングデバッグに使えるのが便利です。

弊社ではデザイナーとエンジニアの技術や情報の共有会「テックシェア」を定期的に行っているのですが、デザイン通りに再現できているかどうやってデバッグしてる？という話題では、実際にデザインと実装を重ねて見るのがアナログな手法だけれども的確で分かりやすいと盛り上がりました。

実装したページを Pennywise で開いてフローティングさせておき、Figma や XD 等デザインデータの上に重ね合わせれば、デザイン通りに見た目が再現できたか、誰が見ても一目瞭然。

デザインと実装のズレをパッと可視化できることで、UIデザイナーのデザイン意図やエンジニアの実装都合など、双方の視点を改めてすり合わせし合い、協働するきっかけにもなりますね。