#32 もう0から作らないAIを使って実案件でも一瞬でワイヤーフレームを作る方法
サムネキャッチコピー：3時間かけてたワイヤーフレーム 10分で終わりました
タイトル：【2026年版】AIを使ったワイヤーフレームの作り方｜webデザイナーが差をつける6ステップ
オープニング
似たり寄ったりなサイトを量産することに、
もはや価値はありません。
AIで秒で完成させただけでは稼げない事実。
実は、ワイヤーフレームに⚫︎⚫︎⚫︎⚫︎（写真構成）
の工夫をするだけで
紹介が生まれる仕組みがあるんです。
こんにちは、webデザイナーのshokoです。
今回は、これまで1時間かかっていた
ワイヤーフレームの作業をAIで10分に短縮しながら、
クライアントから自然と紹介が生まれる
提案の型まで全部わかります。(29秒)
実は、本当の分かれ道になるのは
ワイヤーフレームができた後。
最後のステップでは、実際に
クライアントから公開OKをもらった
実案件を特別公開します。
今まで誰にも見せてこなかった内容なので、
AIに仕事を奪われたくない
webデザイナーさんは最後までご覧ください。
（48秒）
ステップ１：
打ち合わせを文字起こしする
まず最初にやること、
打ち合わせの文字起こしです。
ワイヤーフレームを作る前提として、
クライアントへのヒアリングがありますよね。
このヒアリング、オンラインで行うのを
強くおすすめします。
理由はシンプル。録画が残せるから。
「言った・言わない」の
トラブル防止にもなりますし、
あとから内容を振り返ることができて
一石二鳥。
録画が取れたら、次はAIで文字起こし。
文字起こしツール、
今はいろんなものが出ていて
notta、Google AI studio、
Plaud（プラウド）など、好きなものでOK。
私がやってみた中でも、
一番シンプルに感じたのは
zoomの録画とGeminiの組み合わせ。
今日はこのやり方で進めていきます。
zoomの録画には2種類あって、
違いは保存場所だけです。
クラウドレコーディングはzoomの
サーバー上に保存されるので、
どのデバイスからでもブラウザで確認できます。
コンピュータへのレコーディングは、
自分のPCの中に録画データが保存されます。
どちらで録画しても文字起こしは
できるので、普段使っている方で大丈夫。
それぞれ見ていきましょう。
まずはクラウドレコーディングの場合
画面共有素材①
zoomの管理画面を開いて、
左のバーにある
「レコーディングと文字起こし」をクリック。
表示されたテキストをコピーして、
Geminiに貼り付けます。
プロンプトはこちら。
「#以下のzoom文字起こしを
タイムラインを削除して全文を出して。」
出てきた文章をテキストファイルに
コピペします。これだけです。
次に、コンピュータに保存した場合
Geminiに音声ファイルを
直接アップロードします。
「コンピュータにレコーディング」
を選択すると、このように
音声データと動画データが保存されます。
文字起こしでは、
音声ファイルのみで大丈夫です。
画面共有素材②
このm4aファイルをGeminiに
アップロードして、
次のプロンプトを入力します。
「#添付の音声ファイルから、
要約をせずに全文を文字起こしして。」
アップロードと処理に少し
時間はかかりますが、
これで全文が出てきます。
ちなみにオフラインでヒアリングする場合は、
私はPlaud（プラウド）aiのマイクタイプを
愛用しています。
初期費用は3万円ほどかかりますが、
ボイスレコーダーとしても優秀で、
専用アプリで文字起こしまでできる優れもの。
ただ費用がかかるので
そこまで頻繁にリアルで打ち合わせしない方は
スマートフォンのボイスメモを使って
記録に残すのもありです。
で、「今すぐ実案件がないけど
ワイヤーフレームの練習をしたい」
という方もいると思います。
そういう場合は架空サイトで
練習をしていきましょう。
Geminiで新しいチャットを開いて、
こちらのプロンプトを入力してください。
あ、ちなみに今日こういう
プロンプトが全部で６個出てきます。
毎回メモをするのも大変だと思うので
プロンプト集にまとめました。
動画の最後でプレゼントするので
必ず受け取ってくださいね。
「#あなたはこれからワインバーの
店主になりきって回答してください。
店舗名・コンセプト・ターゲット・メニュー・
営業時間・住所（架空）・連絡先・
サイトに載せたい情報・サイトを作る目的を、
それぞれ具体的に考えて出してください。」
画面共有素材③
では、プロンプトを入れると、
これで架空のクライアント情報が
一瞬で完成しました。
今回の動画ではこの内容でデモをしていきます。
文字起こし、もしくは架空の内容ができたら、
内容を全部コピペしてファイルに保存します。
テキストファイルとして保存できた方が
今回は使いやすいので
画面共有素材④
私はMacの
「テキストエディット」を使っています。
ファイル名は「ヒアリング文字起こし」
とつけておきましょう。
ステップ２：Geminiで
ヒアリングシートの回答に整える
ではまた、Geminiで
新規チャットを開いてください。
ステップ１で作った「ヒアリング文字起こし」
のテキストファイルと、ヒアリングシートの
２つをアップロードします。
このヒアリングシート、
聞き漏れがないように質問項目を
予めまとめたものです。
こちらは私の公式LINEから
無料でお配りしているので
ぜひご活用ください。
動画素材⑤
さて、２つのファイルをアップロードして、
次のプロンプトを入力します。
やっていることはシンプルで、
ヒアリングシートの質問項目の順番通りに、
文字起こしの内容を整理して
出してもらうように指示しています。
こうすることで、質問に対応する形で
ヒアリング内容が書き出せます。
（「#添付ファイルが2つあります。
①ヒアリングシート（質問項目）
②文字起こしテキスト。
①の質問項目の順番通りに、
②の内容から該当する回答を抜き出して
整理してください。
情報が不足している項目は
『要確認』と記載して。」）
この後もまだ下準備が続くので、
ここで出てきた文章は
テキストファイルにコピペして
保存しておきましょう。
ファイル名は「ヒアリング回答」と
つけておくとわかりやすいです。
ステップ３：
マインドマップで構成を作る
ワイヤーフレームに入る前の構成づくりです。
ここを飛ばしてしまうと、
ワイヤーフレームを作ったあとに
「なんかしっくりこない」
「この順番でいいのかな」と
迷いが出てきます。あとから修正する
手間を減らすためにも、ここは丁寧に
向き合っていきましょう。
このステップはAIに全任せせず、
自分の手を動かして
作ることを強くおすすめします。
理由は２つ。
１、構成を視覚化することで
頭の中が整理しやすくなるから。
２、自分で考えた分だけ後々の
軌道修正が少なくなるから。
マインドマップを作るツールは、
マインドマイスターやXmindが
無料で使えるのでおすすめです。
ここで作るのは、サイトの
構成案のイメージ。
どんなページがあって、どんな順番で
情報を見せるかを整理していきます。
実案件では、このマインドマップが
できた段階でクライアントに一度お見せし、
方向性をすり合わせています。
この段階でこまめに確認しておくことで、
後々のズレが大きくなる前に
軌道修正できるからです。
マップができたら、
次はワイヤーフレームを
一瞬で作るための下準備。
構成を文章化して、
プロンプトを作っていきます。
無料版ではPDFをダウンロードできないので、
スクリーンショットで代用します。
動画素材⑥
スクショの撮り方は、Macは
「Command＋Shift＋Control＋4」、
Windowsは
「Windowsマーク＋Shift＋S」です。
撮ったスクショはそのまま
GeminiのチャットにコピペでOK。
Macは「Command＋V」、
Windowsは「Control＋V」で
貼り付けられます。
貼り付けたら、
こちらのプロンプトを入力してください。
（「#添付の画像は、ホームページの構成です。
今したいことは、後でGeminiにワイヤーフレームの
プロンプトを作ってもらう事前準備です。
添付のホームページ構成案を、
Geminiに指示を出すときに伝わりやすいように、
私が作りたい構成を文字で表現して。」）
するとこのように、構成を
文章で出してくれます。
次に、この構成案をベースに、
ステップ２で作った「ヒアリング回答」
ファイルをアップロードして、
続けてこちらのプロンプトを入力します。
「#上記の構成案を維持したまま、
添付のテキストファイル
「ヒアリング回答」の内容を適宜入れ、
ホームページのワイヤーフレームを作る
Relume AIでそのまま使える
プロンプトを作成して。」
これで、次のステップで使うRelume AI用のプロンプトが完成です。
ステップ４：Relume AIで
ワイヤーフレーム作成
ここまでの下準備ができたら、あとは一瞬。
「Relume」というワイヤーフレーム
作成AIを使っていきます。
Googleで「Relume」と
検索してください。
無料版でも十分に活用できます。
作れるページ数は1枚という制限がありますが、
一度作ってもdeleteすれば
また作成できるようになります。
今回は無料版のまま進めていきますね。
気に入ったら有料版も検討してみてください。
動画素材⑦
こちらが、Relumeにログインした画面です。
右上にある「NewProject」をクリック。
こちらのディスクリプションの欄に、
ステップ３の最後でGeminiが
出してくれた文章をコピぺします。
次に、言語設定を日本語に変更して
「Generate Sitemap」をクリック。
すると、まずはサイトマップの案が
出てくるので、
この段階で順番の入れ替えも可能です。
ドラッグ&ドロップで入れ替えられます。
順番がOKになったら、上のタブから
「Wireframe」をクリック。
これで一瞬で、
ワイヤーフレームが完成！
今まで０から自力で
ワイヤーフレームを作っていて、私は
1時間くらいかかることもあったんですよね。
それがこんな簡単にできてしまうなんて
最初見た時は本当に衝撃でした。
ステップ５
Figmaにエクスポート
Relumeで作ったワイヤーフレームは、
Figmaにエクスポートすることができます。
Figma上で文字や画像を編集できたり、
画像としてダウンロードできるので
ここから先の作業が一気に
やりやすくなります。
ひとつ注意点として、
RelumeとFigmaの連携はブラウザ版だと
うまくいかないことがあります。
デスクトップアプリ版を
使う方がスムーズなのでおすすめです。
まだPCにインストールしていない方は
「Figma ダウンロード」で検索してください。
動画素材⑧
Figmaを開いたら、
Relumeのプラグインを追加して
「実行」をクリック。
これだけで、Relumeで作った
ワイヤーフレームが編集できる形で
Figma上に展開されます。
作ったワイヤーフレームは
画像としてダウンロードも可能。
全体の画像タイトル部分をクリックして、
右下からエクスポートするだけです。
普段Photoshopをメインで使っている方でも、
Figmaはスポット利用しやすいツールです。
無料版でもダウンロード制限がないのも、
地味にありがたいポイント。
ワイヤーフレームを作る作業は、
AIのおかげで一瞬でできる時代になりました。
でも見方を変えれば、
AIを使えば誰でもできてしまう。
だからこそ、ここからが本当の分かれ道。
実は、差がつくのは
ワイヤーフレームができた後なんです。
最後のステップでは、実際にクライアントから
公開の承諾をもらった
実案件を特別にお見せします。
なかなか公開することがない内容なので、
AIに仕事を奪われたくない方は
絶対に飛ばさないでください。
ステップ６：
写真構成の提案
ワイヤーフレームを作ったあと、
9割のデザイナーがやらないことがあります。
これをやるかやらないかで、
クライアントからの信頼度が
まったく変わってきます。
AIでサイト制作が爆速になった今、
作業スピードで差をつけるのはもう難しい。
「AIでサイト制作秒で完了！」なんて言葉、
情報収集していると聞いたことありませんか？
どうでもいいサイトなら確かに秒でできます。
でも、クライアントを前にして
それは通用しない。
差がつくのは、人が介在する場所の密度。
そこに全力をかけられる
デザイナーが生き残ります。
ワイヤーフレームのOKをもらったあと、
私がやっていることを
今日はそのままお見せします。
動画素材⑨
使うのはCanva。
Figmaでダウンロードした
ワイヤーフレームを
Canvaのホワイトボードに入れて、
写真の構成提案を作っていきます。
フリー素材や実際のウェブサイトから
参考写真を探してきて、
こんなイメージで撮ってほしい
という見本を並べていきます。
さらに、余白の向き・撮影場所
・必要なカット数まで細かく
書いています。
これがクライアントにもカメラマンにも
共有できる資料になるんです。
実はこれ、あるベテランカメラマンさんに
言われた一言がきっかけで始めました。
私が新人デザイナーだった頃、
写真の相談をしていたとき、
こう言われました。
「カメラマンは、イメージを目に
見える形に映し出す仕事だから、
なんとなくのイメージでは認識のずれが
出てしまう。制作者にがっかりされると、
本当に辛い。だから、イメージを
目に見える形にして渡してほしい。」
この言葉、めっちゃ刺さりました。
その方、大企業の宣材写真も
手がけている大ベテランです。
経験豊富なプロでさえ、
認識のズレは起きる。
それ以来、ワイヤーフレームのあとは
必ずこの形式で、クライアントも
カメラマンも全員が同じ
認識を持てるように整えています。
で、ここで、「さっきFigma使ってたのに
どうしてこっちではCanvaなのか？」。
理由は２つです。
一つ目は、クライアントにとって
馴染みがあること。
Figmaを触ったことがない方でも、
Canvaなら使ったことがある人が多く、
確認してもらいやすいです。
二つ目は、無料版でも
ページ数の制限がないこと。
Figmaの無料版はページ制限があるので、
クライアントごとの管理には
Canvaの方が便利です。
作業はAIに任せて爆速で終わらせる。
その分の時間とエネルギーを、
こういう付加価値に使う。
これが、AI時代に生き残る
デザイナーの動き方。
顧客満足度につながり、
その先の紹介へと広がっていきます。
実際に私は今、新規案件の７割は
ご紹介からいただけるという
環境を作れています。
エンディング
今回紹介した6ステップは
全て無料で始められます。
見るだけで終わらせず、
この後すぐ実践してくださいね。
「プロンプト、なんだったっけ？」と
迷ったときのために、
動画で使ったプロンプト集と
ヒアリングシートをセットで
プレゼントします。
ここまで真剣にみてくれたあなたにだけ
受け取り方法をお伝えしますね。
受け取りは概要欄またはQRコードから
私の公式LINEを追加して、
「ワイヤー」とカタカナで送ってください。
このような形で自動返信でお送りします。
配布終了前に必ず
受け取っておいてくださいね。
似たり寄ったりなサイトを量産することに、
もはや価値はありません。
AIに任せながら、人にしかできない提案で
差をつけていきましょう。
今回の動画、いかがでしたか？
実はこの内容、視聴者の方からの
リクエストで作りました。
「こんなこと知りたい」
というテーマがあれば、
ぜひコメントで教えてください。
皆さんのリアクションが次の
動画を作る力になっています。
また次の動画でお会いしましょう！
