進捗トラッカーカードメーカー｜1200×630 PNG で読書・ランニング・募金の進捗をシェア
目標タイトル、現在値・目標値、単位を入れるだけで、進捗バー付きのカードを 1200×630 の PNG として書き出せます。バーは丸・角・区切り (20 分割) の 3 種から選べて、背景色とバー色も自由に調整できます。
💡 こんなときに使う
「2026 年は本を 50 冊読む」「フルマラソンに向けて月 100km 走る」「推し作家の新刊発売に向けて貯金を 80,000 円積む」——こうした年単位・月単位のチャレンジは、定期的に進捗を SNS に投げると応援も入りやすく、自分も止まりにくくなります。とはいえ毎回スクショや手書きで作るのは面倒で、テキストだけのポストは流れていってしまいます。
このツールは「目標」「いま何/全部で何」「進捗 % の大きい数字」「ゴールに向かうバー」だけに絞った一枚絵を 1200×630 で出力します。情報量を抑えてあるので、X や Instagram のタイムラインに流れてきても 0.5 秒で「何の進捗か」が伝わります。読書チャレンジ、ランニング距離、寄付ゲージ、学習時間、推し活の目標、何でも入ります。
バー形状は 3 つ:
- 丸 (rounded): 柔らかい印象。読書・趣味系のチャレンジに
- 角 (square): シャープな印象。ランニングや筋トレなどの計測系に
- 区切り (segmented): 20 分割のチャンク表示。寄付ゲージや「全 N 巻読破」のように 1 ステップが明確な目標に映える
🧐 よくある質問
Q. なぜ画像サイズが 1200×630 で固定なのですか? A. Open Graph (OG) 標準のシェアカードサイズが 1200×630 (アスペクト比 1.91:1) で、X / Facebook / LinkedIn / Slack / Discord / WhatsApp など OG 対応の各 SNS・メッセンジャーに貼ったときに左右が切れずに綺麗に表示されます。サイズを選べる方が便利に見えますが、「SNS で確実に綺麗に映る一枚」を作ることを優先しました。
Q. 現在値が目標値を超えたらどうなりますか? A. パーセント表示は 100% で上限固定されます。バーも 100% 表示で止まります。「目標達成済み」を示すスクショとしてそのまま使えます。
Q. 目標を 0 にすると? A. 目標値は 1 以上の数値しか入力できないようになっています。0 を入れると 1 として扱われます。
Q. 現在値や目標値に小数を入れられますか? A. はい。ランニング距離 (例: 42.195km) や金額 (例: 12,500.5 円) のような小数値も入れられます。表示はそのまま小数も出ます。パーセントだけは見やすさのため整数に丸めて表示されます。
Q. タイトルが長すぎると見切れますか? A. タイトルは 40 文字まで入力可能で、カード幅に収まるよう自動でフォントサイズが縮みます。日本語で 40 文字あれば「2026 年フルマラソン完走に向けたトレーニング距離記録」のような長めの説明文も収まります。
Q. 単位ラベルは何を入れるのが良いですか? A. 「冊」「km」「円」「時間」「ページ」「件」のように、現在値・目標値の意味が伝わる単語を 20 文字以内で入れます。空欄でも数字だけが表示されるので、「7/10」のように単位なしの比率としても使えます。
Q. 出力ファイル名はどうなりますか?
A. タイトルから英数字を抜き出して {title}-progress.png の形式になります。日本語タイトルだけしか入っていない場合は、スラグ名 (progress-tracker-image-card.png) で書き出されます。
📚 1200×630 が「OG 標準サイズ」になった理由
OG (Open Graph) は、もともと 2010 年に Facebook が発表した「ウェブページを SNS に貼ったときのプレビュー表示を制御するためのメタデータ規格」です。今では Facebook 以外に X (旧 Twitter)、LinkedIn、Slack、Discord、WhatsApp、Telegram、iMessage まで、リンクのカードプレビューを出すほぼすべてのアプリが OG タグを読みに行きます。
各社が共通で「綺麗に出る」と保証している推奨サイズが 1200×630 ピクセル / 1.91:1 で、これは Facebook が公式に推奨している大判画像サイズです。1.91:1 は黄金比よりやや横長の比率で、タイムラインで文字も読めて、横スクロールせずに 1 画面に収まる視認性の良いバランスになっています。
このため、ブログのアイキャッチ、Zenn / Qiita / note 系プラットフォームのカバー画像、Cloudflare Pages / Vercel / Netlify の静的サイトの OG 画像——どれもこの 1200×630 を基準に作るのが定番です。「読書 50 冊チャレンジの進捗」を SNS に流すなら、まさにこのサイズで作るのが最短ルートです。
なお、X (旧 Twitter) は twitter:card="summary_large_image" を指定したときに 2:1 寄りで表示することもありますが、1.91:1 の画像でも上下が少し切られるだけで本文は失われません。タイトルとパーセント表示はカード中央寄りに置かれているので、X の Large Image 表示でも数字とバーは消えません。