2.制作時の注意点①Shopifyの特有の制限

Shopifyでは機能上実装自体ができないことや実装に時間がかかることが理由で、「やってはいけない」または「避けてほしい」と言われるデザインがいくつか存在します。

作っても納品できないといった事態になることを避けるために、「やってはいけないと言われることの多いデザイン」と、案件によっては可能なものの「避けてほしいと言われやすいデザイン」がどのようなものか把握しておきましょう。

やってはいけないと言われる理由

やってはいけないと言われる理由は、大きく分けると以下の3つです。

• 機能の都合上、実装すること自体が不可能に近い
• 実装すると工数がかかりすぎて、予算に合わない（予算によっては実装が可能）
• 公開後の可変性がない（公開後に編集がしにくい）

ついやってしまいがちなデザインは、「公開後の可変性がない」デザインです。

Shopifyでは納品後にセクションの上下を入れ替えたり新しいセクションを追加したりすることは度々あるため、可変性のあるデザイン、すなわち上下のセクションを入れ替えても新しいセクションを追加しても違和感のないデザインにする必要があります。

やってはいけないと言われることの多いデザイン

やってはいけないと言われることの多いデザインは、主に以下のようなデザインです。

• セクションをまたぐような背景
• チェックアウトページのデザインの編集
• 「今すぐ購入ボタン」の表示
• 表示が税別のみ
• 1テンプレートあたり25を超えるセクションの利用
• お問い合わせ確認画面の作成
• お問い合わせフォームにファイルを添付するボタンを追加する

セクションを跨ぐような背景

実装すること自体が不可能に近い、可変性がないという理由でやってはいけないと言われてしまうデザインが「セクションを跨ぐような背景」です。

Shopifyではサイトの公開後に売り上げが上がるかテストするために、セクションの上下を入れ替えたりセクションを追加・削除したりすることが度々あります。

仮にセクションを跨ぐようなデザインをしていると、実装後にセクションの上下を入れ替えた場合に繋ぎ目が綺麗でなくなり不自然になってしまいます。

また、PC版では綺麗に見せられてもSP版では繋ぎ目がずれるという状態になってしまうため、「セクションを跨ぐような背景」を作ることはShopifyでは禁止事項です。

チェックアウトページのデザインの編集

チェックアウトページは「Shopify Plus」で運用すると大幅に編集ができるようになりますが、「Shopify Plus」でない場合は一部しか編集することができません。

現状Shopify Plusでストアを運用するオーナーが少なく他のプランで運用する案件が圧倒的に多いため、デザインの編集は不可とされるケースが大半です。

ちなみにチェックアウトページのロゴや色を変える程度の編集は、Shopify Plusでなくとも編集画面でできるようになっています。

（チェックアウトページ）

（チェックアウトページのカスタマイズ画面の項目）

※チェックアウトページは「設定」＞「チェックアウト」＞「カスタマイズ」ボタンから編集をすることができます。

「今すぐ購入ボタン」の表示

「今すぐ購入ボタン」と呼ばれるボタンを押すと、すぐにチェックアウトページに遷移するようになります。

つまり、カートページを経由せずにチェックアウトページに画面が切り替わるようになってしまいます。

カートページを経由せずにチェックアウトページに遷移させるとラッピングの選択やお届け日時指定の設定といったようなオプションを選択することができないため、「今すぐ購入ボタン」を入れずに制作する案件が大半です。

（例）

税込表示をしない

Shopifyに限らずサイト上では販売する商品の税込表示は必要ですので、税込でいくらなのかわかる表記としましょう。

1テンプレートあたりセクションを26以上利用したデザイン

現時点では、1つのテンプレートで25セクションまでしか使用することができないため、26セクション以上になるような縦に長いデザインとならないように注意しましょう。

意外と25セクションを超えてしまいがちなのが、「ご利用ガイドページ」です。

ユーザーが迷わないようにテキストに加え画像を使って細かく案内すると、あっという間に25セクション使い切ってしまいます。

25セクションを超えそうな場合は、ご利用ガイドページに入れるつもりだった内容の一部を別の案内ページを作って別ページに掲載するのがおすすめです。

