BLOG【0718ゼロイチラボ shopify制作講座】に行ってみたよ!【前編】

だりあ
  1. HOME
  2. ブログ
  3. フロントエンド
  4. 【0718ゼロイチラボ shopify制作講座】に行ってみたよ!【前編】

講座詳細:https://t.co/7J6r0vBILW

2020年7月18日、shopify制作講座に参加してきました。
この記事では、どんな講座の内容だったの?というのをレポートをしたいと思います。

※本記事の内容は、講師のたかぼーさんに公開OKの許可をいただいております。

▼講師
たかぼーさん(https://twitter.com/taka_forward)
ちづみさん(https://twitter.com/098ra0209)

講座の様子

目次

  1. 講座の流れ
  2. 自己紹介
  3. 【1.サイトを作ってみよう!】アクセサリーショップサイトをつくる
    1. 無料テーマBrooklynを使うよ
    2. まずは商品を登録
    3. 会社案内ページ作成
    4. お問い合わせページ作成
    5. ブログ記事ページ作成
    6. 特定商取引法に関するページ作成(ECサイトに絶対必要)
    7. メニュー(header / footer)を作成する
    8. TOPページを作る
    9. Instagramを連携する(アプリを使う)
    10. サイト全体の設定をしていく
    11. フォームのチェック / カートのチェックをする
    12. カート、決済のチェック
  4. 【2.サイトを作ってみよう!2】実際の案件を体感してみよう!
  5. ここまでの内容での質疑応答

講座の流れ

  • 自己紹介
  • サイトを作ってみよう!(その1)
  • 商品を作ってみよう!
  • サイトを作ってみよう!(その2)
  • ポートフォリオを作ってみよう!

自己紹介

参加者14名(オンライン参加1名)
SEさん、プログラマーさん、WEB制作やってる方、WEBデザイナーさん、元DTPデザイナーさん、元公務員さん、異業種の会社員さん、ママさん、機械設計のお仕事、etc…
20代前半〜40代後半までいらっしゃいました。

shopifyを通じて世界中とつながれるよね〜

【1.サイトを作ってみよう!】アクセサリーショップサイトをつくる

TOP MVスライダー
└ 商品一覧
└ 会社案内
└ BLOG
└ お問い合わせ
※インスタ連携、レビュー機能 etc WPのプラグイン的な存在も実装

無料テーマBrooklynを使うよ

Brooklynというテーマを使いました。
無料テーマ内で1番人気、海外のshopify解説系Youtuberの評判が良く、アパレルに強いらしい。

まずは商品を登録

まず商品を登録していきます。
WordPressの記事投稿ページみたいに、エディタもあるし、写真も登録できます。

この画面で価格や在庫管理、色やサイズのバリエーション、商品の重量なども設定できます。

それぞれ設定したら、右上の保存を押せば商品登録完了!

会社案内ページ作成

次に会社案内のページを作成。

  • shopify付属のエディタを使って表をつくる
  • GoogleMapの地図埋め込みもできる

入力ページのエディタがありますので、その中の表を使って入力していきます。

htmlタグはtableになってました(WordPressもそうですよね)

GoogleMapも埋め込みできるよ

エディタ部分の右上<>をクリックすると、htmlタグモード(?)に切り替えることができます。

ここでGoogleMapのiframeを貼れば埋め込み完了!超簡単です。

お問い合わせページ作成

お問い合わせページを作るのも簡単でした。

見出しと本文を入力したら終わり笑

この画面が出来上がります。

ブログ記事ページ作成

こちらも簡単ですね。

WordPressの投稿ページ(旧クラシックエディタ)とほとんど同じです。サムネイル(WordPressでいうところのアイキャッチ)も登録可能。

特定商取引法に関するページ作成(ECサイトに絶対必要)

特定商取引法に関する記述はECサイトに必ず必要な項目で、法的にも決められています。

shopify管理画面左下の『設定』→『法務関連』をクリック。

ここで『返金ポリシー』『プライバシーポリシー』『利用規約』『配送ポリシー』『特定商取引法に基づく表記』の設定ができます。

これらの項目はお客様にご用意していただく事が多かと思います。

『特定商取引法に基づく表記』はテンプレートが用意されていて、『テンプレートに置き換える』をクリックすれば雛形が反映されます。

メニュー(header / footer)を作成する

TOPページを作る

最後にTOPページを作っていきます。

『テーマ』→『現在のテーマ カスタマイズ』をクリック。

ここからTOPページに表示させたいブロックごとに設定をしていきます。

Instagramを連携する(アプリを使う)

『アプリ管理』→『アプリストアに行く』→『instafeed』→『アプリをインストール』すると、shopifyにインスタグラムを連携するためのアプリ(WordPressで言うところのプラグイン)をインストールできました。

shopify管理画面のTOPに戻り、『現在のテーマ』→『カスタマイズ』→『セクションの追加』をクリックすると、↑のキャプチャの様にサイドバー一番上に『instafeed App』が現れていればOK。

クリックしてTOPページの任意の場所に追加したら
インタグラムの連携完了!

サイト全体の設定をしていく

テーマのカスタマイズから、全体の設定をしていきます。

↑『テーマ設定』の『ソーシャルメディア』の項目に『SNSでシェアする画像』という項目があります。

これはOG imageといったところでしょうか。サイトがsnsシェアされた時に映る画像。絶対設定した方がいいやつです。

その他にもフォントの設定やファビコンなども設定できます。

フォームのチェック / カートのチェックをする

お問い合わせフォームのチェック

サイトのプレビューから実際にお問い合わせを送信してみる

自分にメールが届いていればOK

カート、決済のチェック

商品を注文して、決済がきちんと動作するかのチェックを行います。

『設定』→『決済』をクリック

決済サービスの画面下の方に、『(for testing) Bogus Gateway』という項目がありますので、『他のプロバイダーを選択する』をクリック。

一番上の2Checkoutを選択して、次の画面下部で『2Checkoutを有効化』する。

ここまでしたら、サイトの商品ページから実際に商品を購入してみます。

メールアドレスを入力する欄があるのですが、ここはshopの開発で設定したものとは別のアドレスにすると注文者と運営者を明確に分けてチェックできます。

ダミーのカード情報が用意されているので、それを入力して注文を確定させます。

番号:1
名義人:Bogus Gateway
有効期限:未来の日にち(08/2022など)
セキュリティコード:123

これで確定したら、購入時に入力したアドレスに注文確定メールが来ているか確認します。

次に、運営者側の確認を行います。

管理画面の注文管理をみると、①というタグがついてます。
「1件注文入ったで〜」っていう通知バッジですね。

『注文』の欄をクリックすると詳細に飛べます。

注文詳細画面

『発送済としてマークする』をクリックすると配送設定に移ります。
配送業者など設定して、『商品を発送する』をクリックしたら完了。

商品管理の通知バッジが消えていると思います。

…これにて完了!!お疲れさまでした!

【2.サイトを作ってみよう!2】実際の案件を体感してみよう!

長くなってしまったので、サイト作ろう【その2】は次の記事にて紹介したいと思います\(^o^)/

ここまでの内容での質疑応答

Q. 既存テンプレテーマではなく、完全オリジナルはできる?
A. できるけど、コアファイルを触らなければならずハイリスクなのでやらない方が○。独自の言語で書かれているのでアブナイ。。。


Q. BASEや他のECもあるけど、なぜshopify?
A. BASEを例に取ると、手数料が違うので商品が売れれば売れるほどshopifyの方が利益が残る。
BASEよりもカスタマイズしやすい。
商品が売れた時の支払い受け取りがBASEだと2週間位かかるがshopifyは最大10日なので少し早くお金が手元に入る。
ショップを初めてつくるなら無料のBASEで良いと思うが、今後の拡大を見越すならshopifyが吉。
SNSなどでバズっていきなり大量に商品が売れてもサーバーが落ちにくい。
etc…

Q. 商品の写真って、どうやって撮ったら良い?
A. できればプロの方に撮ってもらうべし。自分で撮る場合はバックドロップとか使って撮るとよい。