WEBサイトへ画像を設置したはいいものの、画像がぼやけて見える…。そんな時に原因となっているのは、ほとんどの場合が画像サイズに端数が出ていることだと思います。(たまに端数がないのに特定の画面サイズで若干ぼやけることもありますが…)
▼端数が出ている(144.5)
この状態で画像を設置すると、画像がぼやけてしまいます。
…はい。これは割とすぐに辿り着く情報なので、それは知ってるよ!な方が多いと思います。
そうではなくて、しっかり整数でエクスポートしているのに端数が出るんですよね?
安心してください。それは要素自体がピクセルグリッドにスナップできていないことが原因です。
Figma導入の際にピクセルにスナップする設定にしている方が多いと思いますが、たまーにスナップされていないコンテンツが見受けられます。
この場合エクスポートの設定時には整数になっていても、書き出されたファイルが端数になってしまいます。
一度最大までオブジェクトを拡大し、ピクセルグリッドに沿って配置されているか確認してみましょう。
▼拡大すると見えるグリッド(ガイドグリッドではありません)
当ゆけブログでは、バナーデザインやデザイン講座、その他の相談を随時受け付けています!お気軽にご相談ください!