現在、注目度が高まってきているShopify。はじめてECサイトを構築する方の中には、カスタマイズ方法などに不安がある方もいらっしゃるのではないでしょうか。

そこで、今回はShopifyでECサイトの構築を考えられている方、そして今カスタマイズをされている方に対して、Shopifyの概要から、カスタマイズの手順、そして押さえておきたいポイントをまとめてご紹介いたします。

Shopifyとは｜カナダ発のECプラットフォーム

2017年に日本参入

Shopifyはカナダ・オタワ発のECサイトのプラットフォームで、いわゆるASP型ショッピングカートシステムになります。カナダでサービスがリリースされたのは2004年ですが、日本へ本格参入したのは2017年7月。そこから改良を重ねていき、現在では管理画面や問い合わせサポートも日本語に対応しているサービスとなります。

大きなニュースとして、2020年4月には日本最大級のECモール「楽天市場」との連携サービスを発表しました。これまでは「楽天市場」に出店している各店舗は、楽天市場内での管理画面でしか操作ができませんでしたが、Shopifyの管理画面を経由して店舗管理ができるようになりました。複数のEC販売チャンネルを運営している方にとっては管理チャンネルの一本化することで便利になっただけでなく、Shopifyを利用している事業者の方たちも簡単に「楽天市場」を新たな販売チャネルに参入できる、という点で大変話題となりました。

このような日本市場に適応したサービスを次々とリリースするShopifyは、日本国内でのECカートのシェアも急成長中の現在注目のECカートになります。

シェアNo.1！世界最大のECプラットフォーム

Shopifyは、元々カナダ発のECプラットフォームということもあり、現在世界175ヵ国・100万以上の店舗が利用しています。

Shopifyは低コストで始められるにもかかわらず、ECサイトを始めるために必要な機能が最初から揃っているため、手軽に始められる点がEC事業者から高く評価されています。

実際にShopifyのプラットフォームには、ECサイト運営に必要なバックオフィス機能を備えているだけでなく、EC事業を行う上で必要なものすべてはShopifyで一元管理が可能なので、お客様目線でも事業者目線でも非常に使い勝手が良いツールです。

そして、他のECカートと比較しても豊富なデザインテンプレートと、自社にあったカスタマイズができるという機能の拡張性も人気の秘密です。海外での導入事例でいうと「レッドブル」や「X-girl」、日本企業でも「土屋鞄製造所」などの有名企業もShopifyを採用してECサイトを構築しています。

これに加えて、必要な多言語・多通貨対応も幅広く対応していることから、世界中で愛されているECプラットフォームです。

【初級者向け】Shopifyカスタマイズ方法

Shopifyテーマはコード編集なしでも一部カスタマイズ可能！

  Shopifyテーマは、専門知識が必要なコードの編集をしなくても、文字や色の変更、写真の差し込みなどのカスタマイズができるようになっています。

まずサイトの作るときには、好みのデザインテーマを「管理画面」の「オンラインストア」をクリックすると選ぶことができます。

このとき、デフォルトでは「Debut（デビュー）」というテーマが設定されていますが、Shopifyには公式でも100種類以上のテーマが用意されています。なので、自社のブランディングとサイト運営において必要な機能が揃っているテーマを選びましょう。

テーマを選択するときは、「テーマライブラリー」から「無料のテーマ」か「Shopifyテーマストア」のどちらかを選ぶことができます。「Shopifyテーマストア」では無料だけでなく有料のテーマも販売されていますが、一番高額なものでも約2万円程度になります。

有料でも無料でもテーマを選んだら、好みのテーマの「スタイル」を決めて「テーマライブラリーに追加する」をクリックすると「テーマライブラリー」にテーマが追加されます。

そして、この「テーマライブラリー」から「カスタマイズ」をクリックすると、下記のさまざまな項目がカスタマイズできます。

ロゴ画像

自社のロゴがある場合は、ブランディングのためにもロゴ画像を必ず入れましょう。

