kigoulab ウェブサイトのサイトストラクチャー（サイトマップ）を設計するとき、みなさんは何を使っているでしょうか？ エクセル、パワーポイント、イラストレーター、カクー、あげていくと切りがないかもしれません。今回はエクセルに着目して、ウェブ設計の２つのパターンを紹介したいと思います。
フローチャート(画面遷移図)でサイト設計をする。
比較的小規模なサイトの場合に有効です。ウェブサイトの各画面の関係が一望できて、全体像を把握しやすいのが特徴です。大規模サイトでも、サイトの全体像を把握するため、要素を省略して3〜4階層程度までのフローチャートを作成することがあります。このフローチャートを「ハイレベルサイトマップ」といいます。
欠点は、画面数が多く、階層が深くなってきた場合、作成が難しくなることです。さらに、正規の遷移ではなく、ある特定の画面から、別の画面へリンクを張っているとき、そのようなリンクが数多いと、エクセルでは記述しづらくなるという点です。複雑なフローチャートは、イラストレーターのようなグラフィックソフトで作成したほうが良いかもしれません。画面数が多くなると、チャートも大きくなります。プレゼンのためA全のプリンターで出力して持っていったこともあります。A3に収まるぐらいのチャートが理想的ですね。
ページ一覧表(コンテンツ・インベントリ)でサイト設計する。
全画面をグローバルメニューごとに整理し、階層ごとに整理し、一覧表のように作成する方法です。専門用語でコンテンツ・インベントリと言います。エクセルの帳票機能を使っていますので、サイト規模は数百を超えても記載が可能です。罫線ツールをつかって、グループと階層がわかりやすく整理するのがポイントです。あわせてリニューアル前後のURLや、英語版の要否、CMSの実装設計、作業の進捗状況など、各画面に必要な要素を追記するのも簡単です。ポイントは、全画面を記載することです。
欠点として、全体像の把握がしづらいこと、グループを超えたリンクをわかりやすく記載する方法がないということです。イレギュラーなリンク先は、備考欄等に特記して対応します。またホームのような、たくさんのリンクがあるページは、グループごとに分散して書かれてしまうため、その全体像の把握は難しいです。この場合は、先に述べたハイレベルサイトマップと併用すると良いでしょう。同様に、状況によってリンク先がことなるもの、インタラクティブな画面遷移も苦手です。これらも、ケースごとにまとめて記載し、備考欄に特記するなどして、対応するなどが考えられます。
今回は、エクセルを使ったサイト設計の2パターンをご紹介しました。ウェブサイトを制作し始めた20年前は、前者のフローチャートを一生懸命書いて、お客様にプレゼンしていました。扱うサイトが大規模化して、今は一覧表タイプを使うケースがほとんどです。特にCMSの設計を併記できる点を考えると、ある程度の規模のサイトは後者を使うことになるでしょう。
しかし、前述したようにいくつか問題点もあります。毎回試行錯誤のサイト設計、みなさんはどんなツールで、どんなやり方で設計してますか？ 昨今では、いきなりHTMLとCMSでサイトの構成を作ってしまって、動作モックアップとして検討するという荒技もあるようです。良い方法があったらぜひ教えてください。
（担当：小山智久）