【基礎編】ECサイト構築講座 「Shopifyを使ったECサイト制作」

レッスン内容

• 1

  Shopifyについて知る

  手軽にECサイトが作れ、カスタマイズ性も高いことから世界中で使用されているShopify（ショッピファイ）。サービスについてと、ECサイトを作成・運営していくための費用目安を知りましょう。

• 2

  Shopifyパートナー登録をする

  Shopifyパートナーはずっと月額費用ゼロ円で、開発ストアを使って制作・動作確認が出来ます。ShopifyでECサイトを制作したい、これから学習したい、という方は、まずパートナーアカウントを作成しましょう。

• 3

  Shopifyの開発ストアを作成する

  Shopifyパートナーが使用できる機能に“開発ストア”があります。開発ストアは無料でいくつも開設でき、ほぼ実際のECストアと同じ機能が使用できます。Shopifyテーマの制作や動作環境にも使用できますよ。

• 4

  Shopifyに商品を登録する

  Shopifyで開発ストアを作ったら、商品登録をしておきましょう。商品の情報を登録することで、コレクションを作ったり、テーマのカスタマイズを行ったりと、出来ることが広がります。

• 5

  Shopifyの「コレクション」を活用する

  Shopifyのコレクションとは、商品をグループ化して表示させる機能です。コレクションの役割と作成方法も覚えましょう。ストアに来たお客様が、目的の商品を見つけるやすくすためにも重要ですよ。

• 6

  テーマのカスタマイズ画面を確認

  Shopifyに標準搭載されている、テーマのカスタマイズ画面の基本的な使い方を解説します。ノーコードで感覚的にデザインカスタマイズができ、ストア運営者の方も使用することの多い部分です。

• 7

  Shopify３つのデザインカスタマイズ方法

  Shopifyではテーマ+各ECショップのページ構成によってECサイトのデザインを作っていきます。デザインカスタマイズに使われる3つの方法、それぞれの特徴、メリットとデメリットを確認しましょう。

• 8

  Shopifyテーマの構造を知ろう

  Shopifyのテーマでは、テーマの構造・ディレクトリ名などをShopifyに決められた形式に沿って作る必要があります。Shopifyテーマの仕組み、テーマの構造のルールについて学びましょう。

• 9

  テーマに必要な7つのディレクトリと役割

  Shopifyテーマにはレイアウト(Layout)、テンプレート(Templates)、セクション(Sections)、スニペット(Snippets)、 設定(Config)、アセット(Assets)、ロケール(Locales)、7つのディレクトリがあります。それぞれの役割を見ていきましょう。

• 10

  自作セクション作成①テーマセクションの基礎を学ぶ

  Shopifyテーマ制作に使うLiquidやJSONの基礎学習と合わせて、オリジナルのテーマセクションを作成していきましょう。今回は最小限のセクションファイルを作成し、コードの意味と基本の書き方を学びます。

• 11

  自作セクション作成②カスタマイズ可能な項目を追加

  自作したセクションファイルを、テーマのカスタマイズ画面から使いやすいようにグレードアップさせます。schemaにsettingsを加えて、カスタマイズ画面から見出しの文言を変更できるようにしてみましょう。

• 12

  自作セクション作成③セクションにブロックを追加する

  Shopifyのテーマでは、セクションごとブロック（blocks）というカスタマイズ画面から設定可能なパーツを作成することが出来ます。自作セクションにブロックを追加して、カスタマイズ画面からより柔軟に使えるようにしましょう。

• 13

  自作セクション作成④複数ブロックの作成と使い分け

  Shopifyテーマ、1つのセクション内に複数個のブロックを作りましょう。ブロックを複数作成する・1つのブロックに設定項目を複数個作る方法から、条件分岐（case/when）を使ったブロックごとの表示方法まで解説！

• 14

  Liquid基礎①オブジェクトとプロパティ

  Liquidのコードを囲む{{ }}と{% %}の違い、“オブジェクト”とは何かを中心に解説します。Shopifyテーマではどのページテンプレートからでも呼び出せるオブジェクト、特定のページでしか使えないオブジェクトがあります。その調べ方も学びましょう。

• 15

  Liquid基礎②繰り返し・条件分岐のタグ

  Liquidでは、繰り返しや変数定義などに使う、決まったコードのことをタグ(Tags)と言います。本講座では、よく使うもの・基本的なものを中心に紹介します。今回はfor文による繰り返しと、ifやcaseを使った条件分岐について学びましょう。

• 16

  Liquid基礎③テーマタグと変数タグ

  今回はテーマタグ（テンプレートタグ）renderを使って、snippetsフォルダ内のファイルを呼び出す方法、コードの変数化を学びます。どちらも、使いこなせると作業効率が大幅にアップしますよ。

• 17

  Liquid基礎④Liquidのフィルター(Filters)

  Liquidコードによる出力・表示を変更する為に役立つフィルターについて解説します。Liquidフィルタ―は画像の出力や、商品価格の表示、アセットフォルダ内のCSSファイルを読み込みたいときなど随所で使います。

• 18

  Shopifyのメタフィールドを活用しよう

  メタフィールドを使うと、登録・編集画面の情報登録欄を増やすことができます。テーマのカスタマイズ画面から、ノーコードで登録されているメタフィールドを表示させるよう設定も可能。

• 19

  メタフィールドのちょっと便利なTips

  Shopifyのメタフィールドで、お客様（ストア運営者）のご希望が多いところを紹介します。任意の商品へのリンクを追加するメタフィールド、表示用セクションファイルのコードも解説。本講座の復習・総仕上げに一緒に作ってみてください。