【動画あり】Web制作を加速させるWix StudioのAI機能。思考をそのまま形にする、新しい制作ワークフローへ

日進月歩で進化し、いまや幅広い作業を支える存在となったAI。Web制作の現場でも活用が広がり、制作フローそのものを見直す動きが加速しています。

ノーコードツールWixのプロ向けWeb制作ソリューション「Wix Studio」も、早くからAI機能の開発に着手し、いまでは多彩な機能を備えた“AI統合型プラットフォーム”へと進化。今回は、その主要AI機能を取り上げるとともに、Wix.com Japan株式会社 フロントエンドエンジニア・山下圭祐さんに、Wix StudioがAI開発に注力する背景や、AIがWeb制作にもたらす価値について聞きました。

記事の最後には、Wix StudioのAI機能をまとめて確認できるウェビナー動画も掲載しています。ぜひあわせてご覧ください。

目次

制作効率がグッと上がるWix StudioのAI機能

「Wix Studio」には、制作のさまざまな工程を補助するAI機能が多数実装されています。なかでも活用頻度が高いのが「ビジュアルサイトマップ&ワイヤーフレーム」「レスポンシブAI」「テキスト生成」の3つ。まずは、それぞれの特徴を順に見ていきます。

ビジュアルサイトマップ&ワイヤーフレーム

ビジュアルサイトマップ&ワイヤーフレームは、Webサイトの設計図とワイヤーをAIで自動生成する機能です。事業概要など、最小限の情報をプロンプトとして入力するだけで、用途に適した構成案が提案されます。

プロンプトも「アイスクリーム屋さん」など業種を入力し、「AIでフォーム入力」を押すだけでOK。拠点・ターゲット・主要コンテンツといった詳細項目をAIが推測して自動で埋めてくれるため、入力作業の手間が大幅に削減されます。

生成後の調整も柔軟で、必要に応じて加筆修正が可能。さらに、サイトに掲載するテキストも同時に生成され、「実用的」「遊び心のある」「フレンドリー」などのトーンを選ぶだけで、設計図やワイヤーフレームに文言が自動反映された状態で出力されます。

Webサイトの設計図とワイヤーをAIで自動生成する「ビジュアルサイトマップ&ワイヤーフレーム」
ビジュアルサイトマップとワイヤーフレームの両方を生成することも、ビジュアルサイトマップのみをつくることもできます

完成した案はWix Studioのエディタ内で即座にプレビュー・編集が可能。打ち合わせ初期段階から具体的なサンプルを提示できるため、クライアントとの認識合わせがしやすく、手戻りの発生を抑えられる点も大きなメリットです。

ビジュアルサイトマップ&ワイヤーフレーム生成ツール

レスポンシブAI

レスポンシブAIは、PC/タブレット/モバイルの3つのデフォルトブレイクポイントを起点に、あらゆる画面サイズに最適化されたフルレスポンシブレイアウトをAIが自動生成する機能です。

たとえばPC版のデザインを作成すると、その構造を踏まえてタブレット版・モバイル版を自動で生成。出力後に細かなレイアウト調整を行うこともできます。

Wix Studioでは、ワンクリックでレスポンシブなレイアウトを作成可能

現在ではモバイルファーストで設計されるWebサイトも増えていますが、「モバイル版を起点にPC/タブレット向けのブレイクポイントをAIに生成させる」といった使い方にも対応します。

従来、Web制作者は3デバイス分のデザインを個別に作り込む必要があり、大きな工数負担となっていました。レスポンシブAIを活用すれば、この作業量が大幅に軽減され、より本質的な表現や情報設計にリソースを割けるようになります。

Wix Studio エディタ:AI を使用してセクションをレスポンシブにする

AIテキスト生成

AIテキスト生成機能は、業種やサイトに盛り込みたい内容をプロンプトとして入力するだけで、AIが複数パターンの文章を自動生成してくれる機能です。提示された候補から好みのテキストを選択し、仮テキストとして配置するのはもちろん、内容によってはそのまま実装することもできます。

ビジネスタイプや名前を入力したあと「テキストを生成(Create Text)」をクリックします
テキスト候補が生成されたら、内容を確認して使用するものを選びましょう

また、Wix Studioのテンプレートには英語や多言語のサンプルが含まれるケースも多く、それらを日本語化する際にもこの機能が有効です。テキストが入ることで、フォント選定やレイアウトのバランス、コンテンツ量の適正などを具体的に判断しやすくなる点もメリットです。

Wix Studio エディタ:AI テキスト生成ツールを使用する

「Base 44」を活用したバイブコーディング

