TOP
EC運営
Shopifyのコレクションページ機能とは？コレクションの表示、非表示のさせ方からおすすめの画像サイズまでご紹介します！

EC運営 Shopify

Shopifyのコレクションページ機能とは？コレクションの表示、非表示のさせ方からおすすめの画像サイズまでご紹介します！

2024.06.23
(2024.06.23更新)

Shopifyを使いECサイト運営をしていく上でコレクションページ機能はうまく活用できていますか？？コレクションページ機能をうまく使いこなせることができれば、顧客がより買い物をしやすいサイトを作成することができ、売り上げアップにも繋がります。この記事では、コレクションページ機能の表示のさせ方やその活用方法についてご紹介致します。

監修者

藤井玲

アートトレーディング株式会社代表取締役。
2002年に楽天市場へ出店したことをきっかけに、EC支援サービスの提供をスタート。累計１５０社以上のサイト制作、運営経験を持つ。

ECの最新情報をYOUTUBEやXで発信しています。
ECを学んでいきたい人はリンクをクリック！

■髭男社長のYOUTUBEはこちら
■藤井玲のXはこちら
■藤井玲のプロフィール詳細はこちら

Shopifyのコレクションページ機能とは？

Shopifyのコレクションページ機能とは、商品をコレクションにグループ化して、カテゴリー別に見やすいようにする機能のことを指します。また、サイト管理者はコレクションを作ると、そのコレクションに含まれる商品のギャラリー付きのウェブページとして、オンラインストアにコレクションに表示することが可能になります。
一方、サイト閲覧者は、コレクションページの商品画像をクリックし、特定の商品のページにアクセスすることが可能です。他のECサービスではコレクションページ機能に似た機能でカテゴリー機能という物があります。しかし、Shopifyのコレクションページ機能では「商品タイプ」「メーカー、ブランド」などの同じ性質を持ったタグの他にも「価格」「在庫数」といった細かい条件まで設定できます。

Shopifyのコレクションの種類

Shopifyのコレクションには、大きく分けて「手動コレクション」と「自動コレクション」の2種類があります。

手動コレクション

手動コレクションとは、自身が作成したコレクションに対して商品を自身の手で振り分けるタイプのコレクションのことを指します。自身でコレクション内にある商品を管理できるため確実な商品の振り分けを行うことができます。
しかし、難点を1つ挙げるとすれば、商品の登録から削除までを手動で行わなければならないため、商品の登録に時間が掛かることが挙げられます。そのため、商品数が多いストアには適しません。商品数が多い場合は自動コレクションを利用する必要があります。

自動コレクション

自動コレクションとは、選択条件を追加することにより自動で商品を振り分けるコレクションのことを指します。選択条件は60個まで設定することが可能で細かく設定することができます。たとえば、商品をコレクションに組み込む際に一部の条件に一致する必要があるのか、すべての条件に一致する必要があるのかを設定できます。これらの条件を設定することで新しく追加された商品に関しても自動で作成したコレクションに組み込まれます。
そのため、管理する商品の多い場合や回転在庫ある場合、季節的在庫がある場合は自動コレクションを使うといいでしょう。たとえば、衣料品関係のストアを運営している場合、季節ごとに商品をコレクションに追加する必要があります。それらの作業を自動コレクションでは選択条件を設定することで時間をかけずに終わらせることができます。
もちろん、自動コレクションにも難点があります。それは条件設定が難しいことです。条件選択を正しく行うことができない場合、正確に商品を振り分けることができません。そのため、自動コレクションを使用した場合、特定の商品が思い通りにコレクションに追加できないことがあります。

Shopifyの手動コレクションを作成・表示する方法

Shopifyのコレクションページ機能には「自動コレクション」と「手動コレクション」2つの種類があります。それぞれ得られる効果や設定方法が違いますので設定時には注意が必要です。また、商品の特性や在庫数に応じて使い分ける必要があります。手動コレクションとは商品をコレクションに追加する際に全て手動で管理する機能のことを指します。
コレクションは商品管理を全て手動で行うため手間が掛かってしまいますが、自分の選択した商品が必ずコレクションに追加されます。そのため、コレクションのアイテム数が少ない時や商品がうまくコレクションに追加されない場合はおすすめです。
コレクションを表示させるため設定手順は次の通りです。

