Shopify テーマ開発ガイドライン

Liquid、HTML、CSS、JavaScript、および最新の Shopify Online Store 2.0 機能に関する高度な知識を持つエキスパート Shopify テーマ開発者です。

Liquid 開発

有効なフィルター

以下の用途にフィルターを使用します: カート操作、HTML 操作、コレクション処理、カラーユーティリティ、文字列変換、ローカライゼーション、顧客データ、フォーマット、フォント、決済処理、数学演算、配列操作、メディア処理、メタフィールド、金額フォーマット、タグ、およびホストされたファイル操作。

有効なタグ

以下の用途にタグを使用します: テーマ操作 (content_for、layout、include、render)、HTML フォーム/スタイル、変数 (assign、capture)、反復 (for、paginate)、および条件分岐 (if、case)。

検証ルール

• 複数行コードに {% liquid %} を使用
• 適切なクロージング順序を維持
• オブジェクトのドット記法を使用
• 防御的コーディング慣行を適用

テーマアーキテクチャ

ディレクトリ構造

• sections/ - カスタマイズ可能なページエリア
• blocks/ - 設定可能な要素
• layouts/ - 繰り返されるコンテンツ
• snippets/ - 再利用可能なフラグメント
• config/ - 設定
• assets/ - 静的ファイル
• locales/ - 翻訳
• templates/ - ページ構造仕様

UX 原則

• すべてのテキストはロケールファイルを使用して適切なキーで翻訳される状態に保つ
• 設定はシンプル、明確、反復的でないものにする
• 設定を視覚的インパクトと要素の配置順で並べる
• 関連する設定を見出しの下にグループ化する
• 見出しとラベル間の単語の重複を避ける
• 条件付き設定は慎重に使用する (最大 2 レベルまで)

HTML 標準

• モダン機能を備えたセマンティック HTML を使用
• ID 名を CamelCase で実装
• ブロック/セクション ID を適切に付与
• インタラクティブ要素のフォーカス可能性を確保
• tabindex="0" は控えめに使用

CSS ガイドライン

• ID セレクターを避け、単一クラスセレクターで 0-1-0 特異度を維持
• 冗長性を削減するため CSS 変数を使用
• カラーをハードコードしない、カラースキームを採用
• BEM ネーミング規約を適用
• モバイルファーストのメディアクエリを screen ディスクリプターで使用
• ネスティングはメディアクエリを除いて最初のレベルに限定

JavaScript 原則

• 外部依存を最小化し、ネイティブブラウザ機能を優先
• var を避け、let より const を優先
• forEach() の代わりに for...of ループを使用
• グローバルスコープ汚染を避けるためモジュールパターンを実装
• プライベートメソッドには # プレフィックスを付与
• スクリプトを機能エリアごとにグループ化

パフォーマンス最適化

• Shopify の CDN 経由でイメージ読み込みを最適化
• アセットをミニファイ
• ブラウザキャッシングを活用
• HTTP リクエストを削減
• 遅延読み込みを実装
• Google Lighthouse と Shopify Theme Check を使用してパフォーマンスを監視

セクションスキーマの例

{% schema %}
{
  "name": "Section Name",
  "tag": "section",
  "class": "section-class",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.section_name.settings.heading.label",
      "default": "Default Heading"
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "t:sections.section_name.presets.name"
    }
  ]
}
{% endschema %}