AI × WEB CREATION / STEP BY STEP
AIでWebサイトを作る
具体的な手順
初心者でも迷わない、
企画から公開までの進め方。
AIでWebサイトを作ろうと思ったとき、 いきなり「Webサイトを作って」と入力したくなります。
実際、それでも何かは出てきます。 タイトルも文章も画像も入った、 一見それらしいWebサイトが数分でできるかもしれません。
でも、そこから先で止まりやすい。
この文章でいいのか。 このページ構成でいいのか。 誰に向けたWebサイトなのか。 何を一番伝えたいのか。
人間が決めることがあります。
AI時代のWebサイト制作で大切なのは、 HTMLやCSSを書く順番を覚えることではありません。
何を決め、どこをAIに任せ、 どこで人間が判断するのか。
この記事では、その流れを 企画から公開まで7つの工程に分けて説明します。
AIでWebサイトを作る流れを、
7つに分けます。
最初に決めるのは、
デザインではなく「目的」
最初に「どんなデザインにするか」を考える必要はありません。
まず決めるのは、 Webサイトで何を実現したいのかです。
会社を知ってもらいたい。 問い合わせを増やしたい。 商品を売りたい。 採用につなげたい。 営業先に見てもらいたい。 自社の考えやノウハウを蓄積したい。
同じ「企業Webサイト」でも、 目的が違えば必要なページも文章も変わります。
「私たちは○○をしている会社です。Webサイトを作る目的を整理したいので、質問を一つずつしてください。」
ここではAIに答えを決めてもらうのではなく、 AIを壁打ち相手として使います。
次に決めるのは、
「誰に見せるのか」
Webサイトは、 すべての人に向けて作る必要はありません。
むしろ「誰に見せるのか」が曖昧なままでは、 AIが作る文章も曖昧になります。
既存顧客なのか。 新規顧客なのか。 経営者なのか。 担当者なのか。 採用候補者なのか。
その人は何を知りたくて、 何を不安に感じているのか。
ここまで分かれば、 AIに文章を作らせるときの精度も大きく変わります。
「このサービスを検討する人が、Webサイトを見る前に抱えていそうな疑問や不安を挙げてください。」
AIに「何を作るか」を
丸ごと決めてもらうのではない。
人間が方向を決め、AIに広げてもらう。
いきなりページを作らず、
まず全体の構成を決める。
目的と相手が決まったら、 Webサイトに何が必要かを考えます。
たとえば企業Webサイトなら、 次のようなページが候補になります。
もちろん、全部必要とは限りません。
小さなWebサイトなら、 まず1ページから始めてもいい。
「この目的と対象読者なら、最小構成でどんなページが必要ですか。必要な理由も説明してください。」
Webサイトの中身は、
文章と画像でできている。
ページ構成が決まったら、 いよいよ中身を作ります。
ここは生成AIが非常に得意な工程です。
見出し案を出す。 長い文章を短くする。 説明不足を指摘する。 言い方を変える。 複数案を比較する。 画像案を考える。
以前なら一案作るだけでも時間がかかった作業を、 AIなら何度でも試せます。
ただし、AIが出した文章を そのまま採用する必要はありません。
どれを使うかは、人間が決める。
画像も同じです。 生成できることと、 Webサイトに合う画像を選べることは別です。
ここで初めて、
Webサイトの形にする。
目的、対象、構成、文章、画像がある程度決まったら、 AIを使ってWebページの形にします。
HTMLとCSSを生成してもらう方法もあります。 WordPressを使う方法もあります。 Webサイト作成サービスを使う方法もあります。
重要なのは、 最初から完成品を一発で作ろうとしないことです。
まず作る。 画面で見る。 違和感を探す。 AIに修正を頼む。 もう一度見る。
この往復を繰り返します。
「全体を作り直さず、H1を少し小さくしてください。画像と文章の位置関係、それ以外のデザインは変更しないでください。」
「なんとなく違う」でも構いません。 AIと話しながら、その違和感を言葉にしていけばいい。
AIが作ったあとに、
人間が確認する。
AIがWebサイトを作れるようになっても、 最終確認までAI任せにはできません。
AIは生成できます。 しかし、そのWebサイトが 「自分たちのWebサイトとして正しいか」を 最後に判断するのは人間です。
完璧になるまで待たず、
公開する。
最低限の確認が終わったら、 Webサイトを公開します。
初めて作ると、 もっと直したくなるかもしれません。
しかしWebサイトは、 印刷物とは違います。
公開したあとでも文章を直せます。 画像を変えられます。 ページを追加できます。
AIによって修正のコストが下がった今は、 最初から100点を目指して止まるより、 公開して改善していく方が現実的です。
ドメイン、サーバー、CMSなど 公開の仕組みが分からない場合は、 このシリーズの「AIで作ったWebサイトをどう公開する？」で 詳しく整理しています。
Webサイトは、
作ったあとに育てていく。
公開したら終わりではありません。 むしろ、ここからがWebサイトの本番です。
ブログを書く。 新しいサービスページを作る。 LPを追加する。 営業先に見てもらう。 SNSや動画から人を案内する。
実際の反応を見ながら、 文章や構成を変えていきます。
何を作り続けるかが重要になる。
AI時代のWebサイト制作は、 一度完成させるプロジェクトから、 小さく作り、試し、改善し続ける運用へ変わっていきます。
AIでWebサイトを作る全体像を、
最初から見たい方へ。
この記事は「AIでWebサイトを作る方法」をテーマにした CUDIORAのSEOクラスターの一記事です。
生成AIの役割、公開方法、Web用語、 具体的な制作手順、公開後の運用までを 一つのシリーズとして整理しています。
AIでWebサイトを作る方法｜シリーズ全体を見る →
このシリーズには、
元になったnoteの記事群があります。
noteでは、AIを使ったWebサイト制作を 初心者向けに順番に紹介しています。
CUDIORA版ではそれをそのまま転載せず、 検索する人の疑問ごとに再構成し、 関連する記事やページを相互につないでいます。
一つの原稿を一度使って終わらせず、 別の役割を持つコンテンツへ展開する。 このシリーズ自体も、CUDIORAが考える 「コンテンツストック」の実例です。
noteの元シリーズを見る →