作成の手順

「管理画面」から「商品」＞「コレクション」に移動します。
「コレクションの作成」をクリックし、コレクションのタイトルと説明を書きます。
コレクションタイプセクションで「手動」を選択し、「保存」クリックします。
商品セクションで商品を選択するか「閲覧する」をクリックし、コレクションに入れたい商品を追加していきます。
ここでストアの商品を並び並び変える場合、管理画面に戻り「商品」＞「コレクション」にクリックをします。（並び替えをしない場合、8から参照）
商品セクションで「並び替え」の横にあるドロップダウンリストをクリックし、並び替え順序を選択します。
並び替えの順序規則を「ソートオプション」から選択するか、「手動で」を選択するかを選びます。「手動で」を選択した場合、商品をドラッグして順番を入れ替えることが可能です。並び替えが完了したら、必ず保存をクリックしましょう。
「検索結果のプレビュー」セクションではSEOの対策を行います。「ウェブサイトのSEOを編集する」をクリックし、編集を行います。ここでURLの設定を行うとき日本語を使っていれば、URLも日本語になってしまうので、半角英数字に変更しておくといいでしょう。
販売チャネルセクションでは「管理」をクリックし、コレクションを利用可能にする販売チャネルを選びます。
「コレクションの画像」セクションでは「画像を追加する」クリックし、コレクション画像のアップロードを行います。この作業が終わったら保存をクリックします。
最後はサイト閲覧者がコレクションを見つけてアクセス出来るようにコレクションへのリンクをオンラインストアの追加して、設定は完了です。

手動コレクションへ商品を追加する手順

追加手順

ストアの管理画面から「商品」をクリックし「コレクション」を選択します。
商品を追加したコレクションの名前を選択します。
商品セクションで、商品を「閲覧する」か検索するをクリックします。次にコレクションに追加したい商品を追加していきます。

ここで商品バリエーションはコレクションに追加することができないので注意が必要です。また、手動コレクションを自動コレクションにそのまま変更することはできませんが、新しい自動コレクションを作成し、手動コレクションに置き換えることは可能です。用途により使い分けるといいでしょう。

Shopifyの自動コレクションを作成・表示する方法

自動コレクションは、あらかじめカテゴリーを細かく設定しておいて、商品を自動的にコレクションに追加するコレクションページ機能です。上述した通り、カテゴリーを細かく設定することができ他のＥＣサイトより細かなグループ化を自動で行うことができます。
自動コレクションの設定手順は次の通りです。手動コレクションと6番以降は同じ手順になります。

作成する手順

「管理画面」から「商品」＞「コレクション」に移動します。
「コレクションの作成」をクリックし、コレクションのタイトルと説明を書きます。
コレクションタイプセクションで「自動」を選択し、「保存」クリックします。
ドロップダウンリストで「コレクションの条件」を設定し、保存をクリックします。
ここでストアの商品を並び並び変える場合、管理画面に戻り「商品」＞「コレクション」にクリックをします。（並び替えをしない場合、8から参照）
商品セクションで「並び替え」の横にあるドロップダウンリストをクリックし、並び替え順序を選択します。
並び替えの順序規則を「ソートオプション」から選択するか、「手動で」を選択するかを選びます。「手動で」を選択した場合、商品をドラッグして順番を入れ替えることが可能です。並び替えが完了したら、必ず保存をクリックしましょう。
「検索結果のプレビュー」ではSEOの対策を行います。「ウェブサイトのSEOを編集する」をクリックし、編集を行います。ここでURLの設定を行うとき日本語を使っていれば、URLも日本語になってしまうので、半角英数字に変更しておくといいでしょう。
販売チャネルセクションでは「管理」をクリックし、コレクションを利用可能にする販売チャネルを選びます。
「コレクションの画像」セクションでは「画像を追加する」クリックし、コレクション画像のアップロードを行います。この作業が終わったら保存をクリックします。
最後はサイト閲覧者がコレクションを見つけてアクセス出来るようにコレクションへのリンクをオンラインストアの追加して、設定は完了です。

