結論：ツリー構造は「目的別に記号を使い分ける」のが最も実用的です

あなたがディレクトリ構造やフォルダ階層を書き出すとき、最初に決めるべきは「誰に・どこで見せるか」です。結論から言えば、手書きやホワイトボードでは丸・四角・インデントで素早く描き、清書や共有では用途に応じてASCII記号と罫線記号を使い分けるのが最も実用的です。理由はシンプルで、手書きは速度と思考の整理が目的、デジタルの清書は正確さと文字化け回避が目的だからです。この2つを混同すると、「手書きはきれいに描けるのにデータにすると崩れる」「ツールで作ったツリーをメールに貼ると豆腐（□）に化ける」といったトラブルが起きます。

このページは、後から何度でも読み返せる「ツリー構造の記号と変換の総合リファレンス」として構成しました。手書きの便利な描き方から、テキストでの清書、コマンドやツールによる自動生成、各環境への変換とコピペ用サンプル、そしてあらゆる手法のメリット・デメリットまで網羅しています。前提知識は不要です。専門用語には初出時に簡単な説明を添えていますので、初めての方も順番に読み進めてください。

この記事は、京都でホームページ制作・WEBサイト制作・WordPress構築を手がける株式会社ドラマが、サイト設計図やディレクトリ構造を日常的に扱う制作現場の視点でまとめています。「どの記号が崩れにくいか」「どのツールが共有に向くか」を実務で検証してきたからこそ書ける、再現性のある内容を意識しました。

そもそもツリー構造とは何か（前提の整理）

ツリー構造とは、情報を親子関係の階層で表した図のことです。一番上に「根（ルート）」があり、そこから枝分かれして下へ広がる様子が、木を逆さまにした形に見えることからこう呼ばれます。フォルダとファイルの関係、組織図、サイトマップ、商品カテゴリの分類など、身の回りの多くがツリー構造で表現できます。

ツリー構造を文字や図だけで表すとき、最大の課題は「枝分かれの線をどう描くか」です。ここで使うのが記号です。記号の選び方ひとつで、読み手が一瞬で構造を理解できるか、それとも崩れた表示に戸惑うかが決まります。だからこそ、記号の種類・変換・使い分けの知識が役立ちます。

覚えておきたい基本用語を先に押さえましょう。ノードは階層上の各項目（フォルダやファイルそのもの）、ルートは最上位のノード、子ノードはあるノードの一つ下、末端（リーフ）はそれ以上枝分かれしない最後のノードを指します。インデント（字下げ）は階層の深さを表す字下げのことです。これらは本文中で繰り返し登場します。

ツリー構造で使われる記号の種類を完全整理

ツリー構造の記号は、大きく4つのカテゴリに分けると整理しやすくなります。どれを選ぶかで、表示の安定性・見た目・入力のしやすさがすべて変わります。まずは全体像を押さえてください。

① ASCII記号（半角）によるツリー

ASCII記号とは、キーボードで直接入力できる半角文字のことです。ツリーでは主に次の記号を組み合わせます。

• |（パイプ／半角縦棒）：垂直方向の継続ラインを表します
• +（プラス）：分岐点を表します。「+–」と続けるのが定番です
• -（ハイフン）：水平のラインを表します。2文字以上連続させます
• `（バッククォート）：末端ノードの枝を表す際に使います（「`–」の形）
• \（バックスラッシュ）：環境によっては末端の枝に使います

最大の利点はどの環境でも文字化けしないことです。HTMLソース、GitHubのREADME、SlackやChatworkのチャット、メール本文など、文字コードを意識せず貼り付けられます。WEB制作の現場でディレクトリ構造を共有する際、ASCII記号は事実上の共通言語です。

ASCII記号によるツリーの例：

