コピペするだけ！簡単「アイキャッチ画像（1280×670）」

へろん

2026年7月5日 12:46

毎週のことながら、こんな時間まで爆睡している自分にどんなもんなんだいって言いたい…

深夜に突然、作詞できないけど、できるようになったらいいよね！と思い立ちSUNOと向かい合うも、お餅食べたいなーで思考停止です！

でも、まあ、よしとします！

読ませて頂いた記事をマガジンに追加させて頂いております。

伺った際にはマガジンへの登録をさせて頂いていきますが、それはやめてほしいなどありましたら、DM / コメントで一言頂けましたら幸いです😊

ブックマークに置いとくだけ！

コピペするだけの簡単小道具！

Geminiで簡単！ツール作成！

一発作成プロンプトも紹介！

アイキャッチ画像とかサムネ画像とか、人によって色々と呼び名がありそうですね。
私は名前がよくわからなかったので、AIにはカバー画像だと言って作ってもらってます。
そのあたりは正直どうでも良いのです。
ただ、これを作るのがめんどくさいから作らない、というのはちょっと勿体無いと思って！

タイトルとか記事に関する言葉！

何か入力したらランダムな画像を作る！

シンプルなものでも、つけてみたら記事への愛着も爆あがり！

スペース2つで任意位置改行できちゃう！

AIで作るのがめんどくさいから、で作っていない方は是非！

🛠️ 使い方（スマホ版）

1. 適当なページをブックマークする

まずは、今見ているこのページなど、何でもいいので一度ブックマークに登録します。

2. 「編集」を開く

ブックマークバーにある今作ったブックマークを長押しして、「編集」を選択します。

3. 内容を書き換える

表示された設定画面で、以下の2箇所を変更して保存します。

名前： （自分が分かりやすい名前）
URL： もともと入っているURLをすべて消して、コードを貼り付ける。

ブックマークを押すだけ簡単！

📋これを貼ります！

javascript:(function(){const title=prompt('note記事のタイトルを入力してください：');if(!title)return;const lines=title.replace(/( {2}|\u3000{2})/g,'\n').split('\n');const canvas=document.createElement('canvas');canvas.width=1280;canvas.height=670;const ctx=canvas.getContext('2d');const grads=[['#ff9a9e','#fecfef'],['#a1c4fd','#c2e9fb'],['#ffecd2','#fcb69f'],['#d4fc79','#96e6a1'],['#e0c3fc','#8ec5fc']];const gPair=grads[Math.floor(Math.random()*grads.length)];const grad=ctx.createLinearGradient(0,0,1280,670);grad.addColorStop(0,gPair[0]);grad.addColorStop(1,gPair[1]);ctx.fillStyle=grad;ctx.fillRect(0,0,1280,670);const emojis=['★','✨','🌸','🌼','⬡','🍀','🧸','🌙','🎨','🎀'];for(let i=0;i<30;i++){const emoji=emojis[Math.floor(Math.random()*emojis.length)];const size=Math.floor(Math.random()*40)+20;ctx.save();ctx.font=%60${size}px sans-serif%60;ctx.translate(Math.random()*1280,Math.random()*670);ctx.rotate(Math.random()*Math.PI*2);ctx.fillStyle='rgba(255,255,255,0.4)';ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillText(emoji,0,0);ctx.restore()}ctx.strokeStyle='rgba(255,255,255,0.85)';ctx.lineWidth=6;ctx.beginPath();ctx.roundRect(30,30,1220,610,20);ctx.stroke();ctx.fillStyle='#ffffff';ctx.shadowColor='rgba(0,0,0,0.3)';ctx.shadowBlur=15;ctx.font='bold 60px sans-serif';ctx.textAlign='center';ctx.textBaseline='middle';const lineHeight=84;const startY=335-((lines.length-1)*lineHeight)/2;for(let i=0;i<lines.length;i++){ctx.fillText(lines[i],640,startY+(i*lineHeight))}const wnd=window.open();if(wnd){const img=wnd.document.createElement('img');img.src=canvas.toDataURL('image/png');wnd.document.body.appendChild(img);wnd.document.body.style.margin='0';wnd.document.body.style.backgroundColor='#f0f0f0';img.style.maxWidth='100%';img.style.height='auto'}else{alert('ポップアップがブロックされました。許可してください。')}})();void(0);

