Solution 03 — WEBサイト制作いま実践中
サイトではなく、
更新できる状態を渡す。
WEBサイトを制作会社に頼むと、そこから更新が止まります。1ページ増やすのに15万円、納期は1ヶ月半。載せたいのは、いまの話なのに。だからサイト本体と一緒に、AIが読むための運用ルールを置いて渡す形にしました。納品したあと、ご自身の手でページを直して公開する運用が、すでに始まっています。
- 0本制作したイベントLP企画・コピー・実装まで
- 0本そのまま買える完成品販売中のWEBサイト
- 0社自社更新に移行納品後、先方の手で運用中
01戦略 — なぜ、いまこれか
まず、いま多くの現場で起きていることを、そのまま書きます。
この4往復が、だいたいどこでも起きています。軽い直しでも数日。新しい商品のページを1枚となれば、15万円か30万円で、納期は1ヶ月半から2ヶ月。困るのは金額ではなく、事業の速度と更新の速度が合っていないことです。載せたいのは、いまの話なのに。
WordPressを入れれば、たしかに更新はできます。ただ変えられるのはテキストだけです。デザインの入ったページを1枚増やす、相談会ごとに違う顔のLPを立てる。結局また制作会社に戻ります。
もう一つ、必ず出るのがノーコードのサービスです。WixやSTUDIO、ペライチ。あれも更新はできますし、デザインもきれいです。ただそのサービスの中でしか生きられない。月額を止めた瞬間にサイトごと消えますし、直せる範囲はテンプレートの中です。
何が変わったかというと、Web制作そのものがAIでできるようになりました。誤解のないように書いておくと、誰でもAIでサイトが作れるという話ではありません。デザインの良し悪しを判断できる人がAIを持つと、エンジニアとデザイナーの部分がまるごと埋まるという話です。判断できない人がAIを持っても、出てきたものが良いのか悪いのか分かりません。
だからうちの提案は「安く作ります」ではありません。あとから誰が触っても崩れない形で渡します、です。作れる人が骨格と決まりを先に作り切って、そのあとの更新を御社の手に残す。渡すのはフォルダ一式なので、サーバーを変えても、こちらがいなくなっても、そのまま動きます。
この考えの背景は、コラムに全部書いています → Web制作会社に、頼まなくなった。
02提供すること
納品物は4つです。世の中の制作会社が渡すのは a だけで、b・c・d が入っているかどうかが、そのあとの2年を分けます。
設計・デザイン・実装・公開まで。写真の選定と補正、OGP、ファビコン、フォーム、必要なら管理画面まで含みます。
何のためのサイトで、どのページが何をする場所なのか。人もAIも、作業の前にここを読みます。
フォルダの構成、設定ファイルの場所、触っていい所と触ってはいけない所。人が読む引き継ぎ書として渡します。
使う色と書体、見出しの付け方、1ページの構造、禁止する表現、公開前に通す確認項目。トンマナを守らせる本体はここです。
03座組 — 更新は、御社の手に残る
作るところまでは、こちらで作り切ります。渡したあと、こちらを通さずに動けることがこの座組のねらいです。
Your side御社がやること
- 何を載せたいかを決める
- 写真と、伝えたいことを用意する
- AIに声をかける(会話で済みます)
- 見て、公開する
Our sideこちら+AIがやること
- サイトの設計とデザイン
- 実装・写真の補正・公開まで
- 要件定義書と運用マニュアルの作成
- AI向けの運用ルール(CLAUDE.md)の作成
- 引き渡し後の相談対応
043つの入り方
いきなり一から作らなくても始められます。すでに完成しているものを買うのがいちばん早い入り口です。
05費用
- 販売中のWEBサイト完成しているものをそのまま。デザインの調整と初期設定を含む
- 60万円〜
- イベントLPの制作テーマごとに1本。1本目と2本目以降で変わります
- 規模による
- 一から作るWEBサイトフルオーダー。ページ数と、載せる仕組みの範囲で変わります
- 60万円〜
- 運用ルール一式要件定義書・運用マニュアル・CLAUDE.md
- 制作費に含む
※ 60万円〜というのはいちばん下の目安です。ページ数・仕組み・写真の有無で大きく変わるので、それらしい上限の数字はここに置きません。相談時に、やることを決めてからお見積もりします。
06渡したあと、どう更新するか
今日思いついたことが、今日できて、
明日から発信が始まる。
- STEP 1フォルダを開く納品したフォルダを、そのまま開きます。サーバーにログインする作業はここにはありません。
- STEP 2声をかける「相談会のページを1枚増やしたい」と伝えるだけ。AIは同梱した決まりを読んでから作ります。
- STEP 3見て、直す出てきたものを見て、違うところを言う。ここも会話で済みます。
- STEP 4公開するそのままサーバーへ。見積もりも、納期の相談もありません。
全部の会社に向いているわけではありません。デザインの良し悪しを判断できる人が社内にいないと、出てきたものが良いのか悪いのか分からないまま公開することになります。だから最初のサイトと決まりは、こちらで作り切ります。そのうえで、そのあとの更新を御社の手に残す形です。
07渡したあとに、起きること
いいことばかり書いても仕方がないので、実際に起きることと、その手当ても書いておきます。ここを先に決めておかないと、せっかく渡した形が半年で止まります。
代表も広報も営業も、触れる状態にはします。でも同時に触ると、上書きが起きます。
いちばん多いのは、公開したあとに「前のほうが良かった」となる場面です。
スマホやカメラから出てきた写真は、1枚で5MBを超えます。
あとから入れようとすると、比べる相手のデータがありません。
地味ですが、あとでいちばん揉めるところです。
やらない範囲も、先に言っておきます
この4つは、この形の範囲外です。
- ネットショップ
- 会員登録とログイン
- 多言語
- 基幹システムとの接続
できないという意味ではなく、別の設計が要るという意味です。必要なら、そこだけ別に考えます。後から「聞いていない」が出るほうが、お互いに損なので先に書いておきます。
08その決まりの、中身
ここまで「決まりを一緒に渡す」と何度も書いてきました。実際に納品したものの中身を、そのまま載せておきます。抽象的な話に聞こえていたら、ここで具体になるはずです。
Live — その決まりが、実際に効いています運用中
ある工務店さまでは、お渡ししたZIPをご自身のPCで開いて、文言や写真を差し替え、そのまま本番へ上げる運用が始まっています。こちらが毎回入る必要はありません。見積もりも、納期の相談もなしで、その日のうちに変わります。
それでもデザインが崩れないのは、一緒に納品した CLAUDE.md が効いているからです。AIはこれを読んでから作業します。中身はこういうものです。
CLAUDE.md — 実際に納品したファイルの抜粋
トンマナ(ブランド規定・変更禁止)
- 色:メインネイビー/アクセント黄/背景 白・グレー。黄色は「点」で使う。面で多用しない
- フォント:和文と英字を1書体ずつ指定。他のフォントを足さない
- 禁止:ダークテーマ化、グラデーション背景、明朝体、煽り表現、AIっぽい定型句(「〜を実現します」「トータルサポート」等)
編集ルール
- 差し替え箇所は @EDIT コメントで探す。イベントごとに変えるのは文言・日付・写真・特典だけ
- デザインの骨格(セクション構成・CSS設計・予約システム)は指示がない限り変えない
- 日本語の改行は文節単位で包む(Safariの語中分割対策)
作業後の確認
- スマホ幅(390px)で表示確認。改行の語中割れ・横スクロールが出ていないか
- 完了報告には「変更したファイル/変更していないもの/確認した動作」を書く
禁止することまで書いてあるのがポイントです。触る人が代表でも、広報でも、営業でも、出てくるものが揺れません。
更新が止まっている、
と感じていたら。
いまのサイトを見ながら、何ができるかから相談に乗ります。