ロゴ画像は「管理画面」から「設定/チェックアウト」を選択すると、「スタイル」という箇所があります。そこから「チェックアウトのカスタマイズ」をクリックすると「テーマエディタ」を開くことができます。

「ロゴ」セクションで、「画像をアップロード」するか、すでにライブラリーにアップロードした画像があれば、その画像を選択します。このときにロゴの位置とサイズを変更して、保存をクリックすることで完成です。

テキストの色・フォント・サイズ

テキストの色やフォント、サイズなどはすべて「テーマエディタ」で変更することができます。「管理画面」から「オンラインストア」の「テーマ」をクリックすると、「カスタマイズ」を選択します。その中の「テーマエディタ」を起動します。

その中の「セクション」の「テーマ設定」でテキストの色やフォント、サイズだけでなくウェブサイトのレイアウトも変更できます。

これらの項目はECサイト全体の雰囲気が変わる大事なポイントです。自社のブランディングに合わせて適切なものをそれぞれ選択しましょう。

項目の表示・非表示

Shopifyの特徴として幅広いカスタマイズ性が挙げられますが、販売形態やショップの特色によっては不必要な項目もあるかと思います。そのようなもメニュー項目を追加、削除、そして編集が可能です。

追加したいときは「管理画面」の「メニュー」ページをクリックし、編集するメニューのタイトルをクリックします。「メニュー項目の追加」をクリックすると、タイトル名が変更できます。「リンク」 フィールドをクリックして、リンクタイプを選択するか、外部ウェブサイトのサイトアドレスを入力すると追加が可能です。

メニュー名などの編集を行いたいときは、同じく「管理画面」の「メニュー」ページをクリックし、編集するメニューのタイトルをクリックした後に、「名前」フィールドにテキストを変更すると変更可能です。また不必要なものを削除したいときは、同じ画面から「削除」をクリックして確定させると可能です。

また便利な機能として、サイト内の在庫切れ商品を自動的に非表示にする機能があります。

それは「自動コレクション」という選択条件を一致して商品を自動で読み込みをできる機能を使います。そして有効にするには「管理画面」で「在庫追跡を有効にする」に選択する必要がありますので、忘れずに有効にしておきましょう。

その後、各コレクションの「自動コレクション条件」を変更し、次の条件を追加します。

・「商品の条件合致」 ですべての条件を選択
・「在庫個数」 で、より大きいを選択して0を入力する

そうすることで、在庫切れ商品が発生した時には、自動的に非表示になります。こうやって細かく設定することで、お客様が検索時により商品情報を見やすいECサイト環境に整えていきましょう。

豊富なテーマから自社に合ったものを選定することが大切

ECサイトにおいて、見た目のデザインはECサイトのイメージを印象づける非常に大事な要素になります。また、デザインやレイアウトはサイトの見やすさや売上にも大きく左右するとされています。そのため自社のブランディングに沿ったサイトデザインを選択しましょう。

ですが、サイトのデザインのみでテーマを選んでしまうと、いざサイトを作るときに運営に必要な機能がなかった、という事態が発生してしまう可能性があります。そのため、自社ECサイトの運営に必要なものが揃っているか事前の洗い出しと確認は忘れないようにしましょう。

関連記事：Shopifyテーマおすすめ10選｜テーマの概要や選定時のポイントも合わせてご紹介

【上級者向け】Shopifyカスタマイズ方法

Shopifyの中には、コード編集などを使ってカスタマイズをする方法もあり「テーマエディタ」という箇所を編集して、より細かい変更をすることができます。ですが、こちらを編集するときは、下記のような点を注意する必要になります。

コード編集にはCSS、HTML等の知識が必要

前提として、この「テーマエディタ」を編集するときは、プログラミング用語の専門知識が必要になります。具体的に述べると、Webデザインを変更したり文字の色を変更することができるCSS、文字やテキストボックス、サイト内リンクなどWebページを作る上での必要なボタンなどの部品を配置するHTMLに加えて、Liquidと呼ばれるShopifyのテンプレート言語の知識が必要です。

