このサイトは、もともと手書きのHTMLでつくった静的サイトでした。文言を1行直すだけでもコードを開く必要があり、「直したいけど、まあ今度でいいか」が積み上がっていく状態です。
普段のコーディングではClaudeやCodexを使うことが多いのですが、最近のNotion AIはさまざまなMCPと連携できるようになっています。今後の記事作成とのつながりも考えて、今回はNotion AIとEmDashを組み合わせ、AIと一緒にサイトをまるごとつくり直しました。
気づけばトップページのデザイン案は21枚。その流れを、かいつまんで紹介します。
役割分担：AIにも得意分野がある
同じNotion AIでも、作業によってモデルを使い分けました。
- 土台づくり（GPT-6.1）：環境の構築、旧サイトの引っ越し、CMSとの接続
- ページのデザイン（Opus）：トップページの案出しと各ページのデザイン
- わたし：方針決め、フィードバック、最終判断
- Notion：計画・タスク・作業記録の置き場
- EmDash：Astroで動くCMS。Cloudflare上で動かしています
AIを1人の万能選手として扱うより、得意な仕事を割り振るチームとして扱う方がうまくいきました。
まずは土台：見た目はそのまま引っ越す
最初にやったのは、デザインを変えずに中身だけ新しい仕組みへ移すことです。旧サイトの5ページを、AstroとEmDashで動く新しい環境へ移しました。古いURLにアクセスしても新しいページへ転送されるようにしてあります。
確認には、新旧ページのスクリーンショットを使いました。画素単位で差がなくなるまで調整し、「見た目は同じ、中身だけ新品」の状態をつくってから、ようやくリニューアルに進みます。
デザインは「出してもらって、選ぶ」
ここからが本番です。デザインはOpusにファーストビュー（サイトを開いて最初に見える部分）の案を何枚か出してもらい、フィードバックして次の案を出してもらう、を繰り返しました。
記念すべき1案目がこちら。
写真とナチュラルな配色。きれいにまとまっていて、このままでも成立しそうです。
ただし、表現したいコンセプトからはズレていたので、フィードバックをします。
でも、ここからが長い旅でした。
- Round 1：写真・白背景・ダークの3方向
- Round 2〜3：セリフ体のエディトリアル風、太いサンセリフ
- Round 4〜5：写真＋大きなロゴ、写真をやめて方眼の背景へ
- Round 6〜8：光（グロー）とガラスの表現
- Round 9：コピーを主役にして、背景の文字をガラスに
9ラウンド、21案。案を並べて比べると、好き・嫌いを言葉にしやすくなります。AIは案を出すのが速いので、こちらは「選ぶ」と「言葉にする」に集中できました。
そして、たどり着いた最終案がこちら。
写真から始まって、最後は写真なし。1案目と並べると、もはや別の会社です。方眼の背景に、ガラスのような「Engineering & Crafts」の文字が浮かびます。
これを実際のサイトとして組み上げたのが、いま見ているこのサイトです。
デザインはコード、文言はCMS
固定ページは「デザインはコード、文言はEmDash」という分け方にしました。見出し・本文・箇条書きなどを部品として用意しておき、管理画面で文言を変えると、再ビルドなしでページに反映されます。デザインを崩す心配をせずに、文言だけを気軽に直せます。
AIはどこまで触っていいか
Notion AIはMCP（AIと外部ツールをつなぐ共通の仕組み）でEmDashにつながっているので、記事の下書きや項目の追加ができます。ただし、公開するかどうかは人が決める運用にしています。
AIに任せる作業と、人が判断する作業を分けておく。それだけで、安心して任せられる範囲が広がります。
やってみて
- 案出しはAI、選ぶのは人。この分担がいちばん楽しかった
- 計画と記録がNotionにまとまるので、作業が途中で止まっても再開しやすい
- 文言の修正は、管理画面から数分で済むようになった
- AIは手を速く動かしてくれるが、方針と最終確認は人の仕事
ちなみにこの記事も、Notion AIが下書きしてEmDashへ入稿しました。これからも、小さな気づきや作業の記録を気軽に書いていきます。
