X・ココナラ画像のきれいな書き出し方｜アップした画像が荒れる…原因は「大きく書き出しすぎ」

Xのヘッダー画像とココナラのサムネイルを作成。

ところが、公開してみると画像がザラザラに荒れてしまい、なんだか汚い😢・・・。

きれいにデザインできたはずなのに・・・

こんな経験はありませんか？

原因は、「高解像度のほうがきれいなはず！」と思って、

2倍・3倍のサイズで書き出していたことでした💦

なぜ大きく書き出すと荒れるのか

Xやココナラにアップした画像には、自動でJPEG圧縮(ファイルを軽くする処理)がかかります。さらに、推奨サイズより大きい画像には「縮小」の処理も加わります。この「縮小＋圧縮」の二段階の処理で、文字のフチがにじんでしまいます。

印刷物では「大きいほど高画質」が正解ですが、

SNSやプラットフォームにアップする画像では逆になります。

解決法は「推奨サイズぴったりの等倍PNG」

Xのヘッダー:1500×500px

Xのプロフィール画像:400×400px

ココナラのサービス画像:1220×1240px

Figmaの場合は、フレーム(デザインの土台)を上記のサイズで作り、

等倍(1x)のPNGで書き出すだけです。

これだけで、同じデザインが見違えるほどくっきりします💡✨

あわせて効く、圧縮に強いデザインのコツ

・メインの文字は大きく・太くして、背景との明暗差(コントラスト)をしっかりつける

・縮小表示で読めなくなる小さい文字や、細かい要素は減らす

・グラデーションを使う場合は、明るい端を避けて濃いめの色の範囲にまとめる(文字が背景に溶けるのを防げます)

「アップしたら画像が荒れてしまった！」とお困りの方の

参考になれば嬉しいです😊✨

---

💻ホームページ制作(お気軽にご相談ください)

そよかぜの図案室では、Studioを使ったホームページ制作を承っています。

Figmaでのデザインから実装まで一貫して対応しますので、

「デザインにこだわったホームページを作りたい」という方は、

お気軽にご相談ください。

👩‍💻プロフィール:　https://coconala.com/users/4486068