[Shopify] ストア構築の流れ・ワークフロー

この記事ではそんな疑問を持つ、Shopifyを使ってECサイトを自分で制作したい方や、制作会社に依頼したいと考えている方に向けて、ストア構築の流れについて、大規模サイト構築を数多く経験してきた私が詳しく解説します。

Shopifyの無料体験をはじめる

Shopifyストア構築を正しい流れで進めるべき理由

進め方は制作会社や担当者によっても異なりますが、無計画に進めるのではなく、正しいワークフローに沿ったプロジェクトの進め方をすることで、よくありがちな以下のような失敗を避けることができます。 ただ単にストアを構築することが目的ではありません。 ストアを構築する目的・成果を明確にし、公開後も売り上げの上がる、運用のしやすいサイトを、納得のいく仕上がりのサイトを作り上げるためには、正しい進め方とプロジェクト管理が大変重要です。

Shopifyのストア構築を行う流れ

初めての方には、どのようにECサイト構築をどのようにして進めるのかわからない方が多いと思います。そこで、今回はShopifyのストア構築の流れと、気をつけなければならない点を紹介していきます。 大まかには、以下のような流れになります。 ※並行して進められるものや、企業やサイトの規模によっては省略するものがあります。 ※以下は規模が大きなプロジェクトでも対応できる内容で記載しています。予算などによってはかなりスキップして制作だけを行ったりする場合もありますが、トラブルにならないためにも、ある程度の要件定義や仕様の確認などは必須です。

プロジェクト設計

• ヒアリング（現状把握）
• プロジェクト概要設計
• スケジュール作成
• 見積もり

企画・要件定義

• 要件定義
• Shopifyプラン・アプリの選定・ランニングコストの確認
• 免責事項の確認
• （必要に応じて）再見積もり

サイト設計

• デザインヒアリング
• テーマ選定
• サイト設計
• コンテンツ設計
• ページ設計
• システム設計

制作・開発・テスト

• テーマ設定
• ストア設定
• デザイン制作
• コーディング・Liquid実装（カスタマイズ部分）
• 画像作成・原稿作成
• ページ作成・設定

データ登録・移行

• 商品登録（または商品データ移行）
• テスト
• 顧客データ移行
• ドメイン設定・移行

公開準備

• レクチャー
• マーケティング
• 公開

運用・改善

• 運用
• サイト分析
• 改善案検討
• 追加アプリ導入・追加開発

Shopifyのストア構築を行う流れ詳細

それではそれぞれどのようなことを行うのか見ていきます。

プロジェクト設計

ヒアリング

ビジネス全般・システム・運用面などについて、それぞれ現状や希望などを把握するためにヒアリングを行います。

ビジネス

企業について、ブランドイメージ、競合他社について、既存のマーケティング方法、ターゲットユーザーについて、既存のウェブサイトについて、などをヒアリングし、サイトを作る目的や目標は何か、強みは何か、誰に向けてどのように訴求・販売していくのか、などの方向性を明確にします。

システム・運用

既存サイトの仕様や利用システムについて、セキュリティポリシーについて、現状の問題点や改善したい点について、現状の制作や運用の体制やフローについて、などを把握し、新しいサイトではどのように改善するのかの方向性を検討します。 ヒアリングはビジネス規模により質問数が変わってきます。 また、クライアントが作成するRFP（提案依頼書）や要求定義（クライアント側でしたいことや必要なことを明確に記載したもの）が存在する場合は、それを元に追加の質問内容を洗い出します。

プロジェクト概要設計

ヒアリング内容をもとに、プロジェクト全体の方向性を明確にします。

• ターゲットユーザーがどのような人か
• どういった導線で何を伝えるのか、購入につなげるのか
• どのように売り上げを上げていくのか
• 現状の問題をどう改善するのか
• 今回のコンセプトは何か

などを定め、プロジェクトのゴールがブレないよう、またクライアントやチームの認識が揃うように、概要レベルで設定します。

スケジュール作成

全体のスケジュール（WBS）を作成します。 細かい作業に分けて、制作開発の工数、クライアント側の確認日数、フィードバック修正の回数、クライアントに用意してもらうものの期限、MTGや休日祝日、なども考慮に入れ、細かく引いていきます。スケジュール立て方について詳しくは以下の記事にまとめています。 ここが曖昧だったり抜けていたり無茶苦茶な期間だったりすると、確実に炎上し、終わらなかったりトラブルの元となる大きなポイントです。

見積もり

