Solution 03 — WEBサイト制作いま実践中

サイトではなく、
更新できる状態を渡す。

WEBサイトを制作会社に頼むと、そこから更新が止まります。1ページ増やすのに15万円、納期は1ヶ月半。載せたいのは、いまの話なのに。だからサイト本体と一緒に、AIが読むための運用ルールを置いて渡す形にしました。納品したあと、ご自身の手でページを直して公開する運用が、すでに始まっています。

01戦略 — なぜ、いまこれか

まず、いま多くの現場で起きていることを、そのまま書きます。

御社この部分を、直してください
制作会社見積もりしますね
御社じゃあ、自社で更新できるようにしたい
制作会社WordPressを入れましょう

この4往復が、だいたいどこでも起きています。軽い直しでも数日。新しい商品のページを1枚となれば、15万円か30万円で、納期は1ヶ月半から2ヶ月。困るのは金額ではなく、事業の速度と更新の速度が合っていないことです。載せたいのは、いまの話なのに。

WordPressを入れれば、たしかに更新はできます。ただ変えられるのはテキストだけです。デザインの入ったページを1枚増やす、相談会ごとに違う顔のLPを立てる。結局また制作会社に戻ります。

納品されたあと、自社で触れる範囲 制作会社に頼む ほぼ、触れない お知らせの1行だけ。あとは見積もりと納期の相談になる WordPressを入れる 文字だけ 差し替えはできる。デザインの入ったページは増やせない この形で渡す 全部 新規ページも、相談会LPも、商品ページも自社で足せる 納品後に、自社で触れる範囲 制作会社に頼む ほぼ触れない WordPress 文字だけ この形で渡す 全部 新規ページもLPも、自社で足せる
同じ「納品」でも、渡されたあとに動かせる幅がまるで違う。ここが2年後の差になる

もう一つ、必ず出るのがノーコードのサービスです。WixやSTUDIO、ペライチ。あれも更新はできますし、デザインもきれいです。ただそのサービスの中でしか生きられない。月額を止めた瞬間にサイトごと消えますし、直せる範囲はテンプレートの中です。

何が変わったかというと、Web制作そのものがAIでできるようになりました。誤解のないように書いておくと、誰でもAIでサイトが作れるという話ではありません。デザインの良し悪しを判断できる人がAIを持つと、エンジニアとデザイナーの部分がまるごと埋まるという話です。判断できない人がAIを持っても、出てきたものが良いのか悪いのか分かりません。

だからうちの提案は「安く作ります」ではありません。あとから誰が触っても崩れない形で渡します、です。作れる人が骨格と決まりを先に作り切って、そのあとの更新を御社の手に残す。渡すのはフォルダ一式なので、サーバーを変えても、こちらがいなくなっても、そのまま動きます。

この考えの背景は、コラムに全部書いています → Web制作会社に、頼まなくなった。

02提供すること

納品物は4つです。世の中の制作会社が渡すのは a だけで、b・c・d が入っているかどうかが、そのあとの2年を分けます。

設計・デザイン・実装・写真・公開まで aサイト本体

設計・デザイン・実装・公開まで。写真の選定と補正、OGP、ファビコン、フォーム、必要なら管理画面まで含みます。

トップ会社を知らせる 実績信用をつくる LP予約を取る 人もAIも、作業の前にここを読む b要件定義書

何のためのサイトで、どのページが何をする場所なのか。人もAIも、作業の前にここを読みます。

SITE index.html← 直す /lp/← 増やす /assets/← そのまま 引き継ぎ書。人が読む用 c運用マニュアル

フォルダの構成、設定ファイルの場所、触っていい所と触ってはいけない所。人が読む引き継ぎ書として渡します。

触っていい文言・写真・日付・価格 触らない色・書体・骨格・構成 禁止まで書いてあるから、誰が触っても揺れない dAIに読ませる決まり

使う色と書体、見出しの付け方、1ページの構造、禁止する表現、公開前に通す確認項目。トンマナを守らせる本体はここです。

03座組 — 更新は、御社の手に残る

作るところまでは、こちらで作り切ります。渡したあと、こちらを通さずに動けることがこの座組のねらいです。

Your side御社がやること

  • 何を載せたいかを決める
  • 写真と、伝えたいことを用意する
  • AIに声をかける(会話で済みます)
  • 見て、公開する

Our sideこちら+AIがやること

  • サイトの設計とデザイン
  • 実装・写真の補正・公開まで
  • 要件定義書と運用マニュアルの作成
  • AI向けの運用ルール(CLAUDE.md)の作成
  • 引き渡し後の相談対応

043つの入り方

いきなり一から作らなくても始められます。すでに完成しているものを買うのがいちばん早い入り口です。

01販売中 もう出来ている 調整 残っているのは、調整と初期設定だけ 完成しているサイトを、そのまま買う。 工務店向けに作り切った1点もののWEBサイトが、すでに在庫として並んでいます。デモをそのまま見て、気に入ったものを買う形です。デザインの調整と初期設定を含めてお渡しします。
  • Stock2本(住宅)
  • Cost60万円〜
  • Speed最短で即日
在庫を見る →
02いま実践中 1ST骨格を作る 2本目からは、複製して中身を入れ替えるだけ イベントLPを、テーマごとに量産する。 相談会・見学会ごとに1本ずつ立てます。1本目で骨格と決まりを作れば、2本目からは複製して中身を差し替えるだけ。予約システムと管理画面まで載せた本数もあります。
  • Works16本 制作済み
  • Speed2本目以降は数日
  • Note納品後は自社で増産可
