無料WEBツールdigtoooooools

by 大阪のホームページ制作会社digrart

アプリ不要｜インスタ画像サイズ変換(9:16対応)｜余白・背景ぼかし

📱
全サイズ対応

9:16 / 4:5 / 1:1に一発変換

🎨
4種の背景

ぼかし/グラデ/単色/推しカラー

✋
ドラッグ調整

見せたい部分を自由に指定

⚡
ブラウザ完結

画像はサーバーに送信しない

🖼️

画像をドラッグ＆ドロップ
または

PNG / JPG / WEBP / GIF — どんなサイズでもOK

📱 画像を選択すると
プレビューが表示されます

画像を選択してください

ストーリーズの推奨サイズ（1080×1920px）の根拠
Instagramのストーリーズ・リールに最適な画像サイズは 幅1080px × 高さ1920px（縦横比 9:16） です。これはフルHD解像度のスマートフォン画面を縦向きにしたサイズと一致しており、最新の高解像度スマートフォンでもピクセルレベルでくっきり表示されます。ファイルサイズは PNG の場合で 30MB以下、JPEG なら10MB以下が推奨されています。
「セーフゾーン」に気をつけよう
ストーリーズ画面の上下にはInstagramのUIが重なって表示されます。上部にはプロフィールアイコン・名前・時刻（約250px分）、下部には返信ボックスや既読ボタン（約300px分）が表示されます。重要なテキストやロゴをこのエリアに配置すると隠れてしまうため、上下250pxは「セーフゾーン外」として扱い、コンテンツを中央の1080×1420px内に収めることが推奨されます。
リールとストーリーズで同じサイズが使える理由
Instagramのリールもストーリーズと同じ 9:16（1080×1920px）を採用しています。1枚のファイルで両方に投稿できるため、コンテンツ制作の効率化に繋がります。フィード投稿に使う縦長サイズは 4:5（1080×1350px）が最大で、それ以上縦長の画像は自動でトリミングされます。
黒帯（レターボックス）が入る仕組み
スマートフォンで横向きに撮影した写真や、一眼レフで撮った3:2・4:3の写真をそのままストーリーズに投稿すると、上下や左右に黒い帯（レターボックス）が自動で追加されます。これはアスペクト比の不一致を補正するためで、Instagramアプリが意図的に行う処理です。黒帯が入ると「未完成感」「寂しさ」が出てしまい、エンゲージメントが低下する傾向があります。
Instagramアプリ内での対処の限界
Instagramの投稿画面では、ピンチ操作で画像を拡大してはみ出した部分をトリミングする方法がありますが、細かい位置調整が難しく、重要な被写体が切れてしまうことが多いです。また、拡大しすぎると画像が粗くなる点も課題です。本ツールを使えば、元画像を縮小して余白を別の背景で埋める方式のため、画像を劣化させることなく美しいストーリーズに仕上げられます。
ぼかし背景 vs グラデーション背景 — どちらが効果的か
人気インフルエンサーや企業アカウントが好んで使うのは「ぼかし背景」です。元の写真と余白部分の色調が自然に繋がるため、違和感なく視線を中央に誘導できます。グラデーション背景はブランドカラーに合わせた統一感のあるフィードを作りたい場合に効果的です。「推しカラー自動抽出」機能を使うと、写真の主要な色を自動で検出し、一番相性のいい背景色を提案します。
ピクセルカラーヒストグラムで「主役の色」を見つける
当ツールの「推しカラー自動」モードでは、JavaScriptの getImageData APIを使って画像の全ピクセルのRGB値を読み取り、色ごとの出現回数（ヒストグラム）を計算します。色を8段階に量子化して集計することで、画像の中で最も面積を占める「主役の色」を特定し、それをベースにしたグラデーション背景を自動生成します。
推し活・コンサート写真での活用シーン
コンサートや推しのイベント写真をストーリーズに投稿するとき、推しのメンバーカラーに合った背景で写真を際立たせたいと思ったことはありませんか？「推しカラー自動」モードを使うと、写真に写っているペンライトの色や衣装の色を自動で検出し、その色味に合った美しいグラデーション背景が生成されます。推しへの愛をビジュアルで表現できます。
統一感のあるインスタフィードを作る応用技
シリーズ投稿で色調を統一したい場合は、手動のカラーピッカーで固定のブランドカラーを指定するとよいでしょう。毎回同じ色のグラデーション背景を使うことで、プロフィールページのフィードが整然とした印象になり、フォロワーが増えやすくなります。
セーフゾーンを意識したデザイン
ストーリーズに文字やロゴを追加する場合は、上下のセーフゾーン（各250px）を避けて 中央の1080×1420px に収めましょう。特に重要なキャッチコピーやCTAボタンは画面中央よりやや下、高さ全体の40〜70%の位置に配置すると最も視認しやすくなります。
最初の1フレームでフォロワーを引き込む
ストーリーズは3〜7秒で自動的に次に進んでしまいます。そのため、最初の1フレームにインパクトのある画像や文字を配置することが非常に重要です。ぼかし背景を使うとメイン画像が際立ち、視線が自然に集まります。また、ストーリーズの左端をタップして「戻る」動作を誘発するくらい印象的なファーストフレームを目指しましょう。
フィード × ストーリーズのクロス投稿戦略
同じ写真をフィード（4:5）とストーリーズ（9:16）の両方に投稿する際、本ツールで2種類のサイズを作り分けると効率的です。フィード画像はメインビジュアルとして、ストーリーズはワイプや「フィード見てね」の告知として活用する組み合わせが、リーチを最大化するオーソドックスな手法です。
HTML5のCanvas APIとは
Canvas APIはブラウザに標準で搭載された2D/3Dグラフィックスのライブラリです。JavaScriptから canvas.getContext('2d') で描画コンテキストを取得し、drawImage()・fillRect()・filter などのメソッドを使って画像の合成・変形・描画がすべてブラウザ内でできます。本ツールはこのAPIのみを使っているため、外部ライブラリの読み込みは一切ありません。
ぼかし背景の技術的な仕組み
ctx.filter = 'blur(20px)' を設定してから drawImage() を呼ぶことで、Canvas上に描画する画像にCSSのぼかしフィルタをリアルタイムに適用できます。重要なポイントは、ぼかした画像の端には白いフリンジ（にじみ）が現れるため、キャンバスの外側にはみ出すほど大きく描画してクリッピングすることでアーティファクトを防いでいます。
プライバシーと安全性
写真にはスマートフォンのGPS情報（Exifデータ）や人物の顔など、個人情報に直結するデータが含まれています。外部のサーバーに画像を送信するタイプのツールでは、そのデータが一時的に外部サーバーに保存されるリスクがあります。当ツールはすべての処理をあなたのブラウザ内で完結させており、画像データがネットワークを通じて外部に送信されることは一切ありません。ブラウザの開発者ツール（Network タブ）で確認いただくことができます。
画像処理・テキスト解析
WEB開発ツール
SEO対策
ネットワーク
セキュリティ
ビジネス
SNS・エンタメ
生活