• project/
• |– index.html
• |– css/
• |   `– style.css
• |– js/
• |   `– main.js
• `– images/

② 罫線記号（Unicode・箱描き文字）によるツリー

罫線記号は、洗練されたツリーを描くための文字群です。Unicode（世界中の文字を共通番号で管理する仕組み）の「箱描き文字（Box Drawing）」を使います。代表的な記号は次のとおりです。

• ├：途中の分岐点を表します
• └：その階層で最後の分岐点を表します
• │：垂直方向の継続ラインを表します
• ─：水平方向のラインを表します

これらを組み合わせると、ファイルツリーやサイトマップが非常に見やすくなります。ターミナル（コマンドを入力する画面）で使う「tree」コマンドの出力もこの記号を採用しています。

罫線記号によるツリーの例：

• project/
• ├── index.html
• ├── css/
• │  └── style.css
• ├── js/
• │  └── main.js
• └── images/

見た目は美しい一方、環境によっては文字化けや表示崩れが起きやすいのが弱点です。フォントが対応していない環境では「□（豆腐）」に化けることがあります。

③ 全角記号によるツリー

全角の「｜」「└」「├」を使う方法もありますが、本格的なツリーには原則向きません。全角は等幅（文字幅がそろう状態）にならない環境が多く、インデントがずれて構造が読み取りにくくなるためです。日本語の文章中に部分的に使う程度なら許容範囲です。

④ 記号を使わないインデント方式

線の記号をいっさい使わず、半角スペースやタブによる字下げだけで階層を表す方法です。Markdown（文章を簡単な記号で装飾する記法）の箇条書きや、YAML（設定ファイルでよく使う記法）はこの方式に近い考え方です。線が無いぶんシンプルで崩れにくく、後述するツールとの相性も良好です。

• project
•   index.html
•   css
•     style.css
•   js
•     main.js

手書きでディレクトリ構造を書く便利な方法

まず「自分の頭を整理したい」「打ち合わせ中にサッと描きたい」場面で役立つ手書きの手法を、シチュエーション別に紹介します。手書きは速度と発想の自由度が魅力です。

方法1：インデント＋箇条書き（最速・最も汎用的）

左端に親、字下げして子を書く、最もシンプルな方法です。線を引かず、深さを字下げの量だけで表します。あなたが急いでメモを取りたいときは、まずこれを選んでください。

• メリット：とにかく速い。線を引かないので考えながら書ける。後からデジタル化しやすい
• デメリット：階層が深くなると、どの行がどの親に属するか見失いやすい。線が無いぶん視覚的なつながりが弱い
• 向いている場面：会議中のメモ、アイデア出し、3〜4階層程度までの浅い構造

方法2：縦線と分岐記号を手書きで再現する

紙の上で「│」「├」「└」を手で描き、tree コマンドのような見た目を再現する方法です。定規を使うとさらにきれいになります。

• メリット：親子関係が線で明確につながり、後から読み返しても迷わない。そのまま清書の下書きになる
• デメリット：書くのに時間がかかる。途中で項目を追加すると線を引き直す必要がある
• 向いている場面：清書前の下書き、保存して何度も見返すドキュメント、構造を人に説明する資料

方法3：箱（ボックス）と矢印で描く

各ノードを四角で囲み、親から子へ線や矢印でつなぐ方法です。組織図やサイトマップのように、横にも広がる構造を描くときに力を発揮します。

• メリット：横方向の広がりや並列関係を表しやすい。視覚的なインパクトが強く、プレゼンに向く
• デメリット：紙のスペースをすぐ消費する。深い階層には不向き
• 向いている場面：サイトマップの全体像、組織図、カテゴリ設計の俯瞰

方法4：マインドマップ形式（中心から放射状）

中心にルートを置き、放射状に枝を伸ばす方法です。厳密なディレクトリ構造というより、発想を広げながら階層を作りたいときに便利です。

• メリット：発想が広がりやすく、後から枝を足しやすい。全体を一望できる
• デメリット：上下の順序や厳密な階層を表しにくい。そのままデータ化しづらい
• 向いている場面：企画段階のブレインストーミング、コンテンツの洗い出し

手書きを後でデジタル化するコツ

手書きはあくまで下書きと割り切り、清書はテキストやツールに移すのが効率的です。スマートフォンで撮影して保存し、後述するテキスト方式やツールで打ち直すと、検索もコピペもできる資産になります。手書きの段階では「線の正確さ」より「階層の正しさ」を優先すると、清書がスムーズになります。

整理して見せる：デジタルでの清書・共有手法

ここからは「人に見せる」「保存して何度も使う」場面で役立つデジタルの手法を、ツールや環境ごとに整理します。それぞれにメリット・デメリットがあるので、目的に合わせて選んでください。

手法A：テキストエディタで手打ちする

メモ帳やVS Code（無料の高機能エディタ）などで、ASCII記号や罫線記号を直接打ち込む方法です。等幅フォント（文字幅がそろうフォント）を使うのが崩れ防止の鍵になります。

• メリット：完全に自由にレイアウトできる。特別なツールが不要。コピペで再利用しやすい
• デメリット：罫線記号の入力に手間がかかる。項目が増えると線の調整が面倒
• 向いている場面：README、仕様書、メールへの貼り付け

手法B：tree コマンドで自動生成する

WindowsやMac、Linuxのターミナルで使える「tree」コマンドは、実際のフォルダ構造を罫線記号付きで自動出力します。手で打つ必要がなく、正確さが保証されるのが最大の魅力です。Windowsでは標準で「tree」、Macでは追加導入して使うのが一般的です。

• メリット：実際の構造を正確に反映。手入力ミスがない。大規模な階層も一瞬で出力
• デメリット：実在するフォルダが必要（架空の構成は作れない）。出力が罫線記号なので環境によっては変換が必要
• 向いている場面：既存プロジェクトの構造共有、ドキュメント作成

手法C：Markdownの箇条書きで表現する

Markdownのリスト記法（行頭に「-」を置き、字下げで階層を表す）でツリーを表す方法です。GitHubやWordPressのブロックエディタ、各種ドキュメントツールと相性が良いのが特長です。

• メリット：書くのが速く崩れにくい。多くのツールで折りたたみ表示できる。検索性が高い
• デメリット：罫線のような視覚的な線は出ない。厳密な「ファイルツリー感」は弱い
• 向いている場面：WordPress記事、社内Wiki、手順書

手法D：作図ツール・オンラインツールで描く

図を描く専用ツールや、フォルダ構造をツリー記号に変換してくれるWeb上のツールを使う方法です。ボックス＋矢印型の見やすい図を作れます。ツール名は環境により多数あるため、ここでは特定の固有名詞は挙げませんが、「ディレクトリ ツリー 生成」などで探すと見つかります。

• メリット：見た目が美しく、プレゼン資料に最適。直感的に操作できる
• デメリット：テキストとして再利用しづらい。画像化すると検索・コピペができない
• 向いている場面：提案資料、クライアント向けのサイトマップ提示

手法E：表計算ソフトのインデントで整理する

表計算ソフトのセルに項目を入れ、列をずらして階層を表す方法です。項目数が多く、後から並べ替えや属性追加をしたいときに便利です。

• メリット：大量の項目を管理しやすい。URLや担当者などの情報を横に追加できる。並べ替えが容易
• デメリット：視覚的なツリー感は弱い。そのままでは記号付きツリーにならない
• 向いている場面：大規模サイトのページ一覧、コンテンツ管理表

記号変換の基本：ASCIIと罫線記号の対応表

既存のツリーを別の表記へ移すとき、どの記号がどれに対応するかを把握しておくと作業がスムーズです。下の対応を辞書代わりに使ってください。

• 垂直の継続ライン：罫線「│」 ⇔ ASCII「|（半角縦棒）」
• 途中の分岐：罫線「├──」 ⇔ ASCII「|–」または「+–」
• 末端の分岐：罫線「└──」 ⇔ ASCII「`–」または「\\–」
• 空白の継続部分：どちらも半角スペースで埋める（全角スペースは崩れの原因になります）

