OS 3.0 テーマの新機能 – SHOPLINE ヘルプセンター

SHOPLINEのOS 3.0テーマは、ストアデザインの柔軟性とパーソナライズ性を高める新機能とともに、継続的に進化しています。

このガイドでは、OS 3.0テーマ専用の最新機能をご紹介します。

Note: OS 3.0テーマを初めてご利用の場合は、その構造、パーツ、および編集機能の概要については「Theme OS 3.0の紹介」をご参照ください。

モバイルデバイスで顧客が1行あたりの商品の表示数を選択可能にする

顧客がモバイルデバイスでの商品表示方法を調整できるようにして、閲覧体験の自由度を高めましょう。

商品表示レイアウトのカスタマイズ機能を使うと、顧客は1行に1商品または2商品を表示するかを切り替えられます。詳細をじっくり見たい場合は大きなタイル、素早くスキャンしたい場合は小さなタイルを選べます。

設定方法

SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマに進みます。OS 3.0テーマ（例：Fashion）を選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、モバイルビューに切り替え、カテゴリページに移動して商品リストのレイアウトをカスタマイズします。
ドロップダウンリストからカテゴリを選択します。商品リストセクションで、マルチカラムスイッチャーをオンにしてモバイル表示の切り替えを有効にします。
デフォルトと切り替え可能な列数を選択し、保存をクリックして変更を適用します。

注意事項：

列のオプションはモバイルビューのみで利用可能です。

モバイルのデフォルト列数：1列または2列
切り替え可能な代替列数：1列または2列
デフォルト列数と切り替え可能な代替列数が同じ値（例：1/1または2/2）に設定されている場合、顧客がタップしてもスイッチャーのアイコンは反応しません。

機能の制限

対応状況： Bottleを除くすべてのOS 3.0テーマでサポートされています。
対応デバイス： 現在はモバイルデバイスのみ対応しています。
互換性： 正しい表示を確認するために、アクティブなアプリと一緒にテストしてください。一部のカスタムアプリは商品一覧ページのグリッド表示に影響を与える場合があります。
統合： APIやファイルアップロード機能は関与していません。

設定可能なパンくずリストパスによるナビゲーションの改善

顧客に対して、従来のパスベースのパンくずリストを実装することで、ストア内を標準的で明確な方法でナビゲートできるようにします。これらの改善により、顧客がたどったページ階層（例：トップページ / カテゴリ / 商品）を表示する、普遍的に使いやすいナビゲーションが提供されます。

新しいパンくずリストシステムは、明確なパスベースのナビゲーションを提供し、顧客体験とストアの使いやすさを向上させます。パス内のすべてのノード（現在のページを除く）は完全にクリック可能で、顧客が簡単に前のページ、カテゴリ、またはトップページに戻れるようになっています。

3種類のパンくずリストパーツの理解

機能の明確化のために、OS 3.0テーマ内には配置やロジックが異なる3種類のパンくずリストパーツが存在します：

新しいユニバーサルパンくずリストブロック（推奨標準）：
- ロジック： 従来のページパス階層を使用（例：トップページ / カテゴリ / 商品）。
- 配置： テーマエディターの新しい専用セクションからすべてのページに追加可能。
- パスの例：
  1. 商品詳細ページ：通常はトップページ / {カテゴリタイトル} / {商品タイトル} またはトップページ / {商品タイトル} と表示されます。
  2. ブログ記事ページ：トップページ / {ブログカテゴリタイトル} / {ブログ記事タイトル} と表示されます。
- 使用法： 一般的なナビゲーションにはこのブロックの使用が推奨されます。
レガシー多階層カテゴリパンくずリスト（商品詳細ページのみ）
- ロジック： 商品ドメインの多階層分類データに依存。
- 配置： 商品詳細ページ内のブロックとしてのみ表示されます。

注意事項：

このレガシー機能はビジネスオーナーのホワイトリスト登録が必要で、元の「パンくずリスト」ブロックから多階層カテゴリパンくずリストに名称が変更されます。
ホワイトリスト登録地域でレガシー多階層カテゴリを使用する場合は、サポートチームまでお問い合わせください。

