同じ画像をInstagramとXに投稿したら、片方だけ端が切れていた。ストーリーズに載せたら、文字の上にアイコンがかぶっていた。SNSの画像あるあるです。
原因はデザインの腕ではありません。媒体ごとのサイズと「安全マージン」を知らないだけです。
このレッスンでは、Instagram・Xの画像サイズ、文字が消える場所、フィードとストーリーズの作り分けをまとめます。知ってしまえば、あとは作るだけですよ◎
先に言葉をそろえておきます。フィードはホーム画面に流れてくる通常の投稿、ストーリーズは全画面で表示されて24時間で消える投稿、リールは縦型の短い動画投稿のことです。
Instagram・Xの画像サイズ一覧
まず基本のサイズです。この4つを押さえれば、日常の投稿画像はカバーできます。

| 置き場所 | 推奨サイズ(px) | 縦横比 |
|---|---|---|
| Instagram フィード | 1080×1350 | 4:5(縦長) |
| Instagram フィード(正方形) | 1080×1080 | 1:1 |
| Instagram ストーリーズ・リール | 1080×1920 | 9:16 |
| X 画像付き投稿 | 1200×675 | 16:9 |
| X 投稿(正方形) | 1080×1080 | 1:1 |
| X ヘッダー | 1500×500 | 3:1 |
Instagramのフィードは、いまは縦長の4:5が基本です。正方形より画面を大きく使えるので、スクロール中に目に入る面積が違います。正方形でも投稿はできますが、これから作るなら4:5で設計するのがおすすめです。
安全マージン:文字が消える場所を知る
サイズが合っていても、文字が読めなくなる場所があります。画面の上にアプリのUI(アイコンやボタンなどの表示部品)が重なる範囲と、一覧表示で切り抜かれる範囲です。
ストーリーズは上下250pxを空ける

ストーリーズは全画面表示なので、画面の上にアカウント名とアイコン、下に返信欄が重なります。目安は1080×1920のうち上下それぞれ約250px。ここに文字やロゴを置くと、UIの下に隠れます。
伝えたい文字は中央に寄せる。これだけでストーリーズの事故はほぼ防げます。
フィードはプロフィールの一覧で切られる
4:5で投稿した画像は、プロフィールのグリッド一覧では中央部分だけ切り抜かれて表示されます。つまり上下の端に置いた文字は、一覧では見えません。
投稿単体では読めるのに一覧では欠ける、という地味な事故です。文字は中央寄りに、切れて困る要素は端から離して置きます。
- 文字とロゴは中央寄りに置いた
- ストーリーズは上下250pxを空けた
- 投稿前に実機のプレビューで確認した
フィードとストーリーズの作り分け
サイズ以上に大事なのが、見られ方の違いです。同じ画像を流用すると、どちらかで機能しなくなります。
| フィード | ストーリーズ | |
|---|---|---|
| 縦横比 | 4:5・1:1 | 9:16 |
| 見られ方 | スクロールの途中で目に入る | 全画面で数秒表示されて次へ進む |
| 文字量 | 読ませる要素も入れられる | 少なく・大きく。一目で伝わる量だけ |
| 役割 | 残る投稿。あとから見返される | 24時間で消える。今日のお知らせ向き |
フィードはスクロールの手を止めてもらうのが先決なので、1枚目に主役とキャッチコピーを置きます。ストーリーズは数秒で流れるので、文字を減らして大きくします。
1つの素材から両方作るときは、主役を中央に置いた状態で撮影・作成しておくと、4:5にも9:16にも切り出せます。
画質を落とさない書き出し
最後に書き出しです。SNSはアップロード時に画像を圧縮するので、元データの作り方で仕上がりが変わります。
- 推奨サイズちょうどで書き出す:小さい画像は拡大されてぼやけます。大きすぎる画像は強く圧縮されます
- 文字やイラスト中心ならPNG:JPGの圧縮は文字のフチをにじませます。Xに文字入り画像を載せるときは特にPNGが安全です
- 写真中心ならJPGの高品質設定:容量と画質のバランスが取れます
ミニ実践:1枚の正方形画像を2つに作り分ける
Canva(ブラウザで使えるデザインツール)の無料プランでできます。20分ほどの練習です。
- 手持ちの写真から、主役がほぼ中央にある1枚を選びます(なければ無料素材でOK)
- Canvaで1080×1080のキャンバスを作り、写真と短いキャッチコピーを置きます
- これをフィード用に1080×1350へ作り直します。写真を上下に広げて、文字は中央寄りのまま動かします
- 次にストーリーズ用の1080×1920を作ります。文字を減らして大きくし、上下250pxには何も置きません
- 3枚を並べて、「同じ素材なのに文字の量と位置が違う」ことを確認します
作り分けの感覚は、この1回でつかめます。実際の投稿で使うときも、この順番(正方形か4:5で作る → 9:16へ展開)が楽ですよ💡
よくある質問
次に学ぶこと
SNS画像は、媒体別の推奨サイズで作る・安全マージンを空ける・フィードとストーリーズで文字量を変える。この3つで仕上がりが安定します。広告バナー全般の規定と制作フローはバナーデザインの実務で扱っています。
次のレッスンはLINEクリエイティブ。トーク画面の下に固定表示されるリッチメニューを中心に、規定サイズとタップされる設計を扱います。
コース全体の並びはデザイン基礎コースの目次で確認できます。

