一瞬でサイトができる！Elementor AIサイトプランナー(AI Site Planner)

はじめに

AIと会話をするだけでサイトのワイヤーフレームをElementorで作ってくれる、Elementer社公式の新しいツールが登場しました！
その名も『Elementor AIサイトプランナー（AI Site Planner）』
ちょっとの質問（10個以下）に答えると、一気にサイトマップとワイヤーフレームを作成し、それを実際に皆さんのサイトにインポートすることができます。

この記事では、AIサイトプランナーを使って実際に質問に答えてサイトマップとワイヤーフレームを作成していく手順を解説します。

実際に自分のサイトにインポートして使うには、Elementor proが必要になります。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

AIサイトプランナーを使うには

このページからAIサイトプランナーを使うことができます。

ページ右上に表示されている『Tyr For Free』をクリックします。

AI利用規約とプライバシーポリシーを確認し、同意なら『Let’s start』をクリックします。

AIと会話する

『Start with AI chat』と『Use an AI Notetaker』が表示されますが、今回は『Start with AI chat』をクリックします。

サイトの名前を決める

英語でAIとの会話が始まります。
サイトの名前を何にしますか？と聞かれるので、日本語でサイト名を入力します。

業種を伝える

サイト名を日本語で入力すると、自動的にAIの言語が日本語になりました。
次にビジネスの具体的な運営形態（業種）を聞かれます。
業種を入力し、送信します。

もう少し詳しい内容を伝える

AIから聞かれる質問は、こちらが同じ返答をした場合でも違う聞き方をされたり、順番が違う場合があります。
これより下の内容は一例としてご覧ください。

業種の情報について少し詳しい内容を伝えます。

ウェブサイトの目標を聞かれました。
今回は下の選択肢に表示されている『顧客信頼の構築』を選択してみます。

画面右側に、AIが聞き取った内容が表示されます。
ウェブサイトの二次目標を聞かれたので『売上の向上』を選択してみます。

サイト名を『nocode商事』としたので、ウェブサイトの言語を聞かれました。
今回は『日本語』を選択してみます。

必要な機能や要素を伝える

次に、ウェブサイトの要素を伝えます。
項目例が表示されていますので、そこから選択してもＯＫです。
直接入力する場合は、項目を半角の『,（カンマ）』で区切ります。

ページの構成を伝える

ページ構成を聞かれたので、今回は『ホームページ,サービス詳細,お客様の声,お問い合わせ』を選択します。
カンマ区切りでも直接入力でもOKです。

ウェブサイトのスタイルについて伝える

ウェブサイトのスタイルを伝えます。
今回は『プロフェッショナル』を選択します。

ターゲットユーザー年齢層を伝える

ターゲットとするユーザーの年齢層を選択します。
今回は『35歳-44歳』を選択してみます。

返答内容の修正

一度回答した内容を修正することができます。

最終確認

今まで聞き取りをした内容でいいか、確認されます。
何故かこの時だけ英語で質問されたので、『日本語でお願いします』と入力すると、日本語で確認の文章が送られてきました。
これでOKの場合は、『はい、準備できました』を選択します。

サイト制作を開始する

画面右上の『Use This brief』をクリックします。

サイトマップ

自動的にサイトマップが表示されます。

サイトマップの編集

サイトマップの各セクションは、直接文字入力編集することが可能です。
『2列』を『3列』に修正したり、『アコーディオン形式』を『リスト形式』に変更した場合は反映されましたが、カラーなどの指定文章を入力しても、反映されませんでした。
背景色や文字の大きさ・太さなどスタイルに関する内容は現時点では反映されないようです。

各セクションの右上にマウスカーソルを持って行くと、『Regenerate section』と『Delete section』が表示されます。
違う提案をお願いしたり、セクションの削除をすることができます。

セクションの追加

セクションとセクションの間にマウスカーソルを移動させると、『Add section』が表示されるのでクリックする。

何を追加するのか選択できるようになるので、一覧の中から選択します。

今回は『Gallery』を選択してみます。

『Gallery』が表示されましたが、説明がないので、『Generate section』をクリックします。

説明が生成されました。

ワイヤーフレーム

サイトマップの編集が完了したら、次はワイヤーフレームです。

画面上部の『Wireframe』をクリックします。
すると自動でワイヤーフレームが作成されます。
このワイヤーフレームすべてがElementorで作られています。

ワイヤーフレームの編集

