【基礎編】ECサイト構築講座 「Shopifyを使ったECサイト制作」 | SkillhubAI（スキルハブエーアイ）
ホーム/講座一覧/【基礎編】ECサイト構築講座 「Shopifyを使ったECサイト制作」
単品の講座 全19レッスン

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

こんな方へ自分のECサイトを作ってみたい方

未経験者がオリジナルECサイト構築をイチから学べる講座です。安全・安心なShopifyを使ってまったくのオリジナルECサイトを制作することが出来るようになります。

この講座で、できるようになること

  • Shopifyの基礎知識
  • Liquidの基礎知識
  • Shopifyのアカウント作成方法
この講座を申し込む価格：¥199800
【基礎編】ECサイト構築講座 「Shopifyを使ったECサイト制作」
19レッスン
5章
単品買い切り
ABOUT

この講座について

プログラミング未経験OK！
ECサイト制作を短期間で習得

～これからECサイト制作をはじめたい方対象、Shopifyを使った制作基礎講座～

ECサイトってセキュリティは大丈夫だろうか？決済機能を実装するのって難しいのでは？と思ってる方は多いと思います。この講座ではShopifyを使うことで安心・安全にオリジナリティあふれるECサイトが構築できるスキルを学びます。

Shopify/ECサイト制作でお悩みではありませんか？

ストアオーナー

ECサイトを作りたいけれど
開発も運営代行も、高すぎ…

ECサイト担当者

EC担当にされても…
何もわからないし。不安。

Webデザイナー

強みになるのは分かるけど
難しすぎて、もう嫌…

完全未経験からオリジナル
デザインのECサイト制作が可能

Shopifyは世界的シェアを誇るECプラットフォームで、月額利用料や手数料は業界最安クラス。クラウド型のサービスなので、顧客の個人情報管理などセキュリティ面も対策してくれているので安心です。自分たちでセキュリティ対策を行う場合にかかる、多大な労力・費用も無しで済みます。

Shopifyのデメリットは「日本語の説明が少ない」「テーマをそのまま使うと、他社ECとデザインが被る」こと。そこでSkillhubでは、商品登録などの基本操作から、オリジナルデザインのテーマ作成まで、Shopifyを使ったECサイト作成の全てを講座として盛り込みました。
自社ECを作りたい方、EC案件を受けたいWebデザイナーさん、どちらにも役立つ内容です。

難しいことをカンタンに
初心者からでも、短期間での技術習得を実現

多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。初心者の方向けに、ほんとうに必要な知識だけを厳選しています。このため短期間で、お仕事に使えるレベルの制作スキルをマスターすることができるのです。

1

独自デザインも自作可能な技術力が身につく

Shopifyのカスタマイズ性の高さを生かして、オリジナルデザインのECサイト制作ができます。Shopifyテーマを作るにはHTML,CSS,Liquid,JSONなど多くの言語習得が必要ですが、Skillhubの講座ならミニマムかつカンタンに、必要な言語全ての習得が可能。

ECサイトをブランド独自デザインにすることで、定期的にサイト訪れ、リピート購入してくれる“ファン”増加にも繋がります。マーケティングにも有利ですよ。

2

アイディアは即実現!
時間&経費コストは削減

自社ECの強みは独自の集客や施策が行えること。ご自身もしくは社内にWebスキルのある担当者がいれば、集客や販売のアイディアをすぐにECサイトに反映することが出来ます。

外注して支払う経費も減りますし、業者との打ち合わせ時間・納品されるまでの待ち時間もなくなります。機を逃さず、ベストなタイミングで施策を打ちましょう。

3

ECは売り上げてこそ本物!
自社ECを運営し、利益を出せる

ECサイトは枠組みを作って終わりではありません。商品の登録、在庫調整、ユーザーが魅力的に感じる説明文やLPを作ったり…とリリースしてからが本番です。

自分でECサイトを改善することも出来ますし、人に頼む時も「適切な料金設定か」判別できます。無駄なコストを抑え、ECサイトを顧客層に合わせ最適化していくことで、本物の“売れるECサイト”を所有できます。

※Shopify/EC制作プラン終了時

本講座を終えると、できるようになること

  • Shopifyのサービス内容がわかる
  • Shopifyパートナーアカウントを取得
  • 開発ストア（無料）で制作を進められる
  • Shopifyテーマの構造が分かる
  • Shopify言語“Liquid”が理解できる
  • 独自CSSファイルを追加し、ECサイトのデザインをカスタマイズできる
  • カスタマイズ画面から設定可能な、Shopifyのセクション/ブロックをイチから作れる
  • メタフィールドを使い、情報登録箇所を必要に応じて追加できる

この講座で学べること

  1. Shopifyの基礎知識
  2. Liquidの基礎知識
  3. Shopifyのアカウント作成方法
  4. Shopifyでのショップ開設方法
  5. Shopifyでの商品登録方法
  6. Shopifyメタフィールドの使い方
  7. Shopifyストアのデザイン変更方法
  8. Shopifyテーマのカスタマイズ方法

こんな方におすすめです

  • 自分のECサイトを作ってみたい方
  • ECサイト制作案件を受注したい方
  • 作りながらShopifyストア制作を学びたい方

受講の前に用意するもの

  • パソコンの基本操作ができる方
  • HTML/CSSの基本がわかる方
CURRICULUM

カリキュラム

5章 全19レッスン 上から順に進めると、最後まで迷わず進めます

