サムネイル

【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 アプリ

シンプルチェックアウト注文制限|お手軽購入制限ルールのアイコン

シンプルチェックアウト注文制限|お手軽購入制限ルール

カートとチェックアウトで不要な注文を柔軟なルールでブロック。45種類の条件を組み合わせ、コード不要。

シンプル栄養成分・アレルギー表示|食品表示のアイコン

シンプル栄養成分・アレルギー表示|食品表示

商品ページに栄養成分表示とアレルゲン情報を表示。お客様が安心して買い物できるようになります。

シンプルQRコード|お手軽QRコード作成・印刷アプリのアイコン

シンプルQRコード|お手軽QRコード作成・印刷アプリ

商品・コレクション・割引用のQRコードを作成。タグやチラシ、ポスターに印刷できます。

シンプルダークモード|お手軽配色切り替え・目に優しい表示のアイコン

シンプルダークモード|お手軽配色切り替え・目に優しい表示

ストアにダークモードボタンを追加。買い物客がワンタップで配色を切り替えられます。

シンプルソーシャルギフト|LINE・SNSで贈れるプレゼントのアイコン

シンプルソーシャルギフト|LINE・SNSで贈れるプレゼント

住所を知らなくてもギフトを贈れます。受取人が自分で配送先を入力します。

シンプルカスタムマウスカーソル|お手軽ポインターカスタマイズのアイコン

シンプルカスタムマウスカーソル|お手軽ポインターカスタマイズ

ストアのマウスカーソルを変更。形・絵文字・自分の画像から選べます。

シンプル低在庫アラート|在庫管理・在庫切れ通知・欠品防止のアイコン

シンプル低在庫アラート|在庫管理・在庫切れ通知・欠品防止

在庫が減ったらすぐ通知。商品・バリエーション・ロケーション別に設定できます。

シンプル商品見積もり依頼|価格非表示・B2B対応・法人向けのアイコン

シンプル商品見積もり依頼|価格非表示・B2B対応・法人向け

価格を隠して「見積を依頼」ボタンに。BtoB・卸売のストアに。

関連記事