Shopifyのデザイン制作ページではよく作るページとパーツが決まっています。
制作する内容を把握しておきましょう。
よくデザインカンプを作るページ
デザインカンプが必要となることの多いページは、以下のページです。
- TOPページ
- 商品単体ページ（/products/〇〇）
- 商品一覧ページ（すべての商品ページ）（/collections/all-products、collections/all）
- コレクション一覧ページ（/collections/）
- 特定のコレクションページ（/collections/〇〇）
- ブログ一覧ページ
- ブログ記事単体ページ
- カートページ（/cart）
- ご利用ガイドページ（/pages/shopping-guide、/pages/guide）
- 特定商取引法などテキスト中心ページ（/pages/〇〇）
- よくあるご質問ページ（/pages/questions、pages/iquiry）
- お問い合わせページ（pages/contact）
- チェックアウトページ（/checkouts/）
- アカウント詳細ページ（/account）
ちなみにPC版のみの案件もあれば、SP版も制作する案件もあります。
TOPページ
検索エンジンやSNS上からユーザーが主に最初に訪れるページです。
TOPページのレイアウトや掲載するコンテンツは扱う商材によってさまざまで、見た目が商材によって異なります。
商品単体ページ（/products/〇〇）
各商品の詳細が確認できるページです。
画像は設定した枚数分表示され、価格や説明文、購入ボタンが表示されます。
関連商品やおすすめ商品の表示ができるテーマの場合は、客単価を向上させる目的でこれらのセクションを表示をさせます。
「今すぐ購入ボタン」を非表示にしない場合は「今すぐ購入ボタン」も表示されます。
（例）
商品一覧ページ（すべての商品ページ）（/collections/all-products、collections/all）
全ての商品一覧を確認することができるページです。
テーマによっては使いやすい絞り込みフィルターが付いており、数が多くても条件で絞り込んで効率よく商品を探すことができます。
（例）
コレクション一覧ページ（/collections）
ストアに登録しているコレクション全てが表示されるページです。
特定のコレクションをクリックすると、そのコレクションに分類されている商品のみ表示されているページへと遷移させることができます。
（例）
特定のコレクションページ（/collections/〇〇）
特定のコレクションに分類されている商品のみが表示されるページです。
テーマにもよりますが、商品一覧ページと似た見た目となります。
（例）
ブログ一覧ページ
投稿しているブログの一覧が表示されるページです。
案件で公開時に記事を書くケースは非常に少ないため、デモストアでサムネイルありの記事となしの記事を複数投稿してどのように表示されるか確認しておきましょう。
デザイン制作時にはページャーの形も確認する必要があるため、複数投稿をしておきましょう。
（例）
ブログ記事単体ページ
ブログ記事単体ページではデフォルトの状態からデザインを変更する機会があまりありませんが、見出しの見た目を変更する場合があります。
（例）
カートページ（/cart）
カートの中に入っている商品を確認することができるページです。
配色をデフォルトの状態から変えることはありますが、レイアウトを変えると構築に工数がかかるためレイアウトは変更しないことが多いページです。
関連商品やおすすめ商品の表示ができるテーマの場合は、客単価を向上させる目的でこれらのセクションを表示をさせます。
（例）
特定商取引法などテキスト中心ページ（/pages/〇〇）
テキスト中心となるページです。
装飾を加えることは基本的にありませんが、テキストに対して線を加えたり表を作ったりします。
（例）
ご利用ガイドページ（/pages/shopping-guide、/pages/guide）
お買い物までの流れや決済方法、配送方法について記載するページです。
テキストのみで案内する場合もあれば、操作画像を入れて案内する場合もあります。
画像を入れて案内した方がユーザーにとってわかりやすいものの、セクションを複数使う分限度である25セクションを超えてしまうことが多いため注意が必要です。
よくあるご質問ページ（/pages/questions）
ECサイトの使い方や商品の購入にあたって生じると想定される疑問とそれに対する回答を書くページです。
QAの形でテキストを配置したりアコーディオンの形にしたりすることが一般的です。
（例）
お問い合わせページ（pages/contact、pages/iquiry）
お問い合わせフォームを掲載するページです。
フォームはテーマの既存の形を利用することが多く、必要に応じて項目の変更を行います。
デザインを作る際には、デモサイトで既存のフォームの形がどのようになっているかをまず確認する必要があります。
1点注意点として、Shopifyではアプリを使わずにお問い合わせフォームからファイルを転送することができないようになっているため、アプリを使わない案件ではフォームにファイルを添付するボタンを追加することができません。
以下のようにファイルを添付するボタンの見た目を作ることはできるのですが、アプリを使わない状態ではファイルの転送ができないようになっています。
アプリを使うとファイルの転送ができるようになるため、アプリを使用しない案件ではお問い合わせフォームにファイルを添付するボタンをデザインカンプ制作時に追加しないように注意しましょう。
しょうこちなみに「商品単体ページ（/products/〇〇）」と「カートページ（/cart）」には、ファイルの転送ができるボタンをコーディングでつけることができるようになっています！
ちなみに、フォームの上に公式LINEへ誘導するボタンをつけることも可能です。
お問い合わせを送信する前に内容に問題がないか確認するための「確認画面」についてはデフォルトの状態では作ることができないので、デザインカンプ制作時に確認画面を作らないように注意しましょう。
チェックアウトページ（/checkouts/）
配送先や支払い情報を入力するページです。
チェックアウトページはShopify の通常プランではデザインを変更できる部分は限られ、背景色やボタンの変更などしかできないようになっています。
チェックアウトページに関しては、他のページとトンマナを合わせることが一般的です。
（例）
アカウント詳細ページ（/account）
ログイン画面（/account/login）からログインをした後に表示されるページのことです。
（アカウント詳細ページ）
設定＞お客様アカウントの部分を「従来」としてサイトをオープンさせる場合はアカウント詳細ページ（/account）のデザインの編集が可能ですが、「お客様アカウント」としてオープンさせる場合アカウント詳細ページ（account/orders）はデザインの編集ができないようになっています。
そのためアカウント詳細ページは、お客様アカウントの部分を「従来」としてサイトをオープンさせる場合のみデザインすることが可能です。
アカウント詳細ページにログインをするにはテストストア上でのアカウントの登録が必要となるため、登録のできるページ（/account/register）からアカウントを作る必要があります。
※アカウントはテストストア上で複数作ることができます。
（アカウント登録のできるページ）
テストストアで登録したアカウント情報でログインをするとアカウント詳細ページの見た目の確認ができますが、一度もテスト決済をしていないテストストアでは購入履歴は表示されません。
テスト決済を行いたい場合は、はじめに設定画面内の決済の項目でテスト決済ができるように「Bogus（テスト用）」という項目を有効にしておく必要があります。
テスト決済を行う場合は商品をカートに入れ、決済ページで以下の情報を入力します。
・お届け先：住所
・カード番号：1
・有効期限：未来の月/年
・セキュリティコード：任意の3桁の数字
・カードの名義人：Bogus Gateway
しょうこ実在する住所を入力しても、『配送はご利用いただけません選択された住所には配送できません。住所をご確認のうえ、再入力もしくは別の住所を選択してください。』と表示される場合があります。
その場合は、住所を変えてみて上記のような表示がでないか再度試してみてください！
テストストア上でテスト決済をした後、アカウント詳細ページにログインをするとテストで購入した情報が掲載されている画面を確認することができます。
（テスト決済を行なったアカウント詳細ページ）
ちなみに一度テスト決済を行うと、テストストアに入れている他のテーマでも注文履歴入りのアカウント詳細ページを確認することができるようになります。（テスト決済を行なったアカウントでログインを行なった場合。）
よく作るパーツ
ページとともにパーツを制作する場合はパーツも制作します。
制作する場合は、以下のパーツをよく制作します。
- 売り切れ表示
- 「在庫わずか」の表示
- ランキングアイコン
- お気に入りアイコン
- 送料無料画像
- アプリ（インスタグラム、お気に入り、レビュー）
- タグのデザイン
- カートに入れるボタンをクリックした時の様子
- ヘッダーメニュー（メガメニュー）の中身
- SP版ハンバーガーメニュー（開いた時の様子も）
「売り切れ表示」に関しては既存のテーマでできる見た目とする案件も多いため、「売り切れ表示」に関しては既存の見た目としない場合のみ制作を行います。
また、カートに入れるボタンをクリックした時の様子についてはテーマ既存の見た目とするケースが大半ですが、以下のようにどのような見た目のポップアップが表示されるかわかるようにデザインカンプに記載しておきます。
