Riple with の事業サイトは、制作プロセスのほぼ全域で生成AI技術を活用して作りました。
企画からおよそ2ヶ月半、全19ページ。事業を整理するヒアリング（自社の場合は、アイデアの整理に近い作業でした）から、デザインの下書き、コード、文章の初稿まで、AI と人が役割を分けながら仕上げています。
「AI でWebサイトが作れる」という話は、もう珍しくなくなりました。けれど「実際にどこまで任せられて、どこからが人の仕事なのか」を具体的に書いたものは、まだ多くありません。
この記事では、自社サイトの制作記録をもとに、AI × 人の役割分担の実際をまとめました。
これから制作を検討する方が、制作を頼む相手が AI をどう使っているかを見極める材料にもなるはずです。
※Riple with は、制作プロセスで生成AIツールを活用しています。最終的な品質と責任は Riple with が負います。
なぜ「AI × 人」で作るのか
起業して間もない方や、小規模で事業を営む方から、よく耳にするのは次のような悩みです。
- Webサイトを作りたいが、初期費用に余裕がない
- 何から始めればいいか分からない
- 作ったあと、どう育てればいいか分からない
生成AI技術は、この状況を変えつつあります。ただ、Riple with が注目しているのは「安く・速く作れる」ことだけではありません。いちばん大きいのは、試せる回数が増えることだと考えています。
従来の制作では、デザイン案を1つ作り直すたびに時間と費用がかかりました。だから「この方向で本当にいいのか」を確かめる回数は、自然と絞られます。AI が下書きを担うと、試す回数を大きく増やせます。
人は「作る」ことより、「比べて、判断する」ことに時間を使えるようになります。そして、作業から浮いた時間は、お客様と向き合う時間に回せます。
これは、予算の限られる小規模な事業ほど恩恵の大きい変化です。これまで「費用の都合で1案しか見られなかった」ところに、複数の案を比べて選ぶ余地が生まれるからです。
AI の価値は、作業が速くなることよりも「試して、比べて、判断する回数を増やせる」ことにあります。判断の質は、比べた回数に支えられます。
実際の制作プロセス——事業サイトができるまで
では、具体的にどう作ったのか。riplewith.jp の制作は、大きく3つの段階で進めました。
まず、グレースケールで組み立てる
最初の段階では、ブランドカラーも装飾も写真も、すべて使わないと決めました。グレースケール——色を使わず、グレーの濃淡だけで表現した状態——で、ページの構造を組み立てます。
一見遠回りですが、狙いがあります。色や装飾は、構造の問題を隠してしまうからです。グレースケールの状態で、次の関門を1ページずつ人の目で判定しました。
- セクションの区切りがひと目で分かるか
- 見出しの階層が区別できるか
- 本文の行の長さ・行間が疲れずに読めるか
- ボタンがいちばん目立つ要素になっているか
- スマートフォンで崩れないか
- 似た役割のセクションで部品を使い回せているか
1つでも不合格なら、色を塗る前に作り直します。
色を塗る前に、グレースケールで構造を確かめる。土台の問題は、装飾で隠れる前に潰しておく——これは AI を使うかどうかに関わらず、Riple with の標準工程です。
色は、1セクションずつ人が確定させる
構造が固まったら、ブランドカラーと装飾を載せていきます。ここで徹底したのは、ページ全体を一気に仕上げないことです。1つのセクションごとに、AI が「どの要素に、どの色と装飾を割り当てるか」の計画表を作り、人が承認してから実装に入ります。
実装後はそのセクションを開発環境の画面に表示し、パソコンとスマートフォン両方の見た目を人が確認します。納得できなければ、計画からやり直しです。基準になるのは、事前に定めたブランドガイドラインです。色の組み合わせも文字の扱いも、その場の思いつきではなく、決めたルールの中から選びます。
実際、TOPページには色の調整だけで何度も往復して確定したセクションがあります。手間に見えるかもしれませんが、この往復こそが工程です。AI は材料と選択肢を出し続ける。人は目で見て、決める。AI に判断はさせない。この分担を崩さないことが、仕上がりを支えています。
検査は、機械と人の二段構え
仕上げの段階では、機械による検査と人による確認を分けました。
機械が担うのは、決めたルールから外れていないかの検査です。
「ブランドカラー以外の色が紛れ込んでいないか」
「コードの品質基準を満たしているか」
こうした「数えられる違反」は検査を自動化し、全ページに何度でも繰り返しかけられます。
人が担うのは2つです。
数値にならない判断と、実際のブラウザでの実測です。
誰にとっても使いやすいサイトにするために、次のような項目を実際の画面で確かめています。
- 文字と背景のコントラストは十分か
- 本文の文字は小さすぎないか
- ボタンは指で押しやすい大きさか
- OS の設定で動きを減らしている方には、アニメーションが止まるか
AI の出力を、そのまま公開することはありません。見た目が整っていても、コントラスト不足や使いにくさが残っていることは珍しくないからです。制作を頼むときは、この検査の工程があるかどうかを確かめてみてください。
AI で変わったこと・変わらないこと
変わったこと
- スピードと物量。
全19ページを、企画からおよそ2ヶ月半で公開までたどり着きました。一つひとつの変更を小さく確定させながら、毎日何度も積み重ねて進むので、後戻りも小さく済みます。人手だけでこの物量を確保するのは現実的ではありません - 品質検査を「仕組み」にできること。
ブランドルールやコード品質の検査を自動化したことで、「注意深くやる」ではなく「仕組みで守る」体制を、個人事業の規模でも持てました
変わらないこと
- 決めるのは人。
誰に何を伝えるか、どのデザインを「良い」とするか。判断は最初から最後まで人の仕事でした - 責任も人。
AI は間違えます。事実確認や法令面の確認、最終的な品質保証は、人が引き受けるものです
Riple with のサービスでも、AI を使う工程はすべて「AI出力 → Riple with 校正 → お客様確認」の3段階で進めます。判断と責任は、常に人が担います。この記事自体も、同じ工程で書きました。AI が初稿を書き、私が事実関係と表現を確かめてから公開しています。
これから制作を考えている事業者の方へ
ここまで紹介した工程は、自社サイトのための特別な体制ではありません。
お客様のサイトを制作するときも、同じ流れで進めます。
[ご相談 → ヒアリング → ご提案 → ご契約 → 制作・修正 → ご納品・運用開始]という6つのステップの中で、AI × 人の役割分担を活かし、「試せる回数」「検査の確かさ」、そして作業から浮いた時間を、お客様の事業のために使います。
Webサイトは、作って終わりではありません。公開してからが本番です。
Riple with は制作の先の運用まで、事業の隣で伴走します。「まだ具体的に決まっていない」という段階でも大丈夫です。現状の整理からご一緒します。
オンラインでも、熊本市内での対面でも承ります。
初期費用を抑えたい方には、補助金の活用も含めて、予算に合わせた進め方をご提案します。
初回相談（60分）は無料です。
riplewith.jp は、生成AI技術と人の役割分担で、企画からおよそ2ヶ月半・全19ページを制作しました。AI の価値は速さだけでなく、試して比べる回数を増やせること。構造はグレースケールで確かめ、色は1セクションずつ人が確定し、検査は機械と人の二段構え。判断と責任は、常に人が担います。同じ進め方で、お客様のサイト制作にも伴走します。
