Shopifyのカスタマイズをして気づいたこと

元同僚の依頼でShopifyのテーマをカスタマイズしたので、
その時調べた内容を勿体ぶって小出しにしていこうかなと。
(とはいえ続きを書くかわからんので続いたら番号振るつもり)

私の中ではECのカスタマイズは楽天だとかColorMeだとかで止まっていて、
最近の動向は把握してなかったんですが…このShopify…すげえぞ…!

Shopifyとは

Shopifyは、カナダのオタワに拠点を置くShopify社が運営するeコマース用のプラットフォーム。オンラインストアのテンプレートやPOSシステムを含む。

https://ja.wikipedia.org/wiki/Shopify

雑にいうと海外産のネットショップが作れるサービス。
楽天やYahooのように「ショッピングモールの中の1つのお店」ではなく、「独立した1つのお店」を作るものである。自由度が高い代わりに、ショッピングモールの恩恵を受けることができない。

Webドカタ視点でびっくりした点

「カスタマイズするぞ!」という立場になってから仕様について調べたんだけど、とにかくもうすごくすごくナウい。ECのテンプレートっていうのは自由度が低い割りに仕様がごちゃついてて扱いづらいしソースも汚いというイメージが(主に楽天のせいで)根強く残っていたので、これも似たような感じかなあ😓とか思ってたのがいい意味で裏切られた。

1. CLIツールが用意されている

テーマキットという公式のCLIツールを利用すると、ローカルでテーマを編集できる。
「え!?CLIあるんだ!?」とテンション爆上がり。実際使って編集してたんだけど、マジでこれが神すぎた。

ブラウザ上でもテーマエディタがあって操作はできるんですよ。

ブラウザ上のテーマエディタ

これはこれでよくできているんだけど、やはり手に馴染んだエディターを使いたいじゃないですか。
なのでローカルで編集した内容をwatchで監視して同期させる機能だけでも非常に助かった。

2. liquid

ShopifyがRubyで作ったテンプレートエンジンのliquid
なんとOSSなのでGithubでソースが見れるしテンプレートエンジンの必要があれば利用もできる。

拡張子は.liquid。ちょっと長い。

アイコンが水玉でかわいい

この拡張子を使っておけばHTMLだろうがCSSだろうがliquidのテンプレートタグが使えて便利なのだけど、逆にliquidの仕様を把握してないとテーマのフルカスタマイズは不可能だから学習コストがそれなりに要求される。
とはいえテンプレートタグが {% これ %} とか {{ こういう }} 書き方だし、for文とかif文なんかも使い方は他のテンプレートエンジンと似たり寄ったりなので、何かしらテンプレートを触ったことがあるなら苦もなく使えるはず。
ドキュメントも充実しているし、チートシート見てれば大抵のことはどうにかなる。

3. 豊富すぎるAPI

ショップを構築するための機能がAPIとして公開されているので、外部サイトにショップ機能を埋め込んだりもできるし、AMPやjamstack構成でも作れてしまう。
Gatsbyは公式がShopifyをサポートしているが、実際作られたサイトを見てみるとECにあるまじき表示速度でびっくりする。
テーマによってはカートの実装すら変更してるのもあったりして、APIが使えることによる自由度が半端ない。

今回外部からリクエストするAPIは使わなかったけど、このAPIの充実っぷりはさすが海外のサービスだなあと感心しきりだった。

4. セクション機能

昨今の Web業界には「コンポーネント」という概念があるけど、まさにそのコンポーネントの単位で入力フォームを定義できるのがセクション機能。定義されたセクションは管理画面から編集できるようになる。
セクションは作法通り設定すればどこにでも導入することができるので、Webやってると1度は言われる「ブラウザから編集できるように作って」をものの数分で実現することができるのだ。

この機能に関してはHeadlessCMSで入力項目を設定するようなものだと考えればわかりやすいかもしれない。
というかShopifyがEC機能つきHeadlessCMSというのが正解かも?

Baseのようなブロックエディタではないから、テーマの作成者が設定した範囲でしか編集しかできないのだが、「エディターが意図しないレイアウトをしてデザインを破壊する」という事故が無いので、テーマ作成者側としてはこれくらいの縛りがある方が安心できると思う。

5. アプリによる機能拡張

WordPressのプラグインのように、必要な機能をアプリで追加することができる。

提供される機能しか使えないというECに比べると圧倒的に自由度が違うので、他のECサービスで満足できなかったなら一考の価値があると思う。
そしてこのアプリに関してもAPIが公開されているから自分で開発することもできるのだ。

6. 設定がJSONで保存される

これはテーマキットを利用していて気づいたことなんだけど、管理画面で設定したカスタマイズ内容は利用中のテーマフォルダにある setting_data.json に保存される。データベースではないのだ。(商品とかは含まない)

Gitとかのバージョン管理で setting_data.json を含めておけば、うっかり設定を消し飛ばしたり、テーマを削除しても復元ができるので便利だなと思った。

Shopifyの難点

英語なところ。

テーマもアプリもサポートもとにかく英語。日本語化されているものはまだ少ない。
有料テーマやアプリを買ったとしても、日本語対応されてなければ自力で翻訳しないと注文画面のUIが全て英語になります。

後述しますが日本語化自体はそう難しくないので、テーマの日本語化だけでお金取るような業者には注意した方がいいですね。

Shopifyは日本で流行るのか?

日本には楽天・ヤフオク(PayPayモール)・メルカリと、すでに覇権取ってるサービスがあるし、ネットショップ作るサービスも色々とあるので後発は流行らせるは難しいと思う。

では、ネットショップを作る道具の一つとして考えた場合はどうだろうか?
カスタマイズをしながら仕様を見ていて、Shopifyに向いているのは以下に当てはまるケースかなと思った。

フロントエンドにコストを割くことができる

APIとliquidによってあらゆるカスタマイズができるという強みを生かすには、デザイナーとフロントエンド人材が必要不可欠なので、そこにお金をかけられるかどうかがかなり重要になってくる。
フロントエンドは少なくともliquidを理解できないとお話にならない。

ここにコストがかけられないのであれば、マークアップ不要のカスタマイズ機能を持つサービスを利用する方が自由度は高くなると思う。

30代以下の若い世代をターゲットにするショップ

マーケティングの主戦場をInstagramにする場合は特に強い。色々と連携させるアプリが揃っているし、ショップもカートも徹頭徹尾おしゃなので相性がいい。Instagramから誘導してもキラキラオーラで目を眩ませたまま購入までいける。他のサービスでも注文画面になると急にダサいとかあるし、楽天は楽天臭いあのUIやデザイン見た瞬間に覚めちゃいますからねえ…。
なので流行に敏感でインスタを主食として生きてる若者向けのショップを作るなら最適だと思う。

多言語対応のショップ

多言語対応は管理画面に内蔵されているので扱いやすい。
テーマはi18nで、JSONファイルによって設定されています。
日本語未対応のテーマでも、設定を増やすだけで対応させることができる。

さらに翻訳アプリをインストールすることでサイト全体を別の言語にするなんて芸当ができます。

国内だけで売ってたけど海外の人にも売りたいな〜というショップにはすごく相性がいいと思います。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください