

「よし、出来た!」と思って投稿したら、端の文字が欠けてる。ロゴが半分見えてない。大事な数字だけ切れてる。
これ、作った人が悪いというより、SNSや媒体側が勝手にトリミング(切り取り)する仕様が原因のことが多いです。
このページでは、同じ失敗を繰り返さないために、安全エリア(置いちゃダメな端)の考え方と、直し方の手順をまとめます。
目次
原因はだいたい、この3つです。どれが当てはまるか分かると、直し方が一発で決まります。
| 原因 | 起きること | 先にやる対策 |
|---|---|---|
| ①表示場所でトリミングが変わる | 投稿は見えるのに、一覧・プロフィール・おすすめ枠で欠ける | 重要情報を中央に寄せる |
| ②端に寄せすぎている | 1〜2文字だけ欠ける、ロゴの端が切れる | 安全エリア(余白)を先に確保 |
| ③文字が大きすぎる/行数が多い | 縮小や自動調整で文字が端へ押し出される | 見出しを短く、補足は1行まで |
結論:「端に置かない」「中央に寄せる」「文字を減らす」。この3つで、欠ける事故はかなり減ります。
媒体ごとに細かい仕様は違うけど、まずは“共通で効くルール”があります。数字で決めちゃう方が迷いません。
安全エリアの目安(まずこれ)
「え、そんなに空けるの?」って思うかもだけど、一覧やおすすめ枠は想像より大胆に切り取られます。最初から余白を取っておく方が、結果的に整って見えます。
安全エリアを作る考え方
画面を「中央の安全ゾーン」と「端の危険ゾーン」に分けるイメージです。読ませたい文字・数字・ロゴは、全部安全ゾーンに集めます。端は飾りにしてOKです。
ここからは、現場でよく見る「やりがち」を、そのまま直し方に変換します。
| 失敗パターン | 起きること | 直し方 |
|---|---|---|
| 端ギリギリに見出し | 最後の1文字だけ欠ける | 左右に余白(10%)を確保して中央寄せ |
| ロゴを角に置く | プロフィールや一覧で切れる | ロゴを内側へ。角は飾り用にする |
| 文字量が多い | 自動縮小で読みにくい+端へ押し出される | 見出しを短く、補足は1行まで |
| 背景に文字を散らす | 欠けるだけでなく、読める場所がなくなる | 文字は“まとまり”で中央に集める |
覚え方:端は「飾り」。読ませたい情報は「中央の塊」。これだけで欠け事故が減ります。
いまある画像を「一番少ない手戻り」で直すなら、この順番が早いです。やることはシンプルです。
Step1:重要情報を3つに絞る(それ以上は置かない)
欠ける画像って、だいたい情報が多いです。まず「本当に必要な要素」を3つまでにします。
ここで減らせると、余白が生まれて、欠けにくくなります。
Step2:中央に“安全ゾーンの塊”を作る
左右10%・上下12%を危険ゾーンとして、重要情報は内側へ移動します。見出しと補足は、バラバラに置かず、近くにまとめて塊にします。
見た目が整う理由:塊があると読み順が自然に決まるので、欠けにくいだけじゃなく、読まれやすくもなります。
Step3:縮小チェック+切り取り想定チェック
最後に、画像を小さくして(横200〜250pxくらい)見ます。さらに“左右が少し切られた想定”で、重要情報が残るかを確認します。
ここでOKなら、本番でもかなり安全です。
毎回悩まないように、配置の型を置いておきます。どれも「重要情報を中央へ集める」だけです。
テンプレA:中央寄せ(最強に安定)
見出し+補足を中央にまとめる。ロゴは入れるなら下の中央寄り。
テンプレB:右寄せ(左側UI対策に強い)
左側にUIが被りやすい媒体で安定。重要情報は右側の安全ゾーンへ。
テンプレC:上に見出し、下に補足(読み順が自然)
縦長画像で強い。上で結論、下で条件。端は空ける。
| 要素 | おすすめの置き方 | 避けたい置き方 |
|---|---|---|
| 見出し | 中央の安全ゾーン内(1〜2行) | 端ギリギリ/長文3行以上 |
| 補足 | 見出しの近くに小さく1行 | 離れた場所に散らす |
| ロゴ | 内側へ寄せる(角は避ける) | 四隅に置く |
地味だけど効く:見出しと補足を近くに置くと、文字全体が内側に収まりやすくなります。散らすほど、端へ追いやられやすいです。
公開前にこれだけ見ればOK、のチェックです。欠ける事故は、ここでほぼ拾えます。
| チェック | やり方 | ダメなら |
|---|---|---|
| 端から左右10%・上下12%に重要情報がない | ガイド(目印)を想像して目で確認 | 全部を内側へ寄せる |
| 縮小しても見出しが読める | 横200〜250pxで確認 | 短くする/2行までにする |
| ロゴが角にない | 四隅を先に見る | 内側へ移動する |
| 見出し・補足が“塊”になっている | 視線が迷わないかを見る | 近くに寄せてまとめる |
最後のコツ:「欠けるかどうか」だけでなく、「読めるか」を一緒に見ると、勝手に整ったデザインになります。端に寄せるほど、欠けやすいだけじゃなく、読みにくくもなりがちです。
安全エリアを空けると、スカスカに見えません?
スカスカに見える時は、余白が悪いんじゃなくて「情報が散ってる」ことが多いです。見出しと補足を近くにまとめて“塊”にすると、余白があっても落ち着いて見えます。
どうしても端に置きたい(デザイン的に)
端は“飾り”としてならOKです。たとえば背景の模様や、重要じゃない装飾なら端でも大丈夫。大事な文字・数字・ロゴだけは中央の安全ゾーンに残す、が現実的です。
文字やロゴが欠けるのを防ぐ型