WixがAI領域に本格的に投資していることを示す象徴的な動きとして、2025年6月に、設立半年のスタートアップが提供するAIプロダクト「Base 44」を買収したニュースが大きく取り上げられました。現在、このBase 44はWix Studioと合わせて利用できます。

Base 44は、自然言語による指示だけでアプリやWebサイトなどを生成できる“バイブコーディング”ツールです。コーディングのアシスタントとして部分的に使うことも、プロンプトを渡してコードを含む制作物を丸ごと生成させることも可能です。

バイブコーディングツールにありがちな課題として、「動くものは出力されるが、コード品質が最適化されていない」という点がよく挙げられます。Base 44では、AIがゼロからコードを書くのではなく、Reactなどの一般的なライブラリやオープンソースのソリューションを積極的に活用。これにより、一定の品質とメンテナンス性が担保されたコードが生成される点が特徴です。

また、プロンプトによってはデータ同士の整合性が取れず不整合が起きるケースもありますが、Base 44は「この部分の噛み合わせが悪いようですが、どうしますか?」と自然言語で確認してくれるため、そのまま対話形式で修正が可能です。

現在は英語版のUIのみとなりますが、プロンプトは日本語でも入力でき、無料プランから試せます。Wix Studioと組み合わせて利用することで、設計から実装までのプロセスに新しい選択肢が生まれるでしょう。

Base44

開発者インタビュー:生成AIでWeb制作はどう変わるのか?

では、なぜWix StudioはAI機能の開発に早期から注力してきたのでしょうか。Wix.com Japan株式会社 フロントエンドエンジニア・山下圭祐さんは、その背景を次のように語ります。

「我々がWix Studioで実現したい究極のゴールは、“Web制作者の思考をそのまま実現可能にすること”です。

Wix Studioは多機能である一方、メニューが多く操作が煩雑になりやすいという課題もありました。こうしたボトルネックをAIによって補完し、Web制作者の方々がAIと二人三脚で、思い描いた通りのWebサイトをつくれるようにする。それを目指してAI機能を開発してきました」(山下氏)

Wix.com Japan株式会社のフロントエンドディベロッパー・山下圭祐さん

こうしたWix StudioのAI機能は、Web制作者だけでなく、制作を依頼するクライアント企業にとっても多くのメリットをもたらします。

「まずは“制作スピードの向上”が最も実感しやすいポイントです。制作が早くなることで案件数を増やしたり、人件費を抑えたり、あるいはクオリティアップのために時間を配分したりと、さまざまな選択肢が生まれます。開発やフィードバックのサイクルが短くなることで、結果的にアウトプットの質も高まるはずです。

また、Wix StudioにはSEOやレポーティングなど、運用を効率化するためのAI機能も実装されています。ローンチ後の作業負荷を軽減できる点は、Web制作者だけでなくクライアント企業にとっても大きなメリットとなります。

さらに、個人商店などスモールビジネスの方が自らWebサイトを制作する場合にも、AI機能を活用することで一定のクオリティを担保したサイトを構築できます。あらゆる立場のユーザーが、AIによって制作のアドバンテージを得られるよう設計しています」(山下氏)

AI機能はWeb制作者にとって大きな助けとなる一方で、AIによって“誰が作っても一定以上のクオリティが担保される”時代が訪れつつあります。だからこそ、これまで以上に「Webサイトの本質的な価値」が問われるようになるはずです。より高度な目的を実現するWebサイトを支援するため、Wix StudioのAI開発は今後も進化を続けます。

「我々は、Wix Studioというプラットフォームを通じて、利用される方々が競合企業やグローバル市場でも戦えるWebサイトを制作し、自己実現や夢の達成につなげてほしいと考えています。

そのためにAIは非常に強力なツールです。制作時に生じるあらゆるストレスを最大限取り除き、Wix Studioが培ってきた豊富な資産を活かしながら、制作者の思考と実現とのギャップを埋めていく。そうした機能を、これからもAIを用いて開発していきたいと思います」(山下氏)

Wix Studioが実現する新たな制作プロセス

本記事で紹介したAI機能は、Wix Studioが備える機能群のほんの一部に過ぎません。2025年11月26日に開催されたWixのウェビナーでは、計17種類ものAI機能が紹介され、制作プロセス全体を支える多彩なアプローチが示されました。

ウェビナーのアーカイブは下記から視聴できます。今後もWixはウェビナーやYouTube、SNSなどで新機能を随時発信していくとのことなので、興味のある方は公式情報もあわせてチェックしてみてください。

取材・文:平田順子

  • URLをコピーしました!
目次