Shopifyアカデミー・Shopify Development Fundamentals 2/5

Shopify アカデミーの「Shopify Development Fundamentals」ラーニングパスの「Customizing Themes」コースを修了しました。

このコースではテーマ開発における設計の考え方や、Liquidによるカスタマイズの基本が体系的にまとめられていましたので、学びの概要と印象に残ったポイントを振り返ります。

Shopifyで選べるストアフロントの選択肢

Shopifyの「ストアフロント（＝顧客が実際に閲覧・操作する店舗の表側）」について、複数の選択肢があることが紹介されていました。
どのアプローチを選ぶかによって、開発スタイルや使う技術や対応できる要件の幅が大きく変わってくるため、目的に応じて正しく使い分けることが重要です。

それぞれの選択肢については、以前書いたブログ記事でより詳しく解説していますので、あわせてご覧ください：

またLiquidとHydrogenについては、それぞれの開発者向け学習コースもShopifyアカデミーで用意されており、開発スタイルに応じた学習を深めることができます：

今後のプロジェクトでどの構成を選ぶべきか考えるうえで、これらの学習リソースは非常に参考になります。

Shopifyで使えるテーマは、大きく分けて既成テーマとカスタムテーマの2種類があります。

既成テーマはShopify Theme Storeで入手でき、洗練されたデザインと機能性を兼ね備えているためスピーディな立ち上げに向いています。

一方で、特定のビジネスモデルやブランドの世界観に合わせて柔軟に構築されるのがカスタムテーマです。

特に近年では、以下のようなユースケースに対応するために、テーマ選びや設計の工夫が求められる場面が増えています。

テーマによっては、あらかじめB2B向けに設計されたものもあります。

このコースでは、Shopifyが公式に提唱しているテーマ設計のベストプラクティスも紹介されていました。

どれも「売れるストア」を支えるための設計思想が詰まっており、実際の案件でもすぐに活かせそうな内容でした。特に印象に残ったのは以下のようなポイントです。

Shopifyではテーマファイルを編集・カスタマイズする方法として主に以下の3つが用意されています。それぞれの方法には特徴と向き不向きがあり、プロジェクトの規模や目的に応じて使い分けることが重要です。

もっとも開発者フレンドリーな方法がこのCLIを使った方法です。ローカル環境でコードを書きながら、変更内容を即座にプレビューできるため、作業効率が飛躍的に向上します。

Shopify CLIの開発環境構築に関する詳しい記事はこちら：

こちらはコード編集後に圧縮し管理画面からアップロードする方法です。CLIが使えない環境や、簡単な修正にとどめたい場合に適しています。

より大規模な開発やチームでのバージョン管理が必要な場合は、GitHub連携が有効です。ShopifyのGitHub連携アプリを通じて、特定のブランチをストアに接続し、変更内容を反映させることが可能です。

学んだことを実際に試すために、シンプルなCTAセクションをLiquidで作成するチャレンジがありました。

構文自体はシンプルですが、Liquidのリファレンスや既存のセクションのコードを参照に作成し、schemaの構成やセクションの読み込み方法、テンプレートとの関係性について理解が深まりました。

このコースを通してShopifyのテーマ開発における基本的な設計思想や、Liquidの役割、そしてテーマを選定・設計する際に意識すべき観点がより明確になりました。

特にテーマ開発においては機能性やデザイン性だけでなく、「誰のために・何を売るのか」という視点から構成を組み立てることの重要性を改めて実感しました。

今後は実案件や検証を通じて、より柔軟かつ再利用性の高いテーマカスタマイズができるよう実践を重ねていきたいと思います。