EC

Shopify機能解説(1)販売チャネル:オンラインストア(前編)

KOBITマーケティング部
KOBITマーケティング部
2018/11/22 01:00

今、世界中で注目されているECプラットフォーム「Shopify(ショッピファイ)」について、その概要や機能を紹介していく本連載。

第1回目から第3回目までは、Shopifyの概要として、利用事例や特徴的な機能等をご紹介しつつ、Shopifyの魅力や利用するメリットをお伝えしてきました。
第4回目となる今回からは、ご紹介してきた機能を実際にどうやって利用するのか、画面のキャプチャを交えながら解説していきたいと思います。

最初に解説するのは、Shopifyの代表的な機能であるオンラインストア機能です。
お店のテーマ(デザイン)の設定方法やお店の概要ページの作成方法、メニューの追加方法等を一つずつ、前編・中編・後編の3回に分けて解説していきます。

「Shopify」連載一覧
第1回:今話題のECプラットフォーム「Shopify」とは? 概要と事例を紹介
第2回:Shopifyは近年のECトレンド、オムニチャネルとソーシャルコマースを支援する
第3回:越境EC、チャットボット―欲しい機能に対応できるShopify

※本連載の内容は2018年9月時点での機能及びデザインを基にしています。

販売チャネル:オンラインストア

Shopifyのオンラインストアは様々な構成要素をカスタマイズできるので、他社では真似できないようなユニークなデザインをつくりこめる可能性があります。
ここからは、オンラインストアについて設定できる内容を解説していきます。

テーマ

テーマの選択

「テーマ」はオンラインストアの見栄えに大きく影響するデザイン・テンプレートです。画面のレイアウトや色合い・フォントなど、全てのデザイン要素がテーマに従います。そのため、取り扱う商品やブランド・イメージに合わせて最適なテーマを選択するのが重要です。
高級品を取り扱うのであれば洗練されたデザインを持つテーマを採用し、一方で、日用品を扱う場合は親しみやすく使い勝手を重視したテーマを使うと良いでしょう。

図:テーマの画面

テーマは全てのデザイン要素に関わるため、一度テーマを決めたら、変更するのは慎重に行うべきと考えられています。見栄えや使い勝手が変わってしまうと、過去に訪れたユーザーが戸惑ってしまう可能性があるからです。ブランド・イメージや利便性をよく考えた上で、テーマの変更を行います。

Shopifyには無料のテーマがいくつか用意されているので、小規模のネットショップには最適です。さらに、「テーマストアに行く」から別途、テーマの検索が可能で、無料・有料のテーマを見つけられます。有料のテーマは、場合によって180ドル程度しますが、他のネットショップと差別化しつつ、品質の高いデザインを利用するには適しています。

テーマを編集・複製・ダウンロードする機能が提供されています。日本語でオンラインストアを運営する場合、翻訳を設定するため、「言語を編集する」から最適な文言を決めます。コードの編集については、本記事の最後に解説します。

図:テーマの選択

テーマのカスタマイズ

「カスタマイズ」ボタンをクリックすると、テーマの編集画面へと遷移します。各セクションの画像や文言を設定し、オンラインストアのデザインを変更します。特集コレクションやスライドショーといったセクションはテーマによって異なるので、自社に最適なテーマを選択した上で、要件に合わせて修正を行います。

「テーマ設定」では色、文字体裁(フォント)、SNS(各種ソーシャルメディアの自社アカウントへリンク)、ファビコン(ブラウザ上部に表示される小さなアイコン)、Checkout(決済画面)の設定を行います。

「ページを選択」からカスタマイズを行う画面を選択します。ホームページ、パスワードページ、商品ページ、コレクションページ、コレクションリスト、ブログ、カート、404ページ(ページが見つからないときに表示される画面)などが選択可能です。商品ページの設定を一度変更すれば、多数の商品を登録している場合でも、全ての商品にデザインが適用されます。

画面上部中央のアイコンをクリックすると、モバイル画面表示や全画面表示へと変更できます。実際のユーザーが使っている画面を見て、最適なデザインを決定するのに有効です。

図:テーマのカスタマイズ

コードの編集

Shopifyのテーマはプログラミング言語で作られており、「コードを編集する」から編集が可能です。Shopify内のコード・エディターを使ってブラウザ内で編集するか、ダウンロードしてから手元のパソコンで編集しアップロードするという方法もあります。コードを編集するには専門的な技術が必要です。自社でエンジニアを抱えていない場合は、外部の専門家に依頼しなければなりません。Shopifyを通して仕事の依頼を投稿できます。

コードの編集を行えば、事実上、どんな変更も実現できます。前述のカスタマイズ機能では、見栄えに関する設定が中心だったのに対し、ビジネスロジックを含めた、あらゆる機能を実装するのにコードの編集が使われます。HTML、CSS、JavaScript、Ruby、及びShopify独自のLiquidテンプレートが使われています。

コードの編集を行う前には必ず複製をとるようにしましょう。不具合を起きた際に復旧できるようバックアップをとります。コードの編集に関するShopifyのサポートは限定的なので、経験のあるエンジニアを見つける等、自己責任で作業を行うことを認識しておくべきです。

Shopifyのコードは大きく6つのパートで構成されます。

  • Layout:ページ単位でのレイアウト
  • Templates:画面を構成するテンプレート
  • Snippets:テンプレートから呼び出されるデザイン要素
  • Assets:画像やJavaScriptなどの静的ファイル
  • Config:設定ファイル
  • Locales:言語設定ファイル

コードの編集を行う際には、Shopifyの仕組みを理解した上で実施する必要があります。

図:コードの編集

まとめ

Shopifyのオンラインストアでは、テーマを自由に選択・カスタマイズすることができます。
テーマは無料のものだけでなく、テーマストアで有料のものを選択することもできる他、コードの編集を行えば必要な機能の追加等、様々な変更に対応できます。

わかるページ解析を

Google Analytics・Search Consoleから
わかりやすいPowerPoint・Excelレポートを生成

report
HOMEKOBITブログWEBマーケティングECShopify機能解説(1)販売チャネル:オンラインストア(前編)