TREND最新トピック

MEMBERS ROOTS

『Shopify』で無料のモックアップを作成する手順(初期設定編)

こんにちは!メンバーズルーツ、WEBデザイナーの浅野です。
デザインやコーディングの実践業務などを行いつつ、Shopifyの勉強に励んでいます。

突然ですが、自分用のオンラインストアを試しに作ってみたいと思ったことはありませんか?メンバーズルーツでも、実際にお客さまからそういったニーズが多く、Shopify公式の『Shopify Partner Boot Camp』を受講し、実際にECサイトを立ち上げる勉強をしました。そこで学んだことを、実際にお客様にご提案する際に利用しています。

その中でも最も有用だったものが、
無料でモックアップを作成することが可能な、『開発ストア』というものです。
Shopifyのこの機能を使えば、ノンエンジニアでも、簡単にECサイト作成することができます。

今回は、その『開発モード』を利用し、任意のドメインを設定し、ECサイトの基盤までを開設する方法について、ご説明したいと思います。

目次

そもそも『Shopify』とは?

『Shopify』とは、便利なCMSです。現在、世界最大のECサイト制作プラットフォームで、低予算で簡単に綺麗なECサイトを作れることで注目を浴びています。

無料でECサイトのモックアップを作るには

『Shopify』には、『開発ストア』と『管理ストア』の二つがあり、『開発ストア』であれば無料で無制限にECサイトを作成することが可能です。無料のまま実際にECサイトとして利用することはできませんが、開発ストアで制作したページを有償プランに切り替えることで、そのまま公開し、実際のECサイトとして運用することも可能です。

この『開発ストア』を使うことで、ランニングコストをかけずに自分のECサイトのデモページを作ることができます。今回は、その『開発ストア』を利用して、ECサイトの初期設定を行う方法についてご紹介します!

『開発ストア』を作るための全体の流れ

開発ストアでモックアップを制作するためには下記STEPで準備を行います!
STEP1:Shopifyの初期設定を行う
STEP2:テーマを選定する
STEP3:商品登録を行う
STEP4:ページをカスタマイズする
STEP5:決済方法の設定を行う

※『STEP2:テーマの選定』に関しては、下記ページで詳しくご紹介していますので気になる方はぜひチェックしてください!

今回は、『STEP1:Shopifyの初期設定を行う』について詳しく解説していきます。それでは早速制作してみましょう!

『Shopify』の初期設定を行う

手順①:『Shopify partner』に登録

まずは、『Shopify partner』に登録しましょう。
https://partners.shopify.com/signup
にアクセスし、ご自分の情報を入力してください。
(アカウントを既にお持ちの場合はログインしてください。)

※Shopifyアカウントと、Shopify partnerアカウントは別物です。Shopify partnerアカウントを取得してください。

手順②:『ストア追加をする』ボタンをクリック

登録が完了したら、パートナーダッシュボードに遷移します。
左上のストア管理から、「ストアを追加」をクリックし、新しいストアを追加してください。

01-1
手順③:『ストア追加をする』で各種初期設定を行う。

次に、「ストアタイプ」を選択します。
いろいろと難しいことが書かれていますが、以下のような認識でOKです。
「開発ストア」…ECサイトを作る。
「管理ストア」…すでに作成されているECサイトに開発サポーターとしてログインする。

今回はECサイト立ち上げが目的なので、「開発ストア」を選択します。
「開発ストア」 を選択すると、ログイン情報などの入力が求められるので、すべて埋めてください。

ログイン情報
・ストア名…ホームページのストア名になります。半角英数字のみ利用可能です。
・ストアURL…ストア名と連動しています。(記入不可)
・ログイン…立ち上げたECサイトで利用するメールアドレスを記入
・パスワード…このサイトの任意のパスワードを記入
・パスワードを確認…パスワード再入力
開発者プレビュー
チェックを入れると、Shopifyが開発中のまだ公開されていないサービスを、早期利用できます。今回はチェックなしでOKです。
ストアのアドレス
任意の住所を入力してください。
※入力した住所がストアに表示されます。
ストアの目的
・クライアントのために新しいストアを構築する。
・アプリまたはテーマをテストする 。
・ただ遊んでいるだけです。
の3個項目があります。構築の際、画面に現れるアドバイスが変化するだけなのでどれを選んでもOKです。今回は「クライアントのために新しいストアを構築する」を選択します。

手順④: 『ストア追加をする』で保存ボタンを押す。

手順③の初期設定の入力が入力が完了したら、右下の保存、または次へを選択します。
お疲れ様です!これでECサイトの登録が完了しました。

手順⑤: ドメインを選択して、ブラウザでいざ表示!

ストアダッシュボードで、右下のオンライストアをクリックし「ドメイン」を選択すると、今追加したストアのURLが出てきますので、このURLをコピーし、お使いのブラウザのアドレスバーにコピー&ペーストしてください。
まだカスタマイズしていないのでテンプレートの状態ではありますが、先ほど追加したECサイトの確認ができます。
※ パスワードを求められる場合は、サイトにパスワードがかかっています。
「オンラインストア→各種設定」に設定されている、パスワードを入力してください。

まとめ

いかがでしたでしょうか?
ご自分の設定したドメインで、ECサイトの基盤を作れましたでしょうか?
まだカスタマイズはできていませんので、サンプルのECサイトにはなっていますが、実際にShopifyでサイトを立ち上げるにはどうしたらいいの?という方のお役に少しでも立てたなら幸いです!

さらに高度な設定や、カスタマイズを行いたい場合は、メンバーズルーツのShopify開発プランもございますので、ぜひお気軽にお問合せください!

次回の浅野の更新では、今回追加したECサイトのカスタマイズ方法をご紹介します。
さらに、商品登録の方法や、固定ページの追加の方法なども次回以降、解説していくつもりですので、今回使用したページはぜひそのまま残しておいてください!
それではまたお会いしましょう!

SHARE
浅野菫

Profile

浅野菫

2017年に新卒でメンバーズに入社。バナー制作・フロントエンドの分野で運用業務を経験。その後、サイトリニューアル・新コンテンツ立ち上げ・ロゴ制作をなど、様々なデザイン案件を担当。イラストの制作を業務内外で行い、サイトやお客様の要望に合ったイラストの制作や、パスを使ったアイコンの制作などが得意。

NEW POSTこのライターの最新記事

CONTACTお問い合わせ

お問い合わせ