全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
サイトマップとワイヤーフレームの作り方｜外注前に固める設計資料
2026.09.22
※この記事は2026年09月22日時点の情報をもとに作成されました。
デザインに入る前に固めておくべきなのが、サイトマップとワイヤーフレームです。
この2つが曖昧なままデザインを始めると、後から構成が変わり、デザインごと作り直しになります。
この記事では、外注前に用意する設計資料の作り方をまとめます。
- 1. サイトマップは「一覧表」で十分
- 2. URL設計は後から変えにくい
- 3. ワイヤーフレームに書くこと・書かないこと
- 4. 全ページ分は要らない
- 5. 外注先への共有はPDFかURLで
- 6. 設計資料は作り込むほど良いわけではない
- 7. よくあるご質問（FAQ）
サイトマップは「一覧表」で十分
きれいな階層図を描く必要はありません。実務では表形式が最も使えます。
列は次の5つで足ります。
- 階層（第1階層／第2階層）
- ページ名
- URL（ディレクトリ構成）
- テンプレート種別（共通下層／一覧／詳細）
- 備考（新規／既存流用／削除）
この表がそのまま見積もりの根拠になり、見積書の内訳とも一致します。
URL設計は後から変えにくい
ページ名は後で変えられますが、URLは公開後に変えるとリダイレクト設定が必要になります。
次を意識して決めます。
- 英小文字とハイフンで構成する
- 階層は深くしすぎない（2〜3階層まで）
- 日本語URLは避ける（共有時に文字化けするため）
- 将来増えるページを見越したディレクトリにする
ワイヤーフレームに書くこと・書かないこと
ワイヤーは情報の並び順と優先度を決めるための資料です。
書くのは、各ブロックに入る情報の種類、順番、おおよその面積、ボタンの遷移先。
書かないのは、色・フォント・写真の選定・細かい余白。ここを作り込むとデザイン工程と重複し、判断がぶれます。
全ページ分は要らない
ワイヤーが必要なのはテンプレート種別ごとに1枚です。
トップ、共通下層、一覧、詳細の4枚があれば、残りのページは共通下層に流し込めます。50ページのサイトでワイヤーを50枚作る必要はありません。
外注先への共有はPDFかURLで
形式より、次が守られているかが重要です。
- ページ名とワイヤーが対応していると分かること
- 注釈（この部分は管理画面から更新、など）が読めること
- 版が分かること（v1／v2など日付入り）
- 最新版がどれか明確なこと
デザイン工程に渡すときの整え方はデザインデータの渡し方もご覧ください。
設計資料は作り込むほど良いわけではない
サイトマップとワイヤーは、判断を早めるための資料です。
完成度を上げることより、関係者が同じ構成を見ている状態を早く作ることに意味があります。
RunLandは制作会社様の下請けとして、設計資料をもとに実装を承っています。外注・下請けサービスをご覧ください。
よくあるご質問（FAQ）
Q. ワイヤーフレームは手書きでもよいですか？
A. 構成が読み取れれば手書きでも問題ありません。写真で共有いただければ、こちらで確認しながら進められます。
Q. サイトマップの作成から依頼できますか？
A. はい。目的とコンテンツをヒアリングして、ページ構成のご提案から承ることができます。
Q. 途中でページを追加したい場合は？
A. テンプレートが既存のものと同じであれば、流し込み分の追加で対応できます。新しいテンプレートが必要な場合は別途お見積もりします。
まとめ
構成が固まっていれば、デザインも実装も迷いません。
まずはページ一覧の表を1枚作るところから始めてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 株式会社 RunLand 管理者
この記事を読んだ方はこんな記事も読んでいます
人気のWEBブログ
最新WEBブログ
-
NEW!
-
NEW!
-
NEW!