掲載する内容が25セクション超えそうな場合は、ディレクターにページを分けることを提案しましょう。

お問い合わせ確認画面の作成

お問い合わせフォームに入力した内容に誤りがないか確認できるような「お問い合わせ確認画面」は、Shopifyのデフォルトの状態では作成することができません。

クライアントから作ってほしいと依頼が入る可能性はありますが、以下のような確認画面は外部機能を利用せずに実装することは不可能なのでデザインカンプ制作時に作らないように注意しましょう。

（Shopifyでは制作することのできない画面例）

ちなみに、お問い合わせ後に「送信しました」と表示をさせることは可能です。

お問い合わせ確認画面を作りたい場合は、外部のフォーム機能と連携すると可能です。
例えば「formrun」というシステムを組み込むと、送信前に確認画面を出すことができるようになります。
ただしShopifyに問い合わせの内容が届くのではなく、formrunに届くようになります。
formrunを使用する場合は月額料金も追加でかかるため、実務で提案しても採用されるケースはあまりありません。

お問い合わせフォームにファイルを添付するボタンを追加する

Shopifyの仕様上アプリを使わずにお問い合わせフォームからファイルを転送することができないようになっているため、アプリを使わない案件ではフォームにファイルを添付するボタンを追加することは不可となります。

以下のようにファイルを添付するボタンの見た目を作ることはできるのですが、アプリを使わない状態ではファイルの転送ができないようになっています。

（例）

アプリを使うとファイルの転送ができるようになるため、アプリを使用しない案件ではお問い合わせフォームにファイルを添付するボタンを追加しないように注意しましょう。

「ハルクフォームビルダー」というアプリを使うとファイルの添付ができますが、デザインはアプリでできる見た目となります。

◯「ハルクフォームビルダー」
https://apps.shopify.com/form-builder-by-hulkapps?locale=ja

避けてほしいと言われやすいデザイン（案件によっては可）

案件によっては可能なものの避けてほしいと言われることの多いデザインは、主に以下のようなデザインです。

• コレクション単体ページに表示されるフィルターの位置や見た目の変更
• カートページの大幅な配置の変更
• セクションごとに交互に背景色を変える
• 商品画像上に表示されるカートに入れるボタンの位置変更
• 画像やボタンのアニメーションの変更
• 商品単体ページの画像の見せ方の変更
• カートアイコンに表示される数字背景のデザインの変更
• ヘッダーをテーマのカスタマイズ画面でできないような見た目にする
• フッターをテーマのカスタマイズ画面でできないような見た目にする
• ハンバーガーメニューの改造

コレクション単体ページに表示されるフィルターの位置や見た目の変更

コレクション単体ページに表示されるフィルターの配置や見た目を変えようとすると、かなり工数がかかってしまいます。

カスタマイズする場合は、追加で構築料金や有料アプリの料金が見積もられているケースが大半です。

フィルターの配置や見た目の変更はやらないで欲しいと指示のあるケースが多いものの、案件によってはテーマでできる見た目と異なるデザインに変更する場合もあります。

フィルター自体の見た目を変更する場合や掲載する項目が複数ある場合は、ディレクターに相談してからデザインカンプに反映するようにしましょう。

ちなみに有料アプリを使用する場合は、「Boost AI Search & Discovery」（Boost AI検索とフィルター）といったアプリを使用します。

◯「Boost AI Search & Discovery」
https://apps.shopify.com/product-filter-search?locale=ja

アプリを使用する場合はアプリのデモストアを表示し、どのような見た目のデザインが可能か確認の上デザインカンプに反映を行います。

「Shopifyアプリストア」（Shopify App Store）とは、Shopifyで作られたオンラインストアに新しい機能を追加できるアプリが提供されている場所です。
https://apps.shopify.com/?locale=ja

カートページの大幅な配置の変更

カートページの色や線の太さといった見た目の変更はそれほど工数はかかりませんが、大幅に配置を変えたりコンテンツを追加するとなると構築にかかる工数が増えてしまいます。

そのため、大幅な見た目の変更はあまり望まれません。

