電話受付中 平日10:00~19:00 03-5919-0055

日本最大級のホームページ制作会社検索サイト

お急ぎの方はお電話で !( 平日10:00〜19:00 )

03-5919-0055

無料でWeb発注相談 ! 24時間受付中 !

メールで相談する

Shopifyで店舗をデザインする方法とは?専門的知識がなくてもOK!

鈴原 千景

Written by

鈴原 千景

Shopifyで店舗をデザインする方法とは?専門的知識がなくてもOK!「Shopifyのショップデザインてどうやるの?」
「デザインには専門的な知識が必要なの?」

Shopifyを立ち上げられたばかりのオーナーにはこのような疑問を持たれている方もいるのではないでしょうか。

売り上げを上げるためには顧客にとって使いやすく、なおかつおしゃれな店舗にデザインすることが必要不可欠です。しかし、デザインといってもどこから手をつけていいのかわからない方も多いのではないでしょうか。

本記事では、

  • Shopifyで作成した店舗をより魅力的にするためのカスタマイズ方法
  • デザインを補助するのに役立つアプリ3選

を解説していきます。難しい専門知識なしでもShopifyではサイトのカスタマイズが可能です。

ネットショップ初心者の方はぜひ本記事を参考にしてみましょう。

Shopifyの店舗をデザインする3つの方法

Shopifyで作成した店舗を自分らしくデザインする方法は3つあります。自分のレベル感にあった方法を選ぶことが大切です。

Shopifyで作成した店舗をデザインする方法

  • 管理画面からテーマエディターで編集する
  • 管理画面からコード編集をする
  • ローカル環境で自らデザインする

HTMLやCSSといった知識がない方は、まず専門知識が必要ないテーマエディタでデザイン・カスタマイズするとよいでしょう。

以上3つの方法について簡単に解説していきます。

方法①:管理画面からテーマエディターで編集する

HTMLやCSSの知識がなくても、簡単にコンテンツの配置や配色、テキストを変更できます。コードの編集が必要ないため、初心者はまずテーマエディタ―を使ってデザイン・カスタマイズしていきましょう。

Shopifyの管理画面から「現在のテーマ」を選択し、カスタマイズのページに移動することで設定が可能です。詳しい設定方法については後ほど解説していきます。

方法②:管理画面からコード編集をする

管理画面から直接コード編集する方法です。HTMLやCSSの知識がある方はぜひチャレンジすることを推奨します。

Shopifyの管理画面から「現在のテーマ」を選択し、「アクション」から「コードを編集する」に移動しましょう。こちらも詳しい手順については後ほど解説していきます。

方法③:ローカル環境で自らデザインする

Shopifyの管理画面からではなく、ローカル環境でカスタマイズする方法です。自分のパソコンにテーマをダウンロードし、コードエディター上でデザインしていきます。

管理画面からコード編集をするときと同じように「アクション」のページに移動しましょう。そこからテーマファイルをダウンロードし、さらにローカル環境を構築するための「Shopify Theme Kit」をインストールします。

ローカル環境でのカスタマイズには、より専門的な知識が必要です。そのため、本記事ではShopifyの管理画面でデザイン・カスタマイズする方法に絞って解説していきます。

Shopifyの店舗をテーマエディターで編集する方法

まず、テーマエディタで編集する方法を解説していきます。基本的な設定の流れは以下の通りです。

Shopifyの店舗をテーマエディタ―で編集する手順

  1. テーマを選ぶ
  2. テーマエディターのページに移動する
  3. 実際にテーマの基本設定を行っていく

テーマエディタ―は感覚的に操作できます。あまり難しく考えずに挑戦してみましょう。

STEP1:テーマを選ぶ

ショップのおおまかなデザインでもあるテーマを選んでいきましょう。ホームの「テーマをカスタマイズする」からテーマストアにアクセスします。

あとは好みのテーマを選ぶだけです。テーマストアで利用できるテーマの数は無料と有料を合わせて1,000種類以上もあります。自身の店舗の雰囲気とマッチするテーマを探しましょう。

STEP2:テーマエディタを起動させる

テーマを選び終わったら、次に編集画面であるテーマエディタ―起動させます。テーマを選ぶだけでは店舗としては不十分です。

カラーやフォントをアレンジして、店舗を魅力的にしていきましょう。テーマエディタ―はホームから「現在のテーマ」を選択することで移動できます。

STEP3:テーマの基本設定を行う

テーマエディタ―を起動できたらテーマの基本設定を行います。テーマエディタ―は大きく「セクション」と「テーマ設定」に分けられます。

