shopifyのカスタマイズ方法|カスタマイズの目的に合わせたおすすめアプリもご紹介!【2024年最新版】
近年日本でも利用企業や事業者が増えているshopifyですが、実際にどんな企業でどのようなサービスがあるのかなど、詳しく知らないという人も多いのではないでしょうか。ECサイト運営の為のプラットフォームを展開しているshopifyは、簡単に低コストでECサイトを導入・運営できるため、個人から大企業まで多くの事業者に支持されているサービスです。この記事では、shopifyの事業やサービス内容から、アプリの活用を含めたECサイトのカスタマイズの方法までをまとめてご紹介します。
【関連ページ】
Shopifyにかかる費用・相場感や、あなたの目的別にShopifyに強いWeb制作会社をお探しいただけます。
Shopifyの費用・相場
shopifyに強いホームページ制作会社 / Web制作会社一覧
shopify(ショッピファイ)とは
shopify(ショッピファイ)はECサイトの開設から運営までをサポートするサブスクリプション型のサービスです。これまではECサイトを開設、運営するためには自社でサーバを用意しパッケージを導入しなければなりませんでした。しかし、サブスクリプションでこれらのサービスを展開しているshopifyであれば初期費用なしでサーバ管理などの負担もなく、月額費用と簡単な設定のみでECサイトを開設できることから高い評価を得ています。さらにshopifyはECサイトの管理だけではなく、会計処理や配送、マーケティングなどの商品販売に関わるビジネスを運営していくにあたって必要な機能がすべて揃っています。
出典: Shopify https://www.shopify.com/
shopifyの特徴
shopifyはECサイト構築、運営の為のプラットフォームですが、その特徴は多岐に渡ります。一番の特徴はその拡張性の高さです。shopifyのコアのサービスはECサイトの構築ですが、それに加えて6,000種類を越えるアプリがshopifyのアプリストアを通じて提供されています。ECサイトの機能やデザインのカスタマイズはもちろん、マーケティングなどを始めとしたバックオフィス業務に必要なアプリも多く用意されており、他社の基本機能以外が更新されないなどと言ったストレスなく、思い通りのECサイトを構築可能です。さらに、多くのSNSとも連携でき、越境ECにも対応しているため、日本国内はもちろん、国外を含めた顧客にリーチすることが叶います。
shopifyのカスタマイズ方法
ここでは、実際にshopifyを利用して自社のサイトを簡単にカスタマイズしていく手順をご紹介します。以下の順番でshoifyのカスタマイズ方法をご紹介します。
・カスタマイズを始める前の準備をする
・自社ECサイトに合うテーマを選び設定する
・商品ページを設定する。
・コードを打ち込み編集することも可能
shopifyでは、ほとんどの操作や設定でhtmlなどを利用したプログラミング技術は必要無く、レイアウトやカラー、文字フォントなどのカスタマイズが可能です。もちろん、プログラミングの知識があればさらにECサイト構築の自由度は向上しますが、以下の手順で設定を進めていけば、特別な知識がなくとも高いクオリティのECサイトを作成できます。
準備編
実際にテーマの編集や、カスタマイズを始める前に確認しておきたいことや注意事項は以下の通りです。
・カスタマイズをする前にバックアップを取る
・自社が利用可能なテーマやプラン毎のサポートを確認する
・カスタマイズに利用する画像の規定を把握しておく
専門知識がなくともECサイトを構築、運営ができるshopifyですが、カスタマイズや設定を開始してから不備や不足に気づいてしまうと、修正に大きな時間や手間を要してしまいます。しかし、これら3つのポイントをしっかり押さえておくことで、準備しておくべきものや気を付けるポイントも明確になり、より効率的に作業を進めることが可能です。ここでは、これらのポイントを1つずつご紹介します。
バックアップを取る
テーマを選んだら、カスタマイズを開始する前に必ずバックアップを取っておきましょう。テーマの編集を始めてから設定にミスが見つかった場合、バックアップがあればすぐに元の状態に戻せます。テーマを複製するためには、管理画面の「オンラインストア」から「テーマ」を選択しましょう。バックアップを取りたいテーマを選択し「アクション」から「複製」をクリックするとCSVファイルでバックアップが完了です。複製されたテーマはテーマページに表示されますので、正しくバックアップが完了しているかはテーマページから確認しましょう。テーマストアで購入したテーマもバックアップしたテーマも同じくテーマページに保管されますが、保管できる上限は20個で、さらに一度削除してしまうと復元できないため注意してください。
利用可能なサポートを把握しておく
テーマによって受けられるサポートレベルが異なります。テーマは無料のものと有料のものがあり、shopifyが提供しているのか外部からの提供かどうかでサポートの内容も変わりますので、それらも合わせて確認しておきましょう。実際にカスタマイズを開始した際、テーマを大幅にカスタマイズすると、サポートが受けられる範囲から外れてしまう場合があります。外部の有料テーマを利用する場合はshopifyではなく開発者へ直接問い合わせましょう。shopifyが提供している無料のテーマを利用しており、ベーシックプラン以上の有料プランを利用している場合は無料で60分のサポートを受けることも可能です。
使用する画像に関する規定の把握
ECサイトの構築やカスタマイズ、その後の商品登録まで、多くの種類の画像を使用します。登録できる画像のフォーマットは以下の通りです。
・JPG/JPEG
・プログレッシブJPEG
・PNG
・GIF
・HEIC
・WebP
アップロードに対応している画像のサイズとファイルのサイズは以下の通りです。
・20メガピクセル
・20MB
画像のアップロードはファイルページもしくはテーマエディタから可能です。ファイルページに画像をアップロードすればテーマ編集中にも保存した画像を確認できます。テーマエディタで画像を保存するよりも自由度が高いため、慣れないうちはファイルページへの画像保存をおすすめします。
テーマ設定編
ここからは実際のECサイトの構築に進むためのshopifyのカスタマイズ方法についてご紹介します。本来ホームページやオンラインストアの構築には、htmlやCSSなどのコード編集やプログラミングのスキルが求められます。一方で、shopifyでは誰でも簡単にカスタマイズができるように多くのテーマや、レイアウトや文字体裁、色などの編集、アプリやコンテンツなどの機能拡張などが簡単な操作で構築できる環境が整えられています。今回は、このshopifyで用意されている基本のカスタマイズ方法を始めとした基本機能について、テーマを選択し、編集や機能を追加する行程まで順を追ってご紹介します。
テーマの選択
テーマは自社のECサイトの印象を決める部分です。なんとなく決めるのではなく、メインとなる商品やお店やブランドのコンセプトに沿うテーマを選択します。もちろんテーマは後からカスタマイズ可能ですが、テーマのメインの印象はあまり変わりません。オンラインストアの印象と商品やブランドのイメージが一致しない場合、お客様へ与える印象が意図したものと違ってしまったり、雑多な印象を与えてしまったりします。テーマが商品やブランドコンセプトに沿うものや、ターゲット層が好むデザインや構造であれば、お客様に与える商品のイメージもポジティブになりやすく、購買意欲が高まり売り上げ向上にもつながります。
テーマエディタの起動
ECサイトのメインのイメージに合わせてテーマを選択したら、次にブランドらしさを強調し、他ブランドとの差別化を図るために、テーマエディタからカスタマイズを行います。テーマエディタは、以下の順番で起動します。
1:管理画面から「オンラインストア」を選択
2:「テーマ」をクリック
3:テーマライブラリーから編集したいテーマを見つける
4:編集するテーマの「カスタマイズ」をクリック
5:「テーマエディタ」が起動したら「カスタマイズ」をクリック
テーマエディタでは、提供されているコンテンツや設定できるカスタマイズがサイドバーで表示されます。サイドバーは、作業画面のサイズによってシングルかダブルで自動的に変更が可能です。
テーマの追加・設定・編集
実際のコンテンツやテーマの設定は、上記でご紹介したテーマエディタの起動まではほぼ同じステップです。上記でご紹介したように、配色やフォント、レイアウトの変更はもちろん、セクションの追加もテーマエディタを利用すれば簡単に設定できます。ほかにも、会社ロゴの追加や、スライドショーの設定やSNSとの提携などのカスタマイズやコンテンツの追加も可能です。ECサイトの印象の大半はテーマで決まりますが、コンテンツの追加や、レイアウトを変更することで、見やすさや使用感を含めて差別化を図れます。さらに、テキストやボタンなど細かい設定を行うことで、ブランドらしさを表現するなど、雰囲気を簡単に変更可能です。
テーマの複製・バックアップ
序盤にご紹介したように、バックアップは適宜行いましょう。特に、テーマを使用せず、管理画面から直接テーマコードを編集する場合や、既存のテーマを大きくカスタマイズしたい場合は、ミスがあった場合やリニューアルをするときなどに簡単に初期の状態に戻れるように複数のバックアップを取っておくことをおすすめします。バックアップがあれば大きなミスがみつかっても、コードの書き換えなどの負担なく、ミスしたテーマを削除し、初期の状態のテーマを利用してすぐに作業を再開可能です。初期の状態はもちろん、ECサイトのベースとなるカスタマイズができた時にも、バックアップを取っておくことでその後の変更やイレギュラーなどにも大きな負担なく対応できます。
商品ページの設定編
ECサイトのデザインや設定が完了したら、次はショップの核となる商品ページの設定です。ここでは以下の順番で商品ページの設定方法についてご紹介します。
・商品名の設定
・商品画像の設定
・商品説明とキャッチコピーの設定
・購入ボタンの設定
・商品レビューの追加
ECサイトのテーマやカスタマイズはあくまで商品やブランドのコンセプトを伝え、購買意欲の向上や、商品を探しやすくするためのものです。それに対し、商品ページはお客様がその商品を購入するかどうかを判断する為の重要なページとなります。次の項目では、売り上げに確実につなげるために必要なポイントも合わせてご紹介しますのでぜひ参考にしてみてください。
商品名の設定
商品名の設定で意識しておきたいことは、目に留まりやすい商品名を付けることです。キャッチコピーを考えるように、その商品がどんなもので、使用用途が明確に分けましょう。さらにSEO対策として、ブランド名と商品名を合わせて掲載することで、潜在顧客にもリーチしやすくなります。気を付けたいのが、普段から購入している人やその分野の人にしか分からない名前や略称を使用することです。商品名は長くなってしまう場合によく見られますが、例としてタイトスカートをタイトSKのように記載すると、商品の画像を確認しない限りタイトスカートであることが伝わらず、さらにWeb検索の結果としても上位に表示されなくなってしまう場合があります。
商品画像の設定
商品を見つけてもらうために必要な商品名の設定でしたが、次に大切なものが商品画像の設定です。正面からの画像だけでなく、多方面から撮影しディテールが伝わるように必要に応じてアップの写真も用意しましょう。商品の形や詳細、質を伝える為に重要なポイントです。さらにアピールポイントがあればそれらが伝わる画像を用意します。商品の使用感を伝え、お客様が商品を購入後使用しているイメージをしやすくするために、使用画像も複数撮影しましょう。洋服であれば複数のコーディネートやモデル、日用雑貨であれば使用を想定されるシーンにマッチした写真を撮影します。1つの商品に対して複数の画像を用意し、必要があれば画像編集も必要です。その中から質の高い画像を複数枚選択し、商品画像として設定します。
商品説明・キャッチコピーの設定
商品説明の部分ではまず、商品の特徴を簡潔に記載します。最初はその商品の一番のセールスポイントを使用シーンなどとあわせて紹介しましょう。簡単な説明のあとは、その商品のサイズやスペックを記載します。これらは大切な商品情報ですので箇条書きにすることで、お客様から見て分かりやすい情報を記載可能です。必ず伝えるべき情報を記載してから、商品やショップの背景を合わせて紹介しましょう。このプラスアルファの情報は商品価値を高め、購入を迷っているお客様の購入へのきっかけになる場合もあるため、伝わりやすくイメージしやすい文章が必要です。しかし、商品説明は長くなればなるほど最後まで読まれにくくなるため、ポイントを押さえながらも読みやすい文章や記入方法を意識しましょう。
購入ボタンの設定
shopifyでは購入ボタンもカスタマイズが可能です。デザインはもちろん、ボタンの大きさや表示する位置、フォントなども変更でき、さらに購入ボタンを押した後に表示されるアクションまでカスタマイズできます。購入ボタンが分かりにくいなど、デザインによっては、購買意欲が下がってしまう原因にもなるため、ここでもカスタマイズは丁寧に行いましょう。デザインやボタン位置などに迷ったら、ブランドコンセプトや扱う商品、ターゲット層などが近いECサイトなどをチェックして、参考にしてみてください。サイトによって、購入ボタンの表示方法は様々ですので、カスタマイズができる範囲と、ブランドイメージを合わせながら調整します。
商品レビューの追加
商品レビューは購入者の直接の声として、使用シーンがイメージしやすく、商品や商品情報だけでなく、お店への安心感や信憑性を上げるためにも有効です。商品レビューがあるだけで、購買に迷っているお客様の判断材料になり、購買率のアップにつながります。商品レビューはshopifyのアプリストアで提供されている無料アプリがあるため、ぜひ利用してみてください。レビューをそのまま利用してもいいですが、フォームのカスタマイズをすることでさらにブランドらしさも演出できます。ネットショッピングでは商品レビューの内容や数がそのまま購買率に直結しますので、ほかのECサイトを運営している場合はレビューをshopifyに共有し、より多くのお客様の声を商品ページに反映させましょう。
コードを打ち込んで編集することも可能
shopifyのテンプレート言語のLiquidやHTML、CSSの知識があればテーマコードの編集も可能です。基本のカスタマイズだけでなく、カスタマイズしたい範囲が限定的な場合や、カスタマイズ以上の大幅な変更もしくはECサイトをまとめて構築したい場合はコードを打ち込んで編集することも有効です。さらに、アップグレード前の状態に戻したい場合も、Liquidの知識があれば、コードの日付の変更だけで元の状態に戻すことが可能です。ただし、テーマコードを直接打ち込んで編集すると、利用しているテーマのアップグレードの対象外となる場合があるため、基本のカスタマイズやアプリでは対応できない場合のみコードを打ち込んでの編集を活用しましょう。
「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。
【目的別】カスタマイズにおすすめのアプリ
目的別に使えるおすすめのアプリを順番にご紹介します。以下、表にポイントもまとめましたので合わせてチェックしてください。
配送
・配送日時指定.amp
・配送マネージャー
越境EC
・Translate My Store & Currency
・BEST Currency Comverter
販売促進
・ロイヤルティ・特典・紹介
・Privy-Pop Ups, Email, & SMS
マーケティング
・Yotpo:UGCマーケティング
・Sumo: Boost Conversion &Sales
CRM
・CRM PLUS on LINE
・Growave - Loyalty, Wishlist +3
合理化
・チャネルトーク
・Back In Stock
SNS
・One Clock Social LoginOne Clock Social Login
・AdSIST
目的 | アプリ | ポイント |
配送 | 配送日時指定.amp | 購入時に配送日時を指定できる。 |
配送マネージャー | 配送日時の指定や配送伝票などの自動処理が可能。 ヤマト、佐川、日本郵便のCSVに対応。 |
|
越境EC | Translate My Store & Currency |
言語の翻訳。料金によって翻訳可能文字数が変動。 |
BEST Currency Comverter |
他国の通貨に合わせた金額を表示。 無料プランは5つの通貨まで対応。 |
|
販売促進 | ロイヤルティ、特典、紹介 | 紹介やバースデー特典などのプログラム設定が可能。 |
Privy - Pop Ups, Email, & SMS |
クーポンやキャンペーンのポップアップの作成。 購入に至らなかったお客様への キャンペーンメール等の送信。 |
|
マーケティング | Yotpo:UGCマーケティング | レビューの収集・活用。 さらに、顧客レビューを利用したSNSでの広告機能。 |
Sumo: Boost Conversion &Sales |
メールリストの生成、 キャンペーンメールなどの自動作成と送信。 |
|
CRM | CRM PLUS on LINE | LINEの友達追加ボタンの追加とメッセージ配信機能。 |
Growave - Loyalty, Wishlist +3 |
ウィッシュリストとポイントプログラムによる 購買率の上昇。レビューの収集。 |
|
合理化 | チャネルトーク | チャットボットと有人チャットによる 顧客満足度とリピート率の向上。 |
Back In Stock | 再入荷の自動通知。 | |
SNS | One Clock Social Login |
SNSアカウントでshopifyのストアへログインが可能。 グーグルやツイッター、FaceBookアカウントを活用できる。 |
AdSIST | shopifyの商品データを活用した広告配信。 広告は1日500円からと低予算で利用可能。 |
【まとめ】ホームページ制作会社選びで迷ったらアイミツへ
近年、日本国内でも利用企業が増えているshopifyの基本的な活用方法をご紹介しました。shopifyは14日間の無料体験に加え、初心者から大企業まで様々な規模やニーズに対応したプランが提供されています。ECサイト管理の一番の負担となるサーバやネットワーク管理から解放されて、サイトの運営に専念できます。
ECサイトの運営やshopifyへの移行を検討するなら、まずは無料体験を通してそのカスタマイズ性の高さを体験し、サイトにピッタリのプランを検討してみるのはいかがでしょうか。また、アイミツではご要望を伺った上で、条件に合うホームページ制作会社を無料で複数社ご紹介可能です。会社選びでお困りの方は、お気軽にご相談ください。
【相談前にまずは会社一覧を見たいという方はこちら】
shopifyに強いホームページ制作会社 / Web制作会社一覧
【費用感を知りたいという方はこちら】
Shopifyの費用・相場
ホームページ制作会社探しで、こんなお悩みありませんか?
-
一括見積もりサイトだと
多数の会社から電話が・・・ -
相場がわからないから
見積もりを取っても不安・・・ -
どの企業が優れているのか
判断できない・・・
PRONIアイミツなら
発注先決定まで
最短翌日
- 専門コンシェルジュが
あなたの要件をヒアリング! - 10万件の利用実績から
業界・相場情報をご提供! - あなたの要件にマッチした
優良企業のみご紹介!
この記事に関連するホームページ制作会社一覧
サービスサイトに人気の条件を追加して企業を探す
ECサイトに関連する記事
Shopifyに関連する記事
-
Shopifyの費用と料金相場【2024年最新版】
Shopify
診断とヒアリングから
お探しします