概要
Webサイトに画像を載せるとき、多くの場合はリサイズや圧縮が必要になります。
PNGをWebPに変換する。画像サイズを小さくする。縦横比を合わせる。ファイルサイズを軽くする。表示後に文字が潰れていないか確認する。
こうした作業は一つ一つは小さく見えますが、実際にやると意外と手間がかかります。
特に、記事アイキャッチやバナーのように決まった枠に入れる画像では、元画像をそのまま使えないことがあります。
縦横比が合わない。文字が小さすぎる。WebPにするとにじむ。スマホ表示で印象が変わる。
このような場合、あとからリサイズや圧縮で調整するより、最初からWebサイト用の画像として作った方が早いことがあります。
Webサイト素材は用途に合わせて作る
Webサイト用の画像は、きれいであればよいわけではありません。
どこに置くのか。どのサイズで表示されるのか。スマホではどう見えるのか。文字は読ませるのか。雰囲気だけ伝わればよいのか。
こうした条件によって、適した画像は変わります。
たとえば、表示枠が363 × 265pxの場合、2倍サイズの726 × 530px程度で画像を作り、サイト上では小さく表示した方がきれいに見えやすくなります。
生成AIを使う場合も同じです。単に「いい感じの画像」ではなく、どの表示場所で使う素材なのかを指定する必要があります。
アイキャッチ画像に細かい文字はいらない
記事のアイキャッチ画像は、本文を読ませる場所ではありません。
小さなカード画像やバナー画像に細かい説明文を入れても、実際の表示では読めないことが多いです。さらにWebP圧縮やCMS側の再圧縮が入ると、文字はより荒く見えます。
サイト名やサービス名のように認識してほしい文字は大きく置く。一方で、装飾としての紙面やカードには、TitleやArticle程度の抽象的な文字で十分な場合があります。
細かい本文風の文字を入れるより、画像全体として「記事」「Web」「知識」「運用」といった印象が伝わることの方が大切です。
サイズと形式まで指定する
生成AIを使うなら、雰囲気だけでなく出力条件まで指定した方が実務では扱いやすくなります。
- 用途：記事アイキャッチ
- 表示サイズ：363 × 265px
- 生成サイズ：726 × 530px
- 出力形式：WebP
- 文字：細かい説明文は入れない
- 色味：サイトの背景色に合わせる
- ファイルサイズ：できるだけ軽量
ここまで指定できれば、生成AIは最初からWebサイト向けの素材として画像を作れます。
逆に、こうした条件がないまま画像を作ると、あとからリサイズ、トリミング、圧縮、差し替えが発生します。
AI画像生成は一発で当てるものではない
AI画像生成で、最初から意図通りの画像が出るとは限りません。
色味が違う。文字が多すぎる。構図が細かすぎる。サイト全体のトーンに合っていない。
こうしたことは普通に起きます。
ただし、これはAI画像生成に限った話ではありません。デザイナーに依頼する場合でも、最初の依頼はどうしても抽象的になりがちです。
「いい感じで」「おしゃれに」「信頼感がある感じで」。このような依頼から始まり、初稿を見て修正していくことは珍しくありません。
AI画像生成も同じです。初稿を見て、違和感を言語化し、用途に合わせて修正していくものです。
AIだけで完結しにくい画像
もちろん、すべての画像制作がAIだけで完結するわけではありません。
ロゴ、ブランドビジュアル、広告のメインクリエイティブ、印刷物、細かなレイアウト調整が必要な図版などは、IllustratorやPhotoshopなどの制作ツールで作り込む必要があります。
また、AI画像生成は、基本的に完成画像を一枚で出力するものです。
IllustratorやPhotoshopのように、文字、背景、図形、アイコン、装飾をレイヤーごとに分けた編集データとして扱うことは得意ではありません。
あとから文字だけ動かしたい。背景だけ差し替えたい。アイコンだけ色を変えたい。こうした用途では、AI生成だけで完結させるのは難しくなります。
一方で、記事カード、アイキャッチ、SNS告知画像、簡易バナーのようなWeb掲載用の完成素材であれば、AI画像生成はかなり相性がよいです。
まとめ
今どきの画像生成は、きれいな画像を作るだけではありません。
Webサイトで使うなら、表示サイズ、縦横比、ファイル形式、ファイルサイズ、文字量、サイト全体の色味まで考える必要があります。
リサイズや圧縮は必要です。しかし、それだけでも意外と手間がかかります。
画像の縦横比が合っていない。文字が小さすぎる。表示サイズに対して情報量が多すぎる。サイト全体の色味から浮いている。
このような場合は、元画像を無理に調整するより、表示用途に合わせて画像を作った方が早いことがあります。
サイズ、形式、文字量、表示場所を指示できれば、生成AIだけでもWebサイト用の素材はかなり実務に耐えます。