4.デザイナーが覚えておきたいShopifyの用語一覧

Shopifyの案件を受けるにあたって、デザイナーが理解しておかないと対応ができない言葉がいくつか存在します。

この章ではデザイナーが覚えておくべき言葉について解説をさせていただきます。

デザイナーが覚えておきたい用語は、以下の言葉です。

• 開発ストア
• テーマ
• アプリ
• コレクション
• バリエーション
• セクション
• ブロック
• フィルター

開発ストア

開発ストアとは、Shopify上でオンラインストアを構築することができるテスト環境のことです。

開発ストアを作るには「Shopifyパートナー」になる必要があります。

Shopifyパートナーになると、いくつでも開発ストアを作ることができるようになります。

デザイナーは開発ストアを使って案件で使用するテーマでどのような編集ができるか確認をしながらデザインカンプの制作を行うため、開発ストアの準備が必要です。

ちなみに開発ストアでは決済を伴う実際の注文を行うことはできないようになっています。

「開発ストア」以外に、「管理ストア」という言葉もあります。
「管理ストア」はテスト環境ではなく、すでに公開されている既存のストアのことを指します。

テーマ

テーマとは、Shopifyでストアを構築するために用いられるデザインのテンプレートのことです。

テーマには有料のものと無料のものがあり、テーマによってヘッダーの形や初期の状態で使える機能が異なります。

テーマはテーマストアからインストールすることができるようになっています。

テーマストアにアクセスすると使用できるテーマの一覧を確認することができますが、アップデートにより度々使用できるテーマが変わります。（以前は使えたものの現在は使えないテーマも複数存在します！）

開発ストアにインストールすることができるテーマの数は、20までです。

上限を超えようとすると、以下の画像のようなエラーが出ます。

Shopifyでは、テーマ自体をオリジナルでゼロから作って対応するという案件はほぼありません。
毎回使用したいテーマをテーマストアからインストールをして、制作を行います。

アプリ

アプリとは、Shopifyの初期の状態では使うことのできない機能を補うことのできる拡張機能のような機能です。

アプリもテーマと同様に、有料のアプリと無料のアプリがあります。

案件では、要件やクライアントの要望によってディレクターが使用するアプリを選定します。

全てのアプリがストアの公開前に使用できるわけではなく、ストアを公開する前の段階で使用できるアプリは一部のアプリのみです。

そのため、もしカスタマイズの段階で見た目を確認することができないアプリの内容をデザインカンプに反映してほしいと指示があった場合は、すでに公開されているサイトから使用するアプリの見た目を確認して反映させる必要があります。

アプリは、見た目のデザインを変更できるものとできないものがあります。
案件の単価によってもデザイン変更をして良いかどうかが異なるため、アプリを使用する案件ではディレクターに使用するアプリと見た目の変更が可能かどうかを確認するようにしましょう！

コレクション

コレクションとは、ある商品を特定の条件でグループ化したもののことを指します。

カテゴリーという言葉と似てはいますが、階層の概念がないためカテゴリーと全く同じ意味という訳ではありません。

コレクションには、スマートコレクションと手動コレクションという2種類のコレクションがあります。

バリエーション

商品に設定できる色やサイズのことを「オプション」と呼び、「バリエーション」とは商品に設定できるオプションのかけあわせのことです。

例えば、以下のサイズと色展開をしている無地のTシャツという商品があった場合、「サイズ」と「カラー」は「オプチョン」に該当し、「S、M、L」や「白、黒、赤」といったオプションの値のことを「オプション値」と呼びます。

そして、サイズとカラーのかけあわせを「バリエーション」と呼びます。

セクション

セクションとはテーマ内で編集できる大きなパーツのことです。

Shopifyでは、編集画面内でセクションを積み重ねて各ページの見た目を作っていきます。

（セクション例）

上部画像の赤枠で囲われているパーツがセクションです。

使えるセクションの形や種類はテーマによって異なる為、各テーマのセクションの形を覚えていてはきりがありません。
使用するテーマごとに形が異なるため、デザイナーが開発ストアに使用するテーマをインストールしてセクションの形を調べながらデザインを作っていく必要があります。

セクションは使える数に制限があり、現在1つのテンプレートにつき25セクションまでしか使うことができないようになっています。

デザインカンプを作る際にセクションの上限数を超えるようなデザインを作ってしまうと構築ができなくなってしまう為、デザインカンプを作る際は25セクションを超えないようにご注意ください。

セクションには、この後ご紹介するブロックという小さなパーツを入れることができるようになっています。

ブロック

ブロックとはセクションの中に入れることができるテキストや画像、ボタンといった小さなパーツのことです。

（ブロック例）

上部画像の赤枠で囲われている部分がブロックです。

テーマによってセクション内で使うことのできるブロックの種類は異なり、セクション内で使用できる上限数が決まっているブロックもあります。

(上限数が決まっている例)

上部の画像の「テキスト付き画像」のセクション内のブロックのうち、「ヘッディング」というブロックについては2つまでと決まっています。

上限数はブロックによって異なり、一つのセクションで最大50までブロックを使用できるようになっています。

フィルター

商品一覧ページに表示される商品の絞り込み機能のことを、「フィルター」と呼びます。

(フィルター例)

フィルターの形はテーマにより異なり、テーマによって使いやすいものもあれば使いにくいものも存在します。

フィルターをコーディングで編集しようとすると工数が非常にかかるため、テーマのデフォルトの形から変更しない案件も多いです。

商品点数が多いような案件ではフィルター編集費を見積もり、有料アプリを使ってデフォルトの見た目ではできないような見た目に変更するケースもあります。

フィルターはコーディングが難しいパーツのため、PC版SP版ともにフィルターが使いやすいかどうかについてはテーマ選びの際に確認しておきたい項目となります。