これらの知識がない状態でサイトを編集してしまうと、デザインが崩れるだけでなく、最悪の場合Webサイト自体の構造が崩れて正しい形で使えなくなってしまう可能性があります。

そのため、「テーマエディタ」を編集したい場合は、WebデザインやWebプログラミングと呼ばれる専門職の方々に依頼をしましょう。

Shopifyの公式サイトでも「Shopify Expert」を通じて、編集を依頼することが可能ですので、公式サイトを通じて依頼するのもよいでしょう。

編集前に必ずバックアップを取っておく

先ほどもご説明したとおり、この「テーマコード」を編集するということは、サイトの全体を変更するということになります。そのため「テーマコード」編集する場合、もしサイト全体が崩れたとしても元のサイトに戻せるように、必ずパックアップを取っておきましょう。

このバックアップをしていないと、万が一バグが発生してしまったときに、元に戻すのが大変苦労することになります。

バックアップは「テーマライブラリー」の「アクション」タブから「複製」をクリックすることで可能です。万が一、編集途中に変更した場合は、変更をせずに破棄すると途中から再スタートも可能ですので、そこも頭に入れておきましょう。

コード編集手順

コードを編集するには、「管理画面」の「オンラインストア」から「テーマ」の順番にクリックします。「アクション」タブをクリックすると、「コード編集」という項目があります。

その後、「コードエディタ」というファイルにて、コードを編集することができます。

「コードエディタ」では、左側にテーマファイルの詳細のディレクトリ、右サイドにファイルを編集するためのファイル編集スペースが表示されます。

また右下のボタンでは、画面の色を黒くできる「ダーク」モードに変換することができます。

Shopify商品ページのおすすめカスタマイズポイント

ECサイトをカスタマイズするときには、ただ商品の説明や写真を載せるだけでなく、それぞれ工夫した方がよいポイントがいくつかあります。ECサイトの売り上げが大きく変わると言われるそのポイントを、下記で項目別に紹介いたします。

タイトル・説明部分

こちらは販売する商品の名前を設定します。ここで大事なのは、お客様の目を引くようなタイトルにすることが重要です。またGoogleなどの検索エンジンで検索されたときに表示されやすくするSEO対策のためにブランド名や一緒に記載しておきましょう。

商品画像

ECサイトにおいて、実際の商品を手に取れないため、商品写真はとても重要になります。写真は複数枚掲載するのはもちろんのこと、それぞれの角度やアップ画像なども用意しましょう。加えて、実際に商品などを使用している写真などがあればベストです。洋服であれば着用した写真、食器であれば実際に何か食べ物を置いてみた写真などあれば、より商品を選ぶお客様は想像しやすくなるでしょう。

Shopifyの公式サイトでは、画像ファイルはJPEGまたはJPG、プログレッシブJPEG、PNG、GIFのフォーマットのみをサポートしています。

また、選んだECサイトのテーマによって表示される写真の大きさも変わってきます。そのため掲載する写真の解像度にも気をつけましょう。実際にアップロードした後に、パソコン・スマートフォンから見て、写真の解像度に問題がないかどうかのチェックも忘れないようにしましょう。

商品説明

画像で消費者の方の心を捉えた後は、文章の方でもしっかりと特徴を伝えましょう。

その内容も商品の特徴とお客様の特徴にあわせた「その商品を使ったらどんなメリットがあるのか」という消費者の方が喜ぶポイントをしっかりと押さえて記載しましょう。

それに加えて、商品への思いや背景を説明するのもよいですが、長文になるとお客様がサイトから離脱する可能性があります。そのため、あくまでも簡潔な文章を心がけましょう。

最後に忘れてはならないのが、商品のスペックです。洋服であれば、着丈はもちろんのこと、どんな素材でできているかなども、商品を選ぶ上で大事なポイントです。商品詳細が分からないと購入まで至らないケースも多々ありますので、忘れないようにしましょう。

キャッチコピー