ワイヤーフレームもサイトマップと同様に、各セクションの右上にマウスカーソルを持って行くと、『Regenerate section』と『Remove section』が表示されます。
違う提案をお願いしたり、セクションの削除をすることができます。

同一ページ内なら、ドラッグでセクションの移動もできます。

ワイヤーフレームの設定

画面右下で、デバイス毎の表示切替や表示倍率の変更ができます。

スタイル

画面上部の『Style』をクリックします。
まだ現在（2025年2月〇日）この機能は使えません。
Coming soonとなっているので、近々使えるようになるかもしれません。

データのエクスポート

サイトマップ・ワイヤーフレームの内容が決まったら、データのエクスポートをします。

画面右上の『Export Kit』をクリックします。

データを生成している間、この画面が表示されます。
イラストを見ると、『Wordpress＋Elementor pro」でワイヤーフレームを生成している、と表示されています。

『Ta-da! Your kit is ready』と表示されます。
『Download kit』のボタンをクリックします。
すると、Zipファイルがダウンロードされます。

必要な環境

Elementor pro

AIサイトプランナーで生成したデータをインポートして実際に使うためには、Elementor proが必要です。

共通のHeaderとFooterを作る必要があったり

ワイヤーフレーム内で使われている『フォーム』も、Elementor proの『フォーム』機能だからです。
AIサイトプランナーで生成したデータを取り込んで使う場合には、Elementorだけでは使えません。
WordPress内に『Elementor』と『Elementor pro』をインストールしておいてください。

Hello Elementor

テーマは『Hello Elementor』がオススメです。
『Hello Elementor』が一番Elementorと相性が良く無難だからです。
（他のテーマでもインポートは可能です。）

生成したデータをインポートする

テンプレート＞Kit Library　の順にクリックします。
『Kit Library』にはElementor社が作っているテンプレートが表示されています。
ここからサイト全体を作ったものをインポートできます。

画面右上の『Import Kit』をクリックします。

先ほどダウンロードしたZipファイルを『ドラッグ＆ドロップ』または『ファイルを選択』からインポートします。

あらかじめインストールしている『Elementor』と『Elementor pro』が表示されています。
画面右下の『次』をクリックします。

『反映したい部分を選択してください』と表示されます。
今回はそのままインポートしたいので、画面右下の『インポート』をクリックします。

『有効化』をクリックします。

『Your kit is now libe on your site!』と表示されます。
サイトにインポートが完了しました。
画面右下の『閉じる』をクリックします。

『固定ページ』をクリックすると、取り込んだページが表示されています。
（Wordpressに最初から入っていた『サンプルページ』『プライバシーポリシー』はそのまま残っています。）

インポートしたサイトを見る

『表示』をクリックして、インポートしたサイトを確認します。

ワイヤーフレームが完全にインポートされています。

メニューも機能し、各パーツも日本語できちんと生成されています。

Elementorで編集する

インポートしたページを、Elementorで編集してみます。

ページタイトル下の『Elementorで編集』をクリックします。

ページのパーツは全てElementorで構成されているので、Elementorでの編集も自在です。

サイトマップやワイヤーフレームで表示されていた各セクションのタイトルが、正確に表示されています。

ヘッダー・フッターについて

インポートしたサイトのヘッダーとフッターはElementor proのテーマビルダーで作成されています。

ダッシュボードに戻り、『テンプレート』＞『Theme Builder』の順にクリックします。

『Theme Builder』の中に、『Header』『Footer』『404ページ』が入っています。
ヘッダーやフッターの編集はここからできます。

Use an AI Notetaker

AIサイトプランナーの『Choose your head start』ページに表示されている『Use an AI Notetaker』について説明します。

『Use an AI Notetaker』は例えばクライアントとのオンラインミーティング（Google Meet）にAIを招待し、その場で情報の聞き取りをするための機能になります。
聞き取った内容からサイトマップとワイヤーフレームを生成してくれます。

『Use an AI Notetaker』をクリックします。

枠の部分に『Google Meet』のURLを入力し、『Inveite AI Notetaker』をクリックで利用することができます。
しかし、現状ではAI Notetakerは英語のみ対応しており、日本語には非対応です。

まとめ

AIサイトプランナー、いかがでしたか。
現在βバージョンで、日本語対応についてもこの記事を書いている間にだいぶ精度が上がってきました。
正式にリリースされる頃には、スタイルも指定できるようになったりと進化しそうです。

今すぐにプロが作成した完全日本語対応のウェブサイトが欲しい、という方はTOFUアカデミーを覗いてみてください。

デモサイトはそのままコピーすることが可能です。