見積もりを作成します。納得感を出すには、細かい項目ごとに記載することが重要です。基本的には人月単価に対して、その項目の作業工数をかけ、管理工数などを載せて記載します。急ぎの場合は追加工数を取る場合もあります。 この段階では概算でも構いませんが、要件定義の後に一旦は確定します。大規模な場合は、大きなフェーズごとに区切り、見積もり・請求を行います。

企画・要件定義

要件定義

要件定義とは、フロントやバックエンドにおいて、必要な機能それぞれの要件を定義し、今後の進め方を決めることです。ここでは細かい開発仕様までは決めません。クライアントも理解できるように、機能の概要・できることをまとめます。

ストアフロント（フロントエンド）

トップ・会員登録・コレクション・商品詳細・チェックアウト・マイページ・フォーム・静的ページ・特集ページ など ※有料テーマ（英語）の場合、日本語化に工数がかかり予算も変わってくるため、この段階でテーマを決めてしまう方が良いかもしれません。

管理画面（バックエンド）

決済・配送・商品/顧客/注文管理・統計・デザイン設定・顧客対応・マーケティング など

優先度決め

必要な機能を一覧化し、必須で実装するものと、そうでないものなどの優先度も明確にしていきます。

Shopifyデフォルト機能の把握

Shopifyの場合は、デフォルトの機能を元に、追加でカスタマイズしたりアプリを導入することが多いため、カスタマイズ部分の定義だけで十分と思われるかもですが、クライアントはShopifyの機能をすべてを理解していないことが多く、こちらでは分かっていても、フロント側や管理画面でできることや使い勝手を事前に説明したり、実際に触ってもらい、何が足りていないのかなどを詳しくヒアリングすることが重要になります。 また作成するページや、更新方法についても明確にしておきます。特に、管理画面から設定したい場合はセクションのカスタマイズが必要となり、特集ページやLPのようなレイアウトに凝ったものを作る場合は、PageFlyなどのアプリが必要になることが多いため、事前に確認しておきます。

Shopifyでの制約事項の確認

Shopifyは海外製なこともあり、日本向けとして利用するには現在でもまだ不十分な点が多くあります。Shopifyならではの制約事項を事前に伝えることも重要です。 上記の内容を明確にしないと、後の開発後や公開後にトラブルになる可能性が大きくなります。

Shopifyプラン・アプリの選定・ランニングコストの確認

プランを決めます。決め方は簡単ですので以下にまとめました。 要件定義が終わると、Shopifyデフォルトでは足りない機能が明確になります。それぞれ開発をするのか、テーマのカスタマイズで対応するのか、アプリを利用するのか、明確にします。 アプリを利用せずにテーマカスタマイズで対応できるものもありますが、その分開発工数が膨らみますし、アプリを利用しすぎるとサイト全体が重くなり、パフォーマンスも悪くなると同時に、月額固定費用がかさんできますので、その辺りのバランスを見て決める必要があります。 アプリを導入する際は、アプリにより機能や使い勝手が異なるため、比較検討が必要です。 最終的に、クライアントにはShopifyの利用にかかる全ての固定費（Shopify・App・決済手数料など）を明確に提示します。

免責事項の確認

できないことや対応範囲を明確にします。例えば以下。

• 商品データ（商品画像・説明文）・各コンテンツ原稿（ブログ・ページ・ポリシーなど）・バナー画像・メール文言・多言語化における翻訳原稿などはご用意いただく。
• Shopifyの有料プラン契約・アプリ購入・ドメインはクライアントにご契約いただく。
• 外部システムとの連携はスコープ外。

などです。どちらが用意するか、作るかを曖昧にしておくとトラブルの元となります。 また公開後、運用に入ってからのサポート範囲もこの段階で明確に決めておくと良いです。

（必要に応じて）再見積もり

要件定義を行うことによって、前回の概算見積もりから大きく変わった場合は再見積もりを行います。

サイト設計

次に、実際のサイト設計に入ります。

デザインヒアリング

デザインヒアリングは以下にまとめましたが、Shopifyではテーマを元に構築するのであれば、テーマを選定する基準についてヒアリングをしていきます。ここが明確にならないと、イメージとは違ったサイトになってしまうため、このテーマ選びのためのヒアリングも非常に重要です。

テーマ選定

ヒアリング内容をもとに、テーマを選定します。無料テーマ・有料テーマがあります。 有料テーマを利用する場合は、日本語に対応していないことが多いため、商品やコンテンツ部分以外のベースとなる部分の翻訳工数も見積もりに入れているかどうか、きちんと確認する必要もあります。（日本語対応には結構な工数がかかります）

サイト設計・コンテンツ設計

最初の概要で定義した、ターゲットユーザーに向けて、どのようなサイト構造にするのか、トップページ・コレクションページ・商品詳細ページ・その他のページにどのようなコンテンツが必要か。ナビゲーションはどうするか。といったサイト全体を設計していきます。

