無料サイトマップ・ワイヤーフレーム作成ツール｜Web制作の情報設計支援ツールの使い方

Web制作の情報設計（サイトマップ・ワイヤーフレーム）支援ツールを公開しました。ブラウザだけで動き、登録も不要です。

サイトマップやワイヤーフレームを作ってお客様に見せても、専門的すぎて直感的に伝わらない……。そんな実務での悩みから、「何がどこに載るか」をサクッと共有できるツールを作りました。

最大の特長は、ワイヤーフレームと「管理画面の更新箇所」を横並びで確認できることです。 打ち合わせ中に「ここを更新すれば、サイトのここが変わります」とひと目で伝えられるため、認識のズレを防ぎ、納品時のマニュアル作成や説明の手間も省けます。

私自身が制作の流れの中で「欲しかったもの」を形にしました。「資料を作っても上手く伝わらない」と悩む制作者の方にとって、便利な道具になればうれしいです。

目次

1. このツールでできること
2. こんな人に向いています
3. 【使い方①】プロジェクトをつくる
4. 【使い方②】サイトマップを整える
5. 【使い方③】ワイヤーフレームと管理画面
   1. セクションを編集する
   2. 管理画面で「更新の仕組み」を見せる
   3. PCとスマホを切り替える
6. 【使い方④】打ち合わせメモを取る
7. 【使い方⑤】共有モード：画面共有しながらの打ち合わせに
8. 【使い方⑥】まとめと書き出し
9. 【使い方⑦】データ連携と保存の仕組み
10. 今後のアップデートとご要望について

　

このツールでできること

「プロジェクト → サイトマップ → ワイヤーフレーム → まとめ」の4ステップで、情報設計のたたき台をつくり、そのまま打ち合わせに使えます。

• たたき台の自動作成
• サイトマップ作成
• ワイヤーフレーム作成
• 管理画面（CMS）の見本
• 打ち合わせメモ
• 共有モード（お客様用）
• まとめ・書き出し（PDFやMarkdown）
• データ連携

データはすべてお使いのブラウザの中に保存され、サーバーには送られません。アカウント登録も不要です。

　

こんな人に向いています

Web制作のディレクター・デザイナー・フリーランス

初回ヒアリングから構成案の提出までを、ツールを行き来せずに進めたい方

お客様と画面を見ながら決めたい方

口頭や文章だけでは伝わりにくい「ページの中身」を、形にして共有したい方

CMSの更新範囲を最初に合意しておきたい方

「どこをお客様が更新し、どこが制作時に固定されるか」で後で揉めたくない方

これから自社サイトをつくる発注者の方

業種を選ぶだけで構成のたたき台が出るので、制作会社に相談する前の頭の整理にも使えます

事務所と自宅など、複数のパソコンで作業する方

データ連携で同じクラウドのフォルダを選べば、どのパソコンからでも続きを作業できます

逆に、細部まで作り込んだデザインカンプをつくるためのツールではありません。デザインに入る前の「何を、どこに、どの順番で載せるか」を決める段階に特化しています。また、パソコン（とタブレットの横向き）での利用を前提にしています。

　

　

【使い方①】プロジェクトをつくる

「新しいプロジェクト」から、4つの質問に答えるだけで構成のたたき台ができます。

• プロジェクト名：
  例「あおば工務店 コーポレートサイト」
• サイトの種類：
  コーポレート・サービス・ブランド・EC・メディア・採用から複数選べます。「メイン」にした種類が、TOPページの構成の基準になります
• 業種：
  歯科・工務店・飲食店・学校・士業など21業種。その業種でよく使うページが、業種に合った名前で入ります（歯科なら「医院紹介」「診療メニュー」など）
• CMSの有無：
  お客様が更新するページがあるかどうか。「なし」にすると、すべて固定ページで組みます

コーポレート・サービス・ブランド・EC・メディア・採用から複数選べます。「メイン」にした種類が、TOPページの構成の基準になります

業種を選ぶと、ページ名だけでなく中身の言葉も変わります。たとえば「初めての方へ」の流れは、歯科だと「ご予約 → 問診・カウンセリング → 検査・診断…」、工務店だと「お問い合わせ → ヒアリング・現地調査 → プラン・お見積り…」といった具合です。料金表も、飲食店なら「ランチコース／ディナーコース」、宿泊なら「素泊まり／1泊朝食付き」になります。