商品名と商品画像と同様に、お客様が商品を購入するときにイメージをしやすいキャッチコピーの設定も大事なポイントになります。また知名度がないと商品名だけでは、お客様は商品自体が具体的にどんなものか想像するのが難しいのが現実です。そのため、「お客様の興味を惹きつけ、目にとまらせる」工夫が大事になります。

有名なキャッチコピーとしては、イナバ物置の「やっぱりイナバ、100人乗っても、大丈夫」というものがあります。このキャッチコピーで、耐久性を求めるお客さんに対して、100人乗っても壊れないという具体的なイメージを想像させることで、ひときわ印象に残るキャッチコピーになります。

このようなキャッチコピーは、実際に購入していただきたいお客様がどんな人でどのような商品を求めているかを明確にして、自社商品の強みを短い言葉に落とし込みましょう。

商品レビュー

EC事業の世界では商品のレビューの項目を用意することで、商品の購入率を高められると言われています。お客様は実際に利用した方の感想を参考にし、他の商品と比較検討することで、購入するというプロセスをたどります。

Shopifyでは、商品レビューを入れるためにはアプリをダウンロードしなければなりません。「Product Reviews」というShopigy公式アプリは、どれだけレビューが増えても無料で利用でき、ストアのデザインに合わせてカスタマイズが可能です。他にも有料のアプリもありますが、商品レビューアプリの追加は忘れずに行いましょう。

メタタイトル・メタディスクリプション

Shopifyの「商品編集画面」では、インターネットで検索したときに上位に表示させるためのSEO対策で、「メタタイトル」「メタディスクリプション」のを設定することができます。

「メタタイトル」はインターネットの検索エンジンで検索結果画面で表示されるタイトルのことを指し、「メタディスクリプション」はその下の説明文を指します。

例えば「シンプル　食器」と検索したときに「シンプルな佇まいのうつわ｜和食器通販…」と出てくるのがメタタイトルで、「うちるで取り扱う、シンプルな佇まいのうつわをご紹介するページです」と続く文章がメタディスクリプションになります。

これらを工夫することで、クリック質が大きく変わると言われています。なおメタディスクリプションは、パソコンから見ると多く表示されますが、多くの人がスマートフォンのみで見る人も多いことから、見る人も多いことから90文字前後が適切だとされています。

なお、できるだけ重要なキーワードは前半に持ってくると良いとされています。

このような観点から、「どんなキーワードで検索された結果、自社の商品が表示されてほしいか」を意識して、このメタタイトルとメタディスクリプションを考えましょう。

購入ボタン

購入まであと少し、というところの購入ボタンとデザイン、そして配置も実際に購買につながるかどうか重要なポイントです。こちらもShopifyでは、配置位置はもちろんのこと、サイズやフォント、色など細かくカスタマイズすることができます。

実際にお客様が自社ECサイトをどのように閲覧するかのサイト内導線をイメージしながら、最適なタイミングで購入ボタンを表示できるように配置いたしましょう

トラストマーク

さまざまなECサイトが乱立する中、残念ながらECサイトでのトラブルは増加傾向にあります。そこで「トラストマーク」というTradeSafeという団体が審査をし、信頼性と安心性を認証したお店に与えられる信頼のマークがあります。お客様に安心して利用してもらうために、そのような認定を受けて、サイトに表示するのもお客様に対して安心してお買い物いただける環境を表示しておくのもよいでしょう。

Shopifyをカスタマイズして自社ならではのストアを作ろう！

Shopifyが人気の理由の一つに、ECサイトに必要な標準機能が揃っていながらも、自社のニーズに合わせて自由なカスタマイズができることとされています。カスタマイズによって、サイトの滞在時間や高倍率は大きく変わると言われています。加えて、ECサイトはトレンドの移り変わりが非常に早い業界になります。

そのために、物流業務などの外注できる業務はできるだけアウトソーシングを行い、ECサイトの機能改善により時間を割けるためにリソースを確保しておき、よりお客様に利用してもらいやすいように、日々カスタマイズを重ねて、よりよいECサイトを構築していきましょう。