本記事は私達の会社で作ったShopifyテーマ開発入門書『Hello Shopify Themes Shopifyテーマ開発ガイド』からの抜粋です。

オリジナルテーマの構築には、既存テーマのカスタマイズよりも広範なShopifyのスキルが求められます。予算と時間も必要ですし、ディレクターやデザイナーとの協力も欠かせません。
それでも、挑戦する価値はあります。本章ではオリジナルのテーマを実装する際に役立つ情報を紹介します。

オリジナルテーマという選択肢

Dawnを筆頭に、Shopifyテーマストアで公開されているテーマはいずれも、一定の基準をクリアした高品質なものばかりです。
既存のテーマをカスタマイズするだけでも、充分に実用的で、美しいレイアウトのオンラインストアを作ることができます。
　
とはいえ、既存テーマを利用する以上はどうしても、どこかで見たような、他のShopifyストアと近しい雰囲気を帯びてしまうのも事実です。
よりブランドに沿った世界観をストアで表現したいなら、オリジナルテーマは有力な選択肢となるでしょう。
　
たとえば、次に示すShopifyストアはオリジナルテーマで構築されています。
　

netflix.shop
Netflixのオンラインストア。
キャプチャ元はアカウントログイン画面。カラーリングやフォントなど、Netflixのトーン＆マナーに沿って作られているのが分かる
The Official Netflix Merch Shop
https://www.netflix.shop/

wabararose.com
琵琶湖畔の農園WABARAのオンラインストア。
本書発行元のnon-standard world, Inc.がディレクション・設計・デザイン・実装までを一挙に担い、オリジナルテーマとしてフルリニューアル。筆者は実装を担当。
WABARA｜Rose Farm KEIJI – WABARA online store
https://www.wabararose.com/

本節では、オリジナルテーマという選択肢を考慮するにあたって、事前に把握しておいた方が良い点を紹介します。

誰のためのテーマか

さて、一口にオリジナルテーマといっても、想定される状況はさまざまです。
特定のマーチャントのために作成するオーダーメイドのテーマと、Dawnのように不特定多数のマーチャントに宛ててShopifyテーマストアへ公開するテーマとでは、考慮すべき点は異なります。

オーダーメイドのオリジナルテーマ

多くの場合、オリジナルテーマとして作られるのは、こちらのオーダーメイドテーマです。マーチャントから依頼を受け、一対一のヒアリングを重ねながら作成します。
Shopifyテーマストアでの販売を前提としないため、マーチャントにとって必要な機能だけを実装すれば良く、実装難易度は要件次第で大きく変わります。
シンプルな構成のテーマなら、少人数のチームでも充分に実装できるでしょう。

テーマストア販売用のオリジナルテーマ

Shopifyテーマストアでの販売を目的にオリジナルテーマを作成する場合、Shopifyの定める次の22要件をすべてクリアする必要があります。要件に満たないテーマは、テーマストアへの公開を拒否されます。

1. 販売独占要件：Theme Store exclusivity
2. テーマ独自性：Uniqueness
3. 備えるべき各種機能：Features
4. 各ファイルの要件：Templates, sections, and blocks
5. 一定以上のLiqhthouseスコア：Lighthouse performance and accessibility
6. ページの要件：Pages
7. テーマの一貫性：Consistency and functionality
8. ブラウザ互換性：Browser compatibility
9. CSSとJavaScriptの要件：Assets
10. SEO最適化：Search engine optimization (SEO)
11. アクセシビリティ：Accessibility
12. SNS対応：Social media
13. デザインとUX設計：Theme design and UX
14. テーマ設定の要件：Settings
15. フォントピッカー：Font picker
16. 色彩設計：Color system
17. 画像のレスポンシブ対応：Responsive images
18. 命名規則：Naming themes and theme styles
19. バージョン番号とリリースノート：Theme versions and release notes
20. デモストアの構築：Demo stores
21. ドキュメントと問い合わせフォームの提供：Documentation and contact forms
22. テーマサポート要件：Supporting your theme

22要件の中には、さらに細分化されたチェック項目も含まれます。
関心がある方は公式ドキュメントを参照してみてください。

この要件が定められているからこそ、Shopifyテーマストアで販売されているテーマには一定上の品質が保証されているのですが、設計・実装難易度はオーダーメイドテーマよりもぐっと高くなります。
とはいえ、一度これらの要件を満たすテーマを作成できれば、テーマストアでの販売によって幅広いマーチャントから収益を得ることができます。
　
本章の解説は、オーダーメイドテーマに焦点を絞って行います。

要件定義で考慮すると良いこと