ページ設計

掲載する内容が固まったら、各ページ構成・レイアウトを決めていきます。 テーマセクションで設定するのみの場合は、設定し確認しながら作りあげていく場合もありますが、必要に応じてAdobe XDなどでワイヤーを作成して定義します。 また決めたサイト設計に対して、利用するテーマに用意されているセクションだけで作れるのか、それとも追加のカスタマイズが必要なのかも明確にします。

システム設計（管理画面の入力仕様など）

カスタマイズが必要な部分で、管理画面での設計が必要な部分がある場合は、その項目や設定方法を定義します。 セクションを作り込むことで、管理画面から様々な項目を設定することが可能となります。 Configuring theme settings

制作・開発・テスト

テーマ設定（デザイン・メニュー・その他）

次に、テーマの設定を行います。多くは無料・有料テーマを元に作成するかと思いますので、その場合は各テーマのデザイン設定をしていきます。 具体的には、ロゴ・色・フォント・ファビコン・チェックアウトの背景や色・商品ページの画像サイズ・コレクションページの表示レイアウト・ブログの表示レイアウトなど、テーマによって設定できる項目が異なります。

ストア設定（ショップ・配送・決済・納品書・権限・その他）

さらに、ストア自体の設定を行います。 ショップの基本設定・配送先や送料の設定・決済の設定・納品書の設定・管理ユーザーの権限設定など、様々な項目があります。 事前にクライアントに設定内容をいただくものもあれば、クライアント自身で設定いただく項目もあります。特に決済は事前に審査を通してもらう必要があります。

デザイン制作

テーマを利用する場合でカスタマイズが必要な部分は、実装するためにレイアウトのデザインを作成する必要があります。 また、カスタマイズ不要な場合でも、コンテンツを登録するための画像作成が必要になります。 フルスクラッチで構築する際は、ここでデザインをページテンプレートごとに作成していきます。

フロントエンドコーディング・Liquid実装（カスタマイズ部分）

カスタマイズ部分のコーディング（HTML/CSS/JS）を行い、ShopifyテーマのLiquidファイルに組み込みを行います。

ページ作成・設定（コレクション・ページ・ブログ・ポリシー・FAQ・その他）

ページやブログなどのコンテンツ内容を登録します。 クライアントが制作せずにそれも含めて請ける場合は、ワイヤーを作成し、画像素材を用意したり、原稿を起こしたり、もしくは外注するための内容をまとめる場合もあります。

データ登録・移行

次にデータの登録や移行を行います。リニューアルの場合は、前のECのデータをエクスポートし、Shopify側にインポートする必要があります。

商品登録（または商品データ移行）

商品の登録を行います。 前のECから移行する場合は、CSVデータよりインポートするか、Matrixify (Excelify) というアプリ（有料）を利用してインポートします。

テスト

パソコン・タブレット・スマートフォンの各OS・ブラウザごとに表示確認を行い、購入テストを行います。 カスタマイズ部分が多い場合や大規模な場合は、テストケースを作成し、それを元にテストを行います。

顧客データ移行

こちらも前のECから移行する場合は、CSVデータよりインポートするか、Matrixify (Excelify) というアプリ（有料）を利用してインポートします。 また、インポート後にユーザーに対して移行の案内メールを送ったり、ログイン・会員登録画面に移行方法の説明を記載しておくなど、公開までに事前の準備が必要になります。

ドメイン設定・移行

ドメインの設定を行います。 新規のストア構築の場合は、ドメインの設定は公開前でも行えるため、最初にアカウントを作成した後に行ってもOKです。 Shopifyにはメールサーバーは用意されていないため、メールアカウントが必要な場合は事前に確認が必要です。

公開準備

全ての作業が完了したら、やっと公開準備です。

レクチャー

管理画面の操作方法や、画面の見方などについて、運用フローに沿ってクライアントに説明を行います。 必要に応じてマニュアルを作成する場合もあります。

マーケティング（集客）

サイトを公開しても、ユーザーが集まらなければ意味がありません。事前に既存ユーザーへの告知方法やプロモーション、広告の出稿などを検討し実施します。

公開

全ての準備が整ったら、いよいよサイトを公開します。

運用・改善

サイトの公開後は、運用を行いながらサイトを分析し、改善を繰り返し実施。必要に応じて改善策を検討し、追加のアプリを導入したり、追加のページ作成や開発、マーケティング施策などを行います。

運用

サイト分析

改善案検討

追加アプリ導入・追加開発

  以上です！

Shopifyの無料体験をはじめる