対象の状況は、
- いまあるウェブサイト（ホームページ）がなんかしっくり来ない
- ウェブサイト（ホームページ）をつくっているが、どうも上手く進まない
- これから新しくウェブサイト（ホームページ）をつくる予定でいる
しっかり企画（プラン）を立ててウェブサイト（ホームページ）構築に取り組み、細かな変更や修正を加えつつ、完成に向けて制作を進めていく。
そんな時に、指標にするものがある。
それが、設計図。
今回は、ウェブサイト（ホームページ）制作の２番目の工程、“設計”についてお話を進めていく。
設計図がそれはもう、とても大切な理由
住宅建築に設計図が無ければ、完成した住宅は多分、建築に携わる大工さんの思い付きや勘に頼って建てられた代物になるだろうし、そもそも完成まで辿り着けるかどうかは微妙だろう。
これから旅行に行こうとしているのに、飛行機や電車の時刻も旅行の行程も宿泊するホテルの情報も無く、頭の中で描いたイメージだけで行動しようとすると、無駄な時間と費用がかかる上、まともに旅行を終えられるかどうか怪しいし、それがそもそも旅行と呼べるのかどうかという話になる。
それはもう、費用を気にしないで気ままな運任せの放浪になるだろう、時間も費用も気にしないのであれば、それでもいいだろうけど、限りある時間と予算の中で行動することを考えるとそれほど非効率なことは無い。
住宅建築の設計図に旅行の時刻表と行程管理、当初、頭の中にどれだけ鮮明なイメージが描けていたとしても、人は一晩眠ったら、物事の大半を忘れる生き物だから、数日過ぎれば、細かな箇所はほどんど忘却の彼方だ。
だからこそ、描いたイメージを消えないように残しておくことが大切。
そして、それはウェブサイト（ホームページ）も同じこと。
ウェブサイト（ホームページ）制作に関して多くの人が設計図をつくらない！？
だけど、信じられないほど多くの人達がウェブサイト（ホームページ）を制作する時に、設計図を作らずに、頭で思い描いたことをいきなり形にしようと試みている。
“試行錯誤の段階で、手を動かしながら完成形を模索する”と言うなら、お話は別だけど、事業活動で使う本番のウェブサイト（ホームページ）をつくる段階で、そんな思いつきのつくり方をしている人をよく見かける。
それが、奇跡的に思い描いた通りのウェブサイト（ホームページ）が仕上がればいいのだろうけど、大半は、“なんか違う代物”が出来上がってしまっている。
その結果、放置状態。
そして、また思いつきでサイトをリニューアルして、“なんか違う代物”を作ってまた放置。
これは以前のわたし自身がそうだったから、よく分かる。そして、こんな事を繰り返している人が多いことに本当に驚かされる。
だからあえて、ウェブサイト（ホームページ）制作には設計図が欠かせないってことをお伝えしたい。
1ウェブサイト（ホームページ）構築の設計図って？
ウェブサイト（ホームページ）構築の設計図を分解すると、サイトマップとワイヤーフレームとディレクトリマップの３つになる。
ウェブサイト（ホームページ）の全体像を表すのがサイトマップで、個々のウェブページの構成図を表すのがワイヤーフレーム、情報と場所を整理したものがディレクトリマップだ。
ここからひとつずつ、簡単だけど出来るだけわかりやすく解説していく。
2ウェブサイト（ホームページ）全体を表すサイトマップ
最初にここで扱う、“サイトマップ”は「HTMLサイトマップ」や「XMLサイトマップ」ではなく、サイト全体の構成図、ツリー状でサイトの全体像をつかめるもの、つまりサイト全体がわかるマップのこと。
ウェブサイト（ホームページ）の地図と考えていただければいい。
参考までに、
3サイトマップの作成で気をつけるポイント
サイトマップは、頭の中にある、ウェブサイト（ホームページ）のイメージを書き出せばいいだけなので、作ろうと思えば簡単に直ぐに出来てしまう。
だけど、書き出した時点がスタートで、そこからブラッシュアップしてくことで結果、より良いウェブサイト（ホームページ）が出来るので、ここはしっかり取り組んでおきたいところだ。
では、気をつけるポイントとは何か？というと、サイトの訪問者がページの回遊や遷移をし易いようにマップをつくることだ。
例えば、“会社情報”の中に、会社概要や沿革があるのは自然な感じでいいと思うが、同じ会社情報の中にサービスを利用した“お客様の声”が入っていては、サイトの訪問者に違和感を与えてしまうことになる。
サービスを利用した“お客様の声”を入れるのは、“サービス”の中にしておく方が自然だし、訪問者も迷わない。
実際に、サイトを作り込んで行くと、“このコンテンツはどこに入れるのか？”という迷いが生じることが多々ある。
そんなときのために、あるのがサイトマップなので、サイトマップをつくる段階で、熟考しておけば、後の制作の工程で、迷わなくなるのだ。
4サイト内のウェブページの構成図を表すワイヤーフレーム
ワイヤー“針金”のフレーム“枠”という名称通り、針金で作られた枠組みを想像してほしい。
「ここの部分には文章を、ここに画像を、ここには動画を貼り付けて…」
といった具合でワイヤーフレームの作成を進めていく。
5ワイヤーフレームの作成で気をつけるポイント
それは、ずばり細かく作りすぎないことだ。
以前、大規模なウェブサイト（ホームページ）の制作プロジェクトに関わった時、会議室で関係者が集まってミーティングを行った際にディレクターの女性が、実に細部まで作り込まれたワイヤーフレームを元にプレゼンテーションを始めたことがある。
それは、いままで見たどのワイヤーフレームよりも美しく、実際の画像も配置されていて文章も書かれている・・・
それはもうワイヤーフレームではなく、彼女の中でのウェブサイト（ホームページ）の完成イメージ図になっていた。
それを見せられながら話を進めていく姿を見ていて、そもそもそワイヤーフレームの役割というのは、ページのどこに何をどのように配置するか？を検討するためのもので、完成イメージを眺めるものではないと、いうことにあらためて気付かされた。
ワイヤーフレーム内に実際の画像や文章、それも、作成者が意図しているものが入っていると、そこにばかり目が行ってしまって、全体を俯瞰的に眺めることが出来ずに苦労した。
そんなわけで、ワイヤーフレームをつくる時は、本来の目的にそって、シンプルに作成することがポイントだ。
6情報と場所を整理するディレクトリマップ
ディレクトリマップの“ディレクトリ”とは、ファイルを分類したり、管理したりするための概念のことで、要はファイルを入れる入れ物の事を指す。
このことから、ものすごく簡単に言うと、ウェブサイト（ホームページ）のファイルを入れている場所を示したものがディレクトリマップになる。
7ディレクトリマップの作成で気をつけるポイント
ディレクトリマップをつくる段階で、とにかく情報を詰め込もうとする人が少なくない。
ディレクトリマップは一般的にはエクセルなどのスプレッドシートでつくられることが多いのだが、情報量に気をつけないと、実際の制作時に求めている情報を探すのに一苦労することがある。
なので、ディレクトリマップには最低限、次の事柄を簡潔に掲載しておけば十分だ。
ディレクトリマップに入れる事柄
- 管理ID：管理しやすいようにナンバリングしておく。
- ページのディレクトリ名とファイル名：ドメインの後の“/（半角スラッシュ）”で表記する名称・階層
- URL：実際にブラウザ上で表示されるURLを記載
- タイトル：ページタイトル
- ディスクリプション：120文字程度の説明文・対検索エンジン用
- コンテンツ：コンテンツを簡潔に説明しておく。
- 制作の進行状況：進行状況を記載。
8３つの設計図が整ったら準備完了
大規模なウェブサイト（ホームページ）制作プロジェクトでは、この“設計”の工程に膨大な時間をかけることが少なくない。
一度作成した、サイトマップやディレクトリマップにミーティングで何度も修正を加えて行きながら、ウェブサイト（ホームページ）全体の設計図の精度を向上させていくのだ。
そうしないと、この設計の段階をいい加減にして進めたことで、後の制作の工程で多くの無駄が生じることになり、かける必要もない予算を使う羽目になる。
実際、昔、わたしが関わったウェブサイト（ホームページ）制作プロジェクトで、この設計の工程を甘く進めたために、後の制作の工程で行き詰まった事が何度かあった。
言い訳をすると、“作りながら、いろいろひらめくのでは？”と、いう楽観的な発想で取り組んだのだ。
その結果、当初思い描いた内容からかけ離れたウェブサイト（ホームページ）になってしまったという苦い経験をしたものだ。
だからこそ、この設計の工程には時間と労力をかけて取り組んでいってほしい。
そうすることで、あなたは思い描く通りのウェブサイト（ホームページ）を手に入れることが出来るはずだ。
