folder作り方を知りたい

個人サイトの設計図「サイトマップ」を作ってみよう

個人サイトの設計図「サイトマップ」を作ってみよう

個人サイトの設計図「サイトマップ」を作ってみよう - https://do.gt-gt.org/make-sitemap/

個人サイトを作りたい! そう思っても、何からやればいいのでしょうか。サーバー契約? それともテンプレート選び?

それらふたつももちろん重要なステップですが、まずはサイトマップを作ってみるのもよいかもしれません。

Web制作におけるサイトマップという言葉には、おおまかにふたつの意味があります。

  • Webサイトをつくる前に、必要なページをあらかじめ一覧にしたもの(この記事で紹介する「サイトマップ」はこっち)
  • Webサイトを構成するページを、検索エンジンや訪問者などに伝えるためのもの

今回は前者のほうのサイトマップについて紹介します。

個人サイトを作る際にサイトマップを活用すると、自分のサイトをイメージしやすくなりますし、効率的な制作に役立てることができますよ。

サイトマップを作る意味

サイトマップとは前述の通り、Webサイトに必要なページを一覧にしたもので、どのようなページを作る必要があるかを可視化するために制作します

  • サイトに必要なページを洗い出す
  • ページ同士の階層関係を明らかにする

サイト制作に入る前に、サイトマップを作っておくと、必要なページがどれだけあるか、ページ同士の関係性はどうなるかが、イメージしやすくなります。
特に、ある程度コンテンツの多いサイトだと、サイトマップを作ることでサイト制作が捗りやすくなるかもしれません。

コンテンツがさほど多くない個人サイトでも、あらかじめサイトマップを作っておくと、サイトの全体を想像することができるようになり、モチベーションになります

ホームページレンタルスペースを使う場合は、プランによっては作れるページ数に上限があるので、あらかじめサイトマップを作ることで必要なページ数を上限内におさめるようにするのも良い方法です。

doのサイトマップはこんな感じ

例えば、このサイトのサイトマップは、次のような感じです。

あるいは、こんな感じ。


とてもいろいろなコンテンツがあることが分かりますね。

また、「プログラム」コンテンツの中に、それぞれのプログラムごとのページが収まっていることがわかります。
例えば「プログラム」ページに飛ぶと、その先に各プログラムの専用ページへのリンクがあるとか、そんなイメージです。

創作系サイトで言うと、「小説」ページに飛ぶと、そこに各小説作品へのリンクがたくさん並んでいるようなイメージですね。

このように、ページ同士の階層関係もサイトマップであらかじめ明らかにしておくことで、サイト制作に役立てることができます。

イラストサイトのサイトマップの例

小説サイトのサイトマップの例

最初はざっくりでOK!

とはいえ、最初はどんなページが必要か、自分でもよく分からないかもしれません。

サイトマップの作り始めは、ざっくりでOK。大まかに「これはほしい!」と思ったページをまずは書き出してみましょう。手を動かしているうちに、あるいはサイト制作を進めるうちに「やっぱり、このページは欲しいな」とか「このページは不要かも」といった気付きが得られるかもしれません。

どんなページ構成にしたいか悩む……という方は、好きなサイトを見ながら、そのサイトのサイトマップを作ってみるのもいいかも。何かヒントが得られるかもしれません。

サイトマップはどんなツールで作ればいい?

サイトマップを作るためのツールは、何を使ってもOKです
イラストを描く人であれば、お手持ちのペイントソフトでもいいですし、なんなら紙とペンで手書きしてもよいでしょう。どんなページが必要か、ページ同士の階層関係を明らかにできれば、ツールは何でもOKです。

ちなみに、上記のdoサイトマップの表のようになっているものは、Googleスプレッドシートで作成しました。

作りたいページを増やしすぎないのも大切

サイトマップを作っていると、「これも欲しい」「あれも作りたい」と、どんどんページを増やしたくなることがあります。

ですが、最初から大規模なサイトを目指すと、サイト制作がなかなか終わらなかったり、公開後の保守や更新が大変になってしまうこともあります

まずは無理なく管理できる範囲から始めて、あとから少しずつページを増やしていくのもおすすめです。

サイトマップを活用して、楽しいサイト制作を!

サイトマップは、いわば個人サイトづくりのための地図です。

サイトマップを上手に活用して、サイト制作をより楽しいものにしましょう!

関連記事

HTML/CSS初心者のためのテンプレートの使い方
folder作り方を知りたい favorite 79

HTML/CSS初心者のためのテンプレートの使い方

SNSアカウントをまとめたい人必見!カンタンにプロフィールページが作れるサービス3選
folder作り方を知りたい favorite 19

SNSアカウントをまとめたい人必見!カンタンにプロフィールページが作れるサービス3選

iPad一台でhtmlテンプレートからサイトを作る方法
folder作り方を知りたい favorite 38

iPad一台でhtmlテンプレートからサイトを作る方法

【2024年版】個人サイトの作り方を難易度別で3つ紹介!カンタンお手軽な方法からガッツリ制作まで!
folder作り方を知りたい favorite 296

【2024年版】個人サイトの作り方を難易度別で3つ紹介!カンタンお手軽な方法からガッツリ制作まで!

CMSとは?同人・創作サイトをWordPress/freoで作る方法とメリットを紹介
folder作り方を知りたい favorite 23

CMSとは?同人・創作サイトをWordPress/freoで作る方法とメリットを紹介

スマホだけで創作・同人系個人サイトは作れる?無料ホームページ作成サービスを比較
folder作り方を知りたい favorite 37

スマホだけで創作・同人系個人サイトは作れる?無料ホームページ作成サービスを比較