ホームページの構成図とは？

2021-3-3
HP制作と運用

ホームページの制作に重要な「構成図」とは？

ホームページの構成図って、聞いたことありますか？
もちろん、ホームページ制作会社の方ならご存じだと思いますが、

ホームページ制作業者にホームページを作ってほしい、と思っておられるお客様は、

構成図、と言っても「？？？」

となろうかと思います。

簡単に言うと、ホームページの設計図のようなもの、と考えるとわかりやすいかもしれません。

設計図、というと、デザイン的なことでは、黄金比率だとか、タイポグラフィ、余白設定、文字のカーニングやらなんやら…他にも色々ありますが、「構成図」というのは文字通り、

ホームページを構成する図面、

なので、それを見れば、そのホームページが全体として

・どれくらいのボリュームで、
・どれくらいのページ数で、
・どんなことについて記載されているか？

が、俯瞰してみることができる、そんな感じのモノです。

サイト構成図、サイトマップ、などと言うこともあります。

しかし、サイトマップ、というとまた、別な意味もありますので、ここではわかりやすく「ホームページの構成図」と言っています。

ホームページの構成図とワイヤーフレームは別物

また、ホームページの構成図は「ワイヤーフレーム」と混同される事がありますが、ホームページの構成図とワイヤーフレームは、違います。

ホームページの構成図は、ホームページの全体像を示していて、ワイヤーフレームは、ホームページ内の1ページ毎の構成（レイアウトや、掲載内容の概略など）のことを言います。

わかりやすいですね。

構成図は、サイト全体。
ワイヤーフレームは、各ページ毎。

そして、ホームページを制作するにあたっては、この「構成図」なるものがとても大切なのです。

弊社では、まず、見積もり段階でこの構成図を作成します。

この時点で制度の良い構成図を作成するには、ヒアリングがとても重要です。

「そんなややこしいこと言わんと、とりあえずホームページ作ってよ。」

と、そういうお声も確かにいただくことはありますが、それでも、出来る限り良い結果を出せるホームページを作るために、この構成図を作りこむ必要があるのです。

うーーーん。作家さんが、何の構成も考えずに行き当たりばったりで小説を書き出して、話がとっちらかってそのうち、どこに着地すればいいのかわからなくなる、というそんな感じでしょうか。

ホームページを見ていて迷子になったことありませんか？

構成図を作らずに着手したホームページでよくあるのは、

・さっき見たページにもう一度アクセスしたくてもたどり着けない。
・リンク先が表示されないボタンやバナーがある。

こんなことです。
こんな経験したこと、皆さんもおありではないですか？

弊社では基本的に、ホームページのトップページから、全てのページに何らかの形で1クリックで飛べる形が望ましいと考えています。
※ちなみに、サイト構成と、リンク設計では、また、意味が異なります。

しかし、大規模サイトの場合はその限りではありませんし、また、ブログ記事のとても多い情報系サイトは、記事のカテゴライズが重要であり、単純に全ての記事にトップからリンクを貼ればよいというものではありませんが、そのホームページのメインコンテンツへのリンクは、基本的にトップページから1クリックでリンクします。

また、ホームページで迷子になりやすい構成は、階層が深いことが一つの大きな理由になっています。

階層が深いと、どうしても、1クリックでたどり着けないページが存在することになりやすいのですが、

弊社ではそんな場合も、トップページのレイアウトとしてカテゴライズしたメニューをできる限りテキストリンクにするなどして、
カテゴリ内の各下層ページへリンクする、というやり方をとっています。

例えば、下記の様なコンテンツがあるとします。