09-12
実践：デザインカンプから編集可能なセクションを実装する
カンプ1枚をschema設計 → 実装 → レスポンシブ → エディタ確認 → Theme Checkまで通せる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、デザインカンプ1枚を、schemaの設計から実装・エディタでの確認・Theme Checkまで通せるようになります。
受託の納品物は「運用者が壊さずに使える」ことなので、この流れを1回通せれば以後の案件は繰り返しです。
カンプをどう分解するか
繰り返す要素はブロック、固定の要素は静的ブロックか設定、ブランド共通の装飾はテーマ設定にします。
「編集させない部分」を先に決めます。
Dawn系の案件はセクション内ブロック、Horizon系はテーマブロックが実装単位です。
どちらのストアかを最初に確認します。
schemaを先に書く
設定の型・info・defaultを決めてからLiquidを書くと、手戻りが減ります。
設定名は運用者の言葉にします（「gap」ではなく「間隔」）。
CSSはCSS変数とモバイルファースト
余白やカラム数はCSS変数で受け、モバイルファースト（小さい画面から先に書く）にします。
画像はimage_tagのwidths / sizesを、実際のレイアウトに合わせます。
確認は、運用者より先に開発者がやる
theme devでエディタを開き、追加・並び替え・ブロックの増減・画像未設定の空状態を試します。shopify theme checkを通します。
ステップ1 / 2
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。