レガシーカテゴリページの「ホーム」ノード（修正可能）：
- ロジック： カテゴリ画像の上にハードコードされた「ホーム」ノード。
- 配置場所： カテゴリリストページにのみ表示されます。
- 使用法： 以前は設定不可でエラーと見なされていましたが、新しい設定によりアップデート後にビジネスオーナーが非表示にできるようになりました。

設定方法

新しい推奨のパンくずリスト機能を有効にし、レガシー表示の問題を解決するために、以下の手順に従ってください。

SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディターに入ります。

シナリオ1. ユニバーサルパンくずリストブロックの有効化：

推奨される新しいパンくずリストブロックを有効にするには、以下の手順を実行してください：

テーマエディターで目的のページ（例：トップページ、商品詳細ページ）に移動します。
該当モジュールの下でパーツを追加をクリックし、テーマタブに移動してパンくずリストを見つけて選択します。
パンくずリストブロックを追加した後、好みのカラースキームを設定し、PCおよび/またはモバイルでの有効化を選択し、必要に応じてレイアウトを調整します。完了したら保存をクリックして設定を適用します。

Note: 標準のパスベースナビゲーションには、このユニバーサルパンくずリストブロックの使用を強く推奨します。

シナリオ2. レガシーカテゴリページノードの非表示：

設定不可のカテゴリページノードを非表示にしたい場合は、以下の手順に従ってください：

テーマエディターでカテゴリページに移動します。
カテゴリヘッダーモジュール内でカテゴリ画像をクリックし、設定パネルでパンくずリストを非表示をオンにします。
保存をクリックして変更を適用します。

機能の制限

レガシーパンくずリストのアクセス： レガシーパンくずリスト要素（現在は多階層カテゴリパンくずリストに名称変更）は、商品ドメインの多階層分類データの使用が必要であり、ビジネスオーナーはアクセスのためにホワイトリスト登録が必要です。
旧要素の削除： カテゴリページのハードコードされた「ホーム」要素は完全に削除できませんが、新機能で非表示にすることが可能です。

商品詳細ページ内での柔軟な左右レイアウトの有効化

この改善により、ビジネスオーナーやサードパーティアプリが商品詳細ページの情報エリア内で複雑な非垂直配置を実装できるようになり、以前のテーマレイアウトの重要な制限を解消します。従来は商品情報ブロックが単一の垂直スタックに制限されていたため、数量セレクターを購入ボタンの横に配置したり、お気に入り登録ボタンを商品タイトルの隣に置くといった現代的なデザインニーズに対応できませんでした。

新しい構造要素を導入することで、商品詳細ページ上の特定の商品パーツの配置を正確に制御でき、OS 3.0テーマの全体的な柔軟なデザイン哲学に沿ったレイアウトが可能になります。

設定方法

商品情報エリア内のパーツに左右レイアウトを適用するには、新しいコンテンツコンテナを使用します：

SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動します。OS 3.0テーマ（例：Fashion）を選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動します。
＜strong＞商品＜/strong＞モジュールの下にある＜strong＞商品セクション＜/strong＞ > ＜strong＞商品情報＜/strong＞を見つけます。＜strong＞商品情報＜/strong＞にカーソルを合わせ、＜strong＞＋アイコン＜/strong＞をクリックし、＜strong＞テーマ＜/strong＞の下にある＜strong＞コンテンツコンテナ＜/strong＞を選択します。このコンテナは中間のレイアウト層として機能します。
コンテナを追加した後、その上にカーソルを合わせてタイトル、価格、数量セレクターなどの情報ブロックを追加します。ブロックはドラッグ＆ドロップで順序を調整できます。この新しいコンテナ内に、左右に配置したい標準の商品情報ブロック（例：タイトル）を追加してください。
ブロックを追加したら、＜strong＞コンテンツコンテナ＜/strong＞をクリックしてレイアウト（ブロックの配置、マージン、サイズ）を設定します。コンテナ専用のレイアウトコントロールを使って、前のステップで追加した要素の左右配置と整列を設定できます。これにより、購入ボタンと数量セレクターなど複数のパーツを横並びに配置できます。
変更を適用するには、＜strong＞保存＜/strong＞をクリックします。

