会社のホームページを、そろそろ作り直したい。
AIで作れると聞くけれど、テンプレを並べただけの安っぽいサイトになりそうで踏み切れない。
そんなふうに感じている経営者やWeb担当者の方は多いのではないでしょうか。
結論から書きます。
いちばん難しいと思われている「デザイン」まで含めて、AIで“会社の顔”レベルのコーポレートサイトは作れます。
この記事で紹介するのは、6つの事業を束ねるグループ会社のコーポレートサイトを、AIと協働で新規制作して公開した実例です。
うまくいったことも、つまずいたことも、正直に書きます。
この記事でわかること
- 「デザインまではAIには無理」という思い込みが、実際にはどこまで覆せたのか
- AIに効く指示の渡し方（長い仕様書より「完成見本＋直したい一点」）
- AIに任せる量が増えても品質を落とさないための、人側の「疑う仕組み」
まず、AIで作った実物のコーポレートサイトを見てください
言葉で説明する前に、できあがったものを見ていただくのが早いです。
下が、実際にAIと協働で作り上げたコーポレートサイトです（TARSKホールディングス様）。
6つの事業を、1つの会社の顔としてまとめています。
トップも、事業紹介も、レイアウトも、配色も、図版も。
いちばん人の手が要ると思っていた“デザイン”まで含めて、AIを相棒に組み上げました。
「AIに文章を書かせる」は、もう珍しくありません。
でも、「WebサイトのデザインまでAIに作らせる」と聞くと、「さすがに、そこは人の仕事でしょう」と感じませんか。
私たちも、そう思っていました。
この記事は、AIにサイトを丸ごと任せる実験を経て、今回は「人が要所を押さえた協働制作」に踏み込んだ実践編です。
こうしたAI活用の実例は、中小企業のAI活用ガイドでもまとめてご紹介しています。あわせてご覧ください。
あなたの仕事、AIで変えられる部分がまだ残っていませんか？
- ChatGPTは知っているが、日常業務では使えていない
- AIを試したことはあるが、定着しなかった
- どこから手をつければいいか、まだ決まっていない
1つでも当てはまるなら、アスタのメルマガが参考になります。
業務のほぼすべてにAIを活用し、作業効率を10倍に伸ばした方法を毎週お届けしています。
登録すると、あなたの仕事にAIを取り入れるための4つの資料も無料でお送りします。
いま面倒に感じているあの仕事が、“ラク”になります。
いちばん難しい「デザイン」を、AIでどう越えたか
これまでのサイト制作で、いちばん時間がかかり大変だったのはデザインでした。
クライアントの頭の中にあるイメージを形にするのは、簡単ではありません。
「色は？ 雰囲気は？ ターゲットは？」
そういうことを1つずつ聞き取り、ようやくなんとなくのイメージができてきて、それを形にしていきます。
しかも、それをクライアントに伝えるには、実際に画像を作って見せて、確認してもらう必要があります。
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に任せても品質を落とさない、人側の「疑う仕組み」
正直に書きます。
AIは万能ではありません。
任せる量が増えるほど、人の側に“疑う仕組み”が要りました。
AIは「できたフリ」をすることがあります。
「直しました」と返ってきたのに、実際のファイルを開くと直っていない。
これが、実際に起きました。
だから報告を鵜呑みにせず、変更履歴（git）で実際の差分を自分の目で確かめてから先へ進むようにしました。
もうひとつ。
同じAIに「作る」と「見直す」を両方やらせると、自分の仕事を自分で甘く採点してしまいます。
そこで、AIの作業を役割で分けることにしました。
最初に試したのは、「統括する役・実装する役・レビューする役」の3つに分ける形です。
ねらいは、人間の開発チームと同じでした。
全体を仕切る人、手を動かして作る人、それを別の目で見直す人。
役割を分ければ、作った本人とはちがう視点でチェックが入り、品質が上がるはずだ。
そう考えたのです。
そして最初は、これがうまく回っていました。
ところが、続けるうちに、だんだん精度が落ちてきます。
原因は、作ったものや指示を次の役へバトンタッチする“受け渡し”の部分にありました。
受け渡すたびに情報が少しずつ欠け、かみ合わなくなり、とうとう正常に機能しなくなりました。
そこで、その原因の分析も、AI自身にやらせてみたのです。
「何が起きていたのか」「どうすれば再発を防げるのか」を調べさせます。
見えてきたのは、問題は“役を分けたこと”ではなく、役と役のあいだの受け渡しが多すぎて、そのたびにほころびが出ることでした。
答えは、シンプルでした。
受け渡しの回数を、減らせばいい。
そこで、「実装 → 別の目でレビュー → 公開前の最終確認 → 反映」を、とぎれない一本の流れにつなぎ直しました（私たちは“オートループ”と呼んでいます）。
役は3つから2つに整理しましたが、大事な一点は変えていません。
自分が直したものを、自分で甘くレビューさせない。必ず別の目を通す、という原則です。
そして公開の直前。
全ページを出す前に、一般的な“公開前チェックリスト”でサイトを端から端まで点検させました。
狙いは、どんなサイトでもやりがちな見落としを拾うことです。
- 制作中に作ったテスト用ページが、残っていないか
- 「検索エンジンに載せない」設定（noindex）が、公開後も残っていないか（これが残ると、公開してもGoogleにずっと出ません）
- リンク切れ・フォームの送信・スマホ表示は大丈夫か
AIに照合させると、人の目だけより取りこぼしが減ります。
ただし、最後の裏取りは人がやる。
ここは省きません。
こうした実案件での試行錯誤やAI活用のノウハウは、メルマガでも折にふれてお届けしています。
まとめ ── あなたの会社のサイトは、いま、どんな状態ですか
今回わかったことを、あらためて短くまとめます。
デザインの渡し方は、完成イメージ＋直したい一点。
品質の守り方は、別の目を通すレビューと、公開前に端から照合するチェック。
この2つを押さえれば、AIでも“会社の顔”レベルのコーポレートサイトは作れます。
そして、やり方を磨くほど、もっと速く、もっと高品質に作れる手応えがあります。
今回はゴールではなく、通過点です。
ここまで読んで、こんなふうに感じた方もいるのではないでしょうか。
「自社のホームページもAIで改善したい」
「新しく作りたいけれど、何から相談すればいいか分からない」
「AIを自分の会社の仕事にも取り入れてみたい」
そんな段階でも大丈夫です。
まずは、AI活用の無料診断で、自社のどこにAIを使えそうか整理してみるのも一つの手です。
「うちの場合、どこまでできる？」——その入口から、一緒に考えます。
AI活用の第一歩、いっしょに整えませんか
「AIを使ってみたいけれど、安全面が不安」「自社の業務でどこから任せればいいか分からない」——そんなときは、お気軽にご相談ください。アスタは、AIを実際の業務で安全に活用するお手伝いをしています。
- AIを業務で使ってみたい方 → AI活用無料診断へ（所要時間：約30分）
- まず話だけ聞いてみたい方 → お問い合わせフォームへ
「まだ何も決まっていない」という段階でも大丈夫です。今の状況をお聞きかせください。
業務のほぼすべてにAIを活かし、効率を10倍にした方法を毎週お届けしています
登録すると、あなたの仕事にAIを取り入れるための
4つの資料もすぐにお送りします。
- ChatGPT超入門ガイド：ビジネスで活用する方法
- AIで仕事をラクにする業務改善チェックリスト
- NotebookLMでスライドを作ろう
- 今日から使えるAI活用シーン10選
登録は無料・いつでも解除できます
▶ 無料で登録して受け取る
コメント