画像の縦横比を決めてから作るようにしたら、作り直しが減った

• 作ってから切り抜くと、主題が切れる
• 使う場所の比率を先に調べて、その比率で作る
• 1枚を複数の比率で使うなら、余白を持たせて作る

生成した画像をアイキャッチに使ったら、上下が切れて主題が欠けていた。比率を先に決めるようにしてから、作り直しが大きく減った。

切れる仕組み

表示する枠と画像の比率が違うと、どこかが切り落とされる。

• 枠より横長の画像 — 左右が切れる
• 枠より縦長の画像 — 上下が切れる
• 切れる位置は、既定では中央が残る

3つ目が問題だった。主題が中央に無いと、主題のほうが切り落とされる。

使う場所の比率を調べる

先に、どこで使うかと、その比率を確認するようにした。

• 記事一覧のカード — 16:9
• 記事内のアイキャッチ — 同じく16:9
• SNSに貼られたとき — おおむね1.91:1

3つ目を見落としていた。カード用の比率で作ると、SNSでは上下が少し切れる。両方で使うなら、重なる範囲に主題を収める必要がある。

調べ方

開発者ツールで、画像が入る枠の幅と高さを見れば分かる。推測せず測るほうが速い。

作るときの比率を合わせる

生成の指定で比率を選べる場合は、使う比率に合わせている。

• 16:9で使うなら、16:9で生成する
• 選べない場合は、正方形で作って自分で切る
• 切る位置を自分で決めれば、主題が残る

2つ目は手間だが確実だった。自動で中央を切られるより、自分で位置を決めるほうがよい。

余白を持たせて作る

複数の比率で使う画像は、周囲に余白を作っておく。

• 主題を中央寄りに置く
• 上下左右に、切れてもよい領域を残す
• 文字を入れるなら、中央の安全な範囲に収める

3つ目が重要だ。端に置いた文字は、どの比率でも最初に切れる。

切る位置を自分で決める

自動で中央が残る挙動は、指定で変えられる場合がある。

• 画像の「注目点」を設定できる仕組みがある
• 設定すると、その点を中心に切られる
• 主題が上寄りの画像では、これで救える

ただし設定の手間が毎回かかる。そもそも主題を中央に置いて作るほうが早いという結論になった。作る段階で「中央に主題、周囲は背景」と決めておけば、どの比率で切られても成立する。

文字を入れる場合の目安

文字は、画像の中央60%の範囲に収めている。この範囲なら、16:9でも1.91:1でも正方形でも切れない。端に置いた文字は、必ずどこかの比率で消える。

縦向きの画像

記事中に入れる画像は、横長が基本だと考えていたが、例外がある。

• スマホの画面を見せる場合 — 縦長のほうが自然
• 手順を並べる場合 — 縦に積むと読みやすい
• 人物や建物 — 縦のほうが収まる

1つ目は実際によく使う。横長の枠に縦長の画面を入れると、左右が無駄になる。

自動で作る場合は比率を固定する

仕組みで画像を作る場合、比率を間違えると全部作り直しになる。

• 使う枠の比率を先に確定させる
• その比率ちょうどで作る。切り抜きが起きない
• 比率を変えるときは、版数を上げて作り直す

2つ目を守ると、切り抜きの心配が無くなる。枠と同じ比率なら、何も切れない。

作り直しが減った実感

比率を先に決めるようにしてから、1枚あたりの手数が変わった。

• 以前 — 作る、切る、切れ方を見る、位置を変えて切り直す
• いまは — 比率を指定して作る、そのまま使う
• 切り直しの往復が消えた

地味だが、毎回2〜3往復していたものが無くなる。作る前の数分の確認が、作った後の十数分を節約する。先に測るという一手間が、結局いちばん安い。

確認の仕方

公開前に、実際の表示で確認している。

• 記事一覧で、カードとして見る
• 記事ページで、本文中の表示を見る
• SNSの表示を確かめる仕組みで、切れ方を見る

3つ目は貼る前に確認できる。貼ってから切れていると気づいても、直すのが面倒になる。

まとめ

• 枠と画像の比率が違うと、どこかが切り落とされる
• 既定では中央が残る。主題が端にあると消える
• 使う場所の比率を測ってから作る
• 複数の比率で使うなら、周囲に切れてよい余白を残す
• 仕組みで作るなら、枠とちょうど同じ比率にする