打ち合わせの冒頭で、お客様と一緒に選んでいくと話が早く進みます。似た案件があれば、プロジェクト一覧の複製ボタンから始めるのもおすすめです。

　

【使い方②】サイトマップを整える

たたき台のサイトマップを、お客様の要望に合わせて整えます。ページごとに決めるのは3つだけです。

• ☰ をドラッグすると、並び順と階層を変えられます。
• ページを選んで Tab で下層、Enter で同じ階層にページを追加できます。キーボードだけでどんどん組めます。
• CMSページではカテゴリーの追加・削除・並べ替えもできます。
• 迷ったら「テンプレートに戻す」で初期状態に戻せます。

「どこをお客様が更新するか」をこの段階で合意できるのが、いちばんのポイントです。要件が曖昧なまま構築に入ると、後から「ここも自分で更新したかった」が出てきます。

　

【使い方③】ワイヤーフレームと管理画面

サイトマップから、全ページのワイヤーフレームを自動で組み立てます。画面は「左：ページとレイヤー」「中央：ワイヤー」「右：管理画面」の3つに分かれています。ワイヤーはあえてモノクロにし、写真や画像も入れられないようにしています。ここで決めるのはデザインではなく、「何をどの順番で載せるか」。色や写真の好みに話がそれず、構成に集中できます。

セクションを編集する

• セクションにマウスを乗せると編集メニューが出ます。レイアウト・個数・表示／非表示を切り替えられます。
• セクションの間にマウスを乗せると「＋ セクションを追加」が出て、その位置に新しいセクションを入れられます。一覧は「基本／信頼・実績／案内・情報／演出・ビジュアル／投稿」に分かれていて、業種に合わないものは最初から隠しています。
• 見出しや項目名は、ワイヤー上の文字をクリックして直接書き換えられます。ヒアリングしながら、その場でお客様の言葉に置き換えていけます。
• 左の「レイヤー」で並び順を変えられます。間違えても ⌘Z（Ctrl+Z）で戻せます。

　

管理画面で「更新の仕組み」を見せる

緑の点線を押すと右側には、WordPress風の管理画面が並びます。ここでの操作は、左のワイヤーにすぐ反映されます。

• 記事の追加・ゴミ箱への移動、左端の ⠿ をドラッグしての並べ替え
• カテゴリーの追加・削除（記事の編集画面からも追加できます）
• 詳細情報の入力項目（カスタムフィールド）の追加・名前の変更・削除

ワイヤーの緑の点線は、お客様が更新できる部分です。点線を押すと管理画面が「一覧 → 記事」の順に開くので、「ここを更新すると、サイトのここが変わります」をそのまま説明できます。CMSを触ったことがないお客様にも、納品後の運用イメージを持ってもらえます。

　

PCとスマホを切り替える

中央の仕切り（⇆）を左へドラッグするか、クリックするとスマホ表示に切り替わります。同じ内容がスマホでどう並ぶかを、その場で確かめられます。

　

【使い方④】打ち合わせメモを取る

画面の下には、どのステップにも「打ち合わせメモ」があります。サイトマップやワイヤーを見ながら、画面を切り替えずに話した内容を書き留められます。今回いちばん解消したかった「マルチタスク」に効くのが、このメモです。

• マークダウン記法が使えます。「# 」で見出し、「- 」で箇条書き（Tabで入れ子）、「—」で区切り線。書いたそばから見出しや箇条書きの見た目に変わり、.md（テキスト）で書き出してほかのアプリでもそのまま使えます。
• ワイヤーのセクションで「メモ」を押すと、「ページ名／レイヤー名」の見出しが自動で入ります。どの話がどの場所のものか、後から迷いません。
• 右側の見出し一覧から移動・並べ替えができ、「構成順に並べる」でサイトマップの順番に整理できます。
• 上部のバーをドラッグして高さを変えられます。下まで下げれば閉じます。話しながら簡単に書いて、打ち合わせの最後に「構成順に並べる」を押すだけで、そのまま議事録になります。

　

