ブログアイキャッチメーカー｜写真と帯でOGP画像を作る
ブログ記事のアイキャッチを作る無料ツール。写真・無地・グラデ背景にタイトルと帯（横帯・上下バー・斜めリボン・タグ）を重ね、明るさや彩度も調整。OGPやSNSの定番サイズでPNG・JPEG保存できます。
プレビュー
背景色や文字色をまとめて整える下地スタイルです。タップして雰囲気を選び、あとから細かく調整できます。
🔒 データはブラウザ内で処理され、サーバーに送信されません
このツールについて
使い方・特徴・補足情報
ブログアイキャッチメーカーとは
ブログアイキャッチメーカーは、記事の先頭に置く画像を作るツールです。 背景写真を読み込み、その上にタイトルと帯を重ねて仕上げます。
ツールバーの「写真」から、手元の写真をすぐ差し込めます。 ドラッグやズームで、見せたい範囲も自由に動かせます。
写真がないときは無地やグラデーションの背景も選べます。 操作を間違えても、戻す・やり直すボタンでやり直せます。
タイトルの構図はギャラリーから選べます。 特大・横幅いっぱい・上下の帯など、好みのレイアウトを一発で当てられます。
仕上げた画像はそのまま保存もコピーもできます。 デザインアプリを使わず、数分で1枚を整えられます。
👤 こんな人におすすめ✨
ブログやSNSの画像を作る人
✅ 楽になること
アイキャッチ画像を手早く用意する
✍️ 避けたい手間
写真の上で文字が読みにくい問題
解決できる困りごと
- デザインアプリを開かずに、ブログのアイキャッチをブラウザだけで仕上げられる
- 写真の上で文字が読みにくくなる悩みを、帯や暗幕、画質調整で減らせる
- 写真の見せたい部分がずれる手間を、ドラッグやズームの範囲調整で減らせる
- 背景写真の読み込み口が分からず迷う手間を、プレビュー周辺の読み込みボタンで省ける
- タイトルの大きさや位置を細かく調整する手間を、構図ギャラリーのワンタップで減らせる
- 毎回サイズを調べ直す手間を、OGPやSNSの定番プリセットで省ける
使い方
- 上のツールバーの「写真」から背景写真を読み込む
- 写真はドラッグやズームで見せる範囲を決める
- サイズを選ぶ（OGP・正方形・YouTubeなど）
- タイトルを入力し、ギャラリーから構図を選ぶ
- 下のメニューで帯・暗幕・色を整える
- ツールバーの「保存」か「コピー」で書き出す
使用例
OGP画像にタイトルと帯
写真背景に見出し帯を敷いて、タイトルを読みやすくする例です。サイズはOGPを選びます。
入力
タイトル: 週末の作り置きレシピ10品 / 背景: 料理写真 / 見出し帯: オン
出力
1200×630のアイキャッチ（写真＋白帯＋タイトル）
サムネに斜めリボン
16:9のサムネに「NEW」のリボンを右上へ置く例です。文字は太字で大きくします。
入力
タイトル: 初心者向けカメラ設定 / リボン: NEW（右上）
出力
1280×720のサムネイル（右上に赤いリボン）
活用シーン
ブログ記事のアイキャッチ
記事タイトルを大きく載せたOGP画像を用意できます。写真や色を変えて、記事の雰囲気に合わせられます。
SNSでシェアする画像
XやFacebookでシェアしたときに出る画像を整えられます。横長や正方形の比率を選べます。
YouTubeのサムネイル
16:9のサムネにタイトルと帯を載せられます。斜めリボンで「新着」を目立たせられます。
写真に文字をのせる
手元の写真を背景にして、暗幕で文字を読みやすく整えます。明るさや彩度の調整もその場で行えます。
カテゴリのラベル付け
角のタグに連載名やカテゴリを入れて、シリーズ感を出せます。色を変えれば一覧でも見分けやすくなります。
イベント告知のバナー
日付や会場を1枚にまとめた告知画像を作れます。上下のフルバーに補足を添えられます。
構図をすばやく決める
ギャラリーから特大や横幅いっぱいなどを選ぶと、タイトルの大きさと位置が一度に決まります。
技術的な解説
補足: 仕組み
画像の合成にはCanvas APIを使い、背景・帯・文字をブラウザ内で1枚に重ねます。 写真はcreateImageBitmapで読み込み、cover計算で全面に敷きます。
ズームと位置の値で、見せる範囲を動かせます。 暗幕はON/OFFで切り替えられます。
文字や帯の大きさは、画像の短辺に対する比率で持ちます。 そのためプレビューと書き出しで見た目がそろいます。
画質調整はctx.filterのbrightnessやcontrastで反映します。 写真の上でも文字を読みやすく整えられます。
もっと詳しく
帯で文字を読みやすくする理由
写真の上に文字を置くと、明るい場所と暗い場所で読みやすさがばらつきます。 見出しの背面に帯を敷くと、文字の下地が一定になり輪郭がはっきりします。
全面を暗くするより、帯のほうが写真の雰囲気を残せます。 帯の濃さを上げるほど文字は際立ち、写真の主張は穏やかになります。
斜めリボンとタグの使い分け
斜めリボンは角を横切る帯で、「NEW」や「PR」のような短い一言が映えます。 タグは角丸の小さなラベルで、カテゴリ名や連載名にちょうど合います。
どちらの帯も四隅に加え、各辺の中央にも置けます。 タイトルと反対側に寄せると、視線がぶつからず読みやすくなります。
写真の画質調整が効く場面
暗く撮れた写真は、そのままだとタイトルが沈んで読みにくくなります。 明るさを少し上げ、コントラストを足すと、文字がくっきり浮き上がります。
彩度を下げると写真が主張しすぎず、文字が主役になります。 ぼかしと暗幕を合わせれば、背景は雰囲気づくりに回せます。
よくある質問
作った画像はどこで使えますか？
ブログのアイキャッチや、X・Facebookなどのシェア画像に使えます。保存した画像を各サービスにアップロードするだけです。
写真はサーバーに送られますか？
いいえ、写真の読み込みから合成、保存までブラウザ内のCanvasで完結します。画像が外部のサーバーへ送られることはありません。
帯にはどんな種類がありますか？
見出し背面の横帯、上下や左右のフルバー、斜めリボン、角丸のタグです。位置は四隅や各辺の中央から選び、色や濃さ、太さも帯ごとに調整します。
写真の見せる範囲は動かせますか？
ズームスライダーやスマホの2本指ピンチで拡大し、ドラッグや位置スライダーで寄せられます。被写体を片側に寄せたいときや、文字の余白を作りたいときに役立ちます。
画質調整では何ができますか？
写真背景の明るさ・コントラスト・彩度を変えられます。暗い写真を明るくしたり、彩度を抑えて文字を立たせたりして自然に整えます。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。