Self-build Web with AI
AIを使った本格的な
WEBページの自主制作
AIに任せても、なぜかイメージが合わない。その正体と違和感の消し方を、 専用の指示文にして公開します。外注せず、自分の手で。
環境づくりから公開まで、ひととおり扱います。レクチャー（オンライン・任意）つき。
課題
Problem
悪いのは、あなたでもAIでもありません。
AIの作るページは完成度が高い。それなのに自分のサービスに載せると、 どこか素人っぽく見える。センスではなく、仕組みで説明がつく現象です。
01
好みは、言語化されていない
「良い」と感じる基準は人それぞれで、言葉にする機会もありません。 言葉になっていないものは、AIにも伝わりません。
02
AIは、平均に寄る
指示が曖昧なとき、AIは「よくある形」を選びます。だから完成度が高くても、 あなたのサービスの顔にはなりません。
03
形容詞では、伝わらない
「おしゃれに」で変わるのは雰囲気の平均値だけ。どこを・何と比べて・ どう変えるかまで言えて、初めて狙いどおりに動きます。
もっとおしゃれにしてください
モダンで洗練されたデザインに更新しました！
うーん、なんか違う。もっと本格的に
プロフェッショナルな印象を強化しました！
作り比べ
Comparison
同じ会社を、指示だけ変えて。
同じ会社の情報を、同じ時期のAIに渡しました。違うのは指示だけです。 その結果できた2つのページを、どちらも本物のまま公開しています。
Aいきなり、頼む。
「おしゃれに」しか渡せない——AIへの伝え方が、まだ手さぐり
会社のおしゃれなホームページを作成してください。まずはトップページから。会社情報は以下のとおりです。
トップページを作成しました！
この1往復だけでできたページです。出力には手を加えていません（案内の帯のみ追加）。
速さを求めるなら、完成度はこれで十分です。ただ、これをそのまま自分のページにするかと
考えると——うまく言えないけれど、何かが違う。その一拍が、このページの出発点でした。
B決めてから、頼む。
フォント・部品・中身を、順に決めてから渡す
指示の中身は、記事で公開します
順番に積み上げてできたのが、いま、ご覧いただいているこのサイトです。 この解説ページ自体も、同じ順番で作っています。
どちらも、完成度は高い。それでも並べると「何かが違う」と感じるはずです。 その“何か”の正体を言葉にして、指示に変える——私のたどった順番を、次にご紹介します。
押さえる順番
Method
私は、順番から入ります。
本格的なデザインは3つの段の積み上げでできている——作りながらたどり着いた、 私なりの整理です。土台と中身をAIと自分でつくれるようになり、つくり方そのものが変わりました。
よくある頼み方
頭の中の理想と違うものができあがる
③ 最後に人と磨く ── 心に残る仕上げ
② 次に決める ── 伝える中身
① 最初に決める ── 見た目の土台（最重要）
STAGE 1見た目の土台 ── ここから決める（最重要）
01
フォント
日本語サイトの「らしさ」は、まずフォントで決まります。決めずに任せると、 既定のフォントのまま進んでしまいます。
02
コンポーネント（素材）
ボタン・カード・見出しといった部品の形を、先に決めます。任せると 「どこかで見たよくある部品」だけで組まれます。
03
トンマナ
色・余白・角の丸みの、ページ全体でのルール。ここが揃うだけで素人感は 消え、1か所外れるだけで全体が崩れて見えます。
STAGE 2伝える中身 ── 土台の上に載せる
04
内容と中身
何を載せて、何を載せないか。ページの構成は、土台のあとに決めると 器に合わせて素直に決まります。
05
文章とコピー
言い回しとコピー。AIが書きがちな大げさな売り文句を、自分のサービスの 言葉に置きかえていきます。
06
イラストと写真
イラストと写真は、まず仮で置いて色味と雰囲気を決めます。ここが決まると、 撮影や作画を頼む内容まで固まります。
STAGE 3心に残る仕上げ ── 人と、すり合わせてつくる
本来は、ここがいちばんすり合わせの要る段です。言葉や参考画像だけでは、作り手は 同じものを見ていません。STAGE 1・2の言語化があってはじめて理想が正確に渡り、 頼む・自分でやる・学ぶのどれでも選べるようになります。
07
オリジナルのイラストとロゴ
サイトの顔です。描ける人に頼むか、感性があればご自身の手で。仮の絵が あるほど、仕上がりの相談は具体的になります。
08
キャッチコピーと心に残る文章
一行で覚えてもらう言葉です。土台と中身が決まっていれば、書ける人への 依頼はそのまま発注書になります。
09
印象に残る視覚効果
スクロールに合わせた動きなどの演出です。効かせどころを絞るほど印象に 残り、多用すると軽く見えます。
STAGE 1・2の6要素を具体的にどう指示するか——その指示文と使い方が、記事の本体です。 あわせて環境づくりと公開の手順も扱い、実演はYouTubeでも公開予定です。
クリエイティブとは
Creative
つくる、と、創る。
そもそも、クリエイティブとは何でしょうか。
決めて、形にする。その全部が、クリエイティブ。
ひらめきでも、生まれつきのセンスでもありません。誰に、何を、どう感じてほしいか。 それを決め、形にしていく——その道のりの全体を、私はクリエイティブと呼んでいます。
「AIで作れる人」と、「AIと創れる人」。
言葉は似ていても、意味はまったく違います。作るだけなら、指示ひとつでできます。 創るには、感じてほしいことを決め、足りない部分を頼む・自分でやる・学ぶから 選んで埋めていく——3つの段は、そのための地図です。
それは、事業づくりと同じです。
ページを創ることは、事業を形にすることと、よく似ています。思いつくのは一瞬でも、 深く考え、形にして、人と一緒に進めていくのは長い道のりです。 私も、ひとりで事業を営みながら、いま、その途中にいます。
だからこの記事は、教科書ではなく、同じ立場からの覚え書きです。 中小企業やフリーランスで事業を営む方の、働き方と生き方の両方が少しでも 豊かになるように——うまくいった話だけでなく、失敗のリアルも、 現場でそのまま使える形で書いています。
この順番を、私はページ以外の場面でも使っています。
- WEBページ制作この記事の本題です
- 資料・スライドづくり1枚ものから提案書まで
- クリエイターへの依頼伝わる発注の言葉になる
- 事業・商品づくり決めてから、形にする
記事の中身
Contents
つくる前と、つくった後まで、ひととおり扱います。
つまずくのはデザインだけではありません。環境づくりと公開の設定も、 記事では省かずに扱います。実際の操作は動画でもご覧いただけます。
01
つくる環境のつくり方
何を用意し、何を入れるか。いちばん最初の関門を、画面のとおりに迷わず進められる形でご案内します。
02
違和感の正体の解説
なぜ「自分のものに見えない」のか。原因を先に分解します。分かると、出す指示そのものが変わります。
03
専用の指示文と育て方
「おしゃれにして」の代わりに使う指示文を、6つの要素それぞれに収録。数語変えれば、すぐ使えます。
04
公開までの手順と設定
公開の設定から独自ドメインのつなぎ方、直したものの反映まで。ここまでで、ようやく人に見せられます。
※記事の一部は無料でお読みいただけます。詳しい目次と価格はnoteの記事ページをご覧ください。
実例
Example
いま見ているこのサイトが、実例です。
このコーポレートサイトは、外注せずこの記事で公開する方法そのもので作られています。 デザインの調整もスマホ対応も、AIへの指示だけで行いました。
コーポレートサイト本体
会社紹介・事業紹介・お問い合わせまで、すべてAIとの対話で制作。
サービス紹介ページ
イラストの生成から料金表まで。ページの追加も同じ方法で続けています。
作りものの実績ではありません。いまブラウザに表示されているページを、そのまま証拠としてご覧いただけます。
伝えたいことが違えば、顔はここまで変わります。
この記事と同じ考え方——土台を決めてから積む——で、私が設計してきたサイトです。 「おしゃれに」「本格的に」という言葉からは、この違いは出てきません。 顔を決めているのは、ご本人が誰に何を伝えたいのか——そこだけです。
費用
Cost
外注とは、桁がひとつ違います。
制作会社に外注した場合
¥300,000〜500,000が最多帯
出典：ハイファクトリ調査（2026年2月・過去5年に外注した303名）
vs
この方法で自分でつくる場合
約 ¥35,000（1か月で仕上げる場合）
AI利用料・ドメインなどの実費。記事代は別（内訳は下記）
- 有料記事（note）方法・指示文リスト・使い方
- ※準備中
- AIの利用料MAXプラン（推奨）。制作にかける月数ぶん
- 月 $200
- 独自ドメイン年契約。取得先により変動
- 年 約¥2,000
- 公開サーバー無料枠で運用できるサービスを記事で案内
- ¥0〜
※AIはMAXプラン（月$200・約¥32,000）をおすすめします。下位のプランでも作れますが、
待ち時間や回数の制限で手が止まります。短期間で、質を落とさずに仕上げるための投資と考えてください。
月額は上がっても、かける月数が減ります。作り終えたら下位プランに戻せます。
※金額はいずれも目安です（$200は為替により変動。2026年8月時点で約¥32,000）。
AI利用料・ドメイン代は各サービスへ直接お支払いいただくもので、
当社にお支払いいただくのは記事（と、ご希望の場合のレクチャー）のみです。
向き・不向き
For You?
正直にお伝えします。
向いている方
- 自分のサイトを、自分で育てたい 小規模事業者・お店・教室など
- まず自分の手で、形にしたい 新しいサービスの立ち上げ担当の方
- AIで作って「なんか違う」と感じた 一度は試したことがある方
- 外注費をかけずに、時間をかけられる すぐに完成しなくてもよい方
ひとつでも当てはまれば、この記事はそのまま役に立ちます。
向いていない方
- つくる時間が取れない 簡単ではありません。手は動かします
- 制作をまるごと任せたい 打ち合わせだけで進めたい方
- 会員機能・決済まで必要 サイトの先の仕組みが要る方
レクチャー
Lecture
記事だけで進めない方への、補助輪です。
「自分の場合は」を確かめたい方に、オンラインのレクチャーを。 本体はあくまで記事で、希望される方だけの任意メニューです。
レクチャーの概要
- 形式
- オンライン・1回単位（画面を見ながら一緒に進めます）
- 内容
- 記事の内容をご自身のサイトに当てはめ、つまずきを解消します
- 料金
- 準備中決まりしだい、こちらに掲載します。
お急ぎの方はお問い合わせください。
よくある質問
FAQ
Qプログラミングの知識は必要ですか？
必要ありません。コードはAIが書きます。あなたの仕事は、記事の指示文を使って 「どうしたいか」を伝え、できたものを判断することです。パソコンの基本操作ができれば進められます。
Q環境の準備や、公開の作業ができるか不安です。
そこが、いちばんつまずきやすいところです。AIにコードを書いてもらうことより、 始める前の環境づくりと、できたものを公開する設定で止まる方が多い。だから記事では、 その手順と設定を省かずに扱います。実際の操作は動画でもご覧いただけるようにします。
Q記事のほかに、何にお金がかかりますか？
AIの有料プラン（制作する月のぶん）と、独自ドメイン代（年約2,000円）です。 公開用のサーバーは無料枠で運用できるサービスを記事内で案内します。 いずれも各サービスへの直接のお支払いで、当社を経由しません。
Qどれくらいの期間でできますか？
かける時間によりますが、1ページのサイトなら週末2〜3回ぶんが目安です。 一度に仕上げず、公開してから育てていく進め方を記事でおすすめしています。
Qできたサイトは商用利用できますか？
できます。ご自身の事業・サービスのために使うことを前提にした記事です。 制作したサイトの権利はあなたのものです。
Q途中で挫折しないか不安です。
つまずきやすい場所は記事の中で先回りして案内します。それでも進めない場合の オンラインレクチャー（任意・有料）も用意しています。「全部読んでから始める」より 「読みながら手を動かす」構成です。
Q丸ごと任せることはできますか？
その場合はこの記事ではなく、業務OSの開発を ご覧ください。私が直接、設計から制作までお手伝いします。
Read the Article
まずは、無料部分から。
違和感の正体の解説までは、無料でお読みいただけます。 ご自身に合いそうか、確かめてからで大丈夫です。