進捗を文字だけで見せる。無料ツール「プログレスバー文字ジェネレーター」を公開しました。

目標達成まであと何割か、作業がどこまで進んだか。数字で「60%」と書くよりバーの絵で見せたほうが速く伝わりますが、そのために毎回画像を作るのは大げさです。デザイン事務所AMIXは、パーセントや分数から ▰▰▰▱▱ 60% のような文字だけのプログレスバーを作れる無料Webツール「プログレスバー文字ジェネレーター」を公開しました。記号の種類やマス数、数値の表示を選ぶだけで、貼るだけの1行が出来上がります。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。

どんなツールか

本ツールは、進捗の割合を入力すると、その割合を塗り分けた記号の並びを組み立てるツールです。画面上部に結果がそのまま表示され、下の設定を触るたびに描き直されます。出力されるのは画像ではなくテキストなので、SNSの投稿欄、チャット、GitHubのREADME、スプレッドシートのセル、ゲームのステータス表示欄など、対応する記号を入力できる場所へ貼り付けられます。

同じことを手作業でやるなら、記号を必要な数だけ並べて数え、割合が変わるたびに数え直すことになります。20マスや25マスで「37%はどこまで塗るのか」を毎回計算するのは面倒です。本ツールは割合とマス数から塗る数を計算するため、数える作業そのものが不要です。分数での入力にも対応しているので、「8話中3話まで見た」「12工程のうち5工程完了」のように割合を自分で計算していない状態からでもバーが作れます。処理はすべてお使いのブラウザ内で完結し、入力した数値が当方のサーバーへ送信・保存されることはありません。

文字だけでバーを描く仕組み

考え方は単純です。まずマス数（バーの全長）を決め、そこに割合を掛けて「塗るマスの数」を求めます。10マスで60%なら6マス。その6マスを塗りつぶしの記号で、残りの4マスを空の記号で埋めれば ▰▰▰▰▰▰▱▱▱▱ というバーになります。塗るマスの数は四捨五入で決まるため、10マスなら1マスあたり10%、20マスなら1マスあたり5%が最小の刻みです。つまりマス数を増やすほど細かさが上がり、代わりに1行が長くなって折り返しやすくなります。この兼ね合いを調整できるよう、本ツールではマス数を4〜30の範囲で変えられるようにしています。短いチャットのメッセージなら8〜12マス、READMEの表の中なら10〜20マス、といった具合に貼り付け先の横幅から逆算するのが実用的です。

収録している記号セット

塗りと空のペアを5種類から選べます。初期状態の ▰▱ は角の丸い横長の記号で、SNS投稿でよく見かける定番の見た目です。█░ はブロック要素の組み合わせで、空の側が網掛けになるため塗りとの差がはっきりし、コードフォントとの相性がよくターミナル風の印象になります。●○ は白丸と黒丸で、バーというより「点で数を示す」表現になり、5段階評価やステップ表示に向いています。■□ は四角の白黒で、もっとも素朴で読み違えにくい組み合わせです。▮▯ は縦長の長方形で、細めのバーに見えます。なお ■□ や ●○ は比較的多くの環境で安定して表示されますが、▰▱ や ▮▯ は環境によって幅や太さが変わることがあります。重要な連絡に使う場合は、貼り付け先で実際にどう見えるかを一度確かめてから本番に使うのが確実です。

主な機能・特徴

進捗の見せ方を細かく詰められるようにしています。

• 入力方法を「パーセント」と「分数」から選べます。パーセントはスライダーと数値入力欄の両方から指定でき、大まかに動かしてから数値で微調整できます。
• 「分数」では現在値と全体をそれぞれ入力します。「3 / 8」のように入れればその割合でバーが描かれ、全体の数が10や100で割り切れなくても自分で計算する必要がありません。
• 記号は ▰▱・█░・●○・■□・▮▯ の5セット。切り替えると結果が即座に置き換わるので、見比べてから決められます。
• マス数は4〜30マスで調整でき、貼り付け先の横幅や表現したい細かさに合わせて選べます。
• 「数値を表示」をオンにすると、バーの末尾に 60% や 3/8 が付きます。バーに入力した数値を同じ1行に添えられます。分数の全体は0より大きい値にし、現在値が全体を超えないよう確認してください。バー自体は0〜100%の範囲に収まるよう処理されます。「[ ]で囲む」をオンにすればバー全体が角括弧で囲まれ、文章に埋め込んだときの範囲が分かりやすくなります。
• 「なめらか（█のみ）」をオンにすると、█ の記号を選んでいるときに1マス未満の進捗も部分的なブロックで表現します。
• 「コピー」を押すと結果がクリップボードへ入り、ボタンの表示が「コピーしました」に変わります。「リセット」を押すと、割合60%、分数3/8、マス数10に戻ります。入力モード、記号、各スイッチの設定はそのまま残ります。

