【Web制作×AI】ChatGPTでワイヤーフレームと原稿を爆速作成！作り方のコツ（第2回）

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、3月29日まで）

» 今すぐ億を稼ぐマニュアルをゲットする

Webデザイン・Web制作において、サイト構成や掲載内容は決まったのに、ワイヤーフレームの作り方や原稿作成の段階で手が止まってしまうことはありませんか？

どこに何を配置すればいいのか。 どんな文章を書けばいいのか。 白紙の画面を前に、悩む時間だけが増えていく初心者の声は多く聞かれます。

しかし、ChatGPTなどのAIを取り入れることで、この工程は大きく変わり、悩む時間はほぼゼロになります。 本記事ではトップページ制作を例に、AIを活用してワイヤーフレームのたたき台とコピーライティング（原稿作成）を同時に爆速で組み立てていく、実践的なワークフローと作り方のコツを紹介します。

• 【AI×Web制作 爆速ワークフロー】について
• AI×Web制作 爆速ワークフロー第2回｜ワイヤーフレーム＆原稿作成編
• 今回行うこと：ワイヤーフレーム設計と原稿作成
• ChatGPTを活用したワイヤーフレームの「たたき台」作成プロンプト
• ワイヤーフレームの作り方｜最低限の内容から配置を決める
• AIを活用した原稿作成のコツ｜作りながら、ChatGPTと一緒にコピーを調整する
• 他のページも同じ手順で進めます
• まとめ：AI時代におけるワイヤーフレームの作り方
• ワイヤーフレーム作成とは、決まっていた内容を形にする工程
• 次回予告

【AI×Web制作 爆速ワークフロー】について

この連載では、AIを使ってWeb制作を“爆速化”するリアルな制作フローを紹介していきます。

テーマはAIを使って、1ヶ月分の仕事を3日で終わらせる。 実際の制作フローに準じて、重要なポイントごと全6回に渡ってAI活用術を取り上げていきます。

1. 【Web制作初心者向け】AI×ChatGPTで爆速化！ヒアリング・要件定義の進め方
2. ワイヤーフレーム制作とライティング
3. Webデザイン制作
4. HTML＆CSSによるベースコーディング
5. Javascript・リッチアニメーション
6. WordPressサイト化

なお、この連載は「AIに丸投げして完成！」という話ではありません。 実際のWeb制作ではクライアントの要望を理解し、Webサイト（ページ）に落とし込んでいく必要があります。このため、我々Skillhubでは「Web制作業務を請け負う」ことを前提にした、AI活用術を中心に紹介しています。

第1回では、ヒアリングからクライアントの要望を実現するために必要なページ構成を決めました。 第2回では、その決まった内容をもとに、実際の制作に進みます。

AI×Web制作 爆速ワークフロー
第2回｜ワイヤーフレーム＆原稿作成編

今回行うこと：ワイヤーフレーム設計と原稿作成

今回扱うのは、ワイヤーフレーム設計と原稿（掲載文章）作成です。

前回、それぞれのページの役割・どんな内容（情報）を掲載するか大まかに決めましたよね。 例えば、トップページの場合は以下のような情報構成と決まったとします。 これを使って、AIを活用しながらワイヤーフレームと文章設計を行っていきましょう。

### 1. トップページ
**役割**
初見ユーザーに「何の会社で、何が強いのか」を3分で理解させる

**掲載内容（要点）**
* ファーストビュー
* 教育×テクノロジーに特化した会社であること
* 「単なるeラーニングではない」一言コピー
* 課題提起
* 教育事業者が抱えがちな悩み（ITが難しい、既存ツールが合わない 等）
* 主力サービスの概要導線
* Edbase / Qeditor へのリンク
* 強みの要約
* 教育特化・自社運営・現場視点
* CTA
* 「まずは相談する」「資料を見る」

今回の問題｜構成が決まっているのに手が止まる

サイト構造や掲載内容が決まった。 次はワイヤー作成、というところで手が止まる初心者の方も多いのではないでしょうか。

上記のような大まかなセクション構成は決まっても、目の前にあるのは白紙。大まかなサイト構成から、文章と配置を考えてワイヤーフレームを作ろうとしても、どこから手を付けようと悩みますよね。

• ワイヤーを描こうとして、画面の前で固まる
• どの情報を、どこに配置すればいいかわからない
• ファーストビューが決まらずに進めない
• 大見出し以外の文章が書けない

これは、実力や知識が不足しているというよりも、考える順番の問題です。 配置と文章を同時に考えようとすると、どうしても迷いが生まれます。

ここでやるべきことは、新しく考えることではありません。 第1回で決めた内容を、制作用に再整理し、ワイヤーに落とし込めるように具体化していきます。 この作業を、人間が一人でやる必要はありません。

ChatGPTを活用したワイヤーフレームの「たたき台」作成プロンプト

