[Shopify] テーマのファイル構成 - デザイン開発基礎

こんにちは!フルスタックエンジニア@フラクタのナカモトです。
本日は、shopifyでWEBデザインを行う時に関わってくる「テーマ」についてお話します。

テーマとは

A theme is a collection of files that control the layout and appearance of your website. Shopify themes are built with HTML, CSS, JavaScript, and a robust templating language called Liquid.

Shopifyのテーマとは、WEBデザイン関連ファイルをひとまとめにした、デザインパッケージのようなもので、パッケージ化することで、テーマの差し替えを簡単に行うことができ、EC事業者はお気に入りのテーマを入手して、サイトにワンクリックで適用するだけでサイトのWEBデザインを変更することが可能な仕組みとなっています。

Shopifyテーマストア

ShopifyテーマはShopifyが用意している専用のストアから購入/販売することができ、EC事業者は世界中のデザイナーが開発したテーマを利用することができます。また、WEBデザイナー側からは、このテーマを作ってパッケージ化することで、テーマの販売も簡単に、しかも世界を相手に行えるようになっています!
ストアで販売されているものには、無料のものも多く、Shopify公式ブログでもそのご紹介記事があります。

ファイル構成とそれぞれの役割

では、そのテーマの中身とはどうなっているのか、今回は少しだけご紹介できればと思います。
まず、テーマには以下のように用途によって、構成が別れています。

図にすると以下のような形でイメージしやすいのではないかと。

このような構成になっており、Shopifyのオリジナルのテンプレートエンジンliquidで作ったパーツ類を組み上げていくようなイメージです。
パーツ毎に保管しておくことで、再利用や、修正する時に「あのコード、どこにあるんだっけ?」というのが少なくなってスッキリし、制作が捗りそうですね。

まとめ

今回は、Shopifyのテーマについて、概要について、お話しました。
独自のテンプレートエンジン、liquidについて覚えないといけないところがありますが、構成が決まっていることで、実現したいWEBデザインそのものに費やせる時間が多くなるんじゃないかと好感を持っております。
また、EC事業者もそんなWEBデザイナーの成果を簡単に利用でき、自分たちのビジネスに集中できそうですね!
具体的な制作方法についてもこれからご紹介していこうと思います!

Shopifyを無料で試す

Shopifyは、今なら14日間無料でお試しいただくことができます。
この機会に、あなたもShopifyでECサイトを開設してみませんか?

Shopify ECサイト構築サービスについて

フラクタでは、Shopifyを利用したECサイト構築サービスを行なっております。詳細につきましては、弊社サイトよりお問い合わせくださいませ。