機能の制限

＜strong＞テーマの対応状況：＜/strong＞この機能は、現在唯一対応していないOS 3.0テーマであるBottleテーマでは利用できません。
＜strong＞配置の制限：＜/strong＞左右レイアウトコントロールは、＜strong＞商品情報＜/strong＞セクションの下にある専用のコンテンツコンテナノード内でのみ利用可能です。商品詳細ページテンプレート全体の垂直配置を上書きするものではありません。

高度な商品レイアウトのための多階層説明ブロックの使用

この強化により、ビジネスオーナーは一切コードを書かずに洗練された高性能な商品詳細ページを作成できるようになりました。これまでは、「プロモーションカード」や「商品認証」、「関連商品ハイライト」などの構造化された情報を表示するには、カスタム開発や配置が難しいリッチテキストエディターの多用が必要でした。多階層説明ブロックを活用することで、商品情報エリア内で直接、プロフェッショナルなカードスタイルのビジュアルレイアウトを作成できるようになりました。

ベストプラクティス：構造化レイアウトでコンバージョンを向上

この機能の効果を最大化するには、多階層説明ブロックを使って複雑な詳細をスキャンしやすいセクションに整理してください。高額商品には、このコンテナ内にタイトル、リッチテキスト、ロゴブロックをネストして「信頼カード」（例：ブランドロゴと保証書の表示）を作成することを推奨します。この方法により、初期画面表示内の情報密度が高まり、プロフェッショナルな視覚的階層が生まれて商品競争力が向上し、直帰率の低減につながります。

設定方法

商品情報エリア内で多階層説明ブロックを使ってプロフェッショナルな詳細分割を実装するには、以下の手順に従ってください：

SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマ に移動します。OS 3.0 テーマを選択し、デザイン をクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動し、変更をプレビューしたい商品を選択します。
商品情報 セクションにカーソルを合わせ、＋ (コンテンツを追加) をクリックし、多階層説明 ブロックを選択します。

多階層説明 ブロックをクリックして設定にアクセスします。このメインブロック内に、タイトル、リッチテキスト、ロゴなどのさまざまな汎用ブロックを追加して、希望のレイアウトを作成できます。

Note: 右側の設定パネルでタイトルを更新すると、左側のサイドバーのメニュー名も自動的に同期され、複数のブロックを簡単に識別・管理できます。

また、折りたたみ表示 オプションを切り替えて、説明文をデフォルトで折りたたむか完全表示するかを設定できます。
ネストされたブロックを配置して、「インライン画像とテキストの整列」や「カードベース」の視覚効果を実現します。
保存をクリックして変更を適用します。

機能の制限事項

テーマの対応状況： この機能は、Bottle テーマを除くすべての OS 3.0 テーマでサポートされています。
レイアウトの範囲： このブロックは、商品情報 セクション内の構造的レイアウト専用に設計されており、外部ファイルのアップロードやAPI連携はサポートしていません。
コンテンツのスケーリング： モバイルのパフォーマンスを維持するために、単一の多階層説明コンテナ内のネストされたブロック数を制限し、小さい画面でもレイアウトが見やすく読みやすい状態を保つことを推奨します。

テキストラベルとツールチップを使って商品情報を強化する方法

この強化機能は、商品詳細ページでの高い情報密度とクリーンなユーザーインターフェースのバランスを取る課題に対応しています。これまで、ビジネスオーナーは技術的な専門用語やポリシーの詳細で顧客を圧倒するか、意思決定を助ける詳細な商品情報を省略するかの選択を迫られていました。テキストラベルブロックとそのインタラクティブなツールチップサブブロックを活用することで、補足情報をホバーやタップで簡単に表示できる非侵襲的な方法で専門的な説明を提供できるようになりました。