【使い方⑤】共有モード：画面共有しながらの打ち合わせに

サイトマップとワイヤーフレームの右上にある「▶ 共有モード」を押すと、編集用のボタンを隠したお客様向けの画面に切り替わります。

• サイトマップ：ページ数の集計（固定ページ／お客様が更新するページ）つきで、全体像を見せられます。
• ワイヤーフレーム：左にサイトマップ、中央にワイヤー、右に管理画面の3カラム。PC／スマホの切り替えや、注釈（緑の点線）の表示切り替えもできます。
• 管理画面の下には、いま開いている画面の説明が出るので、口頭の説明を補ってくれます。

Web会議に慣れたお客様となら、この画面を共有しながら打ち合わせるのがいちばん効率的です。「このセクションは要らない」「ここは自分で更新したい」といった話が出たら、「共有を終了」で編集に戻り、その場で直して、また見せる。「持ち帰って修正し、後日確認」の往復が減り、その場で認識をそろえられます。

＊ 画面共有のときは、ブラウザを全画面にすると見やすくなります。

　

【使い方⑥】まとめと書き出し

「まとめ」では、ページ数・CMSの構成・サイトマップ・打ち合わせメモを一覧できます。「このプロジェクトを書き出す」から、必要なものだけを選んで書き出せます。

• すべて（.pdf）：
  まとめ / サイトマップ / 全ページのワイヤー / メモ
• サイトマップ（.pdf）：
  ページ数 / サイトマップ / CMSで更新するページ
• ワイヤーフレーム（.pdf）：
  全ページのワイヤー
• サイトマップだけ（.xlsx）
• 打ち合わせメモ（.md）

打ち合わせが終わったら、そのままPDFをお客様に送れば議事録兼構成案になります。社内のデザイナーやエンジニアへの引き継ぎ資料にも使えます。

　

【使い方⑦】データ連携と保存の仕組み

このツールのデータは、ふだんはお使いのブラウザの中だけに保存されます。サーバーには一切送られないので、案件情報を入れても外に出ません。

そこに「データ連携」を使うと、パソコン内の好きなフォルダにも同じデータを自動で保存できます。GoogleドライブやDropboxの同期フォルダを選べば、事務所のデスクトップと持ち歩き用のノートPCなど、自分の複数のパソコンで同じプロジェクトを使えます。

1. フッターの「データ連携」を開き、「フォルダを選択して連携する」を押す
2. 同期フォルダの中に専用のフォルダ（例：ia-tanukie）をつくって選ぶ
3. 別のパソコンでも、同じフォルダを選ぶ

あとは編集するたびに自動で保存され、別のアプリから戻ってきたときに新しいデータを読み込みます。同じプロジェクトは、最後に更新した方が残ります。

注意点

• データ連携が使えるのは、PC版の Google Chrome と Microsoft Edge です。ツール自体もChromeでの利用をおすすめしています。
• 2台で同時に同じプロジェクトを編集すると、最後に保存した方の内容が残ります。同時編集には向きません。
• 共有フォルダを選ぶと、共有相手もデータファイルを開けてしまいます。自分専用のフォルダを選んでください。
• 節目ごとに「各種設定」のバックアップで .json を書き出しておくと安心です。

　

今後のアップデートとご要望について

このツールは、使ってくださる方の声を聞きながら育てていきたいと考えています。

たとえばCMSは、いまはWordPressにのみ対応していますが、ほかのCMSも追加していく予定です。「このCMSに対応してほしい」「この業種も入れてほしい」「こんなセクションが欲しい」といった声があれば、優先して検討します。

機能のご要望や不具合のご報告は、お問い合わせフォームからお気軽にお寄せください。ツール内の「使い方」「データ連携」などのページ下部にも、ご要望のリンクを置いています。

Web制作でいちばん時間がかかるのは、手を動かす作業よりも「伝わっていなかった」の手戻りだと感じています。同じ画面を見て、同じ言葉で話し、その場で形にする。そのための道具として使ってもらえたらうれしいです。

無料で、登録も不要です。まずはサンプルのプロジェクトを開いて、触ってみてください。　

　
無料サイトマップ・ワイヤーフレーム作成ツール｜Web制作の情報設計支援
https://ia.tanukie.jp/