16本の実物を見る →
03ご相談 設計実装公開 → 足す 作り切らずに、あとから足していける形で渡す 御社のためだけに、一から作る。 コーポレートサイトの作り直し、採用サイト、物件の販売サイト。仕組みが要るもの(予約・顧客管理・LINE連携・管理画面)も含めて設計します。作り切らずに、あとから足していける形にしておきます。
  • Scope設計から公開まで
  • Cost規模によります
  • Note運用ルールは全案件に付属
相談する →

05費用

販売中のWEBサイト完成しているものをそのまま。デザインの調整と初期設定を含む
60万円〜
イベントLPの制作テーマごとに1本。1本目と2本目以降で変わります
規模による
一から作るWEBサイトフルオーダー。ページ数と、載せる仕組みの範囲で変わります
60万円〜
運用ルール一式要件定義書・運用マニュアル・CLAUDE.md
制作費に含む

※ 60万円〜というのはいちばん下の目安です。ページ数・仕組み・写真の有無で大きく変わるので、それらしい上限の数字はここに置きません。相談時に、やることを決めてからお見積もりします。

06渡したあと、どう更新するか

今日思いついたことが、今日できて、
明日から発信が始まる。

  1. STEP 1フォルダを開く納品したフォルダを、そのまま開きます。サーバーにログインする作業はここにはありません。
  2. STEP 2声をかける「相談会のページを1枚増やしたい」と伝えるだけ。AIは同梱した決まりを読んでから作ります。
  3. STEP 3見て、直す出てきたものを見て、違うところを言う。ここも会話で済みます。
  4. STEP 4公開するそのままサーバーへ。見積もりも、納期の相談もありません。

全部の会社に向いているわけではありません。デザインの良し悪しを判断できる人が社内にいないと、出てきたものが良いのか悪いのか分からないまま公開することになります。だから最初のサイトと決まりは、こちらで作り切ります。そのうえで、そのあとの更新を御社の手に残す形です。

07渡したあとに、起きること

いいことばかり書いても仕方がないので、実際に起きることと、その手当ても書いておきます。ここを先に決めておかないと、せっかく渡した形が半年で止まります。

01触る人は、1人に決める

代表も広報も営業も、触れる状態にはします。でも同時に触ると、上書きが起きます。

起きること同じページを2人が別々に直して、あとから上げたほうで前の作業が消える
手当て「今週は誰が触る」を決めるだけで防げます。人数を絞る話ではなく、順番を決める話です
02壊したときに、戻せるようにしておく

いちばん多いのは、公開したあとに「前のほうが良かった」となる場面です。

起きること直したら直したで、前の状態が分からなくなる
手当て公開前のフォルダをそのまま複製して残しておく。これがいちばん確実で、いちばん簡単な保険です。手順は運用マニュアルに書いて渡します
03写真は、そのまま載せない

スマホやカメラから出てきた写真は、1枚で5MBを超えます。

起きること10枚載せると、開かないページになる。スマホの回線では特に
手当て載せる前に縮める。この作業もAIに任せられるので、決まりのほうに書いてあります
04計測は、最初から入れて渡す

あとから入れようとすると、比べる相手のデータがありません。

起きること半年後に「効果はどうだった?」と聞かれても、前の数字がない
手当てアクセス解析と検索の管理画面は、公開と同時に動かします。どのページが読まれ、どんな言葉で来ているかが見えないと、次に何を書くかも決まりません
05ドメインとサーバーは、御社の名義で

地味ですが、あとでいちばん揉めるところです。

起きること制作会社の名義で取られていると、乗り換えたくても動けない
手当てうちが立てる場合も、契約は御社の名前で取っていただきます。管理画面のIDも御社が持つ。こちらはいつでも切れる状態にしておくのが正しいと思っています

やらない範囲も、先に言っておきます

この4つは、この形の範囲外です。

できないという意味ではなく、別の設計が要るという意味です。必要なら、そこだけ別に考えます。後から「聞いていない」が出るほうが、お互いに損なので先に書いておきます。

08その決まりの、中身

ここまで「決まりを一緒に渡す」と何度も書いてきました。実際に納品したものの中身を、そのまま載せておきます。抽象的な話に聞こえていたら、ここで具体になるはずです。

Live — その決まりが、実際に効いています運用中

ある工務店さまでは、お渡ししたZIPをご自身のPCで開いて、文言や写真を差し替え、そのまま本番へ上げる運用が始まっています。こちらが毎回入る必要はありません。見積もりも、納期の相談もなしで、その日のうちに変わります。

それでもデザインが崩れないのは、一緒に納品した CLAUDE.md が効いているからです。AIはこれを読んでから作業します。中身はこういうものです。

CLAUDE.md — 実際に納品したファイルの抜粋

トンマナ(ブランド規定・変更禁止)

  • 色:メインネイビー/アクセント黄/背景 白・グレー。黄色は「点」で使う。面で多用しない
  • フォント:和文と英字を1書体ずつ指定。他のフォントを足さない
  • 禁止:ダークテーマ化、グラデーション背景、明朝体、煽り表現、AIっぽい定型句(「〜を実現します」「トータルサポート」等)

編集ルール

  • 差し替え箇所は @EDIT コメントで探す。イベントごとに変えるのは文言・日付・写真・特典だけ
  • デザインの骨格(セクション構成・CSS設計・予約システム)は指示がない限り変えない
  • 日本語の改行は文節単位で包む(Safariの語中分割対策)

作業後の確認

  • スマホ幅(390px)で表示確認。改行の語中割れ・横スクロールが出ていないか
  • 完了報告には「変更したファイル/変更していないもの/確認した動作」を書く

禁止することまで書いてあるのがポイントです。触る人が代表でも、広報でも、営業でも、出てくるものが揺れません。

更新が止まっている、
と感じていたら。

いまのサイトを見ながら、何ができるかから相談に乗ります。