個人サイト制作ロードマップ｜ブログとWebツールを作る手順

個人サイト制作シリーズ この記事は「Next.jsで個人ブログ兼Webツールサイトを1から作る」連載の一部です。
初めての人でも順番に進められるよう、前提知識をできるだけ省き、つまずきやすいポイントもあわせて整理しています。

個人サイトを作ろうと思ったとき、最初に困るのは「何から始めればいいのか」です。

サーバー？ドメイン？Next.js？デザイン？記事？SEO？広告？
気づけば検索タブが30個くらい開き、PCより先に自分の脳が熱暴走します。

この記事では、個人ブログ兼Webツールサイトを1から作るための全体像を整理します。

1. 最初にサイトの方向性を決める

コードを書く前に、サイトの方向性を決めます。

1. サイト名
2. 扱うテーマ
3. 誰に向けたサイトか
4. 記事以外に何を置くか

例えば、個人サイトなら次のように整理できます。

サイト名：自分のブログ名
テーマ：趣味、学習、Web制作、ゲーム、読書、個人開発など
対象読者：同じことに興味がある初心者や自分と似た人
置くもの：ブログ記事、Webツール、プロフィール、お問い合わせ

ここが曖昧なまま進めると、後から「このサイト、何をする場所だっけ？」となります。サイトも人間も、自己紹介は大事です。

2. 個人サイトに必要な基本ページ

最低限そろえておきたいページです。

/
 /blog/
 /blog/[slug]/
 /apps/
 /apps/[slug]/
 /about/
 /contact/
 /privacy-policy/
 /disclaimer/
 /not-found
 /sitemap.xml
 /robots.txt
 /ads.txt

ページ	役割
TOPページ	サイト全体の入口
記事一覧	ブログ記事を一覧で見せる
記事詳細	記事本文を表示する
ツール一覧	公開中のWebツールを紹介する
ツール詳細	実際にツールを使う
About	サイトの目的や運営者情報を示す
お問い合わせ	連絡手段を用意する
プライバシーポリシー	Cookie、広告、個人情報の扱いを示す
免責事項	情報利用や外部リンクの責任範囲を示す
404ページ	存在しないURLに来た人を案内する
sitemap.xml	検索エンジン向けのサイト地図
robots.txt	クロール方針を示す
ads.txt	広告販売者情報を示す

AdSenseの利用を考える場合も、about、contact、privacy-policy、disclaimer はサイトの内容に合わせて早めに用意しておくと整理しやすくなります。

3. この連載で使う技術構成

この連載では、以下の構成を想定します。

Next.js App Router
TypeScript
Tailwind CSS
Markdown記事管理
静的出力
レンタルサーバーまたは静的ホスティングで公開

Next.jsを使う理由は、ページ構成を作りやすく、SEO設定もしやすく、ブログとWebツールを同じサイト内に置きやすいからです。

4. ブログとWebツールを組み合わせる理由

個人サイトでは、記事だけでも成立します。
ただ、記事の内容に対応するWebツールがあると、読者は説明を読んだあとに実際の計算や操作を試せます。

記事：カードゲームの確率について解説する
ツール：実際に確率を計算できる

読むだけでなく使えるサイトになると、読者にとって便利です。さらに、記事からツールへ、ツールから関連記事へと内部リンクも作りやすくなります。

5. 制作の順番

1. サイトの方向性を決める
2. Next.jsプロジェクトを作る
3. 基本レイアウトを作る
4. TOP、Blog、Apps、Aboutを作る
5. Markdown記事管理を導入する
6. 記事詳細ページを作る
7. ツールページを作る
8. スマホ表示を整える
9. プライバシーポリシー等を作る
10. sitemap.xml、robots.txt、ads.txtを作る
11. 広告枠を設置する
12. 本番公開する
13. 記事とツールを増やす

大事なのは、いきなり完成形を目指さないことです。まずは「サイトとして一通り回る状態」を作ります。

6. 公開できる状態の目安

以下がそろっていれば、サイトの器としてはかなり完成に近いです。

・TOPページがある
・記事一覧と記事詳細がある
・ツール一覧とツール詳細がある
・スマホで崩れない
・お問い合わせがある
・プライバシーポリシーがある
・免責事項がある
・sitemap.xmlがある
・robots.txtがある
・404ページがある
・記事がMarkdownで追加できる

個人サイトは完成品ではなく、盆栽です。たまに水をやり、たまに枝を切り、たまに「なんでここだけ崩れるの？」と語りかけます。

7. まとめ

個人サイト制作は、順番に分解すれば難しくありません。次の記事では、Next.jsで個人サイトを作るための初期設定を進めます。

個人サイト制作ロードマップ｜ブログとWebツールを作る全体像