サムネイル

【Shopifyマスターへの道】#0 ロードマップを始める前に

【Shopify マスターへの道】#0 ロードマップを始める前に

この記事は、これから Shopify 構築ロードマップを始める方に向けたものです。ロードマップの目標やどんな方に向けたロードマップになっているのかを説明しています。
また、ロードマップで作る EC サイトの完成物を確認します。

2024 年最新版の「新・Shopify マスターへの道」も公開しております。最新の UI を体験したい方は、ぜひ以下の記事をご覧ください。

【新・Shopify マスターへの道】#0 ロードマップを始める前に【2024 年最新版】

Shopify 構築ロードマップをこれから始める方へ

このロードマップの目標

  • Shopify パートナーとしてゼロから EC サイトを作り上げ、オーナーアカウントに所有権を移行する

「Shopify 構築ロードマップ」を進めていくと、誰でも簡単に Shopify で EC サイトが構築できるようになります。

このロードマップでは、オンラインストアを構築して実際に商品を販売できるレベルのストアを目指します。もちろん、全て無料で公開していきます。

Shopify 構築ロードマップの対象者

  • Shopify パートナーとしてストア構築をできるようになりたい方
  • Shopify で EC サイトを構築しネットショップを始めたい方
  • Shopify で EC サイトを構築する流れを知りたい方

基本的には、Shopify パートナーに向けに進めていきます。Shopify パートナーとしてストアを構築し、クライアントであるストアのオーナーに所有権を移行する流れになっています。
ただ、オーナー自らストアを立ち上げたい場合でも、このロードマップを見れば EC ストアを構築することができるようになります。

ロードマップの流れ

次のステップに沿ってストアを構築していきます。

  1. ストア構築の準備をしよう
  2. 商品を登録しよう
  3. コレクションを登録しよう
  4. ブログ記事を作成しよう
  5. サイトのデザインを選ぼう
  6. テーマを編集しよう(セクション編)
  7. テーマを編集しよう(テーマ設定編)
  8. ティザーサイトを作成しよう
  9. サイトのフォントを編集しよう
  10. アカウントページを作成しよう
  11. コンタクトフォーム を作成しよう
  12. About ページを作成しよう
  13. 規約を入力しよう
  14. メニューの編集をしよう
  15. 送料を設定しよう
  16. 一般設定を編集しよう
  17. 各種設定を編集しよう
  18. 決済テストを行おう
  19. 所有権を移行しよう

ロードマップを始める前に準備しておくもの

  • Shopify パートナーアカウント作成用のメールアドレス
  • Shopify ストアを運営するオーナー用のメールアドレス

今回のロードマップでは、パートナーとしてストアを構築し、オーナーに所有権を移行するところまでを体験します。そのため、パートナー用とオーナー用の 2 つのメールアドレスをを用意してください。

デモサイトを構築する際に使用する商品画像や CSV ファイルを上のリンクからダウンロードしておいてください。
ダウンロードせずオリジナルの画像を使って進めてもらっても全然構いません!ただ、CSV ファイルはダウンロードしてもらった方が、楽に進めることができます。

ロードマップを始める前に知っておくべきこと

ロードマップを始める前に知っておかなければいけない必須知識などは特にありません。
もし、Shopify でどういうことができるのか何も知らないという方がいれば、以下の記事を読んでからロードマップを始めてください。

【初心者向け】Shopify について解説 初めての EC サイトにおすすめ!

Shopify パートナープログラムとは?できることや報酬を調べてみた

ロードマップ作成するデモサイトを確認する

ロードマップを始める前に、このロードマップで作成する EC サイトの完成物をみてみましょう。今回は、アクセサリーショップを作成します。

ホームページ

ホームページの全体像です。

ホームページの全体像

EC サイトのトップページです。左上にロゴ、上部にヘッダーメニューがあります。トップ部分は、スライドショーにします。

EC サイトのトップページ1

EC サイトのトップページ2

自社のブランドに関する部分です。別のページに飛ばすボタンを設置します。

自社のブランドに関する部分

セール商品を紹介する部分です。セールコレクションを表示させるよう設定します。

セール商品を紹介する部分

コレクションについての部分です。商品の種類ごとに分けたコレクションを作成し、表示させます。

コレクションについての部分

おすすめ商品を紹介する部分です。カートに追加ボタンや今すぐ購入ボタンがあります。