今回は、いきなりChatGPTの出番です。 ヒアリングを元に整理したトップページの掲載内容を前提として、次のようにプロンプト（指示）を出します。

この内容をもとに、トップページの各セクションごとに、ワイヤー用の見出し案と簡単な本文案を出してください。

ポイントは、「決まっていることと」と「何をしてほしいか」を明確に伝えることです。 ここが不明瞭だと、AIは思っていたような結果を出してくれません。

前回の記事のように、AIとのやり取りの中でトップページの構成が決まった場合は、そのまま以下のように伝えても良いです。

■ ChatGPTが出してきた各セクションの構成

## ① ファーストビュー
### 見出し案（H1）
**教育事業のための、実践的オンラインスクール基盤**

### サブコピー
単なるeラーニングではない。
現場の運営に耐える「教育×テクノロジー」を提供します。

### 補足テキスト（短文）
エドベースは、教育事業者の視点から生まれた
オンラインスクール運営・テスト管理のためのプロダクトを開発しています。

---

## ② 課題提起
### 見出し案（H2）
**こんな悩みを感じていませんか？**

### 本文案
* オンラインスクールを始めたいが、ITやシステムが難しい
* 既存のeラーニングサービスでは、やりたい運営ができない
* 教育事業に合った仕組みが見つからない
* 現場の負担が増え、運営が属人化している

エドベースは、こうした**教育事業者特有の課題**からスタートしています。

---

## ③ 主力サービス導線
### 見出し案（H2）
**エドベースが提供するプロダクト**

### サービスブロック①：Edbase
**オンラインスクール運営を、もっと自由に。**

* オンラインスクールを簡単に構築・運営できるオールインワンプラットフォーム
* カリキュラム管理、受講者管理、学習環境を一元化
* 教育現場の運用を前提に設計

［Edbaseについて詳しく見る］
・
・
・

最初のセクション構成から、もう一段掘り下げたような形になりました。 もちろん、そのまま使えるものではありませんが、これがあるだけでワイヤー作成がとても楽になります。載せることを一から考えなくて良い、この一歩の差はいです。

この時点で「明らかにズレている」という場合には、このセクションで伝えたい趣旨が違うよ！とAIに伝えて調整・再生成をしていきましょう。

ただし、テキスト等の細かい部分は、ワイヤーを作りながら調整していく方法がおすすめです。 これは以下の理由からです。

• テキスト形式でずらっと眺めるよりも、ページ全体での流れが出来ているかが確認しやすい
• ワイヤーで大まかに配置を考えながらの方が「キャッチコピーは短く」など調整しやすい
• クライアントにワイヤーを見せ「修正したい箇所があればお教えください」と投げられる

■ AIを使うメリット｜制作スピードが一気に上がる

この方法を使うと、ワイヤーと文章を別々に考える必要がなくなります。

構成、見出し、仮の文章が同時に揃うため、制作のテンポが大きく変わります。 悩む時間が減り、判断と調整に集中できるようになります。

■ AI活用の注意点｜AIは整理役であって決定者ではない

AIが出した文章は、そのまま使うものではありません。 表現が少し硬かったり、会社らしさが足りなかったりすることがあります。 最終的にどう見せるかを決めるのは人間です。

ただし、ゼロから考える必要はありません。 整った下書きがあるだけで、作業負荷は大きく変わります。

ワイヤーフレームの作り方｜最低限の内容から配置を決める

ChatGPTが出力してくれた掲載内容（仮の見出し、文章）をもとにワイヤーフレームを作ります。 ワイヤーフレームとして実際に情報を簡単にレイアウト・配置し、情報の構成・ストーリーが成立するよう内容を更に精査していく工程になります。

ワイヤーフレーム自体は、Figma（フィグマ）やAdobe XD、その他Web系のデザインツールなどを使っての作成となります。ターゲットとなるペルソナを意識しながら、自分でテキストを配置して、構成を形にしていきましょう。

なお、ワイヤーデザインの段階でどのくらい作りこむかは人・企業によって差があります。 以下のデモは、大まかなレイアウトも決める方針で進めています。

これは、「画像が入る」や「横並びにする」など、大まかなレイアウトを決めておいたほうがクライアントに伝わりやすいためです。ある程度幅を狭めておくことで、本格的なWebデザインの工程に入ってからの大規模な修正も減らせます。

…と言っても、作り方の基本はシンプルです。 とりあえず簡単に、AIが出力してくれたテキストと画像を示す四角（プレースホルダー）をざっくりと置いていきます。 色や装飾は、この段階では考えません。

最も確認したい点は、情報の流れが自然かどうかです。 上から順に見て、無理なく内容が理解できるかをチェックします。

AIを活用した原稿作成のコツ｜作りながら、ChatGPTと一緒にコピーを調整する

レイアウトを決めながらテキストを流し込んでいくと、コピーライティングの改善ポイントが見えてきます。

