ストアフロントのカスタムCSSを生成するためのAIコードアシスタントの使い方

ワンストップのスマートコマースパートナーとして、SHOPLINEは最新のAIトレンドを取り入れ、すべてのマーチャントがAIの恩恵を受けられるようにしています。AIコードアシスタントを使えば、技術的な知識がなくてもコードを通じてストアフロントのビジュアルを効率的にカスタマイズできます。ご要望に基づいて、アシスタントがすぐに適用可能なコードを生成し、簡単にストアフロントのスタイルをカスタマイズできます。

このガイドでは、テーマエディター内でAIコードアシスタントを見つけて使用し、ストアフロントのスタイリング用のカスタムCSSを生成・適用する方法を説明します。テーマコードを編集せずに迅速かつ正確なビジュアル調整が必要な場合にご利用ください。

AIコードアシスタントの場所

AIコードアシスタントはテーマエディターに統合されています。SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマタブに進み、デザインをクリックしてテーマエディターに入ります。以下の3つの入口から見つけることができます：

• ページタイトルの横：現在表示しているページ名（例：トップページ）の隣、左サイドバーの上部にあります。
  
• パーツタイトルの横：左サイドバーの特定のセクションやパーツのタイトルの隣にあります（例：スライドショーや画像バナーの隣）。
• カスタムCSS設定の横：ページやパーツの設定パネル内のカスタムCSS見出しの隣に表示されます。
  
   

AIコードアシスタントの使い方

ストアフロント用のカスタムCSSを生成するためにAIコードアシスタントを使用するには、以下の手順に従ってください：

まず、調整したいパーツまたはページを選択し、ストアフロントのスタイルに関するご要望を会話形式で説明します。質問を理解した後、アシスタントが対応するコードを出力します。適用をクリックすると、カスタムCSSに自動入力され、プレビューが表示されます。

1. テーマエディターのサイドバーで調整したいパーツまたはページを選択します。
2. 選択したページまたはパーツのタイトルの横にあるAIコードアシスタントアイコンをクリックします。
3. ストアフロントのスタイル変更を会話形式で説明します（例：「商品タイトルのテキストを青にする」）。
4. アシスタントが対応するCSSコードを出力します。
5. 適用をクリックします。コードが自動的にカスタムCSSフィールドに入力され、プレビューが表示されます。
6. テーマエディターで保存をクリックして、テーマへの変更を公開します。

使用例

以下は、AIコードアシスタントを使ってストアフロントのパーツのスタイルを調整する例です。このシナリオでは、商品詳細ページの商品レコメンドパーツのタイトル（例：「こちらもおすすめ」）を大きく、左寄せ、ピンク色にします：

1. SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマタブに移動し、デザインをクリックしてテーマエディターに入ります。
2. 商品ページに移動し、商品レコメンドパーツを選択します。
3. AIコードアシスタントを機能アイコンをクリックして開き、「コンポーネントタイトルのフォントサイズを大きくし、左揃えにして、色をピンクに変更する」と入力し、適用をクリックします。
   
   
4. 生成されたCSSは自動的にカスタムCSSフィールドに適用されます。変更をプレビューし、問題なければ保存をクリックして更新を公開します。