ノンエンジニアがECプラットフォームShopifyを始めて分かったこと①デザインカスタム編

f:id:sharpb9c42f:20201110164139p:plain

こんにちはデザインチームオカベです。
突然ですが、自分の勉強の意味合いも含めECサービス「Shopify」について主にデザインカスタマイズの面でまとめていきたいと思います。数あるECサービスの中でShopifyである理由は特にはありません。

Shopifyとは

Shopifyとはオンラインストアのプラットフォームのひとつです。オンラインストアなので商品管理や顧客管理など販売関連の仕組みはもちろん、ブログ機能などもあるので総合的なブランドサイトが用意できます。

他のサービスとの違い

同じようなEC系サービスに「futureshop」や「BASE」「STORES.jp」などあります。予め用意された環境に自社ショップを開店するようなイメージ。ショップデザインのカスタマイズもできますがサービス毎の制約に縛られる場合もあります。

それとは別にECサイト向けのシステムとして「EC-CUBE」やプラグインを利用する必要がありますが「WordPress」などがあり、こちらの場合前者サービスよりカスタマイズ自由度は高くなるものの、システムを実装するための環境の用意から必要になるのでスタートの敷居が高いような気がします。

Shopify自体はEC系サービスに当てはまりますが、後者に近い形の自由度の高いカスタマイズが可能な印象を受けます。(全てのサービス・システムにを触ったわけではないのであくまで現時点での感想です)

管理画面

全体の画面はこんな感じです。
カスタマイズは左メニューの「オンラインストア」>「テーマ」から触れるようです。

f:id:sharpb9c42f:20201110164213p:plain

ShopifyにもWordPressの様にデザインテーマの仕組みがあり、見た目からカスタマイズする方法と、コードから編集する方法の2種類あります。

コードから編集する方は頑張れば0からオリジナルテーマを作れそうな期待感はあります。

f:id:sharpb9c42f:20201110164235p:plain

テーマをGUI形式でカスタマイズ

f:id:sharpb9c42f:20201110164306p:plain

デザインカスタマイズの1画面。ロゴの差し替え、配置、サイズなどを直感的に編集できる作りになっています。(こちらはあまり興味がないので割愛します)

コードを直接編集してカスタマイズ 

f:id:sharpb9c42f:20201110164324p:plain

気になるのはこちら。

Shopifyは「liquid」と呼ばれるパーツ単位?のコードを組み合わせでテーマが作られている様です。

要はこの「liquid」をどんどん編集していけば良いのですが、まだどのliquidがどういう作用をしているのかチンプンカンプンですので、これから解剖していきます。

 

とりあえず今回はまだ触り始めなのでここまでですが、今後理解できたところをまとめていければと思います。

オカベ カテゴリーの記事一覧 -