「セクション」と「テーマ設定」の役割

  • セクション:ページ全体のレイアウトを設定する機能。主に各ページにコンテンツを追加したり編集したりできる。
  • テーマ設定:ページ内をデザインする機能。配色やフォントを設定したりソーシャルメディアのリンクを貼り付けたりできる

テーマエディタ―だけでも機能がたくさんあるため、どこから手をつければいいか悩むかもしれません。しかし、Shopifyのテーマには元々最低限のコンテンツはそろっています。そのため、まずは自分のわかる範囲からデザイン・カスタマイズしていきましょう。

慣れてきたら、今まで触らなかった機能にも挑戦することをおすすめします。

Shopifyのテーマをコード編集でデザインする場合

テーマエディターでもカスタマイズはできますが、「もっと自分らしくデザインしたい」と考える方もいるでしょう。ここからはShopifyのテーマをコード編集でデザインする手順について解説していきます。

Shopifyをコード編集でデザインする手順

  1. テーマを複製し、バックアップをとる
  2. 実際にテーマコードを編集していく

STEP1:テーマを複製し、バックアップをとる

バックアップを取得していつでも初期コードに戻れる環境を作ることが大切です。

ホームで「テーマをカスタマイズする」から編集したいテーマの「アクション」に移動し、「複製する」をクリックします。

以上の手順を踏めば作業途中に変更を取りやめて、最初からやり直すことが可能です。

STEP2:実際にテーマコードを編集する

テーマコードを編集する手順もバックアップするときとほぼ同じです。

「テーマをカスタマイズする」から複製したテーマの「アクション」に移動し、「コードを編集する」をクリックするだけでコードエディターが立ち上がります。

左側はコードディレクトリで右側は編集スペースです。ページ右下には明るさを調整できるボタンがあります。好みに合わせて調整しましょう。

コードを編集する手順は以下の通りです。

コードを編集する際の手順

  1. CSSを書く
  2. HTMLを書く
  3. CSSをテーマに読み込ませる
  4. プレビューでデモサイトを表示させる
  5. 元のテーマに反映させる

5つの手順をそれぞれ簡単に解説していきます。

①:CSSを書く

CSSを編集する際は、Assetsというフォルダに新しいCSSファイルを追加する必要があります。

「Assets」をクリックして「新しいassetを追加する」を選択した後、「空のファイルを作成する」で「.scss.liquid」を作りましょう。

ファイル名に関しては他のファイルと被らない名前を付けることがポイントです。ファイルができればCSSを記述できるようになります。

②:HTMLを書く

HTMLを書くには、コード編集からではなく登録した商品ページから行います。

商品ページを開いたら、エディターをHTMLソースを表示する画面に切り替えましょう。HTMLの画面で編集することで、先程設定したCSSが反映されるようになります。

【補足】ビジュアルエディタ―に直接入力する際の注意点

商品ページやブログ記事のエディターに直接入力すると、知らないうちに改行タグやspanタグが挿入されることがあります。タグが気になる方は一通り編集した後、HTMLエディターに切り替えて不要なタグを一つひとつ削除しましょう。削除することでストアの読み込み速度が改善される可能性があります。

③:CSSをテーマに読み込ませる

現時点では見出しやタグがデフォルトのため、テーマに「original.scss.liquid」ファイルを読み込ませます。

記述したCSSを読み込ませるには「Layout」というファイルの「theme.liquid」を開き、以下の文字列を探します。

{{ ‘theme.scss.css’ | asset_url | stylesheet_tag}}

見つけたら上記の下に先程書いたCSSファイルを読みこませるための文字列を追加しましょう。

{{ ‘〜〜.scss.css’ | asset_url | stylesheet_tag}}

④:プレビューでデモサイトを表示させる

記述した内容を保存したら、デザインしたテーマの「アクション」から「プレビュー」をクリックしましょう。するとデモサイトが表示され、記述したHTML&CSSがテーマに反映されていることが確認できます。

⑤:本番環境に反映する

プレビューでデザインに問題ないことが確認でき次第、テーマの「アクション」から「公開する」をクリックしましょう。公開することで本番環境にカスタマイズが反映され、ストアのデザインが更新されます。

また、公開と同時に最初に複製したコピーのテーマが「現在のテーマ」に切り替わるため注意が必要です。もし、以前の状態に戻したい場合は、複製前のテーマを公開することで本番環境に反映させましょう。

補足:Shopifyのコード編集にはマークアップ言語の知識が必要

Shopifyをコード編集でデザインしていくには、マークアップ言語の知識が必要です。ここでいう言語とは以下の3つを指します。

Shopifyのデザインで使うマークアップ言語

  • HTML:Webページの枠組みを構成する言語
  • CSS:HTMLを装飾する言語
  • Liquid:Shopify専用のテンプレート言語

