dev.to 記事カバー画像メーカー｜タイトルとタグだけで dev.to カバーが完成

dev.to の記事カバー画像（公式比率 1000×420）を、記事タイトル・タグ・著者名の3項目とアクセント色1択だけで作って、4倍 retina（2000×840 PNG）として書き出すツールです。Canva も Figma も開かず、ブラウザだけで完結します。

💡 このツールについて

「dev.to に記事を投稿するたびに Canva でテンプレを複製して文字を差し替えるだけで5分溶ける」「比率を手で合わせるのが面倒」——記事を継続して書く dev.to ライターほどぶつかる、小さな摩擦をなくすために作りました。

このツールは dev.to 公式のカバー比率 1000×420 を内部で固定し、入力は「記事タイトル・タグ・著者名」の3項目とアクセント色1択だけです。Canvas 2D が左 16px の縦アクセントバー＋タグの eyebrow ＋ 2行折り返しタイトル＋著者名を描画し、リセットを押せば各言語向けに用意した初期サンプル値（日本語版は webdev × Web Components の話）に戻ります。出力は dev.to の native 解像度 1000×420 を 4倍にスケールした 2000×840 PNG。retina 端末や SNS のサムネで見られても劣化しません。

🧐 よくある質問

Q. 出力サイズは dev.to の何に合わせていますか？ A. dev.to のカバー画像公式比率 1000×420 を 4倍 retina で書き出すため、保存される PNG は 2000×840 px です。dev.to 側で表示時にダウンスケールされるので、retina 端末でもボケません。

Q. タイトルが長すぎると切れますか？ A. タイトルは 2 行で word-wrap し、それでも入りきらない場合は末尾を「...」で省略します。著者名・タグは 1 行に収まるようクリップされます。レイアウト崩れを起こさないための設計です。

Q. ロゴや写真を載せられますか？ A. このツールは「テキスト＋色」のみで、ロゴ・背景画像・写真は載せられません。アイコン入りのカバーが必要な場合は Canva や Figma など別ツールを併用してください。

Q. アクセント色を自由に指定できますか？ A. ピンク / シアン / ミント / アンバーの 4 色固定です。カラーピッカーや HEX 入力には対応していません。「迷う時間をなくす」設計のため、選択肢を絞っています。

Q. PNG はどうやって dev.to の記事に紐付けますか？ A. dev.to の記事 Markdown front matter で cover_image: キーに、ホスト先の PNG URL（GitHub の raw URL など）を指定します。記事エディタの Cover image アップロード UI からアップロードしても構いません。

Q. リセットを押すと何が戻りますか？ A. タイトル・タグ・著者名・アクセント色のすべてが、日本語版の初期サンプル値に戻ります。「webdev × Web Components」を題材にしたサンプルから書き始められるため、白紙からスタートする心理的負担がありません。

📚 dev.to のカバー画像と「画像内テキスト」の壁

dev.to のカバー画像は公式に 1000×420 比率で、記事 feed の横長サムネにそのまま合わせた設計になっています。タイトル＋カバー画像をひと組で見せる feed UI は、技術記事プラットフォームの中では珍しい部類です。

近年は dev.to のエディタにも AI カバー画像生成オプションが搭載されました。ただし現状の AI 画像生成には「画像内に正確な文字を描く」のが苦手という構造的な弱点があり、技術記事のタイトルを意図通りに組み込むのは難しい状況が続いています。dev.to コミュニティでも、AI で背景画像を作って、タイトル文字は HTML / SVG / Figma など別レイヤーで重ねる、というハイブリッドな workflow が共有されることがあります。

このツールはその発想を 1 つのアプリにまとめた選択肢です。AI 生成の背景は使わず、テキストとアクセント色だけで dev.to のレイアウト規格通りに組み立てる。情報量は最小、レイアウトは固定。それで足りる場面のための道具です。