使い方

まず「入力」で「パーセント」か「分数」を選びます。パーセントならスライダーを動かすか、隣の数値欄に直接入力します。分数なら左に現在値、右に全体の数を入れます。どちらの場合も、画面上部のバーが入力に合わせてその場で更新されます。次に「記号」から使いたい組み合わせを選び、「マス数」でバーの長さを決めます。最後に「数値を表示」「[ ]で囲む」「なめらか（█のみ）」のスイッチで仕上げを調整します。形が決まったら「コピー」を押し、投稿欄やチャット、READMEなどでCtrl+V（Macの場合はCmd+V）で貼り付けます。設定を試して分からなくなったときは「リセット」で数値とマス数を初期値に戻せます。入力モードや記号、スイッチは必要に応じて手動で戻してください。

部分ブロックでなめらかに見せる

通常のバーは塗るマスの数を四捨五入で決めるため、マス単位でしか進捗を表せません。10マスなら63%も57%も同じ「6マス」になります。これを補うのが「なめらか」の設定です。仕組みは、1マスをさらに8段階に分けて描くというもの。Unicodeには ▏▎▍▌▋▊▉ という、左から少しずつ幅が広がっていくブロック文字が用意されています。塗りきれない端数が8段階のどれに当たるかを計算し、対応する幅のブロックを境目に1つだけ差し込むことで、マスの途中までを表現します。10マスで63%なら、6マス分の █ を並べたあと端数に近い幅のブロックを1つ置き、残りを ░ で埋めます。

この表現は █ と幅が揃うことが前提なので、「なめらか」は █░ の記号を選んでいるときにだけ働きます。▰▱ や ●○ を選んでいるときにスイッチを入れても見た目は変わらず、マス単位の表示のままです。

READMEやチャットでの使いどころ

もっとも噛み合うのは、画像を置きにくい場所です。GitHubのREADMEでプロジェクトの完成度や翻訳の進捗を示す、課題管理のコメントで「ここまで終わりました」と一目で伝える、といった用途では、画像を用意して差し替え続けるよりテキスト1行を書き換えるほうが手軽です。コードブロックの中に入れれば等幅で表示されるため、複数行を並べたときに左端と右端がきれいに揃います。チャットでも、日次の進捗報告に1行のバーを添えるだけで、読み手はメッセージを全部読まなくても状況を把握できます。ただしバーの見た目は貼り付け先のフォントに左右されるため、大事な場所で使う前に一度試し貼りをしておくと失敗がありません。

活用シーン

• GitHubのREADMEで、開発や翻訳の進捗を画像なしで示したいとき
• チャットでの日次・週次の進捗報告に、一目で分かる指標を添えたいとき
• SNSで目標金額や読書・視聴の進み具合を投稿したいとき
• スプレッドシートのセルに、簡易的な棒グラフを文字で入れたいとき
• ゲームのプロフィールやステータス欄を、テキストだけで装飾したいとき
• 5段階評価やアンケート結果を、●○ で点の並びとして見せたいとき

同じ内容を継続して報告する場合は、記号とマス数をあらかじめ決めておき、割合だけを変えて出力すると前回との比較が正しく読めます。

ご利用にあたって

本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。バーに使用している記号はUnicode文字であるため、お使いのOS・ブラウザ・フォントによって表示が異なる、または正しく表示されない場合があります。とくに等幅フォントでない環境や幅の狭い画面では、マスの幅が揃わない、1行に収まらず折り返して崩れるといったことが起こり得ます。マス数を控えめにしておくと崩れにくくなります。ブラウザの種類・バージョンや端末環境によっては表示・動作が異なる場合があり、本ツールの仕様・内容は予告なく変更または提供を終了する場合があります。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。

進捗を伝える一行に、ぜひプログレスバー文字ジェネレーターをお役立てください。