一発作成プロンプト！

ユーザーがブラウザでクリックすると入力プロンプトが開き、入力したnote記事のタイトルを元に、パステル調で白枠付きのアイキャッチ画像（1280×670）を自動生成して別タブに出力するブックマークレット（JavaScript）を作成してください。

非同期処理（FileReader）や生HTMLの流し込みによる「画面真っ白バグ」を完全に完封するため、以下の【完全同期・純粋Canvas一撃出力要件】を厳格に満たしてください。

### 1. 画面真っ白バグの完全完封要件（最重要）
- 【FileReaderおよびSVG流し込みの完全禁止】:
  FileReaderを使った非同期の読み込みや、`document.write`、SVG文字列の結合などの複雑な処理は、ブラウザのセキュリティルールにより処理が途中で遮断され、画面が真っ白になるため【絶対禁止】とします。
- 【純粋Canvas一撃出力の徹底（短冊コード方式への完全回帰）】:
  すべての描画（パステル背景、白枠、絵文字、タイトル文字）を【一つのCanvasオブジェクト（ctx）のみ】で完結させてください。
  そして、描画直後に **`const dataUrl = canvas.toDataURL('image/png');`** でピュアなPNGデータに一瞬で変換してください。
  その後、`const wnd = window.open();` で開いた新タブの `wnd.document.createElement('img')` の `src` にその `dataUrl` を【同期的に一撃で代入】して終了してください。この最も単純で実績のある構造以外は認めません。

### 2. 文字コード・改行置換要件
- 【全角スペースのUnicode化】:
  URL登録時の文字化けを防ぐため、全角スペースは必ずUnicodeエスケープコード `\u3000` で表現し、半角スペース2つまたは全角スペース2つが連続した際に改行（`\n`）へ一発変換する **`replace(/( {2}|\u3000{2})/g, '\n')`** を【絶対厳守】で実装してください。

### 3. 内包するデザイン・超軽量描画仕様
コードの文字数を極限まで減らし、絶対に途中で千切れさせないために、以下のミニマルなCanvasコードで構成してください。
- 【背景と白枠】:
  淡いパステルグラデーション（例：#ff9a9e→#fecfefなどランダム選定）の上に、**`ctx.roundRect(30, 30, 1220, 610, 20)`** を使って太さ6pxの白枠（不透明度85%）を描画。
- 【ランダム絵文字】:
  `ctx.fillText` を使い、Unicodeの絵文字（`★`, `✨`, `🌸`, `🌼`, `⬡` など）をforループで30個、ランダムな位置・サイズ・角度で散りばめてください。
- 【タイトル文字描画（軽量版）】:
  置換後の改行コード（`\n`）でタイトルを `.split('\n')` して配列化し、フォントサイズは `60px`（bold sans-serif）に固定。
  計算コードが肥大化するのを防ぐため、文字は白（#ffffff）、シャドウ（blur:15）とし、配列をループ（for）で回して、各行を **`ctx.fillText(lines[i], 640, startY + (i * 84));`** のように1行のシンプルな座標計算で縦横中央に綺麗に並べてドローしてください（startYは行数から逆算）。

### 4. 出力形式
余計な解説や、マークダウンの文章は一切不要です。コピーしてそのままブックマークのURL欄に貼り付けられる `javascript:(function(){...})();void(0);` 形式のコードを、1つのコードブロックのみで出力してください。

この記事について！

今更ながら、Gemini 3分クッキング記事について注意点など｜へろん

何でもどうぞ！答えられるものは全て答えます！

設置はお済みですか？図らずも人の庭でnote質問箱を試す！｜へろん

メンバーシップ始めました！

まだ手探りですが、ご要望/無茶振り/質問、可能な限りお受けします！

参加させて頂いています！是非チェックしてみてください😆

有料記事、今回は問題提起と警告！

note生活1ヶ月の総括記事を書きました！大事な部分は全て無料公開中！
何を考え何をしてきたのか、500人記念のワンコインで公開します！

小道具すべて、こちらに置きました！

☕ お時間あればこちらも是非！

気に入ったらスキ、フォローよろしくお願いします！
note外から見にきてくださったかたも、もしよければハートマーク押して頂けたら励みになります😊