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

1. まずClaudeに聞いたこと：「何から始めればいいですか？」

Next.jsのプロジェクトは作った。Sanityのアカウントも用意した。
でも、エディタを開いて最初にやるべきことがわからない。
そこで僕は、Claudeに「サイトの全体像は決まったんですが、何から手をつければいいですか？」と聞きました。

返ってきたのは、いきなりコードを書く指示ではなく、「進める順番」の提案でした。
まず表示させたいデータ（中身）を用意する。
次にそのデータを流し込む外枠を作る。最後にデータを画面に並べる仕組みを書く。

最初に「中身」を作って、それから「箱」を用意する。
この順番に僕はちょっと意外に感じました。
なんとなく、先にページのデザインを作ってから中身を入れるものだと思っていたからです。
でも理由を聞いて納得しました。
中身がない状態でデザインを作ると、実際の文章を入れたときに表示が崩れても気づけない。
先にデータがあれば、常に「本番に近い見え方」を確認しながら進められる。

「何をやるか」だけでなく「どの順番でやるか」を最初に整理してもらえたことで、手が止まらずに済みました。

2. 「仮のデータ」を先に作る理由

ロードマップに沿って、最初に取り組んだのはダミーデータの作成でした。
app/data/articles.ts というファイルに、仮の記事データを用意します。

code

// articles.ts の中身（イメージ）
export const articles = [
  {
    id: 1,
    title: "Claudeとブログを作った1ヶ月半",
    category: "ai",
    publishedAt: "2026-02-10",
    excerpt: "AIを相棒にNext.jsでブログを作った過程の記録です...",
  },
  // ...他、計3〜5個のデータ
];

これは「本番のデータ」ではなく、あくまで開発中に使う「仮のデータ」です。
タイトル、カテゴリ、日付、抜粋文など、実際のブログ記事に必要になる項目を、先に形だけ用意しておきます。

なぜ本番の記事を書く前にこれを作るのか。
Claudeに聞いたところ、「中身が空のままデザインを作ると、実際の文章を入れたときに表示が崩れても気づけない」とのことでした。
たとえば、タイトルが1行で収まる前提でデザインしたのに、実際には2行になる記事がある。
カテゴリ名の長さが想定と違っていて、レイアウトがずれる。そういった問題は、先にデータを入れておけば開発中に気づけます。

実際に作業してみると、この準備にはもう一つ良い効果がありました。
自分が発信したいジャンル——栄養、心身の健康、AI体験談——のデータが画面に並ぶと、「これが自分のブログになるのか」という完成後のイメージが具体的になります。
仮のデータとはいえ、自分の言葉が画面に表示されているのを見ると、作業のモチベーションにも繋がりました。

3. 「div」ではなく「main」を使う理由

次に、ダミーデータを表示させるための「外枠」を app/page.tsx に作りました。
ここでClaudeが提案してきたのが、コンテンツ全体を main というタグで囲むことでした。

僕はそれまで、何かを囲むときはとりあえず div を使うものだと思っていたので、「div じゃダメなんですか？」と聞きました。
Claudeの答えは、「div は透明な箱で、main は『ここが主役です』という看板がついた箱です」というものでした。

つまりこういうことです。
検索エンジンや音声読み上げソフトがページの中身を読み取るとき、「このページで一番大事な部分はどこだろう？」と探しに来ます。
main タグがあれば、すぐに「ここがメインコンテンツだな」と判断できる。
でも div だけだと、全部が同じ透明な箱なので区別がつきません。

見た目はどちらも変わりません。
ブラウザ上の表示は同じです。
でも、ページの裏側で検索エンジンやスクリーンリーダーに正しい情報を伝えるためには、「意味のあるタグ」を選ぶことが大切でした。
こうした目に見えない部分への配慮がSEOやアクセシビリティに繋がっていくことは知識としては知っていましたが、自分のコードで実際に意識して使い分けたのは、このときが初めてでした。

4. コンテンツの横幅を「1152px」に制限する理由