マーチャントのビジネス形態によって、オリジナルテーマに求められる要件は大いに違うものです。コーポレートサイトとしての役割も兼ねるストア、サブスクリプション商品が中心のストア、ユーザーからの複雑なカスタマイズ情報を注文時に受け付けたいストア……それぞれ重視する機能は異なります。
まずはヒアリングを重ねながらテーマの要件を定義してゆくことになりますが、その際、あらかじめ考慮しておくと良い点をいくつか紹介します。

リリース後の運用を見据える

オンラインストアは作って終わりではなく、作ったところからが始まりです。
テーマであってもそれは同様で、リリース後にマーチャント側でどのように運用されてゆくのかを見据えて設計するようにしましょう。
たとえば、固定ページひとつであっても、Shopify上のHTML入力欄を参照するのか、Liquid側にハードコーディングするのか、動的セクションと組み合わせてテーマエディタから更新できるようにするのか、さまざまなケースが想定されます。
特に、次の要素をテーマとどのように関連させるかは、要件定義〜ワイヤーフレーム作成の段階で、マーチャントと認識を擦り合わせておくと良いでしょう。

• メニュー項目（階層構造の有無）
• テーマエディタ（動的セクションか、静的セクションか）
• メタフィールド
• アプリ

既存のテーマを研究する

Dawnだけでもテーマの参考元としては充分ですが、可能ならDawn以外のOS2.0テーマにも触れておくと、テーマ設計に大いに役立ちます。
CSSやJavaScriptの構成、Dawnには存在しない独自のセクションコンポーネントなど、「こんな設計も可能なのか」と知っているだけで、考えられる選択肢は広がるものです。
OS2.0対応かつ人気のある既存テーマとして「Prestige」「Impulse」を紹介します。

Prestige
・ビジュアルを全面に押し出した見せ方ができる
・豊富なテキストセクション
・商品メディア表示の選択肢が広い
https://themes.shopify.com/themes/prestige/

Impulse
・商品数、取引量の多い大規模なストアに適している
・実店舗販売も行っているストア向けの機能
https://themes.shopify.com/themes/impulse/

WordPressとの相違点に留意

Shopifyのテーマ実装は、WordPressのテーマ実装と近しいものとして紹介されることがあります。
たしかに類似点はあるのですが、WordPressの一般的な機能のいくつかはShopifyには備わっていないので、注意してください（URL構造を変えられない、ブログにカテゴリ機能がない、サブディレクトリを自由に作れないなど……）。

用意すべきページの確認

Shopifyでは、自動的に生成されるページがいくつかあります。
ワイヤーフレームやデザインの段階で該当ページの設計が抜け落ちていることに気づかず、実装時になってから判明すると、手戻りが発生して面倒です。
考慮すべきページの一覧を次に示します。

• トップページ
• 商品一覧ページ
• コレクション一覧ページ
• 商品詳細ページ
• カートページ
• ブログ記事一覧ページ
• ブログ記事詳細ページ
• 固定ページ
• 検索ページ
• アカウント関連ページ
• パスワード保護ページ
• 404ページ
• ギフトカード

これらのページが、ワイヤーフレームやデザインに含まれていないことに気づいたら、意図的な除外かどうかを確認したいところです。

ワイヤーフレーム・デザイン作成

オリジナルテーマのワイヤーフレーム作成にあたっては、先述した「用意すべきページ」の画面構成を、Dawnで実際に確認しながら進めるのがオススメです。
本書発行元であるnon-standard world, Inc.では、オリジナルテーマ作成のためのワイヤーフレームキットを配布しているので、併せてご参照ください。

デザインの際に考慮したいのは、オンラインストア特有のデザインバリエーションです。
商品一覧（コレクション）ページと商品ページにおける完売時・セール時のデザインパーツや、商品タグ・商品ベンダーの表示有無、商品バリエーションが存在する場合の選択パーツなどは見落とされがちなので注意してください。
また、可能であればデザインの段階までに、どのパーツをセクションコンポーネントやスニペットファイルによる共通モジュールとして扱うのかをマーチャントと合意しておけると、後続実装がスムーズに進みやすいです。
　
さらに、テーマストアでの販売を目標としたオリジナルテーマの場合は、より注意深くアクセシビリティを踏まえる必要があります。
要素のフォーカス時デザインやカラーコントラストの考慮はもちろんのこと、キーボードでのアクセスが困難であると想定されるようなパーツは、デザイン段階でエンジニアと実装方法を相談できると良いでしょう。

私達の会社で制作したShopifyテーマ開発入門書のご購入はこちらから。
完売後の増刷予定は現時点ではございません。印刷書籍をご希望の方は、ぜひお早めにお迎えください。

• 著者：川島さやか
• 出版：non-standard world, Inc.
• 判型・ページ数：B5判・248ページ
• 価格：3,850円（税込）※PDF版同梱、送料無料

特集ページへ