AIと一緒に、自分のサイトをゼロから作ってみた
2026年3月、「もう一度ちゃんと自分の場所を作ろう」と決めた。
20kg痩せた話を人から聞かれることが増えたし、それを残せる場所が欲しかった。ずっとWebのディレクションをやってきたけど、最近は「もうやってないんですか」と聞かれることも多い。だったら今のやり方で、ちゃんといいものを作ろう。
そう思って、Next.jsとVercelをベースに、CMSには初めてSanityを選んで、ゼロからサイトを作り直した。リサーチから実装まですべてAI（Claude Code）と一緒に進めて、約3時間で形にしている。
Phase 1：土台を作る
Phase 2：データの型を決める
次にSanityのスキーマ設計。用意したのは4つ。
- post（記事）：タイトル、本文、カバー画像、タグ、日付、タイプ（journal / note）
- tag（タグ）：AI、n8n、登山、精密栄養学、業務改善…
- work（実績）：業種×やったこと（社名は出さない方針）
- author（著者）：名前、アイコン、プロフィール
カテゴリではなくタグで管理する設計にした。「AI × 登山」「業務改善 × 精密栄養学」のように、ジャンルをまたぐ記事を書きたいから。固定カテゴリだと窮屈になる。
記事にはjournalとnoteの2タイプを用意。「ちゃんとした記事を書かなきゃ」と思うと更新が止まるのは WordPress時代に痛感した。軽く投げられる箱を最初から用意しておく。
カラーパレットも決定。背景はオフホワイト（#F8F6F2）、アクセントはモスグリーン（#4A6741）。落ち着いてるけど地味すぎない。
Phase 3：デザインの迷走と決断
ここが一番時間を食ったフェーズ。
キャッチコピー問題
AIにお任せすると、最初は「テクノロジー × 身体性」というキャッチコピーをドーンと出すデザインが出てきた。私がテクノロジーや健康とか身体とかに興味があるから、そんな感じで作ってくれたっぽい。でも、おそろしくダサい。
雑誌レイアウトの再現
旧「月刊マツウラ」の雑誌レイアウトを再現する方向に転換した。
左カラム（約45%幅）にダーク背景+カバー写真+縦書き「月刊マツウラ」+PICKUP記事。右カラムにCONTENTS（目次）としてJournal / Note / Works / About / Contactへの導線。雑誌を開いたときの「左ページに表紙、右ページに目次」をWebに持ち込んだ形。
フォント選び：10種類試して、1つに決めた
元の「月刊マツウラ」は独自の太いフォントだったが、Webフォントでは再現できない。AIにフォント比較ページを作ってもらい、10種類×6パターンを一覧で比較した。
最初は明朝体（Shippori Mincho）× 極太ゴシック（Dela Gothic One）の「BRUTUSっぽい」組み合わせが良さそうだった。でも実際にサイト全体に適用すると、明朝とゴシックの混在が落ち着かない。
次にDela Gothic Oneで全体統一。今度はフォントがコンテンツより主張してしまう。
一周回って、Noto Sans JP一本に決めた。
- タイトル「マツウラ」：Black（900）
- 「月刊」：Light（300）
- セクション見出し：Bold（700）
- 本文：Light（300）
フォントの種類ではなく、ウェイト（太さ）の差だけでメリハリをつける。結果として写真や文章そのものが前に出てくるようになった。
速さ優先で、走りながら作る
以前の自分なら、もっと練ってから出していたと思う。でも今回は速さ優先。まず形にして、走りながら修正する。これもAIを使い出して、考え方が大きく変わったところだ。
完璧にしてから公開、じゃなくて、公開しながら完璧にしていく。このサイトも、これから少しずつアップデートしていく予定。