変換の実務では、テキストエディタの「置換」機能が役立ちます。罫線記号をASCII記号へ一括置換すれば、文字化けしやすいツリーを安全な形に作り変えられます。逆に、ASCIIから罫線へ変換すれば見栄えを整えられます。置換の前に必ず元のテキストを残しておくと、失敗してもやり直せて安心です。

環境別・記号の選び方とコピペの注意点

同じツリーでも、貼り付ける先によって最適な記号は変わります。代表的な環境ごとに整理しました。

WordPressに貼り付ける場合

WordPressでツリーを表示するなら、整形済みテキスト（preformatted）として扱うか、リスト（箇条書き）として組むのが安全です。通常の段落に罫線記号を貼ると、等幅フォントが効かずにインデントがずれることがあります。崩したくない場合は等幅で表示されるブロックを使い、半角スペースで字下げを統一してください。本記事のように箇条書きで一行ずつ並べる方法も、崩れにくく実用的です。

メール・チャットに貼り付ける場合

メールやチャットは等幅フォントとは限らないため、罫線記号より素のASCII記号が安全です。受け手の環境が不明なときほど、半角ハイフンとパイプで構成したツリーを選ぶと文字化けを避けられます。

ソースコードやREADMEに記載する場合

プログラムのコメントやGitHubのREADMEでは、罫線記号もASCII記号も使えますが、多人数で編集する場合はASCIIのほうが無難です。編集者の環境差による文字化けを未然に防げます。

ツリー構造を書くときのメリット・デメリット総まとめ

ここまでの手法を、改めて全体の視点で比較します。あなたが手法を選ぶときの判断材料にしてください。

• 手書き全般のメリット：思考の速度に追いつける／道具を選ばない／自由度が高い
• 手書き全般のデメリット：保存・検索・再利用がしづらい／修正に弱い
• ASCII記号のメリット：文字化けに強い／どこでも貼れる
• ASCII記号のデメリット：見た目がやや素朴／入力に手間
• 罫線記号のメリット：見た目が美しい／構造が直感的に伝わる
• 罫線記号のデメリット：環境依存で崩れやすい／入力が面倒
• ツール・作図のメリット：美しく俯瞰しやすい／プレゼン向き
• ツール・作図のデメリット：テキスト再利用が難しい／画像化すると検索不可

よくある誤解と注意点

ツリー構造の記号まわりには、いくつか誤解されやすいポイントがあります。先に知っておくとつまずきません。

誤解1：「罫線記号のほうが常に正しい」

