031,ウェブサイト構築の工程（２）設計の工程

しっかりと企画（プラン）を立ててウェブサイト（ホームページ）構築に取り組み、細かな変更や修正を加えながら、完成に向けて制作を進めていきます。

そんなときに、指標にするものがあります。

それが、設計図です。

今回は、ウェブサイト（ホームページ）制作の２番目の工程、“設計”についてお話を進めていきます。

設計図がそれはもう、とても大切な理由

住宅建築に設計図がなければ、完成した住宅はおそらく、建築に携わる大工さんの思いつきや勘に頼って建てられたものになりますし、そもそも完成まで辿り着けるかどうかは微妙です。

これから旅行に行こうとしているのに、飛行機や電車の時刻も旅行の行程も宿泊するホテルの情報もなく、頭の中で描いたイメージだけで行動しようとすると、無駄な時間と費用がかかるうえに、まともに旅行を終えられるかどうかも怪しいですし、それがそもそも旅行と呼べるのかどうかという話になります。

それはもう、費用を気にせず気ままな運任せの放浪になるでしょう。時間も費用も気にしないのであれば、それでも構いませんが、限られた時間と予算の中で行動することを考えると、それほど非効率なことはありません。

住宅建築の設計図や旅行の時刻表と行程管理のように、たとえ当初、頭の中にどれだけ鮮明なイメージが描けていたとしても、人は一晩眠ると物事の大半を忘れてしまう生き物です。数日経てば、細かな箇所はほとんど忘却の彼方です。

だからこそ、描いたイメージを消えないように残しておくことが大切です。

そして、それはウェブサイト（ホームページ）も同じことです。

ウェブサイト（ホームページ）制作に関して多くの人が設計図をつくらない！？

だけど、信じられないほど多くの人たちがウェブサイト（ホームページ）を制作するときに、設計図を作らずに、頭で思い描いたことをいきなり形にしようとしています。

“試行錯誤の段階で、手を動かしながら完成形を模索する”という場合であれば、話は別です。しかし、事業活動で使う本番のウェブサイト（ホームページ）をつくる段階で、そんな思いつきのつくり方をしている人をよく見かけます。

それが奇跡的に、思い描いた通りのウェブサイト（ホームページ）に仕上がれば良いのでしょうが、大半は“なんか違う代物”が出来上がってしまっています。

その結果、放置状態になることが少なくありません。

そして、また思いつきでサイトをリニューアルして、“なんか違う代物”を作って、また放置されます。

これは以前のわたし自身がそうだったので、よく分かります。そして、こんなことを繰り返している人が多いことに本当に驚かされます。

だからあえて、ウェブサイト（ホームページ）制作には設計図が欠かせないということをお伝えしたいのです。

1ウェブサイト（ホームページ）構築の設計図って？

ウェブサイト（ホームページ）構築の設計図を分解すると、サイトマップとワイヤーフレームとディレクトリマップの3つになります。

ウェブサイト（ホームページ）の全体像を表すのがサイトマップで、個々のウェブページの構成図を表すのがワイヤーフレーム、情報と場所を整理したものがディレクトリマップになります。

ここからひとつずつ、ザックリですが、出来る限りわかりやすく解説していきます。

2ウェブサイト（ホームページ）全体を表すサイトマップ

最初にここで扱う“サイトマップ”は、「HTMLサイトマップ」や「XMLサイトマップ」ではなく、サイト全体の構成図のことです。ツリー状でサイトの全体像をつかめるもので、つまりサイト全体がわかるマップのことを指します。

ウェブサイト（ホームページ）の地図と考えていただければ大丈夫です。

3サイトマップの作成で気をつけるポイント

サイトマップは、頭の中にあるウェブサイト（ホームページ）のイメージを書き出すだけなので、作ろうと思えば簡単にすぐ作ることが出来ます。

出来ますが、書き出した時点がスタートで、そこからブラッシュアップしていくことで、結果的により良いウェブサイト（ホームページ）が出来上がります。ですので、ここはしっかり取り組んでおきたいところです。

