Shopifyを触ってみました

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

2021/12/17Web制作ECサイト

こんにちは。ECサイトのaspサービスShopifyというのをご存知でしょうか。
今回はShopifyについて触ってみたため、何が良くて何が大変だったかを軽く説明してみます。
※一度しか触っていないいわばファーストインプレッションのようなものですので
今後より触っていくことによって使いづらかった点でも評価がひっくり返ることもあります

カスタマイズするのに良かった点

かなり自由度が高い
テンプレートエンジン（liquid）がわかりやすい

ちょっと使いづらかった点

スケルトンテーマがあると嬉しい
assetsファイルが階層化できない
テンプレート（テーマ）の管理・カスタマイズ

自由度が高い
テンプレートエンジン（liquid）がわかりやすい
スケルトンテーマがあると嬉しい
assetsファイルが階層化できない
テンプレート（テーマ）の管理・カスタマイズ
感想
参考

自由度が高い

ある意味本当に自由です。
決済画面移行は他のASPと同じくさわれませんが、
それ以外の画面であればいわばwordpressやEC-CUBE等よく使われているCMSテンプレートを触るのと同様にかなり好きなように触れます。
また、Shopifyのテンプレートエンジンliquidに設定をjsonで記述することによって、カスタムフィールドのように管理画面のカスタマイズ画面からの設定を色々と作ることが可能となっています。
https://shopify.dev/themes/architecture/settings#dynamic-sources
この部分だけでもかなり評価が高いです。

テンプレートエンジン（liquid）がわかりやすい

聞いたことがなかったものですが、twigとほぼ同等な記述でわかりやすかったです。
コメントアウトタグがちょっと冗長な気もしますが、フィルターやループ、各種判定、別のテンプレートファイルへの引数の受け渡しなども簡単でjsがわかる人ならすんなり受け入れられるかと思います。

スケルトンテーマがあると嬉しい

無料テンプレートが今現在９種類ありますが、どれも既に出来上がっているもののため、管理画面の設定画面からカスタマイズできるように書かれており、ホームページ制作会社が作るという点ではデザインベースで作ろうと思うと非常に時間がかかりがちです。
ある程度これができる、これはできないという部分をディレクター、デザイナー、コーダーが把握してからでないとむしろ完成させるまでに時間を取ってしまう羽目にもなりがちな為、ほとんど作り込まれていないベースのテーマがあると嬉しいかも。
この点はminimalテーマである程度軽減されるかとは思います。
翻ってファーストビューでの通信量などを考慮した作りになっているテンプレートもありますので、費用をかけずにさっと導入したい人のニーズで予め用意されているカスタマイズ（色味や画像の差し替え）だけであればいたれりつくせりで助かるかと思います。

assetsファイルが階層化できない

デザインマターで作ろうとすると、アイコンフォントなどだけでなく画像を切り出したものを部品として多く使いますが、とにかく階層下できないためcssやjsと合わせてすべてを一つのディレクトリに入れるしか無いのでかなりはかどりません。

テンプレート（テーマ）の管理・カスタマイズ

Shopifyのコードエディターはかなり使いやすいですが、やはりコーディングはローカルでやったほうが効率がいいのは確かです。
もちろんShopifyではそのようなことも考慮して、zip圧縮したテーマのアップロードという機能もありますが転送するための最大容量が50MB以内ということを考えると少々力不足な感じはします。
また、ローカルでの作業方法についてはtheme kitというものがちゃんと用意されているようです（先に調べておけばよかった）

感想

他のEC系ASPと比べて全体的に自由度が高く扱いやすい印象。
間口としては広く、ロゴの変更や、カラーなどの変更は作られているテーマによって管理画面から簡単に変更が可能となっていました。

自由度の高さでいえば、ホームページ制作会社も触りやすいですが、例えばヘッダーのロゴ、フッター等は一度作ったら変更することはないため静的に作ったほうが工数は減りますし、デザインベースでつくるので返って変更されないほうがいい為結局1から作り込んだほうが全体的にはスッキリと収まりそうです。
この場合は、どの部分を管理画面から簡単に変更できるようにするかを予めディレクションし、それに合わせたコーディング、及び組み込みをしていく必要がありそうです。オープンソースの組み込みとはまた別に少し違ったアプローチの仕方が必要になるのではないかなと思います。

また、組み込みに関してカスタマイズしやすいと言ってもsectionからsectionをインクルードするのにトリッキーなひと手間が必要だったり何でもできると言うほどでもないため注意が必要です。

しかし、これら上記の部分を踏まえた上でも充分に自由度が高く好印象でした。