何か要素を追加したり見た目を大幅に変えたい場合は、理由を伝えて変えても良いか確認をするようにしましょう。

セクションごとに交互に背景色を変える

サイトの公開後にセクションの上下を入れ替えたりセクションの追加削除を行なったりする可能性がある為、セクションごとに交互に色を変えるというデザインはあまり好まれません。

ただし、公開後に編集する予定があまりないサイトや単色の背景は避けたいという依頼のある場合は、背景の色をセクションごとに変更します。

商品画像上に表示される「カートに入れるボタン」の位置変更

商品画像上にカーソルを合わせた時に表示される「カートに入れるボタン」の位置を変える作業も、工数がかなりかかってしまいます。

構築料金が高い場合は編集しても問題ありませんが、何か理由があって見た目を変えたい場合はディレクターに相談してから見た目を変更するようにしましょう。

（カートに入れるボタン例）

画像やボタンのアニメーションの変更

画像やボタンのアニメーションはテーマごとに決まっていますが、カスタマイズ画面で編集のできないようなアニメーションに変更することは不可とされるケースも度々あります。

アニメーションの変更も工数がかかるため、テーマの編集画面で設定できないようなアニメーションに変更したい場合はディレクターに相談しましょう。

商品単体ページの画像の見せ方の変更

商品単体ページで表示される商品画像とその周囲の見え方も、テーマのデフォルトの形から変更しないでほしいと言われることの多い部分です。（カスタマイズ画面でできるような変更であれば、変更しても問題ありません。）

（商品単体ページ例）

カスタマイズ画面で編集できない部分もコーディングをすると変更できますが、画像アニメーションの変更と同様にかなり工数がかかってしまいます。

お客様がこだわりたい場合のみ見積もりの上見た目やアニメーションを変えるケースがありますが、変更しないでほしいと言われることの多い部分です。

カートアイコンに表示される数字背景のデザインの変更

ヘッダーにあるカートのアイコンに数字が表示されますが、この裏の図形のデザインを編集する作業も工数がかかります。

こちらもテーマ依存の見た目とし変更は不可とされるケースが多い部分です。

ちなみに数字の背景の色は、テーマによっては編集画面で変更することができます。

（数字背景のデザイン）

ヘッダーをテーマのカスタマイズ画面でできないような見た目にする

一見難しくなさそうに見えますが、Shopifyでヘッダーを編集画面でカスタマイズできない見た目にしてしまうと構築の工数がかなりかかってしまいます。

ヘッダーの改造だけで10万ほど追加で構築料金を見積もるケースもあり、テーマの編集画面内でできる見た目にすることが求められます。

ただしヘッダーの改造料金が構築費用に含まれており、ヘッダーの見た目の改造を行っても構わない案件もあります。

そのような案件の場合は事前にディレクターもしくは構築者から指示がありますが、ヘッダーはデザイナーの意思で簡単に変えることは避け、改造しても構わないかどうかについてはデザイン制作前の打ち合わせで確認しておきましょう。

フッターをテーマのカスタマイズ画面でできないような見た目にする

ヘッダーほど構築に時間がかかってしまう部分ではありませんが、フッターも編集画面でできないような見た目にすると工数がかかるためテーマの編集画面でできる見た目にすることが求められやすい部分です。

フッターもテーマの編集画面でできないような見た目にする場合は、ディレクターや構築者に事前に確認をしておきましょう。

ハンバーガーメニューの改造

ハンバーガーメニューもヘッダーの改造と同様にテーマの編集画面でできない見た目にしてしまうと、かなり工数がかかってしまう部分です。

特に、下層メニューを開く時のアニメーションをテーマのデフォルトの状態から変更しようとすると、コーディングにかかる工数がかなり増えてしまいます。（横に遷移するような動きからアコーディオンに変更など）

ヘッダーと同様に、デザイナーの意思で編集画面でできないような見た目にすることは控えましょう。

ちなみにハンバーガーメニュー内のアイコンを変えるだけの場合はOKが出る場合が多いので、アイコンのみを変更したい場合は変えても良いか確認してみましょう！