先日、AIにホームページ（サイト）作成を丸ごと任せたという実験記事を書きました。
この丸投げ実験をする前に、私はAIをフル活用して企業サイトを制作していました。
その流れで「完全に丸投げしたらどうなる？」と試したのが、上の記事です。
わかったのは2つ。
丸投げだけではまだ改良の余地があること。
そして、人間が要所を押さえれば高品質なサイトは十分作れること。
今回は実際にAIとどのように協働でサイトを作り上げたのか、そのノウハウを公開します。
この記事でわかること
- 「デザインまではAIには無理」という思い込みが、実際にはどこまで覆せたのか
- AIに効く指示の渡し方（長い仕様書より「完成見本＋直したい一点」）
- AIに任せる量が増えても品質を落とさないための、人側の「疑う仕組み」
「AIに文章を書かせる」は、もう珍しくありません。
でも、「AIにWebサイトのデザインまでつくらせる」と聞くと——「さすがに、そこは人の仕事でしょう」と感じませんか。
私たちも、そう思っていました。
今回手がけたのは、6つの事業を束ねるグループ会社の“会社の顔”——コーポレートサイトです（TARSKホールディングス様）。
トップも、事業紹介も、レイアウトも、配色も、図版も。いちばん人の手が要ると思っていた“デザイン”まで含めて、AIを相棒に組み上げました。
やってみて分かったのは——AIをうまく使えば、“いちばん難しいデザイン”まで形にできる、ということでした。
しかも、自分でコードを書くより速い。
だから、浮いた時間を、細部の品質に回せました。
うまくいったことも、つまずいたことも、正直に書きます。
PR
あなたの仕事、AIで変えられる部分がまだ残っていませんか？
- ChatGPTは知っているが、日常業務では使えていない
- AIを試したことはあるが、定着しなかった
- どこから手をつければいいか、まだ決まっていない
1つでも当てはまるなら、アスタのメルマガが参考になります。
業務のほぼすべてにAIを活用し、作業効率を10倍に伸ばした方法を毎週お届けしています。
登録すると、あなたの仕事にAIを取り入れるための4つの資料も無料でお送りします。
いま面倒に感じているあの仕事が、“ラク”になります。
まず、できあがったものを見てください
以下が実際にAIと協働で作り上げたサイトです。
6つの事業を、1つの会社の顔としてまとめています。
このくらいの規模のサイトを、AIと一緒に立ち上げました。
いちばん難しい「デザイン」を、どう越えたか
まず、これまでのサイト制作で一番時間がかかり大変な作業だったのはデザインでした。
クライアントの頭の中にあるイメージを形にするというのはカンタンではありません。
「色は？雰囲気は？ターゲットは？」
そういうことを１つずつ聞き取りすることで、ようやくなんとなくのイメージができてきて、それを形にするということをしていきます。
しかし、それをクライアントに伝えるためには、実際に画像を作成して見せて確認してもらう必要があります。
そのため、FigmaやIllustratorでワイヤーフレーム＝下書きを作り、そこからデザイン案を作り、確認してもらって修正をする。といったことを何度も繰り返してブラッシュアップしていく必要があります。
そこで、今回はサイトを作り始める前に、まずトップページのデザイン案（モックアップ＝完成見本の画像）を、ChatGPT image 2.0（以下、image2）で何パターンも作らせました。
同じような案が並んでも選べないので、「方向性を変えて」と指示し、雰囲気の違う案を何枚も出してもらいます。
それをクライアントに見ていただき、「これでいきましょう」とOKが出たデザインを採用して、制作に入りました。
もしこれを、従来の方法でやっていたら、それだけで数週間はかかっていたはずです。
それが、案づくりから提案、方針決めまで、1日もかかりませんでした。
下が、そのときクライアントに提案したモックアップ（完成見本）と、実際に作りあげた完成形です。
本当に大変だったのは、ここから
モックアップ通りに作るのは、相当に苦労しました。
「この通りに作って」と頼んでも、最初に出てくるのは、元のデザインの1割くらいしか再現できていない代物です。
文字の大きさ、余白、細かい装飾（あしらい）——そのあたりが、まるで再現できていません。
それなのにAIは、「モック通りに再現できました」と“ドヤ顔”で報告してくる。
思わず、苦笑いでした。
それでも、直してほしい点を一つずつ指摘しては、やり直させる。
これを何度もくり返して、イメージ通りの見た目に近づけていきました。
途中でデザインを変えたくなったときも、“仕上がり”を先に作ってから
制作の途中で「ここのデザインを変えたい」となったときも、やり方は同じです。
image2で“仕上がりの絵”を先に作ってから、AIとのキャッチボールで完成させていきました。
たとえば事業紹介ページの、不動産事業のセクション。
最初は、文章と写真が並ぶだけの素朴な作りでした。
そこに完成イメージ（モックアップ）を1枚渡して、「この通りに作って」と頼みます。
すると、管理棟数や対応エリアを大きな数字で見せる“実数カード”のデザインに変わりました。
ただ、ここでも一発では決まりませんでした。
「管理棟数の『23』をもっと大きく」「数字の背景を斜めに、ラベルの帯と同じ角度で」「アイコンを、軽い緑色の建物の絵に差し替えて」「見出しはアイコンの右へ」「取扱用途のチップは同じ幅で、2行にきれいに収めて」「隣のカードと高さを揃えて」。
直したい箇所に印をつけたスクリーンショットを渡しては直す。
これを何度も往復しました。
ここで誤解してほしくないことがあります。
これは「誰でもできる」という話ではありません。
AIによく効いたのは、長い仕様書ではなく、完成イメージと“直したい一点”でした。
そして、何を直させて、どこで「これでOK」と止めるかを決めるのは、最後まで人の仕事です。
それでも——Web制作でいちばん難しいと思っていた「デザイン」が、AIをうまく使えば、ちゃんと形になっていく。
これが最初の手応えでした。
見た目だけじゃない ── 「あとで自分たちで更新できる」形にした
サイトは、作って終わりではありません。
公開したあと、自分たちで中身を足し、運用していくものです。
だから今回は、見た目を作るだけでなく、「あとで自分たちで更新できる」仕組みまで、AIと一緒に組み込みました。
たとえば「沿革（会社のあゆみ）」のページ。
専用の管理メニューを用意して、WordPress（サイトを管理・更新するための仕組み）の画面から入力すると、その内容がそのままサイトに自動で反映されるようにしました。
下が、その入力画面です。
「見出し」と「年・月・日」を入れて公開を押すだけ。
担当者が迷わないように、入力画面（UI）の説明や必須項目の表示まで作り込んでいます。
こうした入力画面の作り込みまで含めると、ふつうに自分たちで作れば丸1日はかかるボリュームです。
それを、AIと組んで短い時間で形にしました。
お問い合わせフォームも、同じ考え方で工夫しています。
テストの段階では、素のHTMLでフォームを書いておきました。
本番では、WordPressの定番プラグイン「Contact Form 7（お問い合わせフォーム用の追加機能）」のショートコード（短い呼び出しコード）から表示する形に切り替えています。
最初から「公開後、自分たちで運用する」ことを見据えて、WordPressと組み合わせたハイブリッドな作りにしました。
だから、見た目が整っているだけでなく、”あとで動かせる”サイトになっています。
「速い」の使い道は、品質だった
AIに任せて、はっきり変わったのはスピードです。
自分で一からコードを書くより、ずっと速く形になります。
ただ、価値を感じたのは「速くなったこと」そのものではありません。
速くなった分、空いた時間を“細部”に回せたことです。
文字の大きさ、行間、余白、要素の揃え方、配色のバランス。
普段なら「時間がないから、まあこれで」と妥協しがちな部分を、何ラウンドも詰められました。
さきほどの不動産セクションを何度も往復できたのも、一つひとつの作り直しが速かったからです。
速さは、雑さではなく、品質への余力に変えられる。
ここが、今回いちばんの実感でした。
では、品質はどう守ったのか
正直に書きます。
AIは万能ではありません。
任せる量が増えるほど、人の側に“疑う仕組み”が要りました。
AIは「できたフリ」をすることがあります。
「直しました」と返ってきたのに、実際のファイルを開くと直っていない——これが、実際に起きました。
だから報告を鵜呑みにせず、変更履歴（git）で実際の差分を自分の目で確かめてから先へ進むようにしました。
もうひとつ。
同じAIに「作る」と「見直す」を両方やらせると、自分の仕事を自分で甘く採点してしまいます。
そこで、AIの作業を役割で分けることにしました。
最初に試したのは、「統括する役・実装する役・レビューする役」の3つに分ける形です。
ねらいは、人間の開発チームと同じでした。
全体を仕切る人、手を動かして作る人、それを別の目で見直す人。
役割を分ければ、作った本人とはちがう視点でチェックが入り、品質が上がるはずだ——そう考えたのです。
そして最初は、これがうまく回っていました。
ところが、続けるうちに、だんだん精度が落ちてきます。
原因は、役から役への“受け渡し”部分で、作ったものや指示を次の役へバトンタッチするところにありました。
受け渡すたびに情報が少しずつ欠け、かみ合わなくなり、とうとう正常に機能しなくなりました。
そこで、その原因の分析も、AI自身にやらせてみました。
「何が起きていたのか」「どうすれば再発を防げるのか」を調べさせます。
見えてきたのは、問題は“役を分けたこと”ではなく、役と役のあいだの受け渡しが多すぎて、そのたびにほころびが出ることでした。
答えは、シンプルでした。受け渡しの回数を、減らせばいい。
そこで、「実装 → 別の目でレビュー → 公開前の最終確認 → 反映」を、とぎれない一本の流れにつなぎ直しました（私たちは“オートループ”と呼んでいます）。
役は3つから2つに整理しましたが、大事な一点は変えていません。
自分が直したものを、自分で甘くレビューさせない。必ず別の目を通す、という原則です。
そして公開の直前。
全ページを出す前に、一般的な“公開前チェックリスト”でサイトを端から端まで点検させました。
狙いは、どんなサイトでもやりがちな見落としを拾うことです。
- 制作中に作ったテスト用ページが、残っていないか
- 「検索エンジンに載せない」設定（noindex）が、公開後も残っていないか（これが残ると、公開してもGoogleにずっと出ません）
- リンク切れ・フォームの送信・スマホ表示は大丈夫か
AIに照合させると、人の目だけより取りこぼしが減ります。
ただし、最後の裏取りは人がやる。
ここは省きません。
これは、まだ伸ばせる
今回の試行錯誤で、AIの使い方の精度は確実に上がりました。
指示の渡し方（完成イメージ＋一点）、レビューの分け方（別の目を通す）、チェックのかけ方（公開前に端から照合）。
やり方が手元に残りました。
このやり方を磨くほど、もっと速く、もっと高品質に作れる手応えがあります。
今回はゴールではなく、通過点です。
あなたの会社のサイトは、いま、どんな状態ですか
「見た目が、なんとなく古い気がする」
「作りたいけれど、何から相談すればいいか分からない」
「AIを、自分の会社の仕事にも取り入れてみたい」
そんな段階でも大丈夫です。
私たちはAIをうまく使って、デザインの難所まで形にし、品質を高めてきました。
そして、その精度をこれからも伸ばしていきます。
コーポレートサイトを新しく作りたい・良くしたい企業の方も、自社の仕事にAI活用を取り入れたい企業の方も、お気軽にご相談ください。
「うちの場合、どこまでできる？」——その入口から、一緒に考えます。
AI活用の第一歩、いっしょに整えませんか
「AIを使ってみたいけれど、安全面が不安」「自社の業務でどこから任せればいいか分からない」——そんなときは、お気軽にご相談ください。アスタは、AIを実際の業務で安全に活用するお手伝いをしています。
- AIを業務で使ってみたい方 → AI活用無料診断へ（所要時間：約30分）
- まず話だけ聞いてみたい方 → お問い合わせフォームへ
「まだ何も決まっていない」という段階でも大丈夫です。今の状況をお聞きかせください。
業務のほぼすべてにAIを活かし、効率を10倍にした方法を毎週お届けしています
登録すると、あなたの仕事にAIを取り入れるための
4つの資料もすぐにお送りします。
- ChatGPT超入門ガイド：ビジネスで活用する方法
- AIで仕事をラクにする業務改善チェックリスト
- NotebookLMでスライドを作ろう
- 今日から使えるAI活用シーン10選
登録は無料・いつでも解除できます
▶ 無料で登録して受け取る
コメント