こちらの記事では、AIエディターにおけるAI生成機能についてご紹介します。AIエディターでは、AIを利用してWebサイトのページを自動生成することができます。AI生成の方法には、「プロンプトを入力」と「テーマをカスタマイズ」の2種類の方法があります。作成したいサイトのイメージや目的に合わせて、お好みの方法をお選びください。
❶ プロンプトを入力
「プロンプトを入力」では、表示されるプロンプト欄にサイトの目的やイメージ、業種などを入力し、AIに指示を出してページを作成します。
画面下部にはいくつかのプロンプト例も表示されているため、それらを参考にしながら自由に内容を入力することが可能です。
シンプルにAIへ指示を出したい場合や、作成したいサイトの内容が明確に決まっている場合におすすめの方法です。
なお、あまり細かく指示を指定すると、AIが対応できない場合があります。そのため、デザインのイメージなどは大まかに伝えることをおすすめします。
また、プロンプト欄の文字数は1000文字以内となります。
「ページを生成」をクリックすると、AIによる生成が始まります。
❷ テーマをカスタマイズ
「テーマをカスタマイズ」では、デザイン要素を選択しながらAIに指示を出してページを作成することができます。
テーマでは、10種類の業種、11種類のトーン、13種類のカラー、2種類のテキストの書体から選択することができ、さらにコンテンツの角の処理を「角」または「丸」から設定することが可能です。
また、「その他」の入力欄には、具体的な会社名やメッセージ、商品説明などを自由に入力することができます。入力された内容はAIが自動的に判断し、ページ内の適切な箇所に配置されます。
| 業種 | 詳細説明 |
| 土業 | 行政書士、税理士、司法書士、社会保険労務士などの専門資格を持つ事務所向けのデザインテーマです。 |
| IT・マーケティング | IT企業やマーケティング会社、デジタルサービスなどのサイトに適した、スマートで現代的なデザインテーマです。 |
| 建築・不動産 | 建築会社や不動産会社のサイトに適した、落ち着きを重視したデザインテーマです。 |
| 自動車・バイク | 自動車販売店やバイクショップなど、乗り物関連のサービス紹介に適したデザインテーマです。 |
| 宿泊・観光 | ホテル、旅館、観光施設など、旅行や観光サービスの魅力を伝えるサイトに適したデザインテーマです。 |
| 飲食店 | レストランやカフェなど、メニューや店舗の雰囲気を紹介するサイトに適したデザインテーマです。 |
| 教育・学習塾 | 学校や塾、スクールなど、教育関連サービスの紹介に適したデザインテーマです。 |
| 医療・クリニック | 病院やクリニックなど、安心感や清潔感を重視した医療機関向けのデザインテーマです。 |
| 美容・フィットネス | 美容室やエステ、ジムなど、美容や健康関連サービスに適したデザインテーマです。 |
| アパレル・クリエイター | ファッションブランドやクリエイターの作品紹介など、デザイン性を重視したサイトに適したテーマです。 |
業種では、作成するサイトの業界やサービス内容に合わせたテーマを選択することができます。選択した業種に応じて、サイトのデザインやコンテンツ構成の方向性が自動的に調整されます。
| トーン | 詳細説明 |
| グリッド | 整然としたレイアウトで情報を整理して見せる、規則的でバランスの良いデザインです。 |
| ミニマル | 装飾を抑え、シンプルで洗練された印象を与えるデザインです。 |
| ナチュラル | 柔らかく落ち着いた雰囲気で、自然体の印象を与えるデザインです。 |
| ダイナミック | 動きやインパクトを感じさせる、印象的で力強いデザインです。 |
| スケッチ | 手書き風の雰囲気を取り入れた、親しみやすいデザインです。 |
| レトロ | 昔ながらの雰囲気を感じさせる、懐かしさのあるデザインです。 |
| ラグジュアリー | 高級感や上質さを演出する、洗練されたデザインです。 |
| 遊び心 | 個性的で楽しい印象を与える、自由でユニークなデザインです。 |
| 幾何学 | 図形やパターンを活かした、スタイリッシュでモダンなデザインです。 |
| ソフト | 優しく柔らかい印象を与える、穏やかなデザインです。 |
| インダストリアル | 工業的で無骨な雰囲気を取り入れた、クールで力強いデザインです。 |
トーンでは、サイト全体の雰囲気やデザインのテイストを選択することができます。選択したトーンに応じて、ページのレイアウトや装飾のスタイルなどが自動的に調整されます。
| カラー | 名称 | 詳細説明 |
| コーポレート | 信頼感や安定感を感じさせる、企業サイトに適した落ち着いた配色です。 | |
| モダン | 洗練された印象を与える、コントラストを活かしたスタイリッシュな配色です。 | |
| ミニマル | シンプルで落ち着いた印象を与える、装飾を抑えた控えめな配色です。 | |
| アーバン | 都会的で洗練された雰囲気を演出する、落ち着いたトーンの配色です。 | |
| ネオン | 明るくインパクトのあるカラーを使った、個性的で目を引く配色です。 | |
| インダストリアル | 無機質でクールな印象を与える、工業的な雰囲気をイメージした配色です。 | |
| ヘリテージ | 伝統や歴史を感じさせる、落ち着きのあるクラシックな配色です。 | |
| ブリック | レンガや土のような温かみを感じる、ナチュラルで深みのある配色です。 | |
| フォレスト | 森や自然をイメージした、落ち着きと安心感のある配色です。 | |
| ボタニカル | 植物や自然をイメージした、やさしくナチュラルな印象の配色です。 | |
| フレンドリー | 明るく親しみやすい印象を与える、柔らかく温かみのある配色です。 | |
| キュート | 可愛らしくポップな印象を与える、やさしく華やかな配色です。 | |
| フレッシュ | 爽やかで清潔感のある、明るく軽やかな印象の配色です。 |
カラーでは、サイト全体の印象を決める配色テーマを選択することができます。選択したカラーに応じて、ページ全体の配色が自動的に調整されます。
| 書体 | 詳細説明 |
| ゴシック体 | 線の太さが均一で読みやすく、シンプルで現代的な印象を与える書体です。企業サイトや情報を分かりやすく伝えたい場合に適しています。 |
| 明朝体 | 線の強弱があり、上品で落ち着いた印象を与える書体です。信頼感や格式を感じさせるデザインに適しています。 |
テキストの書体では、サイト内で使用される文字のデザインを選択することができます。選択した書体に応じて、ページ全体のテキスト表示が自動的に調整されます。
| 角丸 | 詳細説明 |
| 角丸なし | コンテンツの角を直角のまま表示するスタイルです。すっきりとしたシャープな印象のデザインになります。 |
| 角丸あり | コンテンツの角を丸く表示するスタイルです。柔らかく親しみやすい印象のデザインになります。 |
「その他」には、 具体的な会社名やメッセージ、商品説明などを入力することができます。入力した内容は、AIが自動的に判断し、ページ内に配置されます。
また、「その他」欄の文字数は500文字以内となります。
👉トライアル中は、初期設定中に実行される生成を含め3回のAIによるWebサイト生成を体験いただけます。
注意
・AIによるデザイン生成は、入力された内容をもとに自動で作成されるため、必ずしもイメージ通りのデザインが生成されるとは限りません。生成後はエディター上で自由に編集できますので、必要に応じて調整してください。
・プロンプトや「その他」に入力した内容はAIが自動的に判断して配置しますが、すべての内容が必ずページ内に反映されるとは限りません。意図とは異なる結果が生成される場合がございます。