Shopifyテーマ選定のポイント
こんにちは。
FED（フロントエンドデザイン）ディビジョンの城島です。
フラクタのnoteでは、日々さまざまなメンバーがShopifyに関する情報やノウハウを発信していますが、デザインについて触れる記事はあまり投稿されてこなかったので、
これからはデザイナーの視点からお伝えできる情報も展開していきたいと思います。
[私について]
私は現在入社8年目で、入社以来ずっとECサイトに関わってきたアートディレクターです（入社当初は運用アシスタントでした！）。
ブランド表現と時代を問わない普遍的な親切さを兼ね備えたECデザインが得意で、車の免許などは持っていませんが色彩検定1級やカレー伝道師などの資格保有者です！よろしくお願いします。
さて、本題に入りますが、今回お伝えしたいのは「Shopifyテーマの選び方」についてです。
Shopifyの魅力の一つとしてあげられるのが、デザイン性抜群の豊富な「テーマ」の存在だと思います。
高いデザインセンスや専門的な知識や技術を豊富に持っていなくても、
テーマを使って素敵なサイトを気軽に構築できますね。https://themes.shopify.com/
ただ、漠然とテーマストアを眺めていると、あれもこれも良さそう･･･と迷ってしまいませんか？
収集がつかなくなると、一周回ってあれもこれも、やっぱり違うかも･･･となってしまうことも･･･。
そんなテーマ選びについて、普段どんなところにポイントを絞って行なっているか、私なりの考え方をご紹介します。
要件定義は大前提！
「要件定義」というと、システム面で使う言葉のようなイメージがありますが、デザインにおいてもとっても重要です！
テーマ選定を始める前に、ブランドの方針や目的にあったサイト全体のページ構成、各ページに載せる情報やその中でも特に強調したい情報などを整理します。
ポイントその1：
「優先度の高いコンテンツのことだけを」イメージして探す
例えば･･･
・「豊富な商品ラインナップが売りである」
・「商品のバリエーションを見せ、商品ページへの導線を多く設けたい」
そんなときは、とにかくTOPページに商品がたくさん並んだ時の見栄えが素敵と思うテーマをチェックしていきます。
商品名と価格だけでなくコメントが添えられるものなども効果的だったりしますね。
商品をスライダーで見せられる参考テーマ（Fashionpolism）
https://themes.shopify.com/themes/fashionopolism/styles/galleria/preview
例えば･･･
・「コンテンツの更新性が見所のサイトにしたい」
・「撮影やライティングにこだわったコンテンツが売り」
そんなときは、ブログポストの見せ方が特徴的で素敵なテーマをチェックしていきます。
画像が大きくて目立つ・記事の表示数が多い・レイアウトが面白いなどの特性を見ていくと、良いテーマが見つかります！
スマホで見たとき、縦に並べてスクロールさせるのか、スワイプ表示かなども確認するようにしています。
ブログポストの見せ方が面白い参考テーマ（Boost）
https://themes.shopify.com/themes/boost/styles/flourish/preview
こんな風にまずは特に見せたい箇所だけをイメージし、
良い表現ができそうなテーマをピックアップしていきます。
全体を見てしまうとどうしてもきりがなくなってしまいがちですが、
焦点を絞って見ていくと、「このレイアウト使えそう」「この見せ方が合いそう」といった気づきが得られるでしょう。
ポイントその2：
具体的な「ピンポイント要望」を叶えられるものを探す
クライアントに対して提案を行うとき、デザイン的・機能的な面での具体的な要望については初期の段階でしっかりヒアリングします。
全体の雰囲気でなんとなくテーマを決めて進めてしまうと、後になってポロリポロリと不便な点に気づいたり、
そこから予期せぬ大幅リソース投入が必要になることも･･･。
いただくご要望の例を挙げると、
「商品一覧には並び替えやソート機能がほしい」
「商品詳細は王道2カラム」
「カート画はドロワー表示にしたい」
など。
これらを実現するのに程遠いテーマは選択肢から一旦外していきます。
たくさんあるテーマの中からいいものを絞るには、思い切った消去法も大切です！
ただ、このようにピンポイントなご要望をいただく場合は、なぜそうしたいのか、理由をお伺いするようにしています。
ご要望がたくさんある場合、すべて網羅できるテーマを見つけるのはなかなか大変なので、優先順位をつけるためにも必要な情報になります。
また「他の方法でも適切に課題が解決できますよ」という場合は、こちらから新しいご提案をさせていただくこともあります！
私たちは、点でなく面で物を見て考えた上でのご提案を常に心がけています。
ポイントその3：
なるべく癖のないデザインのものを選ぶ
ここまではスポット的な視点での選定ポイントを挙げましたが、
ここからは全体的なフロントデザイン面のお話です。
テーマ選定の際、直感的に良いと思うものをピックアップするのも悪いことではないのですが、
テキスト情報・商材・イメージビジュアルなどの要素が自社（もしくはクライアント）の素材に差し替わることをイメージしながら見てみましょう。
･･･そうなると、やはりシンプルなものは汎用性が高く、どんなイメージにも振り切りやすい傾向が強いです！
ブランドの方向性やユーザーの好みにカッチリはまれば良いですが、
例えば
・ドロップシャドウほか装飾の印象が強いテーマ
・特徴的なエフェクトがふんだんに使われているテーマ
・商品画像のテイストが全体イメージを左右するテーマ
などは、なかなか取り扱いが難しくハードルが高め･･･。
汎用性を求める場合はこれらの選択肢はなるべく避け、シンプルな印象のものを選ぶことを推奨します。
私が選定をするときも、そのように心がけています。
テーマストアに掲載されているデモサイトの数々は実際に運用されているショッピングサイトではありませんが、
おそらくいずれも「これくらいの規模の」「こんな商材を扱う」「こんなイメージのブランド」･･･といった、ショップの背景を仮定して設計されていると思います。
どれも素敵に見えるのは、それぞれの仮定に対して最適な見せ方が叶えられて、そのためのデザインが作り込まれているからでしょう。
なので、そこに別のコンセプトの情報が入ってくると、場合によっては印象が変わってしまうので注意したいところです！
参考テーマ（Grid）
https://themes.shopify.com/themes/split/styles/cuber/preview
とても洗練されてかっこいいテーマですが、
商品画像のテイストや文字量によって印象を左右するので、
運用時のレギュレーションが重要になってきそうな例です。
忘れてはいけない下層ページ
はじめは各テーマの「TOPページ」をじっくり吟味してしまいがちですが、
私たちは、コレクション・商品ページやブログのページを特によくチェックするようにしています。
Shopifyのテーマカスタマイズ画面で実現不可能な表現がどうしても必要なときは、状況に応じてテーマリキッドそのものを編集し実装することもあります。
ですが、動的要素が含まれるページのテーマ改修は少なからずリスクを伴うため、あまり推奨しません。
購入に関わる部分、運用面に影響を及ぼす部分などは極力デフォルトの状態が理想的であるテーマを選ぶようにします！
「Shopifyデザインカスタマイズプラン」始めました
テーマストアにはたくさんのテーマがあり、それぞれ良いところや特性を持っていますが、意外とかゆいところに手が届かない･･･といった落とし穴もあったりします。また、デザインにこだわるクライアントの方からはデザイン面の追加要望をいただくことも多いです。
そのことから、フラクタではTOPページデザインを1から行う「Shopifyデザインカスタマイズプラン」をご用意しています！
ベースとなるテーマをうまく活用しつつもデザインの幅をもっと広げて、
ブランドの「らしさ」を最大限に表現するサイトづくりのお手伝いをしたいと思っています。
ある程度運用には慣れていらっしゃるお客様向けのプランではありますが、もっとデザインにこだわりたいけど人手が足りない！といったブランド担当者さまには特におすすめです。
このプランに関しては、別の記事で詳しく説明できればと思っています。
もちろんご提供する内容はご相談に応じますので、気になる方はお気軽にご相談ください！
フラクタでは、ブランディングやEコマースに関する情報を発信しています。ぜひフォロー、スキをお願いいたします！