ディレクトリマップとは、フォルダとファイルの階層構造を1枚の図にまとめたものです。どのフォルダの下にどのファイルがあるか、親子関係を線でつないで視覚的に表します。READMEに載せるツリー図、Webサイトのページ構成図、プロジェクトのフォルダ構造ドキュメントなど、「構造を人に伝えたい」場面で使われます。このツールを使えば、ブラウザ上でノードをドラッグしてつなぐだけで作図でき、PNG画像やJSONデータとして書き出せます。
フォルダ構造を人に説明したいとき、テキストだけの箇条書きでは階層の深さや枝分かれが伝わりにくく、かといって作図ツールを一から覚えるのは面倒——。README用のツリー図やサイトの構成図を「そこそこ見栄えよく、手早く」作りたいのに、ちょうどいい道具がない。そんなときに、フォルダとファイルの階層を図にすることだけに絞ったのがこのツールです。
この記事では、ディレクトリマップとは何かをかんたんに整理したうえで、CodeQuestが公開しているディレクトリマップ作成ツールの使い方と、見やすい図を作るコツを解説します。ノードの追加からコネクタでのつなぎ方、色やレイアウトの調整、PNG・JSONでの書き出しまで、実際の操作に沿って紹介します。ブラウザだけで完結し、登録は不要です。
ディレクトリマップとは：フォルダ階層を1枚の図にしたもの
ディレクトリマップは、ディレクトリ（フォルダ）とファイルの入れ子構造を、親子関係の線でつないで図にしたものです。「ディレクトリ」はフォルダとほぼ同じ意味で、その中にさらにフォルダやファイルが入っている階層構造を、木が枝分かれするように表現します。この形からツリー図（tree diagram）とも呼ばれます。
たとえば「srcフォルダの下にcomponentsフォルダがあり、その中にbutton.tsxがある」という関係は、文章で説明すると回りくどくなりますが、図にすれば一目で伝わります。ディレクトリマップの役割は、この「どこに何があるか」という構造を、見た瞬間に把握できる形にすることです。プログラムのソースコード、Webサイトのページ、業務ファイルの整理など、階層をもつものなら何にでも使えます。
ディレクトリマップは何に使う？主な3つの場面
ディレクトリマップが役立つのは、おもに「構造を自分以外の誰か（未来の自分を含む）に伝えたい」場面です。代表的な3つを紹介します。
1. README用のツリー図（プロジェクト構成の説明）
GitHubのREADMEやプロジェクトのドキュメントで「このリポジトリはどんなフォルダ構成になっているか」を示すツリー図は定番です。どのフォルダに何の役割があるかを図で示しておくと、初めてコードを読む人がどこを見ればいいか迷いません。CLAUDE.mdやエージェント設計などリポジトリ全体の設計を整理したいときは、Claude Codeのルール・エージェント設計術｜CLAUDE.mdとサブエージェント運用の実践知とあわせて、構成図から全体像を共有すると伝わりやすくなります。
2. Webサイトの構成図（サイトマップ）
Webサイトを作るとき、トップページの下にどんなページがぶら下がるか、URLの階層をどう切るかを図にしておくと、制作前に全体像を共有できます。こうした構成図は情報設計（インフォメーションアーキテクチャ）の可視化ツールで、ページ同士の関係を視覚的に表すものです。Nielsen Norman Groupも、サイトマップは「情報空間の視覚的な表現を提供し、ユーザーがどこへ行けるかを理解する助けになる」と述べており、大規模で複雑なサイトほど効果が大きいとしています（Nielsen Norman Group「Information Architecture」）。
3. フォルダ構造のドキュメント化（整理・引き継ぎ）
業務ファイルや素材データのフォルダ構成をチームで共有したり、命名ルールを決めて引き継いだりするときにも、図にすると認識のズレが減ります。「どのフォルダに何を入れるか」を図で示せば、口頭やテキストの説明より正確に伝わり、あとから見返すドキュメントとしても機能します。
このツールでできること
ディレクトリマップ作成ツールは、フォルダとファイルの構造図を「置く・つなぐ・書き出す」ことに特化しています。主な機能は次のとおりです。
| 機能 | 内容 |
|---|---|
| ノード | フォルダ📁・ファイル📄に加え、付箋・四角・円・ひし形を配置できる。ダブルクリックで名前を編集 |
| コネクタ（矢印） | ノード同士を線でつないで親子関係を表現。形状は直角／直線、端は片方向矢印・双方向・矢印なしから選べる |
| 色設定 | 色相環パレットから各ノードの色を指定。未設定時はテーマの既定色を適用 |
| 自動整列・枝分かれ | ほぼ揃った親子の矢印は自動でまっすぐ整列し、同じ親から伸びる複数の線もきれいに枝分かれ |
| ズーム・スクロール | ホイールでスクロール、⌘／Ctrl＋ホイールで拡大縮小。表示%クリックで100%にリセット |
| ダークモード | ダークモードを既定で搭載。☀／🌙ボタンでライト／ダークを切り替え |
| 書き出し | PNG画像として保存、またはJSONデータとして保存・復元 |
| 自動保存 | 編集内容はブラウザのlocalStorageに自動保存。次に開いたときも続きから作業できる |
ノードの種類は多いですが、基本はフォルダ📁とファイル📄の2つが主役で、これだけで階層は表せます。付箋・四角・円・ひし形は「ここは設定ファイル群」「この部分は外部連携」といった補足やグループ分けのための脇役と考えると迷いません。まずはフォルダとファイルで骨組みを作り、伝えたいポイントだけ図形や付箋で足す——という順番が、散らからず作るコツです。
作図したデータはすべてブラウザ内で処理され、外部のサーバーには送信されません。完全無料で、登録も不要です。
使い方：5ステップでディレクトリマップを作る
操作はおおきく5ステップです。むずかしい設定はなく、最初は「サンプル」を読み込んで動かしてみるのが早道です。
- サンプルを読み込む： まず「サンプル」を開くと、フォルダとファイルがつながった状態のマップが表示されます。どんな図が作れるか、操作感を確かめる出発点になります。
- ノードを追加する： フォルダ📁やファイル📄をキャンバスに置き、ダブルクリックで名前を入力します。付箋や四角などの補助ノードも使えます。
- コネクタでつなぐ： 親ノードから子ノードへドラッグして線を引き、階層の親子関係を表します。
- 見た目を整える： ノードの色を変えたり、ドラッグで位置を調整したりして見やすく整えます。ほぼ揃った矢印は自動でまっすぐ整列します。
- 書き出す： 完成したら、PNG画像として保存するか、JSONで保存して後日続きから編集します。
最初から完璧な図を目指す必要はありません。まず主要なフォルダだけを置いてつなぎ、あとから必要なファイルを足していくと、迷わず組み立てられます。
ノードを追加・編集する
ディレクトリマップの部品となるのがノードです。中心となるのはフォルダ📁とファイル📄の2種類で、これだけで基本的なツリー図は組めます。さらに、補足を書き込む付箋や、グループを囲む四角、強調用の円・ひし形も使えるので、単なる階層図に注釈やまとまりを加えられます。
ノードの名前はダブルクリックで編集できます。「src」「components」「button.tsx」のように実際のフォルダ名・ファイル名を入れていきましょう。複数のノードは範囲選択（空きスペースをドラッグ）やShift＋クリックでまとめて選べ、そのまま一括で移動したり、コピー＆ペーストで複製したりできます。似た構成のフォルダが並ぶときは、1つ作って複製すると効率的です。
コネクタで階層をつなぐ
ノードを置いたら、コネクタ（矢印）で親子関係をつなぎます。親フォルダから子フォルダ・子ファイルへドラッグして線を引くと、「このフォルダの中にこれが入っている」という階層が表現できます。矢印の形状は直角と直線から選べ、直角にするとファイルツリーらしい整った見た目になります。端の種類も、片方向の矢印・双方向（↔）・矢印なし（—）を切り替えられるので、用途に合わせて調整できます。
このツールの便利な点は自動整列です。親子のノードがほぼ揃っていれば矢印が自動でまっすぐになり、同じ親から複数の子が伸びる場合も線が自動できれいに枝分かれします。手作業で線の角度をそろえる手間がないので、ノードを置いてつなぐだけで、見られる図に仕上がります。
見やすいディレクトリマップにするコツ
ディレクトリマップは「全部載せる」より「伝えたい構造がひと目でわかる」ことが大切です。見やすくするための実践的なコツをまとめます。
- 粒度をそろえる： すべてのファイルを描くと図が渦巻きます。重要なフォルダと代表的なファイルだけに絞り、細部は「…」や付箋で補うと読みやすくなります。
- 色で役割を分ける： 「設定ファイルは灰色」「機能フォルダは青」のように色にルールを持たせると、種類がひと目で区別できます。使う色は3〜4色までに抑えるのが無難です。
- 上から下・左から右にそろえる： 階層の向き（縦か横か）を統一すると、視線が迷いません。自動整列を活かして、親→子の流れを一定方向にそろえましょう。
- 名前は実物どおりに： フォルダ名・ファイル名は実際のものと一致させます。図と現物がずれると、ドキュメントとしての信頼性が下がります。
たとえば、あるツールのリポジトリを説明する図なら、src（本体）・tests（テスト）・docs（ドキュメント）といった役割の異なる主要フォルダを最上段に並べ、その下に代表的なファイルを2〜3個だけぶら下げる、という構成にすると、細部に埋もれず全体像が伝わります。「見た人が最初に知りたいのは何か」を基準に、載せる情報を引き算していくのが、見やすいディレクトリマップへの近道です。
PNG・JSONで書き出す／自動保存で続きから
完成したディレクトリマップは、PNGとJSONの2通りで書き出せます。用途に応じて使い分けましょう。
- PNG（画像）： 図を1枚の画像として保存します。READMEやドキュメント、スライドに貼り付けたいときはこちら。画像なので、環境を問わずそのまま表示できます。
- JSON（データ）： 図の構造をデータとして保存します。あとで読み込めば、続きから編集を再開できます。構成を更新しながら使い続けたい図に向いています。
さらに、編集内容はブラウザに自動保存されます。作業の途中でタブを閉じても、次に同じブラウザで開けば前回の状態から再開できるので、保存ボタンを押し忘れて消えてしまう心配がありません。ただし自動保存はそのブラウザ内だけの記録なので、別のPCで開いたり長期保管したりしたい場合は、JSONで書き出しておくと確実です。
ショートカットで素早く描く
ノードの種類が多いディレクトリマップでは、ショートカットを覚えると作図が一気に速くなります。よく使うキーは次のとおりです（Windows／Linuxでは⌘をCtrlに置き換えてください）。
| 操作 | キー |
|---|---|
| 選択・移動 | V |
| フォルダ／ファイル | F ／ G |
| コネクタ | C |
| 付箋／四角／円／ひし形 | S ／ R ／ O ／ D |
| 削除 | Delete |
| 全選択 | ⌘＋A |
| コピー／貼り付け | ⌘＋C ／ ⌘＋V |
| 切り取り／複製 | ⌘＋X ／ ⌘＋D |
まずは「V（選択）」「F／G（フォルダ・ファイル）」「C（コネクタ）」の3つを覚えるだけでも、置く→つなぐの流れがスムーズになります。慣れてきたら複製（⌘＋D）を使うと、似たノードの量産が一気に楽になります。
作り方で押さえるポイントと次の一手
ディレクトリマップを作るときにいちばん悩むのは「どこまで細かく描くか」です。答えは目的によって変わります。README用なら、コードを読む人が最初に知りたい「主要フォルダの役割」がわかれば十分で、全ファイルを描く必要はありません。逆にファイル整理のドキュメントなら、実際の運用に使うフォルダはもれなく載せる、というように読む人が次に取る行動から逆算して粒度を決めるのがコツです。
そして、ディレクトリマップは作って終わりではなく、作った構造をどう運用するかまでつなげると価値が出ます。そもそもどんなページを載せ、どう分類して階層を決めるかという上流の工程は、サイト構造の設計手順｜ページ洗い出しから階層を組み立てる情報設計のやり方で解説しています。図で全体像を固めたら、次はそのフォルダ階層をどんなURLに落とし込むか、どんなディレクトリ構造にすれば検索エンジンとユーザーの双方にわかりやすいか、というURL設計・ディレクトリ構造の決め方【SEO観点】の判断に進みます。「洗い出し → 図 → URL」の順に詰めていくと、後戻りの少ないサイト設計になります。まずはこのツールで「見取り図」を1枚作るところから始めてみてください。
よくある質問（FAQ）
Q. このツールは無料ですか？登録は必要ですか？
完全無料・登録不要です。すべてブラウザ内で動作し、作図したデータが外部に送信されることはありません。編集内容はこのブラウザに自動保存されます。
Q. ディレクトリマップとツリー図は違うものですか？
ほぼ同じ意味で使われます。フォルダとファイルの入れ子構造を、親子関係の線でつないで図にしたもので、木が枝分かれする形からツリー図とも呼ばれます。このツールはその図をブラウザ上で作るためのものです。
Q. 作った図はどの形式で書き出せますか？
PNG画像とJSONデータの2通りです。READMEやスライドに貼るならPNG、あとで続きを編集したいならJSONで保存します。JSONは読み込めば同じ状態から作業を再開できます。
Q. 作りかけの図は保存されますか？
編集内容はブラウザのlocalStorageに自動保存されるので、タブを閉じても次に同じブラウザで開けば続きから作業できます。ただし別のPCや長期保管に備えるなら、JSONで書き出しておくと確実です。
Q. フォルダ・ファイル以外の図形も置けますか？
置けます。付箋・四角・円・ひし形が用意されているので、注釈を書き込んだり、グループを囲んだり、重要な部分を強調したりできます。単なる階層図に説明を加えたいときに便利です。
Q. スマホでも使えますか？
ブラウザで動作しますが、ノードのドラッグやコネクタ接続など細かい操作が多いため、マウスの使えるPCでの作図をおすすめします。書き出したPNG画像を確認するだけならスマホでも問題ありません。
Q. ダークモードとライトモードは切り替えられますか？
ダークモードを既定で搭載しており、☀／🌙ボタンでライト／ダークを切り替えられます。書き出す図の背景色に合わせて選ぶとよいでしょう。
まとめ
- ディレクトリマップとは、フォルダとファイルの階層構造を親子関係の線でつないで1枚の図にしたもの。ツリー図とも呼ばれる
- 主な用途はREADME用のツリー図・Webサイトの構成図・フォルダ構造のドキュメント化の3つ
- このツールは、ノードを置いてコネクタでつなぐだけで作図でき、自動整列できれいな図に。色設定・ダークモード・ショートカットにも対応
- 完成した図はPNG画像とJSONデータで書き出せ、編集内容はブラウザに自動保存される
- 粒度は読む人が次に取る行動から逆算して決めるのがコツ。作った構造は、URL設計やサイト構造の検討へつなげると価値が出る
フォルダ構造は、頭の中にあるうちは意外と整理できていないものです。まずは主要なフォルダをいくつか置いてつないでみると、全体像がはっきりします。ブラウザだけで完結し、登録も不要なので、気軽に1枚描くところから始めてみてください。
関連記事
サイト構造の設計手順｜ページ洗い出しから階層を組み立てる情報設計のやり方
URL設計・ディレクトリ構造の決め方【SEO観点で失敗しないルール】
Claude Codeのルール・エージェント設計術｜CLAUDE.mdとサブエージェント運用の実践知