【AI×Web制作 爆速ワークフロー②】ワイヤーフレームと原稿「どこから作る？」問題をAIで解決
AI先生があなたの学習をやさしくサポートします。今までは有料ユーザーにのみ開放していましたが、今なら無料でWeb/AI制作7講座が受講できます。 この機会にAIつきの学習を体験してみてください。
（無料、限定100名、2月8日まで）
» 今すぐ無料講座をチェックする
サイト構成や掲載内容は決まった。
それなのに、ワイヤーフレーム作成や文章作成の段階で手が止まってしまう。
どこに何を置けばいいのか。
どんな文章を書けばいいのか。
白紙の画面を前に、悩む時間だけが増えていく。
AIを取り入れることで、この工程は大きく変わり、悩む時間はほぼゼロになります。 トップページ制作を例に、AIを使ってワイヤーフレームと原稿を同時に組み立てていく考え方と進め方を紹介します。
- 【AI×Web制作 爆速ワークフロー】について
- AI×Web制作 爆速ワークフロー第2回｜ワイヤーフレーム＆原稿作成編
- 今回行うこと
- AIを活用する①｜決まっている内容を渡して「たたき台」を作る
- ポイント｜最低限の内容でワイヤーフレームを作ってみる
- AIを活用する②｜作りながら、AIと一緒に内容を調整していく
- 他のページも同じ手順で進めます
- まとめ
【AI×Web制作 爆速ワークフロー】について
この連載では、AIを使ってWeb制作を“爆速化”するリアルな制作フローを、ひとつの架空案件を通して紹介していきます。
テーマはAIを使って、1ヶ月分の仕事を3日で終わらせる。
なお、この連載は「AIに丸投げして作っちゃおう」という話ではありません。
これは、実際のWeb制作ではクライアントの要望を理解し、Webサイト（ページ）に落とし込んでいく必要があるためです。
我々Skillhubがお伝えしたいのは、Web制作の仕事を請け負う中でのAI活用術です。
- 実際の制作フローの中で、AIをどのように活用するか？
- 失敗を防ぎ、AIを効果的に使うには？
- AIが優秀な今、人間（Web制作者）側に必要なスキルは何か？
第1回では、ヒアリングからクライアントの要望を実現するために必要なページ構成を決めました。
第2回では、その決まった内容をもとに、実際の制作に進みます。
AI×Web制作 爆速ワークフロー
第2回｜ワイヤーフレーム＆原稿作成編
今回行うこと
今回扱うのは、ワイヤーフレーム設計と原稿（掲載文章）作成です。
前回、それぞれのページの役割・どんな内容（情報）を掲載するか大まかに決めましたよね。
例えば、トップページの場合は以下のような情報構成と決まったとします。
これを使って、AIを活用しながらワイヤーフレームと文章設計を行っていきましょう。
### 1. トップページ
**役割**
初見ユーザーに「何の会社で、何が強いのか」を3分で理解させる
**掲載内容（要点）**
* ファーストビュー
* 教育×テクノロジーに特化した会社であること
* 「単なるeラーニングではない」一言コピー
* 課題提起
* 教育事業者が抱えがちな悩み（ITが難しい、既存ツールが合わない 等）
* 主力サービスの概要導線
* Edbase / Qeditor へのリンク
* 強みの要約
* 教育特化・自社運営・現場視点
* CTA
* 「まずは相談する」「資料を見る」
今回の問題｜構成が決まっているのに手が止まる
サイト構造や掲載内容が決まった。
次はワイヤー作成、というところで手が止まる人も多いのではないでしょうか。
上記のような大まかなセクション構成は決まっても、目の前にあるのは白紙。大まかなサイト構成から、文章と配置を考えてワイヤーフレームを作ろうとしても、どこから手を付けようと悩みますよね。
- ワイヤーを描こうとして、画面の前で固まる
- どの情報を、どこに配置すればいいかわからない
- ファーストビューが決まらずに進めない
- 大見出し以外の文章が書けない
これは、実力や知識が不足しているというよりも、考える順番の問題です。
配置と文章を同時に考えようとすると、どうしても迷いが生まれます。
ここでやるべきことは、新しく考えることではありません。
第1回で決めた内容を、制作用に再整理し、ワイヤーに落とし込めるように具体化していきます。
この作業を、人間が一人でやる必要はありません。
AIを活用する①｜決まっている内容を渡して「たたき台」を作る
今回は、いきなりChatGPTの出番です。
ヒアリングを元に整理したトップページの掲載内容を前提として、次のように指示します。
この内容をもとに、トップページの各セクションごとに、ワイヤー用の見出し案と簡単な本文案を出してください。
ポイントは、「決まっていることと」と「何をしてほしいか」を明確に伝えることです。
ここが不明瞭だと、AIは思っていたような結果を出してくれません。
前回の記事のように、AIとのやり取りの中でトップページの構成が決まった場合は、そのまま以下のように伝えても良いです。
■ AIが出してきた各セクションの構成
## ① ファーストビュー
### 見出し案（H1）
**教育事業のための、実践的オンラインスクール基盤**
### サブコピー
単なるeラーニングではない。
現場の運営に耐える「教育×テクノロジー」を提供します。
### 補足テキスト（短文）
エドベースは、教育事業者の視点から生まれた
オンラインスクール運営・テスト管理のためのプロダクトを開発しています。
---
## ② 課題提起
### 見出し案（H2）
**こんな悩みを感じていませんか？**
### 本文案
* オンラインスクールを始めたいが、ITやシステムが難しい
* 既存のeラーニングサービスでは、やりたい運営ができない
* 教育事業に合った仕組みが見つからない
* 現場の負担が増え、運営が属人化している
エドベースは、こうした**教育事業者特有の課題**からスタートしています。
---
## ③ 主力サービス導線
### 見出し案（H2）
**エドベースが提供するプロダクト**
### サービスブロック①：Edbase
**オンラインスクール運営を、もっと自由に。**
* オンラインスクールを簡単に構築・運営できるオールインワンプラットフォーム
* カリキュラム管理、受講者管理、学習環境を一元化
* 教育現場の運用を前提に設計
［Edbaseについて詳しく見る］
・
・
・
最初のセクション構成から、もう一段掘り下げたような形になりました。
もちろん、そのまま使えるものではありませんが、これがあるだけでワイヤー作成がとても楽になります。載せることを一から考えなくて良い、この一歩の差はいです。
この時点で「明らかにズレている」という場合には、このセクションで伝えたい趣旨が違うよ！とAIに伝えて調整・再生成をしていきましょう。
ただし、テキスト等の細かい部分は、ワイヤーを作りながら調整していく方法がおすすめです。
これは以下の理由からです。
- テキスト形式でずらっと眺めるよりも、ページ全体での流れが出来ているかが確認しやすい
- ワイヤーで大まかに配置を考えながらの方が「キャッチコピーは短く」など調整しやすい
- クライアントにワイヤーを見せ「修正したい箇所があればお教えください」と投げられる
■ AIを使うメリット｜制作スピードが一気に上がる
この方法を使うと、ワイヤーと文章を別々に考える必要がなくなります。
構成、見出し、仮の文章が同時に揃うため、制作のテンポが大きく変わります。
悩む時間が減り、判断と調整に集中できるようになります。
■ AI活用の注意点｜AIは整理役であって決定者ではない
AIが出した文章は、そのまま使うものではありません。
表現が少し硬かったり、会社らしさが足りなかったりすることがあります。
最終的にどう見せるかを決めるのは人間です。
ただし、ゼロから考える必要はありません。
整った下書きがあるだけで、作業負荷は大きく変わります。
ポイント｜最低限の内容でワイヤーフレームを作ってみる
AIが出力してくれた掲載内容（仮の見出し、文章）をもとにワイヤーフレームを作ります。
ワイヤーフレームとして実際に情報を簡単に配置し、情報の構成・ストーリーが成立するよう内容を更に精査していく工程になります。
ワイヤーフレーム自体は、Figmaなどグラフィックツールを使っての作成となります。
自分でテキストを配置して、構成を形にしていきましょう。
なお、ワイヤー段階でどのくらい作りこむかは人・企業によって差があります。
以下のデモは、大まかなレイアウトも決めてる方針で進めています。
これは、「画像が入る」や「横並びにする」など、大まかに決めておいたほうがクライアントに伝わりやすいため。ある程度幅を狭めておくことで、デザインに入ってからの大規模な修正も減らせます。
…と言っても、やることはシンプル。
とりあえず簡単に、AIが出力してくれたテキストと画像を示す四角をざっくりと置いていきます。
色や装飾は、この段階では考えません。
最も確認したい点は、情報の流れが自然かどうかです。
上から順に見て、無理なく内容が理解できるかをチェックします。
AIを活用する②｜作りながら、AIと一緒に内容を調整していく
レイアウトを決めながらテキストを流し込んでいくと、いろいろな改善ポイントが見えてきます。
- テキストが長い（短い）
- ページ全体での情報の流れがスムーズではない
- 見出しやコピーと説明テキストを分けたい など
例えば、課題セクションの「こんな悩み」は説明っぽさが強く、ユーザーの共感を獲得→製品の魅力を伝える、という流れに乗りにくいです。
作ったワイヤーをスクショして添付し、AIにどうしたいかを伝えます。
課題提起のセクションは、添付した画像のように以下3つの要素で1つの課題（あるあるネタ）にしたいと考えています。
キャッチコピーと詳細に分けたテキストを作ってみてください。
- キャッチコピー：端的で共感・インパクトのあるワード
- イメージ画像
- 問題の詳細：キャッチコピーよりも、もう少し具体的な内容
そうすると、伝えた構成・イメージに合わせてテキストを調整してくれます。 良い文言があればそのまま使っても良いですし、AIの出力をヒントに自分で調整する・追加でAIにリクエストを出しても良いです。
次の製品紹介セクションとの繋がりも良くなるよう、更にAIに相談してみます。
↓
問題点がどこか、どのような改善方法があるかを教えてくれます。
また、AIに任せたいロール（役割）を伝える手もあります。
前回は「あなたがこの会社のCEOなら」と役割を与えました。
今の作業なら「マーケター」や「コピーライター」など、して欲しい作業の❝専門家❞にAIを設定するイメージです。
例えば、ある程度の配置とテキストが決まった場合。
以下のように書くと内容の添削、より良い文言があれば提案してくれます。
掲載内容を整理し、添付した画像のような状態まで作成しました。 一流のWebマーケターとして、より魅力的に見せるキャッチコピー・説明文を作成してください。
→ AIにどんな視点に立ち、何をしてほしかを指示します。
掲載する情報は変えずにお願い。
→ AIが思考・出力する際に守るべきルール（制限）を指定します。
「トップページとして、ユーザーの関心を高めるのを第一に」など更に具体的な要望があれば、それも入力します。
■ AIを使うメリット｜考える時間が大幅に短縮する
AIに構成やテキストの草案を出してもらうことで、全くの白紙から考えることがなくなり、作業に詰まらなくなります。
人間が行うのは「良くない部分を見つけ、改善していく」ことが中心。
このため、「何をどうしたら良いか、まったく思いつかない...」という状況に陥ることはほぼなくなります。考え込む時間が圧倒的に短縮され、一人で悶々と悩まなくて良いのでメンタル面での負担も減ります。
■ AI活用の注意点｜
AIは常に完璧な答えをくれるわけではありません。
プロンプトでの問いかけがズレていたり、情報が不足していると、的外れの回答が返ってくる場合もあります。巷で歌われている完全自動化のイメージに踊らされず、毎回「これは適切だろうか」と考えるようにしましょう。
また、情報解禁前の内容、企業の機密情報はAIに渡さないようにしてください。
他のページも同じ手順で進めます
会社概要ページやサービス紹介ページなども、基本的な考え方は同じです。
トップページでやったことを、そのまま他のページにも当てはめてみてください。
- すでに「何を載せるか」が決まっているなら、それをAIに渡し、構成と文章の叩き台を作成。
- ワイヤーに落とし込みながら、ユーザーを納得させる情報の流れが出来ているかを確認。
- 必要に応じ、AIと相談しながら構成やテキストを調整。
ある程度ワイヤーフレームの形が出来たら、クライアントに提出して相談・調整を行います。
テキスト部分に関してはクライアントの修正も入ります。完成版を目指して作りこまなくても、クライアントが「こういう構成なら、キャッチコピーはこうしてほしいな」と言えるくらいに具体化できていれば大丈夫です。
まとめ
ワイヤーフレーム作成とは、決まってた内容を形にする工程
第2回でやっていることは、新しい企画を考えることではありません。 第1回で整理した内容を、 AIを使って、画面と文章に落としこむ。
この工程を理解すると、Web制作は一気に現実的になります。
そして、AIがあるかないかで作業時間が桁違いに変ってくる部分でもあります。
次回予告
ワイヤーと文章が固まると、次に待っているのは本格的なデザイン作成。
「これ、ちゃんとしたデザインに見えるかな？」「クライアントの意向にあっているかな」という不安を、AIでどう解消するかを見ていきます。
Skillhubのご案内
この連載で紹介しているフローは、基礎があってこそ再現できるものです。Skillhubでは、以下のようなことを、初心者向けに体系的に学べるカリキュラムを提供しています。
- Webサイトの構造の考え方
- なぜその構成・デザインになるのか
- AIが出したコードや提案を“理解して直せる力”
基礎知識を学べる無料講座もご用意しています。
この機に、AIを活用するために必要な基礎力を身につけちゃいましょう！
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
2月8日まで