おすすめ商品を紹介する部分

ブログ記事を紹介する部分です。ブログ記事を作成し、表示させます。

ブログ記事を紹介する部分

最後にフッターメニューです。ポリシーや SNS についてのメニューを追加します。

フッターメニュー

About ページ

自社のブランドについて説明をするページです。liquid ファイルを編集して、新しいページを作成します。

About ページ

商品一覧ページ

商品の一覧表示ページです。全ての商品が表示されます。

商品一覧ページ

ブログ記事一覧ページ

ブログ記事の投稿を見ることができるページです。それぞれのブログ記事に飛ぶことができます。

ブログ記事一覧ページ

コンタクトページ

お問い合わせページです。Shopify のデフォルト機能で作成します。

コンタクトページ

アカウントログインページ

アカウントのログインページです。こちらも Shopify のデフォルト機能で作成します。

アカウントログインページ

その他に作るロードマップで実装すること

  • ティザーサイトのデザインを編集する
  • 文字のフォントを変えるために liquid ファイルを編集する
  • ポリシーページを作成する

ロードマップを制覇して Shopify マスターになろう!

ここまで読んでいただいて、Shopify ストアを作ってみたいと思った方はぜひロードマップを進めていってください!

ロードマップを達成した頃には、あなたも屈強な Shopify マスターになっています!

以下は、おすすめの Shopify アプリです。

  • 「シンプルブログ記事カスタマイズ|お手軽ブログテンプレート」
    「シンプルブログ記事カスタマイズ|お手軽ブログテンプレート」は、Shopify ストアのブログデザインをノーコードでカスタマイズできるアプリです。
    Shopify ストアのブログデザインをノーコードでカスタマイズできるアプリ

「シンプルブログ記事カスタマイズ|お手軽ブログテンプレート」|アプリストア

  • 「シンプルブログ記事目次|自動見出し一覧挿入」
    「シンプルブログ記事目次|自動見出し一覧挿入」は、Shopify ストアにブログ目次を簡単に表示できるアプリです。
    シンプルブログ記事目次|自動見出し一覧挿入

「シンプルブログ記事目次|自動見出し一覧挿入」|アプリストア

こちらの記事もおすすめです!

おすすめ Shopify アプリ

シンプルあといくらで無料ギフト|お手軽送料無料プログレスバーのアイコン

シンプルあといくらで無料ギフト|お手軽送料無料プログレスバー

カート金額に応じて無料ギフトと送料無料を提供。あといくらで届くかをプログレスバーで表示します。

シンプルお届け先変更|お手軽住所・配送日時のセルフ修正のアイコン

シンプルお届け先変更|お手軽住所・配送日時のセルフ修正

注文後のお届け先住所や配送希望日を、お客様自身で修正できます。問い合わせ対応の手間を減らします。

シンプル型番・JANコード表示|お手軽SKU・商品コード表示のアイコン

シンプル型番・JANコード表示|お手軽SKU・商品コード表示

商品ページに、選択中のバリエーションの SKU(型番)と JAN コードを表示します。テーマの編集は不要です。

シンプルPDFカタログ|お手軽PDFフリップブック表示のアイコン

シンプルPDFカタログ|お手軽PDFフリップブック表示

商品ページにPDFカタログを、ページをめくる本のように表示。お客様はページを離れずに読めます。

シンプル動画スライドショー|お手軽動画カルーセル表示のアイコン

シンプル動画スライドショー|お手軽動画カルーセル表示

どのページにも全幅の動画カルーセルを表示。動画ごとに見出しとボタンを重ねられます。

シンプルマイページクーポン|お客様アカウント割引コード表示のアイコン

シンプルマイページクーポン|お客様アカウント割引コード表示

顧客アカウントページにクーポンを表示。クーポンを作って ID を貼るだけで表示されます。

シンプル追従カウントダウンタイマー|お手軽あと何日表示のアイコン

シンプル追従カウントダウンタイマー|お手軽あと何日表示

ストアのどこにでも追従型のカウントダウンタイマーを表示して、購入の緊急性を演出できます。

シンプル売り切れバリエーション非表示|自動在庫切れ非表示のアイコン

シンプル売り切れバリエーション非表示|自動在庫切れ非表示

バリエーションピッカーから売り切れのサイズ・カラーを消します。お客様には購入できる選択肢だけが表示されます。

関連記事