テーマ OS 3.0 の紹介
SHOPLINEは、新しいテーマフレームワーク OS 3.0 をリリースしました。OS 3.0は、刷新されたパーツ構造、柔軟なレイアウト設定、モバイル専用の構成、そして新しいテンプレートエンジンを備えています。
これらのアップグレードにより、マーチャントはブランドに沿った高パフォーマンスなオンラインストアを、より簡単に構築できるようになります。デスクトップでもモバイルでも、新しいテーマ構造はスムーズかつ柔軟なデザイン体験を提供します。
|
注： OS 3.0テーマは正式に公開されています。OS 2.1テーマとの詳細な比較は以下のセクションをご参照ください。ストアデザイン、プレビュー、公開に使用するテーマを決定する前に、両者の違いを確認し、実際にテストすることをおすすめします。 |
新しいパーツ構造
OS 3.0では、各パーツ内に最大 5階層の入れ子ブロックを設定できる新しい構造が導入されました。これにより、ストアフロント全体でより柔軟なモジュール管理と階層的なデザインが可能になります。
入れ子ブロックを追加する手順：
SHOPLINEテーマエディターを開き、コンポーネントリストに移動します。
-
新しい要素を追加したいセクション／ブロックの右側にある「コンテンツを追加」アイコンをクリックします。
追加するブロックタイプを選択し、子要素として挿入します。
このモジュール構造により、1ページ内で動的かつ柔軟なコンテンツ配置が可能になります。
柔軟なレイアウト表示設定
OS 3.0テーマでは、ページ要素の位置・間隔・整列を簡単に調整でき、デザイン要件により正確に合わせることができます。複雑なレイアウトを扱う場合でも、細かな設定により要素のスタイルや配置を効果的にコントロールできます。
レイアウトを調整する手順：
編集したいセクションまたはブロックを選択します。
-
ツールバーを使用して、レイアウト・マージン・サイズを微調整します。
レイアウト設定
| 設定項目 | 操作 | 効果 |
| 配置方向 |
複数の要素が一緒に配置されるときの順序を調整します。 例：商品詳細ページで、画像と商品情報の表示位置を切り替え |
|
| 自動折り返し | 要素がコンテナの幅/高さを超えると、自動的に次の行に折り返します。 | |
| 整列と配置 |
コンテナ内の要素の相対的な配置を制御します。 例：バナー画像の上にテキストを配置 |
|
| 間隔 |
要素間の行と列の間隔を管理します。 例：商品カード内で画像・タイトル・価格の間隔を設定 |
マージン設定
選択したコンテナの内側のパディングを定義します。
サイズ設定
選択した要素の絶対的な幅・高さ、または親コンテナに対する相対サイズを指定します。
モバイル専用の調整とプレビュー
レイアウト、マージン、サイズ設定は、PC版とモバイル版で個別にカスタマイズできます。デバイス専用の調整を行うと、変更された設定項目に下線が表示されます。
モバイルでは、さまざまな一般的なデバイスタイプでページをプレビューでき、最適な閲覧体験を確認できます。
OS 3.0 と OS 2.1 の機能比較
| 項目 | OS 2.1 | OS 3.0 |
| テンプレートエンジン | Handlebars | Sline（高速レンダリング対応） |
| コンポーネント構造 | 最大2階層／セクション移動は制限あり。 1ページあたり最大25セクション |
最大8階層／セクション・ブロック編集に柔軟対応。 1ページあたり最大25セクション、50ブロック |
| カラースキーム | 単一スキームのみ | 複数スキーム対応 |
| レイアウトの柔軟性 | レイアウト調整は限定的 | 要素の配置・間隔・方向を詳細に調整可能 |
| ヘッダー/フッター | 固定レイアウト。 言語・国選択に対応 |
完全にカスタマイズ可能。 言語・国選択に対応 |
|
開発者生産性ツール （VSCodeアプリ、Theme Check等） |
対応 | 対応 |
| 高度なコンポーネント対応 | すべて対応 |
ほとんど対応。
|
| アプリ互換性 | ほとんど対応 |
一部は未対応、または完全互換ではない場合あり。 詳細は「OS 3.0アプリ互換性リスト」を参照 |
OS 3.0 パーツ比較
現在、OS 3.0では 「Fashion」 と 「Bottle」 の2種類のテーマが提供されています。
-
Fashion
一般的なEC向けコンポーネントを備えており、中小規模のマーチャントに最適です。追加開発を必要とせず、迅速にストアを構築・公開できます。 -
Bottle
機能は限定的ですが、カスタマイズ開発向けに設計されています。マーチャントが簡単に導入できるほか、サードパーティ開発者が独自のテーマを開発・販売するための基盤としても利用できます。
トップページパーツ比較：
| セクション | カテゴリ | パーツ |
Fashion (OS 3.0) |
Bottle (OS 3.0) |
Modern (OS 2.1) |
| トップページパーツ（任意のページに追加可能） | トップページパーツ | 38 パーツ | 38 | 21 | 27 |
| カスタム | カスタム SLINE/HTML | ✅ | ✅ | ✅ | |
| カスタムページ | ✅ | ✅ | ✅ | ||
| カスタムセクション | ✅ | ✅ | ❌ | ||
| 2カラムレイアウト | ✅ | ✅ | ❌ | ||
| 3カラムレイアウト | ✅ | ✅ | ❌ | ||
| 1:2レイアウト | ✅ | ✅ | ❌ | ||
| 1:2:1レイアウト | ✅ | ✅ | ❌ | ||
| アプリ | ✅ | ✅ | ❌ | ||
| 画像テキスト表示 | 動画 | ✅ | ✅ | ✅ | |
| ブログ | ✅ | ✅ | ✅ | ||
| スライドショー | ✅ | ✅ | ✅ | ||
| 分割スライドショー | ✅ | ❌ | ✅ | ||
| 画像テキストリスト | ✅ | ✅ | ✅ | ||
| 画像バナー | ✅ | ✅ | ✅ | ||
| 画像テキストモジュール | ✅ | ✅ | ✅ | ||
| 縫い合わされた画像テキストモジュール | ✅ | ❌ | ✅ | ||
| コラージュ | ✅ | ❌ | ✅ | ||
| 割引プロモーション | ✅ | ❌ | ✅ | ||
| ホバー時に画像を切り替え | ✅ | ❌ | ✅ | ||
| ビフォー＆アフター | ✅ | ❌ | ❌ | ||
| 成分表示 | ✅ | ❌ | ❌ | ||
| リッチテキスト | ✅ | ✅ | ✅ | ||
| 商品表示 | おすすめ商品 | ✅ | ✅ | ✅ | |
| おすすめカテゴリ | ✅ | ✅ | ✅ | ||
| おすすめ商品 | ✅ | ❌ | ✅ | ||
| カテゴリリスト | ✅ | ✅ | ✅ | ||
| 特別商品カテゴリ | ✅ | ❌ | ✅ | ||
| マルチレベルフィルター | ✅ | ❌ | ✅ | ||
| ショッピング可能な画像 | ✅ | ❌ | ✅ | ||
| ショッピング動画 | ✅ | ❌ | ❌ | ||
| 最近見た商品 | ✅ | ❌ | ✅ | ||
| メディアプロモーション商品 | ✅ | ❌ | ❌ | ||
| 顧客操作 | メール定期購入 | ✅ | ✅ | ✅ | |
| カウントダウン | ✅ | ❌ | ✅ | ||
| お問い合わせフォーム | ✅ | ✅ | ✅ | ||
| 信頼パーツ | ロゴリスト | ✅ | ❌ | ✅ | |
| 地図 | ✅ | ❌ | ❌ | ||
| よくある質問 | ✅ | ✅ | ✅ |
OS 3.0 アプリ互換性リスト
FashionテーマおよびBottleテーマでは、以下のプラグインがまだサポートされていない、または完全に互換性がありません。そのため、まずはドラフトモードでテーマをテストし、実際の表示や挙動を確認したうえで利用を判断することをおすすめします。
| Fashion (OS 3.0) | Bottle (OS 3.0) | ||
| アプリ名 | 注意事項 | アプリ名 | 注意事項 |
| アフィリエイトプログラム | ディストリビュータープライス機能にのみ影響します。互換性は2025年10月を予定 | アフィリエイトプログラム | ディストリビュータープライス機能にのみ影響します。互換性は2025年10月を予定 |
| ギフトキャンペーン | 互換性は2025年10月を予定 | マルチバリエーションイメージ | 互換性は2025年11月を予定 |
| メンバーシステム | 互換性は2025年10月を予定 | おすすめセット商品 | 互換性は2025年11月を予定 |
| タイムセール | 互換性は2025年10月を予定 | EasyBuy Oneshop & CODフォーム | サポートされていません |
| 組み合わせ販売 | 互換性は2025年10月を予定 | カスタムランディングページ | サポートされていません |
| マーケティングオールインワン | 互換性は2025年10月を予定 | ||
| 来店予約管理ツール | 互換性は2025年10月を予定 | ||
| 配送日時指定ツール | 互換性は2025年10月を予定 | ||
| 定期購入 | 互換性は2025年10月を予定 | ||
| 3D&AR商品ビューアー | 互換性は2025年12月を予定 | ||
| マルチマーケットリダイレクト | 互換性は2025年10月を予定 | ||
| メガメニュー | 互換性は2025年10月を予定 | ||
| メッセージ | 互換性は2025年10月を予定 | ||
| 商品レビュー管理 | 互換性は2025年10月を予定 | ||
| コンバージョン率改善ツール | 互換性は2025年10月を予定 | ||
| Instagramフォトウォール | 互換性は2025年10月を予定 | ||
| 予約販売 | 互換性は2025年10月を予定 | ||
| ポップアップ | 互換性は2025年10月を予定 | ||
| お気に入り登録 | 互換性は2025年10月を予定 | ||
| 割引キャンペーンデザイン | 互換性は2025年10月を予定 | ||
| カウントダウン | 互換性は2025年10月を予定 | ||
| 商品オプションカスタマイザー & 商品バンドラー | 互換性は2025年10月を予定 | ||
| EasyRank SEOオールインワンツール | 互換性は2025年10月を予定 | ||
| おすすめセット商品 | 互換性は2025年10月を予定 | ||
| お知らせバナー | 互換性は2025年10月を予定 | ||
| 分割払い情報表示 | 互換性は2025年10月を予定 | ||
| プライムで購入 | 互換性は2025年10月を予定 | ||
| マルチバリエーションイメージ | 互換性は2025年10月を予定 | ||
| EasyBuy Oneshop & CODフォーム | サポートされていません | ||
| カスタムランディングページ | サポートされていません | ||
OS 3.0 テーマの利用方法
OS 3.0テーマでデザインを開始するには、以下の手順を実行してください。
-
管理画面 > オンラインストア > デザイン > テーマショップ に進みます。
- 「Fashion」テーマを検索して選択するか、テーマ紹介ページからアクセスします。
-
［テーマを追加］ をクリックし、テーマライブラリに追加します。
- 追加した「Fashion」テーマの横にある ［デザイン］ をクリックし、テーマエディターを開きます。
- 設定を確認後、［公開］をクリックするとストアに反映されます。
よくある質問
Q：OS 2.1のプライベートテーマ開発者は、どのようにOS 3.0へ対応できますか？
A： OS 3.0は新しい Slineテンプレート構文 を採用しているため、再開発が必要です。ベストプラクティスについては、ヘルプセンターの該当ガイドをご参照ください。