Adobe Illustratorで作られたデザインデータからコーディングする場合に、よくある困りごとといえば

書き出した画像の端に謎の1pxの余白ができてしまう
（画像のサイズが奇数になってしまう）

ことだと思います。

座標も幅も高さも値を整えたのになぜか生まれる1pxを消すために、Photoshopを開いてひとつずつ修正した経験のあるコーダーさんも少なくないようです。
私もその中の1人でしたが、ついにその謎を解明してしまいました……！

解決法

各所の値を調整する前に、プロパティウィンドウの「変形」の「基準点」を「左上」にする

たったワンクリックであの苦難から解放されると思うとすぐにでも試したくなりますよね。
この先は読まなくても大丈夫な解説や独り言になるので、是非今すぐこのnoteを閉じて試してみてください。

感動の瞬間がすぐそこに待っています！

解説

さて、このワンクリックでなぜ1pxから解放されるのか、個人的な見解ですが解説します。

そもそも1pxが現れる時と現れない時は何が違うのか。

それは単に書き出したい画像の幅や高さが奇数であるか偶数であるか、それだけの違いなんです。

というのも、通常、この変形の基準点はデフォルトでは「中央」になっています。
この状態で座標を整えてしまうと、奇数の画像の端が配置されている座標は1pxの真ん中、つまり「.5」の座標ということになります。

コーダーが嫌う小数点をなくしたつもりが、実は残ったままになっていたんですね。

なので基準点を先に左上にすることで、本当の意味で小数点を抹消でき、さらにこの基準点は、最初に設定するとずっとそのままなので、まさにたったワンクリックで済んでしまうのです。

これでもうあのプチストレスからは解放されました！おめでとうございます！

ちなみに私はAdobe Illustratorの操作に詳しいわけではないので、もしかしたらもっと簡単で効率的な方法があるかもしれませんが、悪しからず。

あとがき

ところで、もしあなたが小数点に溢れたデザインデータを受け取ったら(Adobe Illustratorに限らず)、納期に余裕がある場合は迷わずデザイナーさんに返して修正してもらってください。

納期に余裕がない場合は

小数点はこちらでよしなにしておくので、多少のズレは寛容にお願いします！(次はないと思ってください)(ニコッ)

と一言付け加えましょう。

デザイナーの意識を変えるのは、コーダーなのかもしれません。