外枠ができたところで、次はコンテンツが表示される横幅の設定です。
Claudeは max-w-6xl（最大幅約1152px）という値を指定しました。

正直なところ、僕は「せっかく画面が広いのに、なぜわざわざ狭くするんだろう？」と疑問に思いました。
Claudeに理由を聞くと、これは読みやすさのための制限だと教えてくれました。

文章を読むとき、人の視線は左端から右端へ移動して、また次の行の左端に戻ります。
この横の移動距離が長すぎると、次の行の先頭を見失いやすくなり、読んでいて目が疲れてしまう。
1152pxという幅は、デスクトップ画面で文章を快適に読める基準として、多くのサイトで採用されている数値なのだそうです。

あわせて、左右に px-6（24px）の余白も設定しました。
これはスマホで表示したときのための配慮です。
余白がないと、文字が画面の端にぴったり張り付いてしまい、非常に読みづらくなります。

デザインの数値には一つひとつ理由がある。
「なんとなくこれくらい」ではなく、「読む人がどう感じるか」から逆算して決まっている。
このことを教わってからは、Claudeが提示する数値に対して「なぜその値なのか」を聞く癖がつきました。

5. データを画面に並べる「map」と、識別のための「key」

器ができて、中身（ダミーデータ）もある。
最後のステップは、データを実際に画面へ並べる作業です。

ここで少し前提の話をしておくと、このブログはNext.jsというフレームワークで作っています。
Next.jsは、Reactという技術の上に成り立っています。
Claudeはこの関係を「Reactはボタンやカードといった部品を作るための道具箱で、Next.jsはその道具を使って家を建てるための建築システムです」と説明してくれました。
ここから先の話は、その「道具箱」であるReactの機能を使う場面になります。

データを画面に並べるには、JavaScriptの map という機能を使います。
これは「配列（データの並び）に入っているものを、一つずつ取り出して同じ処理をする」というものです。
ここでは、記事データを一つずつ取り出して、それぞれを画面に表示する形に変換しています。

code

{articles.map((article) => (
  <div key={article.id}>
    <h2>{article.title}</h2>
  </div>
))}

ここでClaudeが「各要素には必ず key を設定してください」と教えてくれました。
コードの中にある key={article.id} がそれです。

画面に表示される見た目には何も影響しません。
でも、この key がないと問題が起きます。Reactは画面の内容が変わったとき、変わった部分だけを効率的に更新する仕組みを持っています。
記事が追加されたり順番が変わったりしたとき、「どれが変わったのか」を判断するために、各要素に固有の目印が必要になる。
それが key の役割です。

目印がなければ、Reactはどの部品を動かしていいかわからず、全体を作り直してしまうことがあります。
それは動作が重くなったり、予期しない表示の崩れに繋がります。
画面には見えない1行ですが、サイトが軽快に動くための大切な設定でした。

前編のまとめ

振り返ってみると、この5日間で僕がやったことは、実はそれほど多くありません。
ダミーデータを作り、外枠を組み、データを画面に並べる。ステップとしては3つだけです。

でも、その一つひとつに「なぜそうするのか」という理由がありました。
データを先に作るのは、本番に近い見え方を常に確認するため。main タグを使うのは、検索エンジンやスクリーンリーダーにページの構造を正しく伝えるため。
横幅を制限するのは、読む人の目が疲れないようにするため。key を設定するのは、画面の更新を軽快に保つため。

どれも「とりあえずこう書いておけば動く」ではなく、「こういう理由があるからこう書く」という判断でした。
そして、その理由はClaudeに「なぜですか？」と聞けば、毎回丁寧に返ってきました。

コードを書く前の「なぜ？」が、その後の迷いを減らしてくれる。
それがこの前編で一番実感したことです。

次回の後編では、この器の中に配置する「記事カード」のデザインを整え、スマホでもパソコンでも見やすく表示する「レスポンシブ対応」を仕上げていった過程を記録します。