AIの助けを借りてインターフェースを変更する練習（7）
このセクションでは、AIを活用してホームページインターフェースのシンプルなレイアウトを作成します。これらの基本的な手順をマスターすれば、フラッシュセールやゲームなどの特別なコンテンツブロックをAIで完全に作成できるようになります。
AIの助けを借りてインターフェースを変更する練習（7）
AIのサポートによるインターフェース変更の練習
以下を確認し、準備する必要があります：
- 言語と通貨の設定方法。
- Khang Scraperを使用した商品データ収集方法。
- 有効化されたAIアカウント（ChatGPT、Geminiなど）。
私はデータ収集のためにAmazonを選びます。なぜなら、多くの言語から選択できるからです。そのため、Amazonの言語をあなたのウェブサイトの設定に合わせて変更する必要があります。もし希望の言語が見つからない場合は、一時的に練習のために英語を選んでください。今回はレディースファッションのカテゴリーで練習します。
アドバイス： これがあなたが望む商品カテゴリーでなくても、完成まで辛抱強く続けてください。
準備
1. Coats、Sweaters、Pantsのような3つのカテゴリーを作成する
方法：
- 以下にアクセスします：/admin/catalog/categories/create。
- Add New Category ページで、すべての必須情報（*が付いているもの）を入力します。
- 注意：Parent Category - Rootをチェックしてください（作成されたカテゴリーが親カテゴリーになります）。
2. 商品をスクレイピングし、正しいカテゴリーにインポートする
- Amazonで商品をスクレイピングして生データを入手するためのテンプレートを選択します。
- 以下の記事を確認してください：基本的なKhang Scraperユーザーガイド。
- そして、この記事のステップ3で停止してください：私は、あなたが商品を希望のカテゴリーにインポートする方法を続けて案内します。
- /admin/scraper/import-settingにアクセスして、以下の目的を達成します：
- インポートする商品カテゴリーを選択する；
- 各商品に共通の構造に従ってメタタグを設定する。
- 生データページにアクセスします：admin/scraper。
- 同じカテゴリーの商品を選択してインポートします。
3. バナー画像
- 商品カテゴリーに適したバナー画像3枚を事前に準備します。サイズは1920px x 700px (.jpeg, .webp)。
4. ロゴとファビコンの作成
- /admin/settings/channels/edit/1にアクセスして、ロゴ（192px x 50px）とファビコン（16px x 16px）をアップロードします。
テーマ設定での作業
ステップ1：新しいテーマを作成するため、現在のすべてのコンテンツブロックを一時的に非表示にします
- すべてチェックをクリックし、「Select Action > Change status > Inactive」を選択します。
- 次に、Filter/ Status/Active -> Apply Filters を選択して、アクティブなブロックのみを表示します。
- その後、Admin/ Clear Cacheをクリックして、古いデータをクリアします。
ステップ2：ホームページレイアウトを作成する：
AIにデザインをサポートしてほしい場合は、このプロンプトを入力してください。
このようなプロンプトに対して、Gemini AI (2.5 flash)から得られた結果は以下の通りです。
以下は、白-ピンクの配色と指定された制約を維持した、Bagistoテーマの「レディースファッション」カテゴリーの日本語ホームページレイアウトです。
| Sort Order | Name (ブロック名) | Type (リストから1つ選択) | 表示内容 (Type = static_contentでない限りコードは使用しない) | Effect (static_contentにのみ) | Status |
|---|---|---|---|---|---|
| 1 | 新着コレクション | image_carousel | スライド1：タイトル「新着コレクション - 楽なエレガンス」、パステルピンクのドレスを着たモデルの画像。 スライド2：タイトル「新着商品が20％オフ」、ハンドバッグやハイヒールなどのアクセサリーの画像。 スライド3：タイトル「あなただけのスタイルを見つけて」、陽気で自信に満ちたモデルの画像。 自動再生：はい |
Active | |
| 2 | 私たちの世界へようこそ | static_content |
|
ブロック全体にフェードインエフェクト。 | Active |
| 3 | 最新商品 | product_carousel | 「新着商品」コレクションからの商品を表示。 | Active | |
| 4 | 人気カテゴリー | category_carousel | ドレス; ブラウス; スカート; キュロット; ジャケット | Active | |
| 5 | 特別オファー | static_content |
|
ホバー時にわずかにズームするエフェクト。 | Active |
| 6 | ベストセラー | product_carousel | 「ベストセラー」商品を表示。 | Active | |
| 7 | 今日の名言 | static_content |
|
Active | |
| 8 | 私たちのコミットメント | services_content | 速達配送; 7日間無料返品; 24/7オンラインサポート; 柔軟な支払いオプション | Active | |
| 9 | 情報とサポート | footer_links | 私たちについて; 返品ポリシー; 注文方法; お問い合わせ | Active | |
| 10 | フォローしてください | static_content |
|
ソーシャルアイコンのホバー時に色がわずかに変わるエフェクト。 | Active |
| 11 | フッターの法的情報 | footer_links | 利用規約; プライバシーポリシー; 著作権 | Active | |
| 12 | 連絡先情報 | services_content | 住所: 123 Fashion St., ホーチミン市; ホットライン: 0123.456.789; Eメール: contact@fashionista.vn | Active |
ステップ3：新しいデータブロックを作成する：
前のパートで述べたように、設定/テーマには6つの異なるタイプがあります。したがって、対応する6つのコンテンツブロックをこれらの6つのタイプに入力する方法を案内します。残りのブロックについても同様に行うことができます。
コンテンツブロックを作成するステップ
ブロック1 - 新着コレクション
タイプ：画像カルーセル
目的：商品やプロモーションのスライダーを表示する。
Create Themeをクリックし、情報を入力してSaveを押します。
システムは自動的にEdit Themeに切り替わります。3つの画像に対応する内容を順に入力し、StatusをActiveに設定します。
すべてのコンテンツブロックを追加したら、上記の手順に従って「キャッシュをクリア」（Clear Cache）することを忘れないでください。そして、結果を確認してください。
注意：レイアウトにエラーがある場合（コンテンツブロックが完全に表示されないなど）、Type: Footer Linksの位置を最後に変更してください。
コメントを残す