テーマテンプレート「Kingsman」ユーザーガイド

Kingsmanは、商品画像の質感を強調したいビジネスオーナーに適したエレガントにスタイライズされたテーマテンプレートです。アパレル、家具、ジュエリー、3C商品などにも適しています。

*Note: あなたのストアが公式プランと「ソーシャルコマース」プランを使用している場合、ストアのレイアウトを変更することはできません。

目次では、以下の内容を紹介します：

• ウェブサイトの色をカスタマイズする
• フォントをカスタマイズする
• 詳細ページに特集スローガンを作成する
• 商品詳細ページのレイアウトガイドライン
• 各ページの推奨バナーサイズ
• その他の詳細

1. ウェブサイトの色をカスタマイズする

i. セットアップ

SHOPLINE管理画面で、[オンラインストアデザイン]>[ページ]に移動し、+ 詳細ページをクリックして新しいストアページを作成するか、SHOPビルダーをサポートする既存のページの隣にある編集ボタンをクリックします。

SHOPビルダーで、 [ストア設定]>[色]に移動して、各ブロックの色をカスタマイズします。各ブロックのデフォルトの色は、最初に設定した色です。

詳細な色設定については、ストア設定 | SHOPビルダーを参照してください。

ii. 色合わせのアドバイス

このテーマテンプレートには、3つの異なる色を組み合わせることができます。ストアに柔らかい印象を与えたい場合は、[プライマリボタン]>[背景]にモランディシリーズのような低彩度の色を適用し、白いテキストと組み合わせることができます。

または、黒を使用してより洗練された印象を作り出すこともできます。

「ヘッダー」、「プライマリボタン」、「セカンダリボタン」のシンプルな美的色の組み合わせを作成するには、「セカンダリボタン」の色を「ヘッダー」と「プライマリボタン」の背景色に合わせることができます。

動的な色の組み合わせを希望する場合は、異なる色合いの似た色を選ぶことができます。たとえば、「ヘッダー」と「プライマリボタン」の背景色の明るさと彩度を調整して「セカンダリボタン」の色を設定することができ、全く異なる色を使用する必要はありません。

顧客に強い印象を残したい場合は、黒と黄色のような対照的な色を使用してください。

「メニューナビゲーション」のスタイル（背景色＆テキスト色）を他のストアボタンのスタイルに影響を与えずに独立してカスタマイズしたい場合は、デザインと修正に関するアドバイスを得るために、オンラインビジネスオーナー成功チームにお問い合わせください。

iii. フォントの提案

Open Sansは、現代的でトレンディな美学に適しています。Noto Serifは、クラシックな外観に適しています。フォントを適用すると、ウェブサイト全体が選択したフォントに置き換わります。

2. 詳細ページに特集スローガンを作成する

i. SHOPビルダー

スローガン機能は現在、SHOPビルダーではサポートされていません。

ii. 古いページビルダー

キャッチーなスローガンは、顧客がブランドの精神を把握するのに役立ちます。

「詳細ページ」では、「タイトル付きテキスト」パーツを追加できます。詳細については、詳細ページを参照してください。

このテンプレートでは、テーマカラー#1の背景色が、説明フィールドに入力するとストアフロントに表示されます。説明テキストの色を背景色に合わせて設定してください。（テーマカラー#1が暗すぎる場合は、商品パーツと同じ行に配置しないことをお勧めします。）

背景色はテーマカラー#1に基づいて設定されますので、それに合うフォント色を選ぶことをお勧めします。

さらに、CSSコードを使用して文字間隔を調整できます：

1. 説明をクリックしてエディタを開き、</>をクリックしてHTMLを表示します。
    
2. このコードを貼り付けます：<span style="letter-spacing:3px;"> 最初の"<p>"の後ろに、OKをクリックして変更を保存します。
   
    
3. 数字の「3」を変更して文字間隔を調整できます。

3. 商品詳細ページのレイアウトガイドライン

商品詳細ページの新しい機能は以下の通りです。

• 商品写真にマウスをホバーするとズームインします。マウスがメイン商品画像の上にあるとき、画像の元のサイズがポップアップウィンドウに表示されます。
• [近日公開] 画像をクリックしてズームインします。左右にスクロールしてすべての商品画像を表示します。
• マウスを使ってすべての商品画像をスクロールします。
• 商品説明と配送/支払い方法は最小化され、右側に表示され、顧客が商品画像に集中できるようになります。

したがって、メイン写真画像セクションにすべての画像をアップロードすることをお勧めします、そして全体の見た目を向上させるために説明の長さを短くすることをお勧めします。また、アップロードされた画像は1000 x 1000 px以内に収めることをお勧めします 、読み込み時間を短縮するためです。

4. 推奨バナーサイズ

ウェブサイトの読み込みを速くするために、この画像圧縮ツールを試してください：https://tinypng.com/.

高度なページ： トップページのバナーにはフルスクリーンバナーを使用できます。適用サイズは1920x840pxです。

バナー全体を占有したくない場合は、1920x640pxを使用してください。画面の4分の3を占めます。

商品リストページでは、高さが640pxを超えないことをお勧めします。顧客がランディングページに最初に入るとき、最初の行の商品アイテムの一部が見えるようになります。

*Note：

• SHOP Builderで作成された高度なページの場合、スライダーパーツを追加する際に「メディアサイズに合わせて高さを調整する」のトグルをオンにして、画像のトリミングを避けてください。
  
   
• SHOP Builderで作成された高度なページについては、以下を参照してください：
  • デスクトップ版の推奨画像比率
    • 長方形（2:1比率） - 推奨単一画像サイズ：2000 x 1000px。
    • 長方形（3:4比率） - 推奨単一画像サイズ：1500 x 2000px
    • 正方形（1:1比率） - 推奨単一画像サイズ：2000 x 2000px。
  • モバイル版の推奨画像比率
    • 長方形（2:1比率） - 推奨単一画像サイズ：1080 x 540px。
    • 長方形（3:4比率） - 推奨単一画像サイズ：810 x 1080px
    • 正方形（1:1比率） - 推奨単一画像サイズ：1080 x 1080px。

5. その他の詳細

i. 特集Instagramレイアウトスタイル

ii. ブログ投稿

最初に表示される記事は、フルページ表示で顧客の注意を引くことに焦点を当てます。次の記事は横に並んで表示されます。顧客はスクロールすることで複数の記事を同時に読むことができ、時間を節約し、露出を増やします。記事のカバーは、記事内の最初の画像に基づいて表示されます。