SNSに貼ったとき、画像が切れる問題を直した

• SNSの表示比率は、記事一覧と違う
• 両方で切れない範囲に、主題を収める
• 貼る前に確認する手段がある

記事をSNSに貼ったら、画像の文字が切れていた。一覧では問題なかったので気づいていなかった。

比率が違う

調べると、表示される比率が違っていた。

• 記事一覧のカード — 16:9
• SNSの大きい表示 — おおむね1.91:1
• SNSの小さい表示 — 正方形に近い場合もある

3つ目が最も厳しい。正方形で切られると、左右が大きく失われる。

安全な範囲

どの比率でも残る範囲を計算した。

• 画像の中央、おおむね60%の範囲
• ここに主題と文字を収める
• 外側は、切れてよい背景にする

2つ目を守れば、どの比率でも内容が伝わる。

作る側の対応

仕組みで作っているので、設計を変えた。

• 文字は中央寄りに置く
• 図版は右寄りだが、端まで寄せない
• 重要でない装飾を、外周に置く

3つ目が考え方だ。切れてよいものを、切れる場所に置く。

設定の確認

画像の指定も確認した。

• SNS向けの画像指定が出ているか
• 大きさの指定が合っているか
• 表示の種類が、大きい形になっているか

3つ目の指定が無いと、小さい正方形で表示されることがある。

比率ごとの見え方を把握する

同じ画像が、場所によってどう切られるか整理した。

• 記事一覧 — 左右が少し切れる
• SNSの大きい表示 — 上下が切れる
• SNSの小さい表示 — 左右が大きく切れる

切られる方向が場所によって違うので、上下左右すべてに余裕が要る。どれか1つの比率に合わせると、別の場所で破綻する。中央に主題を置くという結論は、この整理から出てきた。設計の段階でこれを知っていれば、作り直しは起きなかった。

確認する手段

貼る前に確認できる仕組みがある。

• 各SNSが提供している、表示を確認する道具
• URLを入れると、どう見えるか分かる
• 修正した後、再取得させることもできる

3つ目が重要だ。一度取得された情報は、しばらく保持される。直しても反映されないことがある。

直した後に再取得させる

画像を差し替えたら、必ずやっている。

• 確認の道具で、再取得を指示する
• 新しい画像が表示されるか見る
• 反映に時間がかかる場合もある

これを知らず、直したのに古い画像が出続けると悩んだことがある。

文字を入れるかどうか

切れる問題を考えると、文字を入れない選択もある。

• SNSでは、画像の下にタイトルが表示される
• 画像にも文字があると、二重になる
• 画像は図版だけでも成立する

2つ目が実際の見え方だ。タイトルは別に表示されるので、画像に入れる必要は薄い。

表示されないとき

設定しても画像が出ない場合がある。原因は限られていた。

• 画像のURLが相対指定になっている。絶対指定が要る
• 画像の容量が大きすぎて、取得されない
• 取得した情報が保持されており、古いまま

1つ目で一度詰まった。サイト内では表示されるので、設定が正しいと思い込んでいた。外から取りに来る仕組みなので、どこから見ても同じURLである必要がある。確認の道具を使うと、何を取得できたかが表示されるので、原因の切り分けが速い。

説明文も確認する

画像だけでなく、一緒に表示される文章も見直した。

• タイトルが途中で切れていないか
• 説明文が、記事の内容と合っているか
• サイト名が正しく出ているか

2つ目が問題だった。設定していなかったため、本文の冒頭がそのまま出ており、意味の通らない途中で切れていた。画像は目に付くが、説明文は見落としやすい。要約を明示的に設定するようにしてから、貼ったときの見え方が整った。

一覧とSNSで分ける案

別々の画像を用意する方法も検討した。

• 比率ごとに、最適な画像を作る
• 管理する枚数が倍になる
• 手間に見合わないと判断した

3つ目の結論だ。1枚で両方に耐える設計にするほうが、運用が軽い。

まとめ

• SNSの表示比率は、記事一覧と違う
• 中央60%の範囲に、主題と文字を収める
• 切れてよい装飾を、外周に置く
• 貼る前に、表示を確認する道具で見る
• 画像を直したら、再取得を指示する