• テキストが長い（短い）
• ページ全体での情報の流れがスムーズではない
• 見出しやコピーと説明テキストを分けたい　など

例えば、課題セクションの「こんな悩み」は説明っぽさが強く、ユーザーの共感を獲得→製品の魅力を伝える、という流れに乗りにくいです。 作ったワイヤーフレームの画面をスクショして添付し、ChatGPTにどう修正したいかを伝えます。

課題提起のセクションは、添付した画像のように以下3つの要素で1つの課題（あるあるネタ）にしたいと考えています。 キャッチコピーと詳細に分けたテキストを作ってみてください。 - キャッチコピー：端的で共感・インパクトのあるワード - イメージ画像 - 問題の詳細：キャッチコピーよりも、もう少し具体的な内容

そうすると、伝えた構成・イメージに合わせてテキストを調整してくれます。 良い文言があればそのまま使っても良いですし、AIの出力をヒントに自分で調整する・追加でAIにリクエストを出しても良いです。

次の製品紹介セクションとの繋がりも良くなるよう、更にAIに相談してみます。 　　↓ 問題点がどこか、どのような改善方法があるかを教えてくれます。

また、AIに任せたいロール（役割）を伝える手もあります。

前回は「あなたがこの会社のCEOなら」と役割を与えました。 今の作業なら「マーケター」や「コピーライター」など、して欲しい作業の❝専門家❞にAIを設定するイメージです。

例えば、ある程度の配置とテキストが決まった場合。 以下のように書くと内容の添削、SEOも意識したより良い文言があれば提案してくれます。

掲載内容を整理し、添付した画像のような状態まで作成しました。 一流のWebマーケターとして、より魅力的に見せるキャッチコピー・説明文を作成してください。

→ AIにどんな視点に立ち、何をしてほしかを指示します。

掲載する情報は変えずにお願い。

→ AIが思考・出力する際に守るべきルール（制限）を指定します。 「トップページとして、ユーザーの関心を高めるのを第一に」など更に具体的な要望があれば、それも入力します。

■ AIを使うメリット｜考える時間が大幅に短縮する

AIに構成やテキストの草案を出してもらうことで、全くの白紙から考えることがなくなり、作業に詰まらなくなります。

人間が行うのは「良くない部分を見つけ、改善していく」ことが中心。 このため、「何をどうしたら良いか、まったく思いつかない...」という状況に陥ることはほぼなくなります。考え込む時間が圧倒的に短縮され、一人で悶々と悩まなくて良いのでメンタル面での負担も減ります。

■ AI活用の注意点｜

AIは常に完璧な答えをくれるわけではありません。 プロンプトでの問いかけがズレていたり、情報が不足していると、的外れの回答が返ってくる場合もあります。巷で歌われている完全自動化のイメージに踊らされず、毎回「これは適切だろうか」と考えるようにしましょう。

また、情報解禁前の内容、企業の機密情報はAIに渡さないようにしてください。

他のページも同じ手順で進めます

会社概要ページやサービス紹介ページなども、基本的な考え方は同じです。 トップページでやったことを、そのまま他のページにも当てはめてみてください。

1. すでに「何を載せるか」が決まっているなら、それをAIに渡し、構成と文章の叩き台を作成。
2. ワイヤーに落とし込みながら、ユーザーを納得させる情報の流れが出来ているかを確認。
3. 必要に応じ、AIと相談しながら構成やテキストを調整。

ある程度ワイヤーフレームの形が出来たら、クライアントに提出して相談・調整を行います。 テキスト部分に関してはクライアントの修正も入ります。完成版を目指して作りこまなくても、クライアントが「こういう構成なら、キャッチコピーはこうしてほしいな」と言えるくらいに具体化できていれば大丈夫です。

まとめ：AI時代におけるワイヤーフレームの作り方

ワイヤーフレーム作成とは、決まっていた内容を形にする工程

第2回でやっていることは、新しい企画を考えることではありません。 第1回で整理した内容を、 AIを使って、画面と文章に落としこむ。

この工程を理解すると、Web制作は一気に現実的になります。 そして、AIがあるかないかで作業時間が桁違いに変ってくる部分でもあります。

次回予告

ワイヤーと文章が固まると、次に待っているのは本格的なデザイン作成。 「これ、ちゃんとしたデザインに見えるかな？」「クライアントの意向にあっているかな」という不安を、AIでどう解消するかを見ていきます。

Skillhubのご案内

この連載で紹介しているフローは、基礎があってこそ再現できるものです。

Skillhubでは、以下のようなことを、初心者向けに体系的に学べるカリキュラムを提供しています。

• Webサイトの構造の考え方
• なぜその構成・デザインになるのか
• AIが出したコードや提案を“理解して直せる力”

基礎知識を学べる無料講座もご用意しています。 この機に、AIを活用するために必要な基礎力を身につけちゃいましょう！