この階層的な情報提供アプローチを導入することで、テキストラベルは「詳しくはこちら」や「配送情報」などの視覚的なアンカーとして機能し、ツールチップはホバーで表示されるバブルの背後に二次的な詳細を隠します。このデザインは、メインのコンバージョン経路を集中かつ整理された状態に保ち、顧客が追加のコンテキストを求めたときにのみ即時の価値を提供することで、現代の閲覧習慣に適合しています。

ベストプラクティス：専門的な視覚階層の強化

スキンケアや医療グレードの商品など専門的な商品には、成分説明や効果の詳細をテキストラベルブロック内に設定することを推奨します。ツールチップサブブロックの即時バブルプロンプトを使用することで、技術的な詳細をより専門的かつ階層的に提示できます。これにより、ページのインタラクティブな質感が大幅に向上し、顧客が商品価値を迅速に理解できるため、意思決定のプロセスが短縮されます。

設定方法

商品情報エリア内でインタラクティブなラベルとツールチップを有効化および設定するには、以下の手順に従ってください：

SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動し、変更をプレビューしたい商品を選択します。

商品モジュールの下で、商品情報セクションを見つけてホバーし、＋（コンテンツを追加）をクリックして、テキストラベルを選択します。

ヒント：レイアウトの柔軟性を高めるために、まず商品情報セクションの下にコンテンツコンテナを追加し、そのコンテナ内にテキストラベルブロックを追加することができます。コンテナの位置を揃えたり移動したりするには、親ブロックを選択して配置設定を適用してください。コンテナ自体を直接揃えても位置は変わらない場合があります。

テキストラベルブロックをクリックして、希望のテキスト（例：「詳しくはこちら」）を入力し、ブランドのスタイルに合わせて背景色を調整します。
サイドバーのテキストラベルブロックエリア内で、ツールチップサブブロックを見つけてホバーし、＋（コンテンツを追加）をクリックしてリッチテキストを選択します。提供されたエディターを使って説明用のバブルコンテンツを作成します。
ライブストアでは、テキストラベルが商品情報の下に表示されます。ユーザーがラベルにホバー（PCの場合）またはタップ（モバイルの場合）すると、ツールチップで設定した内容がバブルポップアップで表示されます。
変更を適用するには、保存をクリックします。

機能の制限

テーマの対応状況：この機能は、Bottleテーマを除くすべてのOS 3.0テーマでサポートされています。
コンテンツのベストプラクティス：ツールチップサブブロックはリッチテキストやリンクをサポートしていますが、ユーザージャーニーのスムーズな流れを維持するために、簡潔で効果的な説明に適しています。
APIおよびアップロード：この機能はテーマエディター内で直接管理されており、外部APIやファイルアップロードの統合はサポートしていません。

商品メディアの拡張拡大鏡カスタマイズの使用方法

この機能強化により、ビジネスオーナーは商品詳細ページの画像ズーム操作を特定の商品カテゴリに応じてカスタマイズできます。ホバー、スクロール、矢印トグルなど複数のズームモードを提供することで、ビジネスオーナーは顧客のために商品検査体験を向上させることができます。この機能は、ページ滞在時間の増加、購入の自信構築、返品率の低減を目的としており、顧客が購入前に商品テクスチャや仕様を詳細に確認できるようにします。

ベストプラクティス：業界に適したズームスタイルの選択

商品属性に合ったズームスタイルを選ぶことは、コンバージョン率に大きな影響を与えます：

3Cエレクトロニクス（例：キーボード、カメラ）： マウスホバーを推奨します。顧客は「インターフェースの種類」や「ボタン配置」を素早く確認する必要があり、ホバーズームがこれらの技術的詳細を最も効率的に表示します。
ホーム用品＆デコレーション： 全画面矢印トグルを推奨します。これらの商品は構成や雰囲気に依存しており、矢印でシーンを切り替えられることで、商品の没入感を高めます。
高級ファッション＆アクセサリー： クリックして画像詳細を表示または全画面縦長画像スクロールを推奨します。このセグメントの顧客は、布地の質感や職人技の極端なクローズアップを見る必要があります。