1章　Liquidの基礎4レッスン

  1. 1Liquid基礎①オブジェクトとプロパティLiquidのコードを囲む{{ }}と{% %}の違い、“オブジェクト”とは何かを中心に解説します。Shopifyテーマではどのページテンプレートからでも呼び出せるオブジェクト、特定のページでしか使えないオブジェクトがあります。その調...
  2. 2Liquid基礎②繰り返し・条件分岐のタグLiquidでは、繰り返しや変数定義などに使う、決まったコードのことをタグ(Tags)と言います。本講座では、よく使うもの・基本的なものを中心に紹介します。今回はfor文による繰り返しと、ifやcaseを使った条件分岐について学びましょう。
  3. 3Liquid基礎③テーマタグと変数タグ今回はテーマタグ（テンプレートタグ）renderを使って、snippetsフォルダ内のファイルを呼び出す方法、コードの変数化を学びます。どちらも、使いこなせると作業効率が大幅にアップしますよ。
  4. 4Liquid基礎④Liquidのフィルター(Filters)Liquidコードによる出力・表示を変更する為に役立つフィルターについて解説します。Liquidフィルタ―は画像の出力や、商品価格の表示、アセットフォルダ内のCSSファイルを読み込みたいときなど随所で使います。

2章　Shopifyの基礎知識5レッスン

  1. 5Shopifyについて知る手軽にECサイトが作れ、カスタマイズ性も高いことから世界中で使用されているShopify（ショッピファイ）。サービスについてと、ECサイトを作成・運営していくための費用目安を知りましょう。
  2. 6Shopifyパートナー登録をするShopifyパートナーはずっと月額費用ゼロ円で、開発ストアを使って制作・動作確認が出来ます。ShopifyでECサイトを制作したい、これから学習したい、という方は、まずパートナーアカウントを作成しましょう。
  3. 7Shopifyの開発ストアを作成するShopifyパートナーが使用できる機能に“開発ストア”があります。開発ストアは無料でいくつも開設でき、ほぼ実際のECストアと同じ機能が使用できます。Shopifyテーマの制作や動作環境にも使用できますよ。
  4. 8Shopifyに商品を登録するShopifyで開発ストアを作ったら、商品登録をしておきましょう。商品の情報を登録することで、コレクションを作ったり、テーマのカスタマイズを行ったりと、出来ることが広がります。
  5. 9Shopifyの「コレクション」を活用するShopifyのコレクションとは、商品をグループ化して表示させる機能です。コレクションの役割と作成方法も覚えましょう。ストアに来たお客様が、目的の商品を見つけるやすくすためにも重要ですよ。

3章　Shopifyのテーマとは4レッスン

  1. 10テーマのカスタマイズ画面を確認Shopifyに標準搭載されている、テーマのカスタマイズ画面の基本的な使い方を解説します。ノーコードで感覚的にデザインカスタマイズができ、ストア運営者の方も使用することの多い部分です。
  2. 11Shopify３つのデザインカスタマイズ方法Shopifyではテーマ+各ECショップのページ構成によってECサイトのデザインを作っていきます。デザインカスタマイズに使われる3つの方法、それぞれの特徴、メリットとデメリットを確認しましょう。
  3. 12Shopifyテーマの構造を知ろうShopifyのテーマでは、テーマの構造・ディレクトリ名などをShopifyに決められた形式に沿って作る必要があります。Shopifyテーマの仕組み、テーマの構造のルールについて学びましょう。
  4. 13テーマに必要な7つのディレクトリと役割Shopifyテーマにはレイアウト(Layout)、テンプレート(Templates)、セクション(Sections)、スニペット(Snippets)、 設定(Config)、アセット(Assets)、ロケール(Locales)、7つ...

4章　セクションを自作してみよう4レッスン

  1. 14自作セクション作成①テーマセクションの基礎を学ぶShopifyテーマ制作に使うLiquidやJSONの基礎学習と合わせて、オリジナルのテーマセクションを作成していきましょう。今回は最小限のセクションファイルを作成し、コードの意味と基本の書き方を学びます。
  2. 15自作セクション作成②カスタマイズ可能な項目を追加自作したセクションファイルを、テーマのカスタマイズ画面から使いやすいようにグレードアップさせます。schemaにsettingsを加えて、カスタマイズ画面から見出しの文言を変更できるようにしてみましょう。
  3. 16自作セクション作成③セクションにブロックを追加するShopifyのテーマでは、セクションごとブロック（blocks）というカスタマイズ画面から設定可能なパーツを作成することが出来ます。自作セクションにブロックを追加して、カスタマイズ画面からより柔軟に使えるようにしましょう。
  4. 17自作セクション作成④複数ブロックの作成と使い分けShopifyテーマ、1つのセクション内に複数個のブロックを作りましょう。ブロックを複数作成する・1つのブロックに設定項目を複数個作る方法から、条件分岐（case/when）を使ったブロックごとの表示方法まで解説！

5章　メタフィールドとは2レッスン

  1. 18Shopifyのメタフィールドを活用しようメタフィールドを使うと、登録・編集画面の情報登録欄を増やすことができます。テーマのカスタマイズ画面から、ノーコードで登録されているメタフィールドを表示させるよう設定も可能。
  2. 19メタフィールドのちょっと便利なTipsShopifyのメタフィールドで、お客様（ストア運営者）のご希望が多いところを紹介します。任意の商品へのリンクを追加するメタフィールド、表示用セクションファイルのコードも解説。本講座の復習・総仕上げに一緒に作ってみてください。
START

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

自分のECサイトを作ってみたい方に向けた、全19レッスンの講座です。上から順に、1つずつ進めてください。

  • Shopifyの基礎知識
  • Liquidの基礎知識
  • Shopifyのアカウント作成方法
  • Shopifyでのショップ開設方法
この講座を申し込む価格：¥199800