では、気をつけるポイントとは何かというと、サイトの訪問者がページの回遊や遷移をしやすいようにマップを作ることです。

例えば、“会社情報”の中に、会社概要や沿革があるのは自然で良いと思いますが、同じ会社情報の中にサービスを利用した“お客様の声”が入っていると、サイトの訪問者に違和感を与えてしまうことになります。

サービスを利用した“お客様の声”を入れるのは、“サービス”の中にしておく方が自然ですし、訪問者も迷いません。

実際に、サイトを作り込んでいくと、“このコンテンツはどこに入れるのか？”という迷いが生じることが多々あります。

そんなときのためにあるのがサイトマップですので、サイトマップを作る段階で熟考しておけば、後の制作の工程で迷わなくなります。

4サイト内のウェブページの構成図を表すワイヤーフレーム

ワイヤー“針金”のフレーム“枠”という名称通り、針金で作られた枠組みを想像してください。

「ここの部分には文章を、ここに画像を、ここには動画を貼り付けて…」

といった具合でワイヤーフレームの作成を進めていきます。

5ワイヤーフレームの作成で気をつけるポイント

それは、ずばり細かく作りすぎないことです。

以前、大規模なウェブサイト（ホームページ）の制作プロジェクトに関わった時、会議室で関係者が集まってミーティングを行った際に、ディレクターの女性が実に細部まで作り込まれたワイヤーフレームを元にプレゼンテーションを始めたことがありました。

それは、今まで見たどのワイヤーフレームよりも美しく、実際の画像も配置されていて文章も書かれている…

それはもうワイヤーフレームではなく、彼女の中でのウェブサイト（ホームページ）の完成イメージ図になっていました。

それを見せられながら話を進めていく姿を見ていて、そもそもワイヤーフレームの役割というのは、ページのどこに何をどのように配置するかを検討するためのもので、完成イメージを眺めるものではないということに改めて気付かされました。

ワイヤーフレーム内に実際の画像や文章、それも作成者が意図しているものが入っていると、そこにばかり目が行ってしまい、全体を俯瞰的に眺めることができずに苦労しました。

そんなわけで、ワイヤーフレームを作る時は、本来の目的に沿って、シンプルに作成することがポイントです。

6情報と場所を整理するディレクトリマップ

ディレクトリマップの“ディレクトリ”とは、ファイルを分類したり、管理したりするための概念のことで、要はファイルを入れる入れ物のことを指します。

このことから、ものすごく簡単に言うと、ウェブサイト（ホームページ）のファイルを入れている場所を示したものがディレクトリマップです。

7ディレクトリマップの作成で気をつけるポイント

ディレクトリマップを作る段階で、とにかく情報を詰め込もうとする人が少なくありません。

ディレクトリマップは一般的にはエクセルなどのスプレッドシートで作成されることが多いのですが、情報量に気をつけないと、実際の制作時に求めている情報を探すのに一苦労することがあります。

なので、ディレクトリマップには最低限、次の事柄を簡潔に掲載しておけば十分です。

8３つの設計図が整ったら準備完了

大規模なウェブサイト（ホームページ）制作プロジェクトでは、この“設計”の工程に膨大な時間をかけることが少なくありません。

一度作成したサイトマップやディレクトリマップにミーティングで何度も修正を加えていきながら、ウェブサイト（ホームページ）全体の設計図の精度を向上させていきます。

そうしないと、この設計の段階をいい加減に進めたことで、後の制作の工程で多くの無駄が生じ、かける必要のない予算を使う羽目になります。

実際、昔、私が関わったウェブサイト（ホームページ）制作プロジェクトで、この設計の工程を甘く進めたために、後の制作の工程で行き詰まったことが何度かありました。

言い訳をすると、“作りながら、いろいろひらめくのでは？”という楽観的な発想で取り組んだのです。

その結果、当初思い描いた内容からかけ離れたウェブサイト（ホームページ）になってしまったという苦い経験をしたものです。

だからこそ、この設計の工程には時間と労力をかけて取り組んでほしいです。

そうすることで、あなたは思い描く通りのウェブサイト（ホームページ）を手に入れることができるはずです。