【イラスト付き】Webサイト構成の考え方！基本的な作成手順や無料ツールを解説

ブルーちゃん、Webサイトを作ろうと思ってるんだけど、まず何から手を付ければいいかわからなくて……。

構成……ってどうすれば作れるの？

Webサイト構成というのは、コンテンツを分類して階層状にまとめることを言うよ。

「どこに」「何が」あるのか、ユーザーがすぐに見つけられるためにとっても重要なことなんだ。

Webサイト構成には、大きく分けてサイトマップとワイヤーフレームの2種類があるんだ。

これらを押さえていけばイメージがわくと思うから、1つずつ見ていこう～。

サイトマップは、サイト全体の設計図のようなものだよ。

例えばアパレルサイトだったら、商品ページや購入ページ、おすすめファッション紹介……みたいに、いろんなページからできているよね。

いろんなページがただ並んでいるだけだと、ユーザーが見たいページにすぐいけなくてブラウザバックしてしまうかもしれない。

そうならないように、関連のあるページごとに階層構造で繋いでいくんだけど、それを決めていく上で便利なのがサイトマップなんだ。

そうそう。複数人で作るときは意思疎通もしやすくなるよ～。

サイトマップの作り方は後で解説するから、もう少し待ってね。

サイトマップが内容の設計図だとすれば、ワイヤーフレームはデザインの設計図と言ってもいいかもしれないな～。

サイトのレイアウトを決めるためのもので、どのコンテンツをどの位置に置けば見やすいかな……というのを決めていくんだ。

サイトは基本的に3つの要素からできていて、それをベースにすれば作りやすいと思うよ。

ファーストビューは、サイトが表示されたときにすぐ目に入る部分だよ。

一目でそのサイトが何を目的にしているか理解してもらうのが大事だから、サイト名やキャッチコピーは必ず書こう。

正解！中身はサイトによって様々だけど、質の良いコンテンツを作るべきなのは共通しているね。

そしてクロージングは、ユーザーにアクションを起こしてもらうために重要な部分なんだ。

お問い合わせや購入ボタン、各種リンクをそれを促す言葉と共に設置することで、利益に結びつけられる可能性があるんだよ。

ううん、パソコン上で作れるよ。

いろんな機能が搭載された有料ツールもあるけど、無料ツールでもサイトマップは作れるんだ。

今回は3つ紹介するから、気になったものを試してみてね～。

Excelだと何十もページがあるサイトでも管理しやすいのが利点だよ。

途中で変更したいときも削除や追加が簡単だから扱いやすいんだ。

1階層目を1列目、2階層目を2列目……と配置していって、列ごとに色分けすると見やすくなるよ～。

中身の概要やタイトルも横に書いていけば、ひと目で全体像が把握できるね。

PowerPointには、階層構造の図が搭載されているんだ。

「挿入」タブの「SmartArt」をクリックすると「階層構造」が出てくるから、そこから好きなものを選んでね。

縦バージョンや横バージョンという違いだけでなく、画像を挿入できるものもあるよ。

Cacooは有料ツールなんだけど、30日間の無料トライアルがあるんだ。

Cacooは、図表を作成できるツールだよ。

テンプレートがたくさん搭載されているのに加え、複数人とリアルタイムで編集できるのが魅力なんだ。

ちなみに有料版は個人プランが月額660円、チームプランが月額1,980円だよ。

それじゃあ、いよいよサイトマップを作っていこう。

必要なのは5ステップ。

これに従って進めていけば見やすい構成ができるはずだから、一緒に頑張ろうね。

まずは、そのサイトを作る目的をはっきりさせよう。

ぼんやりしたイメージのまま作っていくと、何をしたいのかわからないサイトになってしまうんだ。

ここでポイントになるのは、「目的は1つだけ」ということ。

例えば販売も採用もしたいからといって、それを1つのサイトにしてしまうのはNG。

ターゲット層も内容も全然違うから、どっちつかずになってしまうから注意してね。

研究もWebサイト構成も、先人に学ぶという姿勢が大切だよ。

もちろん丸パクリはダメだけど、0から生み出すのは無謀。

だからいろんなサイトを見て、上手なやり方を参考にして作ってみよう。

目的を達成するために必要なページを、思いつく限り書き出していこう。

階層は気にせず、とにかくたくさん出す！

ただし、数を出そうとするあまり、目的から脱線しないように気を付けてね。

複数人で作る場合はブレインストーミングをするといいよ。

みんなで自由に意見を出し合って、それを批判せずに互いのアイデアを発展させていく手法なんだ。

他の人のアイデアをたくさん聞いているうちに新しいことが思いつくかもしれないよ。

ページが出きったら、グループごとに分類していこう。

例えば企業のサイトだったら、企業理念と代表挨拶は同じグループに入れる、みたいな感じだよ。

無理にどこかに入れ込まずに、除外しておいた方がいいかな。

もったいないからとあれこれ詰め込んで、せっかくの分類がぼやけてしまわないように注意してね。

分類が済んだら、いよいよサイトマップに書き起こしていこう。

今度は階層をしっかり意識してページを配置してね。

……ってイエローちゃん、どんどん階層が深くなってない？

ページが全部独立しているのも見にくいけど、何度も別のページに移動しないといけないのもイライラの素になってしまうんだ。

だから多くても3階層目までにとどめるのがおすすめだよ。

Webサイト構成の方法はわかったかな？

オッケー。じゃあ最後にポイントを紹介するね。

SEOにも効果が期待できるから、気になる人は要チェックだよ。

サイトはユーザーに利用してもらってこそだから、ユーザーがどこからアクセスしてきてどういう動きをするのかを想定することが大切だよ。

ユーザーは必ずしもトップページから入ってくるわけじゃなくて、広告からかもしれないし、検索結果で出てきたページからかもしれないよね。

それに、自分たちのサイトに何を期待しているかによっても動線は変わるよね。

だから、何を目的にしてやってくるユーザーがいるのかということを想定して、それがスムーズになる構成になるよう逆算していくのがポイントだよ。

ユーザーが求めるページへスムーズにたどり着ける動線が固まったら、それに基づいてページの優先順位を決めよう。

ニーズのある情報は手厚く、そうでもない部分は補助的なものと考えて各ページを作れば、メリハリのあるわかりやすいサイトになるよ。

注意してほしいのは、制作側が見てほしい部分を打ち出しすぎないこと。

もちろん目的に沿ったサイト作りが大事なんだけど、そこにユーザーの視点がなくなると独りよがりになるから気を付けてね。

Webサイト構成についてまとめるとこんな感じかな～。

どういたしまして。またいつでも聞いてよ～。