これらの言語を使用することで、より細かいデザインができるようになります。ただ、中には自分には専門的な知識がないからコード編集は諦めているという方もいるかもしれません。

自身に専門的知識が備わっていなくても、Shopify開発・制作ができるShopifyパートナーに委託したり後ほど解説するアプリを利用したりすることでデザインできます。

より素敵な店舗へとデザインしていきたい方はぜひ検討してみましょう。

Shopifyのデザインやカスタマイズを補助するアプリ3選

CSSやHTMLを駆使すれば、自分好みのサイトにデザインできます。しかし、現時点でのマークアップ言語の知識だけではどうしても表現できない部分もあるでしょう。

そんな自分ではどうにもならない部分を補ってくれる機能がShopifyのアプリです。ここでは、Shopifyで作成した店舗のデザインやカスタマイズを補助してくれるアプリを解説していきます。

Shopifyのデザインやカスタマイズを補助するアプリ

  • All In One Product Zoom
  • Shogun Landing Page Builder
  • Shop The Look

以上の3つのアプリをそれぞれ簡単に解説していきます。ぜひ店舗をデザインする際に役立てましょう。

アプリ①:All In One Product Zoom

顧客が店舗の商品を気に入ってくれたとしても、画像が小さくて詳細を確認できなくては顧客は購入を諦めてしまうでしょう。しかし、「All In One Product Zoom」を使えば小さい画像でも拡大して詳細を確認できます。

アプリで設定できるズーム機能は3種類です。

アプリで設定できるズーム機能

  • ウィンドウズーム:商品画像の隣りに拡大した画像を表示する機能
  • インナーズーム:商品画像の上にカーソルを乗せると、その部分だけ画像を拡大する機能
  • レンズズーム:虫眼鏡のように画像を拡大する機能(レンズの形は円・正方形から選択可能)

他にもズームの度合いや位置、サイズなど様々なアレンジができます。画像ごとにそれぞれズーム機能を設定することも可能です。

All In One Product Zoomの基本情報

アプリ②:Shogun Landing Page Builder

テーマの細かいカスタマイズをマークアップ言語の知識を使わずに行えるアプリが「Shogun Landing Page Builder」です。

ドラッグ&ドロップ式のページビルダーで理想のページを構築できます。

ページビルダーとは

記事ページにおけるレイアウトの分割や画像スライダー、見出し、キャッチフレーズ、タブ、Googleマップなどが簡単にできるページ作成システム。

Shopifyのすべてのテーマで利用できます。カスタマイズできるページはランディングページ・商品ページ・ブログページの3つです。編集画面でプレビューもチェックできるため、初心者の方でも安心して編集を進められるでしょう。

Shogun Landing Page Builderの基本情報

アプリ③:Shop The Look

店舗のデザイン・カスタマイズではアップセル・クロスセルの仕掛けは欠かせません。「Shop The Look」は、商品紹介ページに「Shop The Lookボタン」を表示させ、ボタンをクリックすると関連商品の情報を表示する機能があります。

さらに関連商品をそのままカートに追加できる「ADD TO CARTボタン」という機能も搭載しているため、顧客の購入意欲の促進に役立つでしょう。

本アプリはデザインというより機能性重視のアプリではありますが、顧客の購入促進を向上させるサイトデザインを作成する上で非常に優秀なアプリです。

Shop The Lookの基本情報

初心者はまずテーマエディタからデザイン編集をしよう

本記事では、Shopifyで作成した店舗をデザインする方法について解説してきました。具体的な方法は以下の通りです。

Shopifyの店舗をデザインする方法

  • テーマエディタ―で編集する
  • コードエディターでコード編集をする
  • ローカル環境でデザインする

HTMLやCSSなどのマークアップ言語の知識を持っていない方は、感覚的に操作できるテーマエディタ―でデザインしてみましょう。

Shopifyの拡張機能であるアプリを補助としてデザインするのも1つの手です。まずは自分がデザインできる部分から徐々にできることを増やしてみましょう。

この記事を書いたライター

鈴原 千景

鈴原 千景

6年ほどライター・編集者・ディレクターを経験。マーケティング、ECサイト分野に強く、今まで数千記事を執筆。「難しいものを分かりやすく解説する」「クライアントと読者どちらの視点も考えつつ執筆する」をモットーにしている。

このライターの記事一覧

この記事を監修した人

金井 宏透

金井 宏透

JetB株式会社顧客マーケティング支援部マネージャー。2008年から大手IT企業にて広告・SEOのセールマネージャーを経験した後、モバイルゲーム会社にてマーケティングに従事。2019年より優良WEB運営元であるJetB株式会社にジョイン。

この監修者の記事一覧

Share

関連記事

おすすめ記事

Share