「WordPressでブログを始めよう！」 そう意気込んで管理画面を開いたものの、テーマの設定、配色の変更、プラグインの選定……。やることが多すぎて、結局何から手をつければいいか分からず、数時間が過ぎてしまった経験はありませんか？
実は、Web制作をスムーズに進めるための「鍵」は、WordPressの中ではなく、「Notion」にあります。
今回は、このサイト『h-dash works』を立ち上げる際に私が実際に使用した「Notionサイト設計書」の中身を丸ごと公開しながら、迷子にならないサイト制作のコツを解説します。さらに、最新の「AIを活用した爆速ページ構築術」もご紹介します！
「こんにちは！h-dash worksの案内役、橙（とう）です。今回は僕たちがこのサイトを作る時に使った秘密のノート……『サイト設計書』を初公開しちゃうよ！」
「ふん、どうせお前ら、いきなり色を塗り始めたりボタンを配置したりして、途中で『あれ、何作りたかったんだっけ？』ってなるんだろ。素人ほど、まずは手を止めて設計から入るのが近道なんだよ」
1. なぜ「いきなりWordPress」は失敗するのか？
多くの人が陥る罠は、「作りながら考えよう」とすることです。 Web制作には決めるべきことが山ほどあります。
- ターゲットは誰か？
- サイトのメインカラーは何色か？
- トップページはどんな順番で情報を並べるか？
- 投稿ページは1カラムか、2カラムか？
これらを「なんとなく」で進めると、デザインに統一感がなくなり、最終的には「なんだか素人っぽいサイト」が出来上がってしまいます。
Notionで設計書を1ページ作ることは、家を建てる前の「設計図」を作るのと同じ。これがあるだけで、作業の迷いがゼロになり、開発スピードが劇的に上がります。
2. 実録！『h-dash works』のNotion設計書はこれだ
では、実際に私がNotionにまとめている項目を紹介します。
① サイトの「軸」を決める基本情報
まずページの最上部に、このサイトが「誰に、何を届けるか」を言語化して置いています。
- サイト名： Hdashworks
- コンセプト： Web制作のノウハウを発信するナレッジベース
- ターゲット： 自力でサイトを作りたい人、WPカスタマイズを学びたい人
これを常に目に入る場所に置くことで、「この機能、ターゲットにとって本当に必要かな？」と自分に問いかけることができます。
② デザイン・カラーガイド（運用のルール化）
デザインで迷わないよう、使う色やキャラクターの役割を明記しています。
- メインカラー： 信頼感のあるディープネイビー
- アクセント： 親しみやすい橙（オレンジ）
- キャラ運用方針： 橙くんはポジティブな案内役、パン太は鋭い補足役。
特にキャラクターは、「初見の読者が戸惑わないよう、記事冒頭で必ず自己紹介（吹き出し）を入れる」といった具体的な運用ルールまで決めています。
③ ユーザー体験（UX）に基づいたレイアウト戦略
「おしゃれだから」という理由だけでなく、「なぜそのレイアウトにするのか」という理由を書き留めています。
- トップページ（1カラム）： モダンな公式サイト感を出し、上から下へストーリーを伝える。
- 投稿ページ（2カラム）： サイドバーにプロフィールや目次を置き、サイト内を回遊しやすくする。ただし、コード解説がメインの記事は「1カラム」に切り替えて可読性を優先する。
3. 【裏技】Gemini × Notion AI の「爆速連携」が最高にラクでおすすめ！
「設計書が大事なのは分かったけど、いちいち文字を入力して表を作るのがめんどくさい……」 そう思った方にこそ試してほしいのが、「AIの掛け算」です。実はこの設計書、私はほとんど自分でタイピングしていません。
現在のNotionには強力なAI機能が導入されています。これを利用した私のワークフローがこちらです。
- AI（Geminiなど）と対話する： 「こんなサイトを作りたい」「キャラクターの役割はどうしよう？」とチャットで壁打ちし、アイデアをブラッシュアップします。
- 指示文（プロンプト）を作ってもらう： アイデアがまとまったら、AIに「Notionに追記するための指示文を作って」と頼みます。
- Notion AIにコピペするだけ： その文章をコピーして、Notionのページ上でNotion AIのプロンプト欄にそのままペーストします。
これだけで、Notion AIが指示を瞬時に理解し、ページ内の表を自動で更新したり、新しいセクションを綺麗に装飾して作成・編集してくれます。
人間が汗水たらして文字装飾やレイアウトをいじる必要は一切なし。AIと会話してコピペするだけで、完璧な設計書が自動で出来上がっていくこの感覚は、一度味わうと手放せません！
「AI同士をバトンのように繋ぐだけで、あっという間に綺麗な設計書ができちゃうんだよね。便利な時代になったなぁ……！」
「人間がカチカチと手動でやってた時間を、AIが一瞬で終わらせてくれるんだからな。こういう便利なツールをケチらず使いこなす奴が、結局一番早く良いサイトを作れるんだよ」
4. 今日からできる！設計書作成の3ステップ
みなさんも、新しいサイトやブログを作る際は、ぜひ以下の3ステップから始めてみてください。
- Notionに1ページ作る 「[サイト名] 設計書」というページを新規作成します。
- AIと一緒に中身を固める コンセプトやターゲット、レイアウトの悩みをAIに相談し、まとまったらNotion AIに投げてページを自動構築します。
- ToDoリストを横に置く 「ロゴを作る」「プラグイン〇〇を入れる」など、残ったタスクをチェックリスト化し、1つずつチェックをつけながらWordPressを構築します。
5. まとめ：スムーズな制作は「準備」で決まる
Web制作を「もっとスムーズに」進めるためには、ツールを使いこなす技術以上に、「情報を整理する技術」、そして「最新のAIツールを味方につけること」が重要です。
しっかりとした設計図があれば、WordPressの構築で迷子になることは絶対にありません。
「設計書を作っておくと、次に何をすればいいかが一目でわかるから、作業がどんどん楽しくなるんだ！」
「効率よく作って、浮いた時間で中身（コンテンツ）を磨けってことだ。お前らもまずはNotionを開いて、AIに話しかけるところから始めてみろよな」
