AI 作成サイトのデザインを編集する

AI サイトビルダーでサイトを作成した後、AI プロンプトを使用してデザインとレイアウトをカスタマイズできます。このガイドでは、AI を使用してサイトのデザインを最終調整する方法について説明します。

この機能は、WordPress.com のプレミアムプランとビジネスプランの新規サイトで利用できます。最大30件のプロンプトを無料で試すことができ、サイトの公開や継続的なカスタマイズにはアップグレードが必要です。

AI と手動編集の両方を使用して、サイトのコンテンツの更新、編集、追加を続行できます。AI でサイトを操作するには:

1. 「サイト」ページにアクセスします。
2. サイトを選択して「マイホーム」ボタンをクリックします。
3. 次のステップはサイトのプランによって異なります。
   • 無料お試しサイトではエディターに直接移動し、編集を再開します。
   • アップグレードしたサイトはサイトのダッシュボードに移動し、「外観」→ 「エディター」と移動して編集を再開できます。
4. 画面下部にある四角形の星のアイコンをクリックして、AI アシスタントを開きます。

サイト全体の配色には満足しているものの、特定のセクションまたは要素の色を変更したい場合は、次の手順を実行します。

1. 色を変更する要素 (テキストやボタンなど) または特定のセクションをクリックします。
2. AI プロンプトボックスを開きます。
3. リクエストを入力して色を変更します。色を説明したり、特定のカラーコードを依頼したりできます。例:
   「このボタンを明るい黄色に変更して」
   「ヘッダーの背景を #FFB514 の色にして」
4. 色の変更を保存する場合は 「保存」 ボタンをクリックし、元に戻す場合は後方矢印のアイコンをクリックします。

ページレイアウトに新しいセクションを追加できます。

1. 新しいセクションを追加する既存のセクションをクリックします。
2. AI プロンプトボックスを開きます。
3. プロンプトを入力します。例:
   「「会社概要」の下に推薦文セクションを追加して」
   「ホームページに価格表のセクションを挿入して」
4. 新しいセクションを確認します。AI が複数のレイアウトを提示する場合もあります。左矢印と右矢印のボタンを使用して循環表示できます。

セクションを移動することで、サイトのレイアウトを変更できます。

1. 移動するセクションをクリックします。
2. AI プロンプトボックスを開きます。
3. 入力します。例:
   「「サービス」セクションを「お客様の声」の上に移動して」
   「「連絡先」セクションを一番上に移動して」

さらに微調整が必要な場合は、リストビューを使用してセクションを手動で選択できます。選択したセクションに、セクションを新しい位置に移動する上下矢印のあるツールバーが表示されます。

不要なセクションまたは要素をわずか数ステップで削除できます。

1. 削除するセクションまたは要素をクリックします。
2. AI プロンプトボックスを開きます。
3. プロンプトを入力します。例:
   「ホームページから FAQ セクションを削除して」
   「「経歴」の余分なギャラリーブロックを削除して」
4. 変更を保存する場合は 「保存」 ボタンをクリックし、変更を元に戻す場合は後方矢印のアイコンをクリックします。

ブロックを選択し、「⋮」アイコンをクリックして「削除」オプションを選択すると、ブロックを手動で削除することもできます。

AI によるサイト構築の可能性は無限です。AI にデザイン関連の変更を依頼するプロンプトの例を他にもご紹介します。

1. 青とグレーを使用するようにカラーパレットを変更して。
2. すべてのボタンを丸みを帯びた青色にして。
3. 背景色を白に更新して。
4. フォントをもっとモダンでサンセリフ体のものに切り替えて。
5. すべてのタイトルに太字の大きな見出しフォントを使用して。
6. ホームページにヒーローセクションを追加して。
7. レイアウトを単一カラムに変更して。
8. フッターを再編成して、最初にソーシャルリンクを表示して。
9. フッターの上に行動喚起セクションを追加して。
10. メニューのスタイルを垂直サイドバーに変更して。
11. ヘッダーのサイトロゴをもっと大きくして。
12. メインコンテンツの下に推薦文セクションを追加して。
13. ギャラリー画像にグリッドレイアウトを使って。
14. ページの下部にニュースレター登録フォームを追加して。
15. ナビゲーションバーを常に最上部に表示されるよう先頭固定表示にして。
16. セクション間にもっと空白を追加して。
17. すべての見出しを各ページの中央に配置して。
18. サイト全体で明るい背景に暗いテキストを使用して。
19. 画像にかすかなドロップシャドウを追加して。
20. 段落の間隔を広げて。
21. ホームページのセクションの順序を変更して。
22. チームメンバーの画像を円形にして。
23. ページの背景にカラフルなグラデーションを使用して。
24. サービスセクションにアイコンを追加して。
25. 背景に柔らかいパステルカラーを使用して。
26. すべての見出しを手書き風のフォントに置き換えて。
27. 各セクションの間に区切りを追加して。
28. 大きくて太字の行動喚起ボタンを使って。
29. 見出しをすべて大文字にして。
30. 各ページの上部に導入セクションを追加して。