デザインで沼にはまった話と、AIでサイトの骨格を整えた記録【実践記#7】

3/7/2026

対象読者： AIを使ってサイト制作に挑戦しているけど、デザインの方向性が決まらずに詰まっている個人事業主・中小企業のWeb担当者

今回やったこと

前回までで、個別記事ページの表示問題は解決しました。今回はサイトの見た目と構造を整えることがメインです。具体的には以下を進めました。

作業量だけ見ると多いですが、AIの力を借りればここまで進められます。ただし、一か所だけ大きく詰まりました。

今回もっとも時間を取られたのが、CSSのデザインをダークモードで試した後に、ライトモードに戻す作業でした。

「ライトモードに戻してください」とCursorに伝えても、修正が中途半端だったり、関係のない部分まで書き換えられたりしました。「元に戻して」と再度指示しても、また別の問題が起きる。このループが続きました。

原因は2つありました。

OSの設定がダークモードになっていると、以下のコードが自動的に背景を黒にしてしまいます。

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}

「ライトモードにして」と伝えても、このブロックは削除されずに残っていました。

bg-[#0f1923] のような色指定が page.tsx などに直接書かれており、Cursorの修正で中途半端に残っていました。

Claudeにすべてのファイルのコードを共有し、「どのクラス名をどの値に書き換えるか」をファイル・行単位で明示したプロンプトを作ってもらいました。そのプロンプトをCursorに渡すことで一気に解決できました。

CursorだけでなくClaudeを間に挟む、という使い方の有効性をあらためて感じた場面でした。

今回の経験から感じた一番の教訓がこれです。

SanityはWordPressのテーマのように、最初からある程度の見た目が用意されているわけではありません。 コードをゼロから組み立てるため、完成イメージが持ちにくいです。

そのため「モダンなデザインにして」と伝えても、AIはそれぞれの解釈でデザインを組みます。自分の意図と違う方向に進んでしまっても、修正の指示がうまく出せない。結果として何度もやり直しが発生しました。

最初に参考サイトのURLを渡して「このデザインに近い形で作ってほしい」と指定しておけば、大幅に効率が上がったはずです。

今回は最終的に自社のWordPressサイト（bizinets.life）を参考に「これに近い形で、もう少しフラットにして」という指示に切り替えました。具体的な参照先があると、AIへの指示の精度が格段に上がります。

他のサイトをたくさん見て、自分がマネしたいと思えるデザインを事前に決めておく。これが非エンジニアがAIでサイト制作を進める上で、かなり重要なポイントです。

前回の記事でも触れましたが、今回あらためて実感しました。

Claude（このチャット）：
状況の整理と、Cursorに渡すプロンプトの作成

Cursor（コードエディタ）：
Claudeが作ったプロンプトをもとにコードを修正

Cursorだけで作業を進めると、「AIが過剰に動いて関係ない部分まで書き換えてしまう」という問題が起きやすいです。特にデザインの修正は影響範囲が広いので、Claudeで修正箇所を絞り込んでからCursorに渡すという手順が有効でした。

✅ ヘッダー（サイト名・ナビゲーション・ページ上部に固定）
✅ フッター（コピーライト表示）
✅ 記事一覧ページ（トップ・/posts の2か所）
✅ 個別記事ページ（サイドバー付き・2カラム構成）
✅ URL統一（WordPressと同じスラッグ形式）

まだデザインの細部は詰め切れていませんが、WordPressと同じ骨格はほぼ揃いました。次はドメインをSanityサイトに切り替えて、完全移行を目指します。

Sanityは「エンジニア向けのツール」と言われることがあります。実際、私もコードの内容はほとんど理解できていません。

それでも、ClaudeとCursorを組み合わせることで、サイトの骨格を一から作り上げることができました。

一つだけお伝えするとしたら、これです。

AIに最初から完璧を期待せず、詰まったら別のAIに渡す。この使い方ができれば、非エンジニアでもサイト制作の難易度は大きく下がります。

同じように挑戦しようとしている方の参考になれば幸いです。

いよいよドメインを bizinets.life に切り替えます。WordPressからSanityサイトへの完全移行です。

bizinets.life｜AIと一緒にサイトを育てる実験記録