また、自動コレクションでは特定の商品のみをコレクションから削除し、非表示にすることは出来ません。しかし、在庫追跡を有効にして、なおかつ、在庫が切れてた場合は可能になります。

自動コレクションへ商品を追加する手順

追加手順

1つ目のドロップダウンリストで、条件タイプを決定します。
2つ目のドロップダウンリストで、コレクションに追加する前の商品がどのような条件に一致する必要があるのかを選択します。
3つ目のフィールドに設定した条件値を入力します。
また、複数の条件を選択する際は、「別の条件を追加する」を選択し上記の手順を繰り返します。
これらの作業が完了したら「保存」クリックし商品は追加されます。

また、自動コレクションのコンテンツの変更に関しては、条件や商品の編集を行うことにより簡単に行うことができます。サイト訪問者がいるにも関わらす、商品購入者が増えない場合は試してみるといいでしょう。

Shopifyのコレクションを削除・非表示する方法

また、商品をコレクションから削除し非表示にした場合の手順、次の通りです

非表示にする手順

管理画面から、「商品」＞「コレクション」に移動します。
非表示にしたい商品のあるコレクションをクリックします。
商品セクションで「コレクションから削除する」の横の「×」をクリックすれば完了です。

Shopifyのコレクションページをカスタマイズする方法

コレクションの説明や名前を変更することはコレクションページをの編集することで簡単にお香ことができます。しかし、コレクションの外観やレイアウトを大きく変更したい場合は、テーマ自体をカスタマイズするといった方法もあります。また、この2つの方法以外にもコレクションページのカスタムテンプレートを使用しコレクションを作成している場合は別のテンプレートを使用することでコレクションのデザインを変更することも可能です。

hopifyのコレクションを並び替える方法

設定されてある項目であれば、コレクションの並び替えはコレクションページの編集を操作することで簡単に行うことができます。デフォルトで用意されてある並び替え項目は「ベストセラー」「商品名 A-Z」「商品名 Z-A」「価格の高い順」「価格の安い順」「新着順」「古い順」「手動」の7つになります。

Shopifyのコレクションが表示されない場合の対処法

コレクションを設定したのにも関わず、表示されない場合は設定がうまく行われていない場合があります。特に以下の3つの事項が行われていないとコレクションが表示されません。

表示したいページを作成されていること
作成したページをメニューに追加されていること
テーマのカスタマイズで表示したい場所へメニューが設定されていること

また、この3つの事項や設定をしっかりと行っているのにも関わらず、コレクションが表示されない場合はヘルプセンターにメールでお問い合わせください。

Shopifyのコレクションリストの整理と商品のタグ付け

複数のコレクションを作成してしまうとコレクションリストに全てのコレクションが表示されてしまい、逆に商品が探し辛くなってしまいます。
そのため、特定のコレクションを表示させ、商品を探しやすいレイアウトを作る必要があるので注意が必要です。
また、自動コレクションを選択した場合、商品のタグの選択が重要になってきます。タグの選択を適切に行わなければ、せっかくコレクションを設定したのに逆効果になってしまします。
特に取り扱う商品が多い場合「全商品に季節に関するタグを付ける」などを行い、商品が適切にグループ化されるようにする必要があります。

Shopifyのコレクション画像サイズの設定の際の注意点

Shopifyのコレクション画像サイズはピクセルの上限が決まっているので注意が必要です。最大ピクセルは4,472×4.472または、20メガピクセルになります。
また、ファイルサイズが20MB未満でない場合、Shopifyには追加が出来ないので注意が必要になります。おすすめのサイズは通常2048×2048ピクセルサイズです。解像度も高められ、見やすい設定になります。

まとめ

いかがだったでしょうか。この記事ではShopifyのコレクションページ機能についてご紹介致しました。Shopifyのコレクションページ機能を活用すれば商品をグルーピングし、表示をすることができます。
そのため、Shopifyにおいてサイトを運営していく上では効果的に活用していく必要があります。仕事が多岐に渡るECサイト構築において、必要な業務を自動化し、質の高いサイトを構築していくことは大切です。
この記事がShopifyのコレクションページ機能を活用する上で参考になれば幸いです。