ピクセルパーフェクトの為の欠かせないツール：Polypane
この記事では、ピクセルパーフェクトのコーディングを行う際に役に立つPolypaneというアプリ（ツール）を紹介したいと思います。
従来の方法（PerfectPixel、Zeplin）
これまでデザインカンプを忠実にコーディングする際、Chromeの拡張機能であるPerfectPixelやZeplinのPop Out機能を使用してきましたが、幾つか使いづらさを感じていました。
PerfectPixel
- ブラウザの横幅のビューサイズを手動で設定する必要がある。
- ブラウザのビューサイズのズームレベルを変更した場合、PerfectPixelのレイヤーのズームレベルも手動で変更する必要がある。
Zeplin
- Pop Outをブラウザ上に重ねる為に、ドラッグする必要がある。
- Pop Outがブラウザウィンドウの下に隠れてしまう事があり、再度前面に表示させる必要がある。
どちらも操作面で満足できるものではありませんでした。
上記の問題点を解決してくれたのが、Polypaneです。
Polypaneを知るきっかけ
Polypaneを知ったのは、2020年の1月でした。
Sara Soueidanが推薦していました。
話はそれますが、Saraは、HTML/CSS/SVG/アクセシビリティなどに関する非常に有用な記事をブログにまとめてくれているのでとても参考になります。
その後、Chris Heilmannや、Eric Meyerも強く推奨しており、使ってみることにしました。
Polypaneとは？
Polypaneは、オランダ出身のKilian Valkhofが開発したアローンブラウザになります。特徴は、ChromeやSafariなどの一般ユーザー向けのブラウザではなくデベロッパーに特化したブラウザであるという点です。
幾つかの機能を挙げてみましょう。
- MULTIPLE PANES
- SYNCED INTERACTION
- DEVTOOLS EXTENSIONS
- EMULATION
- SCREENSHOTS
- DEBUG TOOLS
- WEB VITALS
- MEDIA FEATURES
- SOCIAL MEDIA PREVIEWS AND META INFORMATION
- OUTLINE PANEL
- ACCESSIBILITY
いずれもコーディングのスピードや品質を向上させる機能たちです。
全ての機能を知るには、Documentationをみてください。
そして、今回の記事のメインとして挙げているのが、次のセクションでお話しする、Refernce image機能になります。
PolypaneのReference Image機能
Chromeの拡張機能であるPerfectPixelやZeplinのPop Out機能と同じ目的を持ったものを、Polypaneでは、Reference imageという名前のDevtoolとして存在しています。
公式サイトの動画を見て頂ければ、どのような機能かわかると思います。
上記の動画では操作していませんでしたが、ペインのズームレベルを変更した場合、リファレンスイメージのズームレベルも自動で変更してくれるので本当に助かります。
Polypaneは有料ではありますが、このReference image機能を使うだけでも、サブスクリプション契約する価値は十分にあると思います。
最後に
Polypaneには、2週間のフリートライアルがあるので、是非一度触ってみてください。
そして、Polypaneの創始者であり、開発者でもあり、デザイナーでもあり、サポートチームでもあるKilianに深く感謝いたします。
Discussion