デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA

デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS

[kvx]

うわーやだー。デザインツール上の間隔とかあてにならない。

[tmayuko312]

デザイナーですら等間隔で並べてなかったり誤字脱字色配置ミスに気付いてなかったりする所を報告&フォローするのが良いコーダー(と思う)。ピクセルパーフェクトより大変な時あるけど、ユーザーが使いやすければ良し。

[otchy210]

えええぇ、時代に逆行しとらん？Figma から吐いた css と実際に適用されてるスタイルの差分を出力してくれるようなツールがあったら良いと思う。コンポーネント単位で。

[sigwyg]

？？？「なるほど完璧な作戦っスね―――ッ 「デザインが完璧だ」という想定に目をつぶればよぉ～～～.」　デザイナ→コーダでなく、デザイナ←→コーダにするのが目的だろけど。

[mayumayu_nimolove]

1pxのズレも許さないクライアント対策のライブラリですか

[neet_modi_ki]

面白いけど、そもそもデザインカンプをピクセルパーフェクトに再現するのが正しいのか？っていうのはある気が…

[surume000]

考え方としては面白いと思う

[machida_fjord]

、

[i5s4y]

これでぴったり収まるようなデザインが来たことないな、、

[yasu-log]

デザインカンプとピクパ精度で揃えるかの議論はさておき、デザイナー視点では「ケアレスミスで、デザインがHTMLに反映されていない」と不満に思うことは多々あります。 コミュニケーション改善のためのツール。