Webサイト構成の考え方!基本的な作成手順や無料ツールを解説のアイキャッチ画像

SEO

更新日: 2024/5/18

Webサイト構成の考え方!基本的な作成手順や無料ツールを解説

character_balloon

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

まずは構成を考えることからだね~

character_balloon
character_balloon

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

じゃあ、まずは基本的な考え方から教えるね。

character_balloon

Webサイト構成とは?基本的な考え方を解説!

Webサイト構成の考え方!基本的な作成手順や無料ツールを解説の画像_2枚目
character_balloon

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

character_balloon

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

そのサイトが利用しやすいかどうかが決まるんだね!

character_balloon

でもどうすればわかりやすいサイトが作れるのか、とっかかりが全然つかめないよ……。

character_balloon
character_balloon

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

character_balloon

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

1.サイトマップ

Webサイト構成の考え方!基本的な作成手順や無料ツールを解説の画像_4枚目
character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

階層構造だと視覚的にわかるようになって便利だね!

character_balloon
character_balloon

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

character_balloon

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

2.ワイヤーフレーム

Webサイト構成の考え方!基本的な作成手順や無料ツールを解説の画像_6枚目
character_balloon

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

character_balloon

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

見やすいレイアウトのテンプレートみたいなものってないの?

character_balloon
character_balloon

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

3つの要素

1.ファーストビュー


2.メインコンテンツ


3.クロージング

character_balloon

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

character_balloon

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

メインコンテンツはそのサイトの主役となる部分だね!

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

Webサイト構成に役立つ無料ツールを紹介!

サイトマップでは階層を作るって言ってたけど、それって紙に書いて作るの?

character_balloon
character_balloon

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

character_balloon

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

無料なら挑戦しやすいかも!

character_balloon
character_balloon

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

サイトマップ作成に使える無料ツール

1.Excel


2.PowerPoint


3.Cacoo

無料ツール1.Excel

Excelは学校の授業でも使ってたけど、サイトマップも作れちゃうんだ!

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

Excelがない場合はGoogleのスプレッドシートでも同じことができそうだし、共有するときはむしろスプレッドシートの方がいいかもね。

character_balloon

無料ツール2.PowerPoint

character_balloon

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

character_balloon

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

character_balloon

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

ページ数が少なめのときはPowerPointの方がパッと見てもわかりやすそうだね。

character_balloon

無料ツール3.Cacoo

character_balloon

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

何ができるツールなの?

character_balloon
character_balloon

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

character_balloon

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

テンプレートを使ってサイトマップが作れるんだね!

character_balloon

みんなと話し合いながら作っていけるのも効率的で良さそうだなあ。

character_balloon
character_balloon

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

サイトマップの作り方を5ステップで解説!

character_balloon

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

character_balloon

必要なのは5ステップ。

character_balloon

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

サイトマップ構成の作成手順

1.サイトの目的を明確化する


2.競合サイトを調査する


3.必要なページを書き出していく


4.ページを分類する


5.サイトマップに書き起こす

よおし、頑張るぞ!

character_balloon

作成手順1.サイトの目的を明確化する

character_balloon

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

character_balloon

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

ターゲット層を絞りつつ、何のためのサイトなのかを徹底的に考えるのが大事なんだね。

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

作成手順2.競合サイトを調査する

character_balloon

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

character_balloon

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

character_balloon

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

自分のサイトに何が足りていないかがわかるし、逆に他のサイトに無い強みを見つけられるかもしれないね!

character_balloon

作成手順3.必要なページを書き出していく

character_balloon

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

character_balloon

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

character_balloon

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

私、案を出すのが得意じゃなくて……。

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

作成手順4.ページを分類する

character_balloon

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

character_balloon

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

どれとも仲間にならなそうなページはどうすればいいの?

character_balloon
character_balloon

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

character_balloon

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

作成手順5.サイトマップに書き起こす

character_balloon

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

character_balloon

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

character_balloon

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

繋がりを重視していたら、つい……。

character_balloon
character_balloon

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

character_balloon

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

Webサイト構成の作成におけるポイントを2つ紹介!

character_balloon

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

うん!でもせっかくなら、「ここを気を付ければもっと良くなる」みたいなコツを知りたいな。

character_balloon
character_balloon

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

Webサイト構成を作成する際のポイント

1.ユーザーの動線を想定する


2.ページの優先順位を決める

character_balloon

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

Webサイト構成のポイント1.ユーザーの動線を想定する

Webサイト構成の考え方!基本的な作成手順や無料ツールを解説の画像_30枚目
character_balloon

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

character_balloon

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

いくらトップページから他のページへの流れがスムーズでも、他がぐちゃぐちゃだったらダメってことだね。

character_balloon
character_balloon

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

確かに、商品を知るためにアクセスするときは商品紹介ページしか見ないし、その会社自体に興味があったら企業理念とかを中心に見ていくかも。

character_balloon
character_balloon

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

Webサイト構成のポイント2.ページの優先順位を決める

Webサイト構成の考え方!基本的な作成手順や無料ツールを解説の画像_32枚目
character_balloon

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

character_balloon

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

すべての情報をぎっしりにしようとすると労力がかかるし、強い目的がない人だとどのページを見ればいいかわからなくなってしまうもんね。

character_balloon
character_balloon

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

character_balloon

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

まとめ

character_balloon

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

まとめ

◆Webサイト構成を決める際は、サイトマップとワイヤーフレームを意識しよう


◆サイトマップを作成する無料ツールは、ExcelやPowerPointがおすすめ


◆目的を明確化にしつつ、ユーザー視点も忘れずに

これでわかりやすいサイトが作れそう!

character_balloon

今日は教えてくれてありがとう!

character_balloon
character_balloon

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

character_balloon

ブルー

SEO
マーケティングオートメーション(MA)
アフィリエイト
wordpress

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

最新の記事一覧
最新の記事一覧