blog-nori.com | 栄養・精神・AI体験談のブログ

1. どこからでも記事を書ける環境を作る

ここまでの開発では、記事の編集は自分のパソコン上でしかできませんでした。
でも、ブログを運用していくなら、移動中にスマホで下書きを進めたり、出先で修正したりできる環境が必要です。
そこで、Sanityの管理画面（Sanity Studio）を本番サイトのURL（blog-nori.com/studio）からアクセスできるように設定しました。

Sanity側のアクセス許可（CORS設定）

ただし、URLを用意しただけではアクセスできません。
Sanityはセキュリティのため、あらかじめ許可されたドメイン以外からの通信を遮断する仕組みになっています。
Claudeから「本番ドメインをSanityの管理パネルで許可リストに追加してください」と教わり、設定を行いました。
これで、スマホのブラウザからでもログインして記事を編集できるようになりました。

URLの一本化（wwwリダイレクト）

あわせて、www.blog-nori.com にアクセスされた場合に blog-nori.com へ自動的に転送される設定も行いました。
Vercelの管理画面から設定できます。

これには2つの理由があります。
まず、URLが www あり・なしの2種類で存在していると、検索エンジンがそれぞれを別のサイトとして扱い、評価が分散してしまう可能性があります。
一本化しておけば、すべての評価が一つのURLに集約されます。
もう一つは、先ほどのSanity側の許可設定がシンプルになることです。URLが一つに統一されていれば、許可するドメインも一箇所で済みます。

2. 検索エンジンにサイトを正しく認識してもらうための設定

サイトを公開しただけでは、Googleなどの検索エンジンには見つけてもらえません。
検索エンジンは「クローラー」と呼ばれるプログラムを使ってインターネット上のサイトを巡回していますが、何の手がかりもなければ、自分のサイトにたどり着くまでに時間がかかります。
そこで、クローラーに向けた案内を3つ用意しました。

sitemap.xml（サイト全体のページ一覧）

自分のサイトにどんなページがあるのかを一覧にしたファイルです。
クローラーはこのファイルを読むことで、サイトの全体像を効率よく把握できます。Next.jsでは app/sitemap.ts というファイルを作ることで、自動的に生成される仕組みになっています。

code

// app/sitemap.ts
export default function sitemap() {
  const baseUrl = 'https://blog-nori.com';
  return [
    { url: baseUrl, lastModified: new Date() },
    { url: `${baseUrl}/articles`, lastModified: new Date() },
  ];
}

url にページのアドレスを、lastModified に最終更新日を指定しています。
記事が増えたらここにページを追加していくことで、クローラーに「新しいページができました」と伝えることができます。

robots.txt（クローラーへの指示書）

クローラーがサイトに来たとき、最初に読みに行くファイルです。
「このサイトは巡回してもいいですよ」という許可と、「サイトの一覧はここにあります」という案内を記載しています。

code

// app/robots.ts
export default function robots() {
  return {
    rules: { userAgent: '*', allow: '/' },
    sitemap: 'https://blog-nori.com/sitemap.xml',
  };
}

userAgent: '*' はすべてのクローラーを対象にするという意味で、allow: '/' はサイト全体の巡回を許可するという指定です。そして sitemap の行で、先ほど作ったページ一覧の場所を教えています。

メタタグとファビコンの設定

検索結果に表示されるタイトルや説明文（ディスクリプション）が適切に表示されるよう、layout.tsx のメタデータを整理しました。
ここで設定した内容が、Googleの検索結果ページにそのまま表示されます。
あわせて、ブラウザのタブに表示される小さなアイコン（ファビコン）も自分専用のものに変更して、サイトとしての体裁を整えました。

3. アクセス状況を把握するための解析ツール

サイトの成長を確認するために、Googleが提供する2つのツールを導入しました。

Google Search Console（検索エンジンからの見え方を確認する）

自分のサイトがGoogleの検索結果にどう表示されているかを確認できるツールです。
登録するには、「このドメインは自分のものです」という所有権の証明が必要でした。

具体的には、Googleから発行された「TXTレコード」という認証用の文字列を、VercelのDNS設定画面で追加するという作業です。
ドメインをXServerで取得し、サイトをVercelで公開しているため、この認証作業はVercel側で行う必要がありました。
Claudeに手順を確認しながら進めたところ、設定自体は文字列をコピーして貼り付けるだけのシンプルなものでした。

Google Analytics（GA4）（訪問者の行動を計測する）

サイトに来た人がどのページを見ているか、どのくらいの時間滞在しているかなどを計測するツールです。
GA4から発行される測定ID（NEXT_PUBLIC_GA_ID）を、第4回と同じ要領でVercelの環境変数に登録しました。
名前の先頭に NEXT_PUBLIC_ がついているのは、第4回で触れた通り、閲覧者のブラウザ側で計測を行うために必要な目印です。

設定後の「反映待ち」

両方のツールを設定した直後、管理画面にデータが全く表示されませんでした。
設定を間違えたのかと不安になりましたが、Claudeに聞いたところ「設定が反映されるまで数時間から1日かかることがあります。
コードに問題がなければ、あとは待つだけです」とのことでした。
実際、翌日にはデータの計測が始まり、自分のサイトへの最初のアクセスが記録されているのを確認できました。

1ヶ月半の開発を終えて

2025年12月にこのプロジェクトを始めたとき、僕にはNext.jsを触った経験が多少ありました。
ただ、なんとなく動くものは作れても、「なぜこのコードが必要なのか」を自分の言葉で説明できるかというと、正直あやしい部分が多い状態でした。

今回は進め方を変えました。
Claudeに対して「次は何をすればいいですか？」だけでなく、「なぜそうするんですか？」を毎回聞くようにしました。
main タグを使う理由、横幅を1152pxに制限する理由、環境変数をGitHubに載せてはいけない理由。
一つひとつは小さな問いですが、その答えを確認してから手を動かすことで、「なんとなく動いている」と「仕組みを理解して動かしている」の間にある差が、少しずつ埋まっていく感覚がありました。

すべてを完璧に理解できたとは思いません。
でも、わからないことが出てきたときに「何がわからないのか」を言葉にして、AIに聞いて、返ってきた答えを自分なりに整理する。
この繰り返しで1ヶ月半前には作れなかったものが、今は動いています。

この連載が、AIを使った開発に興味はあるけれどまだ踏み出せていない方にとって、「自分でもやってみようかな」と思えるきっかけになれば嬉しいです。

ブログを「動かす」ための環境構築とSEO対策