罫線記号は見栄えが良いだけで、正しさとは関係ありません。共有先で崩れるなら、見た目が素朴でも崩れないASCIIのほうが目的にかないます。正しさは見た目ではなく「相手に意図どおり伝わるか」で判断すると考えてください。

誤解2：「全角スペースで字下げしてもいい」

全角スペースは幅が環境で変わりやすく、インデントがずれる原因になります。字下げは必ず半角スペースかタブで統一しましょう。混在も崩れのもとなので避けてください。

誤解3：「フォントは関係ない」

ツリーの整列は等幅フォントが前提です。プロポーショナルフォント（文字ごとに幅が異なるフォント）で表示すると、線がそろわず崩れて見えます。表示側のフォント設定も意識すると、見え方が安定します。

注意点：項目名に記号や全角が混ざるケース

ファイル名やフォルダ名そのものに「|」や「-」が含まれると、ツリーの線と紛らわしくなります。名前と線の記号が混ざるときは、名前を引用符で囲むなどして区別すると読み違いを防げます。

使う前に確認したいチェックリスト

ツリーを清書・共有する前に、次の項目を確認すると失敗が大きく減ります。後から読み返すときの点検表としても使えます。

• 貼り付け先の環境を確認したか（等幅フォントが効くか）
• 字下げを半角スペースかタブで統一したか
• 記号の種類を1つに統一したか（ASCIIと罫線を混在させていないか）
• 末端ノードの記号を最後の項目に正しく使っているか
• 項目名に紛らわしい記号が含まれていないか
• 元データのバックアップを残したか（置換前のテキスト保存）
• 共有後に相手側の見え方を一度確認したか

代替案：そもそも記号にこだわらない選択肢

状況によっては、線の記号を使わないほうが結果的に伝わりやすいこともあります。あなたの目的が「正確に伝える」ことなら、次の代替案も検討してください。

• 番号付きリスト：階層を「1／1-1／1-2」のように番号で表す。順序が重要なときに有効です
• パス表記：「project/css/style.css」のようにスラッシュ区切りで一行にまとめる。一つの場所を端的に示すときに便利です
• 表形式：階層・名前・役割を列で分けて表にする。情報量が多いときに整理しやすい方法です

記号付きツリーが万能というわけではありません。伝える内容と相手に合わせて表現方法そのものを選ぶと、ぐっと伝わりやすくなります。

WEB制作の現場でのツリー活用と私たちの視点

サイト制作では、ツリー構造が設計の土台になります。サイトマップ（サイト全体のページ構成図）をツリーで描くことで、ページの抜け漏れや階層の深すぎる箇所を早期に発見できます。深い階層はユーザーが目的のページにたどり着きにくく、検索エンジンの評価にも影響しうるため、ツリーで俯瞰して整理する価値は大きいのです。

株式会社ドラマでは、京都を拠点に創業2000年から26年にわたり、4800件を超えるホームページ制作・WEBサイト制作の実績を積み重ねてきました。サイト構造の設計段階でツリーを使って全体像を共有し、SEO対策・MEO対策・AIO対策まで見据えたページ設計を行うのが私たちの基本姿勢です。ディレクトリ構造を正しく整理することは、公開後の保守運用や更新のしやすさにも直結します。

また、補助金申請サポートでは470件を超える支援実績があり、WordPress構築やECサイト構築、LP制作、オウンドメディア運用まで、ブランディングから保守運用まで一貫してお任せいただけます。「サイトの構造から見直したい」「自社サイトの階層が複雑になってしまった」といったお悩みも、ツリーで全体像を整理するところから一緒に取り組めます。

まとめ：目的から逆算して記号と手法を選ぶ

ツリー構造の記号と変換について、手書きからデジタル清書、ツール活用、環境別の注意点まで網羅してきました。最後に要点を振り返ります。あなたが迷ったときは、ここに戻ってきてください。

• 頭の整理・速さ重視なら手書きのインデント方式
• 正確さ・自動化ならtreeコマンド
• 文字化け回避・どこでも貼るならASCII記号
• 見た目重視・対応環境が明確なら罫線記号
• プレゼン・俯瞰なら作図ツール
• 大量管理なら表計算ソフト

記号そのものに正解はなく、「誰に・どこで・何のために見せるか」から逆算して選ぶのが、もっとも失敗しない方法です。この記事をブックマークしておけば、次にツリーを書くとき必要な情報をすぐに引き出せます。

WEBサイトの構造設計やリニューアル、ディレクトリ整理を含めたホームページ制作のご相談は、株式会社ドラマへお気軽にどうぞ。お問い合わせフォームの送信、LINE相談、お電話（075-585-5352）、お見積り依頼のいずれでも承っています。創業26年・4800件超の実績と補助金活用のノウハウで、構造づくりから公開後の運用まで一貫してサポートします。詳しくは https://drama.co.jp/ をご覧ください。