猫の手貸し

ブログ・note用
アイキャッチ生成

記事の顔となる魅力的な画像をサクッと作成。
プロのブロガーがよく使う「王道デザイン」が1タップで完成します。

仕上がり例を見る

背景にする写真をえらぶ

ドラッグ&ドロップ、またはクリック

JPG / PNG / HEIC / WebP

画像はブラウザ内で処理します

🐾 PR

💡 クリックされるアイキャッチの法則

⚫ 文字は「暗い背景に白抜き」が最強

明るい写真の上に文字を載せると、写真の色に文字が溶け込んでしまい非常に読みにくくなります。写真全体(または中央部分)に黒い半透明のフィルターをかけ、その上に真っ白な太文字を置くのが、写真と文字の明暗差を付けて読みやすくする方法の一つです。

📐 OGP用の出力比率は約「1.91 : 1」

このツールでは、リンクの紹介画像に使いやすい横長比率「1.91 : 1(例:1200×630px)」を採用しています。SNSや表示場所によって切り取られる範囲は異なるため、重要な文字は中央寄りに置くと確認しやすくなります。当ツールでは、この面倒な比率計算とトリミングを自動で行います。

📱 スマホ表示を意識した文字数に

スマホではアイキャッチが小さく表示されることがあります。小さなスマホ画面でも一瞬で内容が伝わるよう、アイキャッチに入れる文字は15文字〜20文字程度に絞り、改行を活用して大きく配置するのがおすすめです。

📝 アイキャッチ生成ツールの使い方

1

背景画像のアップロード

「背景にする写真をえらぶ」エリアをクリック、または画像をドラッグ&ドロップして読み込みます。風景やオフィス、カフェなどの写真がアイキャッチに映えます。

2

タイトルの入力とデザイン選択

記事のタイトルを入力します。適宜改行を入れると美しく配置されます。次に、黒フィルターのデザイン(全体・中央帯・上下帯)と出力比率を選択してください。

3

生成とダウンロード

「アイキャッチ画像を生成する」ボタンを押すと、プレビュー通りの画像が完成します。保存ボタンからデバイスにダウンロードし、記事のOGP画像として設定しましょう。

💡 どんな人におすすめ?

個人ブロガー・note投稿者

「Canvaなどの本格ツールを使うほどではないけれど、見栄えの良いサムネイルが欲しい」という方に最適です。

デザインのセンスに自信がない方

黒いフィルターと白い太文字を組み合わせたスタイルを使い、写真と見出しをブラウザ内で配置できます。

SNSで記事を拡散したい方

記事の題名や内容を画像上にも示せます。SNSでの表示範囲はサービスや閲覧環境によって異なるため、重要な文字を中央寄りに置いて投稿プレビューで確認してください。

外出先からスマホで更新する方

インストール不要のブラウザツールなので、スマホで撮った写真をその場でアイキャッチにして記事を公開できます。

🔒 プライバシーと安全性

当ツールの最大の特徴は、画像処理のすべてが「あなたのブラウザ内」で完結することです。読み込んだ写真データが当サイトのサーバーへ送信されることは一切ありません。機密性の高い画像や、プライベートな写真も安心して加工・編集いただけます。

入力・出力のポイント

写真と見出しなどの文字を入力し、テンプレートを選びます。

出力
出力は OGP 用が 1200×630px、16:9 が 1280×720px の JPEG(品質指定 0.85)です。

仕上がりの確認:長い見出しの収まりと写真上の文字のコントラストを確認します。生成した画像を掲載先で縮小して見たときの読みやすさも確かめます。

入力形式と保存の手順

入力:JPG・PNG・WebP、HEIC/HEIF(変換して読み込み)。形式や端末によって読み込めない場合は、JPGまたはPNGで試してください。

「アイキャッチ画像を生成する」で完成画像を表示し、「画像を保存する」で端末へ保存します。保存先でファイルを開き、寸法と仕上がりを確認してください。画像の保存ボタンが使えない場合は、完成画像の長押しも試せます。

処理の仕組みと検証条件を読む

仕上がりの例

猫の写真に見出しを重ね、1200×630pxのアイキャッチを作った例です。

加工前・加工後
左は横になった愛猫の元写真。右は白い見出しとオレンジ色の補足ラベルを加えた横長画像。

加工前・加工後

左は横になった愛猫の元写真。右は白い見出しとオレンジ色の補足ラベルを加えた横長画像。

❓ よくある質問

Q. 推奨される元画像のサイズはありますか?

横幅1200px以上の高解像度な画像を使用することをおすすめします。それ以下の小さな画像を使用すると、アイキャッチ生成時に文字がぼやけてしまう可能性があります。

Q. フォントの変更や色のカスタマイズはできますか?

現在は「爆速で作成すること」を優先し、最も汎用性の高いフォントと配色を固定で採用しています。今後のアップデートで自由度の高い編集機能も検討中です。

Q. 生成した画像が保存ボタンで保存できません。

iPhoneのSafariや、SNSアプリ内のブラウザ(LINEやX内のブラウザ)ではダウンロード制限がかかる場合があります。その場合は、プレビュー画像を数秒間「長押し」して、メニューから保存してください。

☕ 開発ノート
</>

このツールの裏側・仕組み

技術的な仕組みや、安全に処理を行うための工夫などを解説しています。

🐾 [PR] スポンサーリンク

いつも ツール をご利用いただきありがとうございます🐾