個人サイト制作ロードマップ｜ブログとWebツールを作る全体像
個人サイト制作ロードマップ｜ブログとWebツールを作る全体像
個人サイト制作シリーズ この記事は「Next.jsで個人ブログ兼Webツールサイトを1から作る」連載の一部です。
初めての人でも順番に進められるよう、前提知識をできるだけ省き、つまずきやすいポイントもあわせて整理しています。
個人サイトを作ろうと思ったとき、最初に困るのは「何から始めればいいのか」です。
サーバー？ドメイン？Next.js？デザイン？記事？SEO？広告？
気づけば検索タブが30個くらい開き、PCより先に自分の脳が熱暴走します。
この記事では、個人ブログ兼Webツールサイトを1から作るための全体像を整理します。
まず決めること
コードを書く前に、サイトの方向性を決めます。
1. サイト名
2. 扱うテーマ
3. 誰に向けたサイトか
4. 記事以外に何を置くか
例えば、個人サイトなら次のように整理できます。
サイト名：自分のブログ名
テーマ：趣味、学習、Web制作、ゲーム、読書、個人開発など
対象読者：同じことに興味がある初心者や自分と似た人
置くもの：ブログ記事、Webツール、プロフィール、お問い合わせ
ここが曖昧なまま進めると、後から「このサイト、何をする場所だっけ？」となります。サイトも人間も、自己紹介は大事です。
個人サイトに必要な基本ページ
最低限そろえておきたいページです。
/
/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 は早めに用意しておくと安心です。
技術構成のおすすめ
この連載では、以下の構成を想定します。
Next.js App Router
TypeScript
Tailwind CSS
Markdown記事管理
静的出力
レンタルサーバーまたは静的ホスティングで公開
Next.jsを使う理由は、ページ構成を作りやすく、SEO設定もしやすく、ブログとWebツールを同じサイト内に置きやすいからです。
ブログだけでなくWebツールも置く理由
個人サイトでは、記事だけでも成立します。
ただ、Webツールがあるとサイトの価値が上がります。
記事：カードゲームの確率について解説する
ツール：実際に確率を計算できる
読むだけでなく使えるサイトになると、読者にとって便利です。さらに、記事からツールへ、ツールから関連記事へと内部リンクも作りやすくなります。
制作の順番
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. 記事とツールを増やす
大事なのは、いきなり完成形を目指さないことです。まずは「サイトとして一通り回る状態」を作ります。
完成の目安
以下がそろっていれば、サイトの器としてはかなり完成に近いです。
・TOPページがある
・記事一覧と記事詳細がある
・ツール一覧とツール詳細がある
・スマホで崩れない
・お問い合わせがある
・プライバシーポリシーがある
・免責事項がある
・sitemap.xmlがある
・robots.txtがある
・404ページがある
・記事がMarkdownで追加できる
個人サイトは完成品ではなく、盆栽です。たまに水をやり、たまに枝を切り、たまに「なんでここだけ崩れるの？」と語りかけます。
まとめ
個人サイト制作は、順番に分解すれば難しくありません。次の記事では、Next.jsで個人サイトを作るための初期設定を進めます。