AIがWebサイトを一瞬で設計。Wix Studioの最新機能「ビジュアルサイトマップ＆ワイヤーフレーム自動生成」が超便利！

2025年3月31日

Web制作者向けノーコードツール「Wix Studio」では、ビジュアルサイトマップとワイヤーフレームをAIで自動生成できる機能が提供されています。サイトマップやワイヤーフレームの作成は、Webサイト制作における重要なプロセスであるがゆえに、時間や労力もかかりがちです。本記事では、Wix Studio の最新AI機能によって、どれだけ作業効率化を図れるかを紹介します。

Wix Studio のAI自動生成とは？

ビジュアルサイトマップとワイヤーフレームのAI自動生成は、2024年12月からWeb制作者向けノーコードツール「Wix Studio」に標準搭載されている注目の新機能です。この機能を使えば、ビジネスの概要、ターゲット層、制作の目的、トーンなど、Webサイトに関する基本情報をテキストで入力するだけで、ビジュアルサイトマップや各ページのワイヤーフレームを瞬時に作成できます。

同機能はECサイト、予約受付サイト、ブログ、ポートフォリオなど、さまざまな目的のWebサイト制作に対応しており、自動生成されたデザインはあとから自由に編集できます。

Wix.com Japanの公式YouTubeチャンネルで公開されている「ビジュアルサイトマップとワイヤーフレームのAI自動生成機能」の紹介動画。「3分で完成」というタイトルどおり、その手軽さが魅力です

実際にAI自動生成を試してみよう！

使い方は、いたってシンプル。Wix Studioにログインした後、ビジュアルサイトマップ＆ワイヤーフレーム生成ツールで［今すぐ生成する］ボタンをクリックすると、Webサイト情報の入力画面に遷移します。

入力項目は、自由記述の「ビジネスの種類」「ビジネスの説明」「ビジネス名」「拠点」「ターゲット」「特徴」「作成する主な目的」の7項目と、選択式の「サイトの主なサービス」「生成されるテキストのスタイル」の2項目。自由記述は、情報が多いほど生成の精度が高まるため、できるだけ詳しく記入するのが理想的です。

「サイトの主なサービス」では、「商品またはサービスをオンラインで提供」「オンライン予約の受付」「ブログの作成」「イベントの開催」「ポートフォリオの展示」から1つを選びます。生成後にサービスを追加することも可能なので、まずはメインとなるものを選択するとよいでしょう。

「生成されるテキストのスタイル」では、「ニュートラル」「プロフェッショナル」「実用的」「遊び心のある」「フレンドリー」「カジュアル」「礼儀正しい」「自信満々」の8種類から最大2つを選べます。選んだスタイルは、Webサイト内の文章に反映されるため、サイトの雰囲気に合わせて選ぶのがポイントです。

これらを入力したあと、［続行する］を押すと、「ビジュアルサイトマップとワイヤーフレーム」または「ビジュアルサイトマップのみ」のどちらを生成するかを選ぶ画面に遷移します。希望するほうを選択し、［生成する］を押せば、入力内容に基づいてAIによる自動生成がスタート。いよいよWebサイトの骨組みが形になります。

各ページをゼロから検討したい場合は、サイトマップのみ生成することも可能。今回は両方を自動生成してみます

生成後は、管理画面でビジュアルサイトマップと各ページのワイヤーフレームを確認でき、ユーザーが自由に編集することも可能です。ビジュアルサイトマップでは、Webサイト全体の構造を俯瞰しながら、ページ内の要素を別のページに移動したり、不要なページを削除したりと、柔軟に調整できます。JPEGデータでエクスポートもできるので、関係者への共有も簡単に行えます。

ビジュアルサイトマップには、お問い合わせやポリシーページなど、ビジネスに必要なページ・要素が網羅されています

実際にエクスポートしたビジュアルサイトマップ。これだけのページ構造を、自動で作成できるとは驚きです

ワイヤーフレームには、チームメンバーの紹介やお客様の声など、Webサイトでよく見かける要素があらかじめ配置されています。テキストは、入力した情報をもとにAIが自動でカスタマイズ。要素の順番を入れ替えたり、文章を書き換えたりと、ユーザーによる調整も自由自在です。

画像が入る位置には空のボックスが配置されており、そのままWix Studioが提供するフリー素材を使ったり、管理画面上のAI画像生成機能で作成したものに差し替えたりするだけで、よりイメージが掴みやすいワイヤーフレームになりそうです。

また、Wix Studioの共同編集により、ユーザーの招待やページごとに権限を設定することも可能。変更はリアルタイムに反映されるため、複数人で確認したり、編集作業を実施したりするようなチーム作業にも最適です。

たとえばAIが作成した「お客様の声」にAI生成画像を配置し、ワイヤーフレームの解像度を高めることもできます

サイト制作の“1歩目”を素早く踏み出せる！

実際に使ってみると、Wix Studioのビジュアルサイトマップ＆ワイヤーフレーム自動生成機能は、アウトプットのハードルを下げ、“とりあえずつくってみる”という感覚で活用できる魅力的な機能だということがわかりました。

Web制作のスタート地点では、「どのようなWebサイトをつくりたいのか」を関係者内で明確にすることが求められます。しかし、そのためのサイトマップやワイヤーフレームを作成するには、多大な時間と労力がかかるものです。

その点、AI自動生成なら、漠然としたイメージを瞬時に形にできるため、「叩き台」を簡単につくることが可能。ゼロから自力で作成するのではなく、まずは自動生成し、必要な部分を修正・調整するという手法は、制作者にとって大きな武器になるでしょう。またクライアントや社内関係者向けの資料作成の負担を減らすことで、企画やデザインといったコア業務に集中しやすくなるはずです。

Wix Studioのビジュアルサイトマップ＆ワイヤーフレーム自動生成機能は、Web制作の質とスピードを向上させる大きな可能性を秘めていると言えます。ぜひ一度体験してみてください。

Text / Photo：佐藤実