- ストア構築の準備をしよう
- 商品を登録しよう
- コレクションを登録しよう
- ブログ記事を作成しよう
- サイトのデザインを選ぼう（← 今回はここ）
- テーマを編集しよう（セクション編）
- テーマを編集しよう（テーマ設定編）
- ティザーサイトを作成しよう
- サイトのフォントを編集しよう
- アカウントページを作成しよう
- コンタクトフォーム を作成しよう
- About ページを作成しよう
- 規約を入力しよう
- メニューの編集をしよう
- 送料を設定しよう
- 一般設定を編集しよう
- 各種設定を編集しよう
- 決済テストを行おう
- ストアの所有権を移行しよう
前回は、ブログ記事の作成方法について解説しました。
前回の記事はこちら
今回は、EC サイトを構築する際に最も重要となるデザインを決めます。Shopify では、豊富なデザインテンプレートが用意してあるので、簡単におしゃれなデザインのサイトを作り上げることができます。
今回作成するデモサイトでは、無料テーマを利用してサイトのデザインを作成していきます。
この記事は以下の記事を参考にしています。
この記事の目標
- 作成するデモサイトの構成を把握する
- Shopify テーマストアからテーマを選ぶ
- テーマをカスタマイズし、デモストアと同じようにセクションを配置する
デモサイトを構築する際に使用する商品画像や CSV ファイルのダウンロードをしてない方はこちらからダウロードしてください。
【Shopify マスターへの道】商品画像・CSV ファイルのダウンロード
目次
作成するデモサイトの構成を把握する
まず、見本のデモサイトのデザインを確認し、構成を把握します。
今回は、見本と同じようにセクションを配置するところまでを行なっていきます。
セクションとはデザインの型のことで、セクションを組み合わせてサイトを作り上げていきます。
Shopify テーマストアからテーマを選ぶ
では、実際に使用するデザインをテーマストアから設定し、セクションを並べ替えていきましょう。
Shopify では、デザインテンプレートのことを「テーマ」と呼びます。Shopify 100 種類以上のテーマの中からサイトのデザインを選ぶことができます。テーマには無料テーマと 有料テーマがあり、今回は無料テーマを使用します。
テーマを入手する方法は 2 つあります。
- Shopify テーマストアから入手する（公式）
- それ以外の販売チャネルから入手する
Shopify テーマストア
Shopify テーマストアで販売されているテーマは、全て Shopify 公式が目を通したものです。つまり、純正品のようなものですね。しっかりと Shopify 公式が確認しているので、不具合が起きることも稀です。また、テーマの不具合や使い方などで困った際のサポート体制もバッチリです。
その他の販売チャネル
Shopify テーマストア以外の販売チャネルからも入手することができます。公式以外の販売チャネルというのは、テーマを開発した Shopify パートナーの媒体などです。このようなチャネルで売られているテーマは、販売価格が公式のテーマストアに比べて安い傾向にあります。しかし、Shopify が目を通しているわけではないので、Shopify テーマストアのテーマに比べて不具合が起きやすいです。
無料テーマと有料テーマの違い
無料テーマと有料テーマの違いは、料金だけではありません。無料テーマと有料テーマの違いを確認しておきましょう。
言語対応
無料テーマは、12 個のテーマ全てで日本語対応しています。完全ではないですが、ほとんど日本語になっているので違和感なく使うことができると思います。
一方。有料テーマは日本語対応しているものは多くありません。そのため、テーマをカスタマイズする画面はほとんどの場合英語表示になります。英語に抵抗感がある方は、少し大変かもしれません。言語を手動で一つずつ変換していくことは可能です。
有料テーマの場合も、言語を自動で変換する機能があります。しかし、この機能は不完全で全ての英語が日本語に変換されるわけではありません。結局、手動で変換していく作業が必要になります。
公開設定
無料テーマは、ストアの「現在のテーマ」として公開することができます。公開したテーマは、パスワード付きで一般に公開することができます。クライアントに確認をしてもらいたい時も簡単に見てもらうことができます。
一方、有料テーマは、テーマを購入していない状態で「現在のテーマ」として公開することができません。カスタマイズはできるので、そのテーマを試すことが可能です。
有料テーマの場合、カスタマイズはすることができるが、公開はできないと言うことを覚えておきましょう。
今回は、無料テーマを用いてデモサイトを作成していきます。
ストアにテーマを追加する
管理画面の「オンラインストア > テーマ」でテーマ関連の設定を行うことができます。
初期状態では、何もテーマがインストールされていない状態なので、「デフォルトテーマをインストールする」ボタンをクリックしてみます。
しばらくローディングして、「Dawn」というテーマがインストールされました。この「Dawn」というテーマは、Shopify の無料テーマの中で最もスタンダードなテーマです。今回は、この「Dawn」をカスタマイズしていきます。
他のテーマを試したい場合
今回はこのまま「Dawn」を使用しますが、他のテーマを追加する方法も説明しておきます。
他のテーマを試したい場合は、「テーマライブラリー」の「テーマを追加」からテーマを追加することができます。テーマを追加する方法は 3 種類あります。
- テーマストアからテーマ追加する
- Zip ファイルをアップロードする
- GitHub から接続する
それぞれについて簡単に説明します。
テーマストアからテーマ追加する
マーチャントとしてストアを作成する場合は、基本的にテーマストアから好みのテーマを探して自分のストアに追加します。
「テーマを追加 > テーマストアにアクセスする」からテーマストアを開くことができます。
テーマストアの「テーマを探す」からテーマを探すことができます。（もしかしたら画面が英語になっている可能性があります。）
さまざまな項目で絞り込むことができるので、好みのテーマを探してください。テーマが決まったら、テーマのサムネイルをクリックして、テーマの詳細画面を開きます。「Try theme」ボタンをクリックすると、自分のストアにテーマを追加することができます。
テーマの管理画面に移動し、テーマライブラリーにテーマが追加されています。
有料テーマの場合も同じ手順でストアに追加することができますが、そのまま公開することはできません。公開したい場合は、テーマを購入する必要があります。
Zip ファイルをアップロードする
テーマのファイルがまとまった Zip ファイルをアップロードすることでテーマを追加することも可能です。テーマのファイルは Zip ファイルでダウンロードすることができるので、他のストアでも使いたい場合などに Zip ファイルのアップロードでテーマを追加することもあります。
Zip ファイルでアップロードする場合には、注意点があります。有料テーマを別のストアなどで使うことは規約上禁止されています。有料テーマを Zip ファイルとしてアップロードする場合は注意してください。無料テーマであれば、複数ストアで使用しても何も問題ありません。
GitHub から接続する
GitHub のリポジトリに上げているテーマのコードをそのまま接続することもできます。こちらは開発者向けで、普段から GitHub を使ってテーマ開発をやっているパートナー向けの機能です。
管理画面上から GitHub のアカウントにログインして、自分のアカウントに紐づいているリポジトリを接続することができます。新規でテーマを追加する場合は、あらかじめリポジトリにテーマのコードをプッシュしておく必要があります。
メインテーマとして設定する
テーマライブラリーにあるテーマの「メインテーマとして設定」をクリックすることで、公開するテーマを切り替えることができます。
メインテーマとして設定するで設定されたテーマは「現在のテーマ」として、画面の 1 番上に表示されます。
サイトを改修する際などは、「現在のテーマ」をコピーして、そのコピーしたテーマをテーマライブラリでカスタマイズ・テストを行い、新しいテーマを「メインテーマとして設定」するようなフローで作業をすると良いです。
テーマをカスタマイズする
では、テーマをカスタマイズし、見本のストアと同じようにセクションを配置していきます。
テーマを複製する
テーマをカスタマイズする前に、テーマのバックアップを取るために複製しておきます。
「現在のテーマ」の「3 点アイコンボタン」をクリックすると、ドロップダウンメニューが開きます。メニューの中から「複製」をクリックします。
しばらく待つと、「Dawn のコピー」がテーマライブラリーに追加されます。
複製したテーマの名前を変更します。
「Brooklyn のコピー」の「3 点アイコンボタン」をクリックし、表示されるメニューから「名前の変更」をクリックします。
モーダルが表示されるので、新しい名前を入力し「保存」ボタンをクリックします。新しい名前は「Dawn_Custom」としておきましょう。
複製したテーマをカスタマイズしていくので、現在のテーマに公開しておきましょう。
テーマをカスタマイズする前に
「現在のテーマ」の「カスタマイズ」ボタンをクリックしてください。クリックすると、テーマのカスタマイズ画面に移動します。
カスタマイズ画面の使い方
テーマのカスタマイズ画面は、「ヘッダー」「左側サイドバー」「右側サイドバー」「プレビュー」に分けられます。
ヘッダー
ヘッダーについて順番に説明していきます。
一番左には、管理画面に戻るボタンがあります。その隣には、カスタマイズ中の「テーマの名前」と「ステータス」が表示されています。さらにその隣には「3 点アイコン」があり、現在カスタマイズ中のテーマに対してのその他の操作を行うことができます。
ヘッダー中央では「マーケットの選択」と「テンプレートの切り替え」を行うことができます。
「デフォルト」と表示されている部分がマーケットの切り替えです。複数の国で販売しているサイトなどの場合は、マーケットごとに言語や表示が違うため、それらの表示をこの項目を切り替えることで確認することができます。今回は、複数マーケットは考慮しないので使いません。
「ホームページ」と表示されている部分がテンプレートの切り替えです。ドロップダウンでカスタマイズしたいテンプレートを選択することができます。
ヘッダー右側には「インスペクターの切り替え」「レスポンシブ切り替え」「戻る・進む」「保存する」があります。
「インスペークターの切り替え」では、テーマカスタマイズ中のインスペクター機能の ON /OFF を設定できます。
インスペクター機能を有効化すると、プレビュー画面でカーソルが合っているセクションをクリックして編集項目を表示することなどが可能になります。
「レスポンシブの切り替え」では、レスポンシブの表示を切り替えることができます。「携帯電話」アイコンでスマホで見たときのデザイン、「デスクトップ」アイコンで PC で見たときのデザインを確認できます。「フルスクリーン」アイコンをクリックすると、サイドバーが隠れプレビュー画面だけが表示されます。
「戻る・進む」で、カスタマイズの操作を戻したり進めたりすることができます。
「保存する」ボタンでは、カスタマイズした内容を保存することができます。ステータスが「ライブ」になっているテーマを保存すると、即時で公開中のテーマに変更が反映されてしまうので、現在のテーマを保存する場合は注意が必要です。
左側サイドバー
左側のサイドバーには以下の 3 つの機能があります。
- セクション
- テーマ設定
- 埋め込みアプリ
「セクション」の項目では、セクションやブロックを追加・削除などすることでサイトのレイアウトを編集することができます。セクションの順番を入れ替えることも可能です。
「テーマ設定」の項目では、ロゴやテーマ全体の色、フォントの設定などテーマ全体に関係のある設定を編集できます。
「埋め込みアプリ」の項目では、テーマに埋め込むタイプの Shopify アプリの設定ができます。
右側サイドバー
右側のサイドバーでは、各セクションやブロックの詳細な設定ができます。（ウィンドウの幅が狭い時は、右側ではなく左側に表示される場合があります。）
プレビュー
「プレビュー」では、カスタマイズした内容が反映されたデザインがリアルタイムで表示されます。
セクションを見本と同じ構成にする
では、最後にセクションを見本のストアと同じように構成していきましょう。
見本の構成は、次のようになっています。
- ヘッダー
- スライドショー
- リッチテキスト
- テキスト付き画像
- テキスト付き画像
- 特集コレクション
- コレクションリスト
- リッチテキスト
- 特集商品
- ブログ記事
- フッター
デフォルトの設定では、次の画像のようになっています。
不要なセクションの削除
まず、不要なセクションを削除してしまいましょう。
「画像バナー」セクションを削除します。「画像バナー」セクションにカーソルを合わせると、「ゴミ箱アイコン」が表示されるので、アイコンをクリックします。
同じ要領で「告知バー」セクションも削除します。
セクションの追加
必要なセクションを追加していきます。
左側サイドバーの「テンプレート」の項目にある「セクションを追加」をクリックします。（ヘッダーやフッターの方と間違わないように）
同じ要領で、必要なセクションを追加していきます。「特集コレクション」はデフォルトで入っていたので、追加する必要ありません。
追加し終わると、以下の状態になっていると思います。
セクションの並び替え
セクションを見本のストアと同じ順番に並び替えます。
移動させたいセクションにカーソルを合わせると、並び替えができるアイコンが表示されます。アイコンをドラッグ&ドロップすることでセクションの順番を入れ替えることができます。
「特集コレクション」セクションを「テキスト付き画像」と「コレクションリスト」の間に移動させます。
最終的に並び替えて、以下の順番になるようにしてください。
まとめ
今回は、Shopify でテーマを選ぶところからデザインのレイアウトをカスタマイズする方法までを解説してきました。Shopify では、とても簡単にデザインのレイアウトを編集していくことができますね。
この記事は以下の記事を参考にしています。
今回の振り返り
- 作成するデモサイトの構成を把握できた
- Shopify テーマストアからテーマ追加することができた
- テーマをカスタマイズし、デモストアと同じようにセクションを配置することができた
次回は、引き続きテーマのカスタマイズで、セクションの詳細設定を行なっていきます。
次回の記事はこちら
今回はここまでです。お疲れ様でした。
また、手軽におしゃれなデザインのストアを作りたい場合は、下記のようなアプリを使うこともおすすめです。
- シンプル流れるロゴ｜流れるロゴリスト挿入アプリ
「シンプル流れるロゴ｜流れるロゴリスト挿入アプリ」は、ストアにノーコードで流れるロゴリストを挿入できるアプリです。
Shopify に流れるロゴリストを設置して画像のスライドショーを表示できるアプリについて徹底解説｜ご利用ガイド
- シンプルスライドショー｜お手軽画像スライダー
「シンプルスライドショー｜お手軽画像スライダー」は、ストアにノーコードでスライドショーを表示できるアプリです。
Shopify にスライドショーを追加して画像をスライダー表示できるアプリについて徹底解説｜ご利用ガイド
- シンプル余白調整｜お手軽レイアウト
「シンプル余白調整｜お手軽レイアウト」は、Shopify ストアに余白ブロックを挿入できるアプリです。
Shopify に余白（マージン）を挿入してページデザインの調整ができるアプリについて徹底解説｜ご利用ガイド
- シンプル画像バナー｜お手軽広告バナーアプリ
「シンプル画像バナー｜お手軽広告バナーアプリ」は、ストアにノーコードで画像バナーを挿入できるアプリです。
Shopify に画像バナーを追加できるアプリについて徹底解説｜ご利用ガイド
- シンプル流れる告知｜流れるお知らせ挿入アプリ
「シンプル流れる告知｜流れるお知らせ挿入アプリ」は、ストアにノーコードで流れる告知を挿入できるアプリです。
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