設定方法

商品メディアの拡大鏡設定をカスタマイズするには、以下の手順に従ってください：

SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマ に移動します。互換性のあるOS 3.0テーマ（例：Fashion）を選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動し、変更をプレビューしたい商品を選択します。
商品モジュールの下で、商品セクションを展開し、商品メディアパーツをクリックします。
商品メディアファイルサブブロックをクリックして、拡大鏡の設定にアクセスします。

拡大鏡設定グループを見つけて、拡大鏡を有効にするをオンに切り替えます。

注意：

拡大鏡設定はメディア画像のみをズームし、オーバーレイはズームされません。
最適なズームの鮮明さを得るために、商品画像が「画像サイズガイド」の推奨仕様に従っていることを確認してください。

拡大鏡の設定では、異なるデバイスごとにズームスタイルを独立して設定できます：
- PCズームスタイル:
  - 全画面縦長画像スクロール（デフォルト）：長く詳細な画像の閲覧に最適です。
  - 全画面矢印切替：雰囲気重視のライフスタイルショットに最適です。
  - マウスホバー：特定の商品パーツの技術的な検査に最適です。
- モバイルズームスタイル:
  - 全画面矢印切替（デフォルト）：標準的なモバイル閲覧体験です。
  - 全画面縦長画像スクロール：全画面モードで縦スクロールが可能です。
  - クリックで画像詳細表示：最大倍率で画像を表示する新しいレイヤーが開き、ドラッグして詳細を確認し、再度クリックで戻れます。
必要に応じて、拡大鏡を表示を有効にすると、メディア上に拡大鏡アイコンが表示され、画像ズームの視覚的な手がかりとなります。
変更を適用するには、保存をクリックしてください。

機能の制限

テーマの対応状況：この機能はFashionテーマおよびその子テーマ専用です。現在、Bottleテーマではサポートされていません。
動画の制約：動画モジュールのユーザーインターフェースが非表示の場合、その特定の動画パーツに対して拡大鏡は機能しません。
効果の範囲：拡大鏡効果は生のメディア画像にのみ適用されます。テキストオーバーレイやUIパーツは元のスケールのままです。

ソーシャルメディアアイコンのカスタマイズ

ビジネスオーナーがFacebookやInstagramのような汎用アイコン以外に、Discord、LINE、Redditなどのニッチまたは地域特化型プラットフォームをプロモートできるように、SHOPLINEはカスタムソーシャルメディア表示をサポートしています。これにより、カスタムアイコンをアップロードし、カスタムコーディングやサードパーティのアプリなしでリンク先を設定できます。

設定方法

ストアのヘッダーまたはフッターにカスタムソーシャルメディアアイコンを設定するには、以下の手順に従ってください：

SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマに移動します。対応するOS 3.0テーマ（例：Fashion）を選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、テーマ設定 > ソーシャルメディアに進みます。
画面下部のカスタムソーシャルメディアセクションまでスクロールします。ソーシャルメディア1からソーシャルメディア5までの5つのスロットが表示されます。任意のスロットを選択して設定を開始します。
各エントリーに対して以下の設定を行います：
- アイコンのアップロード：カスタム画像をアップロードします（画像がアップロードされるまではアイコンはグレー表示されます）。
- リンク：完全なリンク先URLを入力します。
  
  Note: リンク欄は必須です。設定を保存するには、有効なURL形式（例：https://...）を入力してください。
ヘッダーまたはフッターにアイコンを適用するには、保存をクリックします。

アイコンの仕様

最適な表示のために、以下のガイドラインに従ってください：

対応フォーマット：JPG、SVG、PNG
ファイルサイズ：200KB以下を推奨
推奨サイズ：20px x 20px または 25px x 25px

機能の制限

数量制限：カスタムのソーシャルメディアアイコンは最大5つまで追加できます。
テーマの対応状況：この機能は、Bottleテーマを除くすべての公式OS 3.0無料テーマでサポートされています。サードパーティの有料テーマではサポートされていません。

この記事はAIを使用して翻訳されており、不正確な箇所が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。