どうも、7noteです。今回は必ずいれてほしいgoogleの拡張機能を紹介

デザイナーからデザインが上がってきた時、1pxのズレもなくコーディングするのがコーダーやフロントエンジニアの仕事です。ですがコーディングしているうちに、、、

「あれ、なんかデザインと違う」
「ここってこんなんだっけ」
「測ったのになんかが違う」

わかります！！！

ちゃんと測ってやってるのになんかずれるんですよね。まだデザインからのコーディングを経験していない人もこの記事を読んでいると思いますが、初めて模写コーディングをしたら、、、、わかるようになります。

1pxのズレなくチェックできるgoogle拡張機能「perfect pixel」

こちらからダウンロードできます

何ができるの？

1. ブラウザ上に画像（デザインデータ）を重ねられる

2. 画像データの透明度や表示位置を自由に変えられる。

3. 2の設定をロックできるので、ページスクロールしながら上から下まで全部チェックできる。

4. 開発者ツールで微調整しながらズレを直すことができる。（重要！！！）

開発者ツールで直しながら1pxずつ調整ができるので、本当に便利！

ざっくり作るだけならいらない拡張機能ですが、一般の人が見るホームページなどを作成する場合はデザイナーは完璧なデザインを作成します。1px1pxこだわって作っています。
それに答えられず適当にそれっぽいコーディングをするだけなら素人でもできますが、プロとしていかに完璧なコーディングができるかはとても重要なことです。

使ってみた感想

正直に述べるとこんなの欲しかった！というツールです。
もしまだインストールしてないなら絶対に使って欲しい。

ただ導入しはじめはなれなくて、普段よりも1.5倍くらい時間がかかるかもしれません。
しかし使わずにコーディングして、後からやり直しなどになる可能性や時間を考えると、絶対に導入した方がいいですし、
コーディングの完成品を納品する時にもキッチリやってくれるなと評価や信頼を得ることができます！

無料のツールで評価や信頼、技術が上がるのなら絶対にいれたいツールです!

おそまつ！