インデントした箇条書きを貼るだけで、フォルダ構成図や階層ツリーを罫線付きのテキストで作れます。
このツールはブラウザの中だけで動いています。入力した内容が、外部に送信されることはありません。入力内容は外部に送信されません。
詳しくツリー図
左に箇条書きを入力すると、ここにツリー図が表示されます
入力のコツ
行頭の空白の深さで階層を判定します。半角スペース・タブ・全角スペースのどれでも使えます。「-」「・」「1.」などの箇条書き記号は自動で取り除くので、Notionやメモ帳の箇条書きをそのまま貼り付けられます。
ツリー図・フォルダ構成図 テキスト作成ツールとは？
インデント(行頭の空白)を付けた箇条書きを、「├──」「└──」「│」の罫線でつないだツリー図のテキストに変換するツールです。READMEに載せるフォルダ構成図や、手順書・引き継ぎ資料のディレクトリ説明、企画書の構成案など、階層を文字だけで伝えたい場面で使えます。
罫線を手で打つと、項目を1つ足すたびに縦線の位置を直す必要があります。このツールなら箇条書きを書き換えるだけで、線は自動で引き直されます。貼り付け先に合わせて、tree コマンドと同じ形、チャット向けのコンパクトな形、Word・Excel向けの全角揃え、記号が使えない環境向けのASCIIから選べます。
こんなシーンで便利です
READMEや技術ブログのフォルダ構成図
プロジェクトのディレクトリ構成を箇条書きで書き、tree形式で出力。コードブロックで囲んだ形でコピーできるので、GitHub・Qiita・Zennにそのまま貼れます。
手順書・引き継ぎ資料の共有フォルダ説明
「どのフォルダに何を置くか」をWordやExcelの資料に載せるときは全角揃えを選択。日本語フォントでも縦線が揃った図になります。
Slack・Teamsでの構成の相談
コンパクト形式なら横幅を取らずに階層を伝えられます。ファイル配置や資料の章立てを、画像を作らずにチャットで共有できます。
企画書・サイトマップの構成案
思いついた項目を箇条書きで並べてツリー化すると、親子関係の抜けや重なりに気づきやすくなります。章立てやページ構成の検討に使えます。
使い方は簡単 4ステップ
- 左の入力欄に、行頭の空白で階層を付けた箇条書きを入力するか貼り付けます。
- 「表示形式」から、貼り付け先に合った形式を選びます。
- 必要に応じて、フォルダ名の末尾の「/」や、先頭の「.」、コードブロックで囲むかを設定します。
- 右側のツリー図を確認して「コピー」を押すか、テキストファイルで保存します。
※「-」「・」「1.」などの箇条書き記号は自動で取り除くので、そのまま貼り付けて大丈夫です。
ご利用時の注意点
- 階層は行頭の空白の深さで判定します。子の項目は、親より深くインデントしてください。
- tree形式・コンパクト・ASCIIは、等幅フォントで表示したときに揃います。
- 全角揃えは、日本語フォントで表示したときに揃う形式です。等幅の英字フォントでは、逆にズレることがあります。
- 空行は無視されます。インデントのない行を複数書くと、それぞれが最上位の項目になります。
表示形式の使い分け
同じ箇条書きでも、貼り付け先によって揃う形式が変わります。
| 表示形式 | 線の形 | 向いている貼り付け先 |
|---|---|---|
| tree形式 | ├── / └── / │ | GitHubのREADME、Qiita・Zenn、VS Codeなどのエディタ |
| コンパクト | ├─ / └─ / │ | Slack・Teamsのコードブロック、横幅の狭い場所 |
| 全角揃え | ├─ / └─ / │(全角スペースで字下げ) | Word、Excel、Outlookなどのメール、社内資料 |
| ASCII | |-- / `-- / | | 罫線記号が文字化けする古いシステムやターミナル |
縦線がズレる原因の多くは、フォントによって罫線記号の幅が違うことです。英字の等幅フォントでは罫線は半角幅、日本語フォントでは全角幅で表示されるのが一般的なので、貼り付け先のフォントに合わせて形式を選んでください。
貼り付け先ごとにツリー図を崩さないコツ
作ったツリー図を、貼り付け先で見た目どおりに表示するためのポイントです。
GitHub・Qiita・Zennではコードブロックに入れる
Markdownの本文にそのまま貼ると、プロポーショナルフォントで表示されて縦線がズレます。バッククォート3つ(```)で囲んだコードブロックに入れると等幅フォントで表示されます。「Markdown のコードブロックで囲んでコピー」にチェックを入れれば、囲んだ状態でコピーできます。
Word・Excelでは全角揃えとフォントの指定をセットにする
全角揃えで出力し、貼り付けた範囲のフォントをMSゴシックなどの日本語の等幅フォントにすると最も確実に揃います。游ゴシックやメイリオでも多くの場合は揃いますが、英数字が混ざる行は数字の幅の分だけずれることがあります。
メールで送るときは受信側の表示を考える
受信側がHTMLメールかテキストメールかで、使われるフォントが変わります。社内でWindowsのOutlookが中心なら全角揃え、相手の環境がわからない場合はASCII形式を選ぶと、どの環境でも崩れにくくなります。
よくある失敗と対策
階層が1段ずれて、意図しない親子関係になる
同じ階層のつもりの行で、行頭の空白の数が違っていると、深い方の行が直前の項目の子として扱われます。コピー元によってタブと空白が混ざっている場合によく起きます。
💡 対策・解決策を見る▼
Wordに貼ったら縦線がガタガタになる
tree形式やコンパクト形式は、罫線を半角幅として組み立てています。日本語フォントでは罫線が全角幅で表示されるため、縦線の位置が行ごとにずれてしまいます。
💡 対策・解決策を見る▼
READMEに貼ったら罫線が崩れて見える
Markdownの本文として貼り付けると、行頭の空白が詰められたり、プロポーショナルフォントで表示されたりして、ツリーの形が崩れます。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.tree コマンドの出力と同じ形で作れますか
A. はい。表示形式の「tree形式」は、tree コマンドと同じ「├── 」「└── 」「│ 」の罫線で出力します。「先頭に『.』を置く」にチェックを入れると、先頭行が「.」になり、tree コマンドの出力とそろいます。実際のフォルダがなくても、構成案の段階で図を作れます。
Q.Word・Excel・メールに貼ると線がズレます
A. 表示形式を「全角揃え」にしてください。罫線記号は、日本語フォントでは全角幅で表示されることが多く、半角スペースと組み合わせた通常の形式では縦線がズレます。全角揃えは罫線と全角スペースだけで組み立てるので、MSゴシックや游ゴシックなどで表示したときに揃います。
Q.フォルダ名の末尾に「/」を付けられますか
A. はい。「下の階層がある項目の末尾に『/』を付ける」にチェックを入れると、子の項目を持つ行(フォルダ)にだけ「/」が付きます。ファイルとフォルダの区別がひと目でわかるようになります。もともと「/」で終わっている項目には重ねて付けません。
Q.インデントにタブや全角スペースを使っても大丈夫ですか
A. 大丈夫です。半角スペース・タブ・全角スペースのどれでも階層を判定します。混ざっている場合は、タブを半角スペース4つ、全角スペースを半角スペース2つとして計算し、画面に注意を表示します。意図どおりにならないときは、同じ階層の空白をそろえてください。
Q.行頭の「-」や「・」は消してから貼り付ける必要がありますか
A. 不要です。「-」「*」「+」「・」「•」や「1.」「1)」などの行頭の箇条書き記号は自動で取り除きます。Notion、メモ帳、Markdownの箇条書きをそのまま貼り付けて使えます。
Q.入力した内容は外部に送信されますか
A. 送信されません。変換はすべてブラウザの中で行い、サーバーへの送信や保存はしていません。社内のフォルダ構成や企画の構成案も安心して入力できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。