【shopifyのテーマ】似てるけど違う「テーマ」と「テンプレート」
shopifyで利用する【テーマ】はテンプレートの様な物ですが、テンプレートとは少しだけ存在が違います!
テンプレートとしての使い方ももちろん可能なのですが、テンプレートであってテンプレート以上の存在なのが【テーマ】
なんのこっちゃ?
だと思うので、これからそれを解説した後、無料テーマと有料テーマも実例をいくつかご紹介しつつ解説していきたいと思います。
95%自由設計 出来るのがshopifyの強み
目次
テーマとテンプレートの違い
まず最初にこの違いです!テンプレートと言うのは要するにテンプレートなので「きれいな形が出来上がっているけど、形が変えられない物」とでも言いましょうか、金型みたいな物です。
枠が決まっていて、それを変化させることが出来ません。
shopifyのテーマもコード編集をしない場合には完全にこのテンプレートと同じ!と言う事になりますが、shopifyのテーマは「コード編集」がもの凄く柔軟に出来るのが特徴です。
意味は分からなくても大丈夫ですので、まずそのコードを・・・画像で見てみましょう。
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/efde16b7fcbf9bd0c41f5bdafe9c560b.png)
見せられたところで、さっぱりわからないですよね^^;
通常のホームページは「html+css」で構造を作るのですが、shopifyはここに「liquid」と言う独自の言語を導入しています。{{ }} とか {% %} で囲まれてる部分がそうですね。
この仕組み自体はWordPressでホームページを作るのに似ています、WordPressも様々なテンプレートが用意されつつも、1から完全にオリジナルテンプレートを作成する事で、思うようにホームページを作る事が出来る事で「ブログ用のツール」から今ではホームページを作るならWordPressと言う存在にまで昇格したCMSです!
ただshopifyはECサイトのASPなので、WordPressの様になんでもかんでも自由に設計できるかと言うとそうではありません。一定部分はshopifyの機能を使わないと成立しない仕組みになっています。
その仕組みに対応させるための言語と「liquid」と言う言語が存在しているわけです。
通常、他のASPでECサイトを作ると専用言語までは用意されていないので(ショートコードなんかはある程度用意されている)、完全なる自由な制作は出来ずテンプレートの中でカスタマイズする事になります。 その為、大きな変化に関しては制限が出てしまいます。
例えばWordPressでもテンプレートを元にした場合は改造(カスタマイズ)に限界がどこかで出てしまいます。これがテンプレートの限界。
しかしshopifyは何度も言うように【テーマ】です。テーマなので大筋の道筋は出来上がっているけど、テーマにを元に何でもカスタマイズできるのが他のテンプレートと違う所なんです。
何でもカスタマイズ
の意味合いが限りなく無限に近い。と言えばいいでしょうか。とにかく改造し放題です!
オリジナルテーマは滅多に作らない
改造し放題のテーマがある中で、WordPressの様に完全オリジナルテーマを作る事は可能か?と言うと可能です。
ただしこれは可能か不可能かと言う話にしかなりません。実際ほとんどのサイトで完全オリジナルテーマを使う事はありません。基本的には何かしらの【テーマ】を下地にカスタマイズして行くのが一般的です。
何故か?
もし完全にオリジナルのテーマを作ろうとした場合には
- カートに追加ボタン
- 会員ログイン機能
- マイページ
- カートページ
- 検索機能
- フィルター機能
- etc...
これらECサイトの普通に備わっている機能そのものも自作でプログラミングして行く必要が出てきてしまいます。いわゆる「フルスクラッチ制作」に限りなく近い工程が必要になると言う事です。
1から機能を作る工数は莫大ですので、せっかくASPを使って、費用感は抑えつつECサイトを作ると言う本来の目的から言うと本末転倒です。
ですので「やれるけどやらない」ケースがほとんどです。もし予算が500万円以上あるのでしたら、完全にオリジナルのサイトを作ってもいいでしょう!何でも出来ます!!
結果的にshopifyをサイトを制作する時には最低限度の機能制作の手間を省くためにも、テーマを元にカスタマイズしながら作るケースがほとんど!と言う事になります。
テーマとは積み木セット
テーマが出来る事はテーマによって違います。後で無料テーマ、有料テーマのいくつかをご紹介しますが、テーマ毎にオリジナルの使いやすい機能があったりするので、テーマが出来る事はせっかくだからちゃんと使ってあげるのもshipifyのテーマで出来る事の1つです(当たり前ですが)
それ以外にテーマが持っていない機能に関しては代表的なカスタマイズと言えば「アプリ」の追加を行うことで、どんどん幅を広げていく事が出来ます。
が、今回はテーマについての記事なので、アプリではなくテーマで出来る事に絞りましょう。 テーマは好きなだけカスタマイズが可能です!
shopifyのテーマは基本的に「section」と呼ばれるブロックを積み重ねてホームページを作っていく「積み木」の様な構造をしています。
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/103f0455b73b3a3db0fd5eed1e3a92d3.png)
sectionに関してはテーマその物が元々持っている物があり、このsectionだけでもホームページとしては完成できますので、これだけで作った場合はまさに「テンプレート」と言う事になります。
ただし、このsectionはいくらでも改造可能ですし、sectionの自作も可能です。
カスタマイズなり自作なりをしたsectionは積み木のブロックとして活用できますので、ホームページ上のどこにでも差し込むことが可能です。
要するに最初に使ったテーマは子供に最初に買ってあげる「積み木の初心者セット」みたいなもので、積み木が足りなくなると子供からせがまれて新しい積み木のパーツ買いますよね?(この仕組みはプラレールとかの方が想像しやすいかも)
なのでこの新しく買う積み木が、shopifyの場合は「カスタマイズsection」だったり「自作section」だったりする感じです。
だいたい初期に買った初心者セットでは積み木が足りないじゃないですか?なので買い足すのと同じ原理だと思って頂ければわかりやすいかと思います。
他のECプラットフォームはその積み木が買い足せない!もしくはショートコードとかで、やはり決まりきった「有形」の積み木を足すようなイメージですが、shopifyのsectionは形が「無形」でいかようにも変化させられます。
それによってほぼほぼ無限大のカスタマイズ性を持っているのがshopifyのテーマであり、テーマとテンプレートは違うぞ!と言う事になります。
限界はある
とは言え初期に買った積み木の中に絶対に使わないといけないパーツが存在するのも事実です。
要するにカートに追加する機能や、会員ページ等の初期からついている部分ですね。ここのパーツも自作は可能ですが、それは先ほども言った通り、やるとえらい工数と費用が掛かります。
なのである程度は初期に買った積み木を使わざるを得ないシーンが出てきます。 なので私がよくクライアントさんにお伝えするのは
テーマを使う以上、変更しない方がいい部分もありますが95%はオリジナル化出来ます
このようにお伝えさせて頂いております。
いじらない方がいい絶対領域がある感じで、この辺りは専門にして扱っていないと気が付かない部分ですね。
余談ですが、正直この「絶対にいじらない方がいい部分」を知らないまま構築して裏側がファイヤーしちゃってるサイト制作にはよく出会います(弊社にそう言う火消の依頼がよく舞い込みますwww)
無料テーマと有料テーマ
テーマには無料のテーマと有料のテーマがありますが、全部作れるなら有料テーマなんていらないんじゃない?とここまでの話で思っているかもしれませんが、そうではありません! 先にも言った通りテーマは「積み木セット」です。例えるなら無料テーマは「初心者セット」で有料テーマは「豪華版セット」みたいな感じです。
初心者セットでも出来るけど、豪華セットならもっと出来る物って世の中多いじゃないですか。あれと全く一緒です!
とは言え豪華セットでも船は作れるけど、飛行機は作れない・・みたいな時にさらにパーツを買い足しますよね?そのイメージを持っていただけると良いかと思います。
あと、絶対的にいじらない方が良い領域!こちらもあるとお伝えしているかと思いますが、この部分もテーマによって動き方などが違うので、僕は割とその絶対いじらない方が良い領域で欲しい機能を持ったテーマを選ぶのが良いと思っています。
後のパーツは作ればいいですけど、絶対動かさない方がいい所は動かさない方がいいからですね。
無料テーマ
積み木のパーツ数が少ないけど最低限度の事は出来るのが無料テーマ
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/0a8d6811fa6491d0ba9ea389f20953df.png)
簡易サイトなら十分作れちゃいます、上記の積み木でも簡単な塔なら作れそうですよね?それと同じ感じです。
Dawn
shopifyを代表する無料テーマで初期状態から入っているテーマです。
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/19125cee3b399e0954037c7d23e60a41.png)
機能的にはまさに無難!「Bunan of the Year 2022 受賞」と言っていいでしょう。オール3の生徒さんだと思えばよいかと思います。
基本的な機能は全部有しているし、商品一覧のページも普通。フィルター機能も普通に使える。 トップページ制作に関しては正直もう少しパーツ欲しいよな?とは思うけど、シンプルなページならやり切れちゃうぐらいの機能はある。
とってもプレーンなテーマなのでカスタマイズサイトを制作する場合には、このDawnをベースに組み始めるケースがとても多いです!
Taste
正直、shopifyの無料テーマは9種類あるんですが機能的には大差ありません。
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/b94e408d8952b7c2b30efcabce82d71f.png)
2つ目の紹介でチョイスしたTasteはしいて言えば大き目な写真を見せるのに向いているかな?と言う感じですがDawnと機能的な差はほぼない!と言ってもいいので、無料テーマに関して言うと9つを見比べて雰囲気が自分の作りたいサイトに近しい物を選ぶと良いかと思います。
癖が強いCraveとかはカスタマイズしたパーツと物とテーマのパーツの相性が合わせづらいので、カスタマイズしたい場合は選ばない方が良いかとは思います。
有料テーマ
積み木のパーツが多かったり何かに特化したセットなのが有料テーマ
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/b3e8f6e0f6494938e02e434874348cf1.png)
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/aac9019df22d61ea46e27d29ae145489.png)
例えば「パーツがとにかく多い」とか「列車に特化してる積み木セット」みたいになっているのが有料テーマです。
Impulse
有料テーマの2台巨頭の1つではないでしょうか?人気があると言うのはそれなりの理由があるんです。
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/76382e210cd6b352e5c3b967d4f2c096.png)
テーマの持つパーツを組み合わせるだけでもしっかりとオシャレなサイトが作れる上に、変に癖もないのでカスタマイズもしやすいテーマなので、ベースとして使いやすい!と言う所もあって、弊社でも採用実績が多いテーマです。
写真で攻めていきたいアパレル系のサイト制作には方には特におすすめですが、多商品サイトでも使いやすい機能が揃っているので、弊社で制作したグッズ系の販売サイトに使った時も割と使いやすかったです!(ほぼオリジナルセクションで作りましたけど、ヘッダーが魅力的でした。)
また同じ会社(Archetype)が制作しているテーマは本当に優秀な物が多く「Expanse」「Motion」も複数回の採用実績があります。
Prestige
こちらも2台巨頭の有料テーマです。人気がある理由が使いやすさではない気はしてます・・・
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/2a8e0422db398a80f320d30e01e2f18e.png)
その名の通り、高級感のあるサイトに向いているテーマかと思います。何が使いやすいって、有料テーマでは珍しく何もしなくても「日本語対応」している所がポイント高いですかね。
他のテーマは基本的に翻訳作業が必要になります。
(この辺は実績数が多い会社さんは他の有料テーマでも翻訳ファイルを持ってたりする)
またshopifyのオフィシャルブログで「土屋鞄」さんがこちらのテーマを元に作っているサイト!だと紹介されているのも人気の理由と思いますが、土屋鞄さんはカスタマイズしまくっているのでほぼ原形がありません。要するにベースになっているだけです。
よくあるご依頼で「土屋鞄さんみたいなサイトが欲しい」と言うご要望がありますが、正直にあそこまでカスタマイズするのは数百万円はかかります。非常に素晴らしいサイトだと思いますが、商品情報等の管理だけでも専任者がいないと運用自体不可能と思いますね。
また Presgite 自体は実は結構癖が強いので私自身はあまり好きではありません。高級感を出したいサイト制作の場合はありですが。重たいですしね。
おなじ会社(Maestrooo)さんでしたら私的には以下のテーマがおススメです。
Focal
Prestigeと同じ会社さんですが、結構機能的な差はあります!
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/7df580dbb26f494816fe29077b1a2726.png)
なかなかユニークな機能を備えていて、商品ページで多色展開している商品のカラー毎の写真がめちゃくちゃ見やすい機能があります。設定に癖がありますが、他にはない機能でこの機能が欲しいためだけに$320を投資する価値は十分にあります!
アップセルしやすいsectionも付いていて、機能を重視したい場合にこのテーマの機能がハマるならかなりオススメなテーマの1つです!
同じ会社で「werehouse」と言うテーマもありますが、こちらは多商品サイトだと使いやすいですね。多分一番人気ないですけど。(Maestrooo)さんは一番人気が一番使いづらいですwww
showtime
大量の商品を陳列したいならこれ!残念ながら大谷翔平選手とは関係ないですが。
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/80d9f77424b1a01bbe7691750e671de5.png)
商品のグリッドからヘッダーのメニューまで、大量商品から物を選ぶための仕組みがしっかりと出来上がっています!
特にヘッダー周りは「いじらない方がいい」部位なので、この機能を他のテーマで組み込むとなると、こっちのテーマ使った方がトータルの金額安くすんだわ!と言う結果になるので、ヘッダーでこの機能が欲しいなら、もうこれにした方がいいぐらいです!
色々と癖強めな部分もありますが、商品量があるサイトでしたら是非ご一考ください!と言う感じ。
Pipeline
よくオススメはするけど採用されないテーマwww
![](https://blogstudio.s3.theshoppad.net/cave-de-script-home/4044db3878d873ec61746e358dd4780d.png)
シンプルかつ高機能とでも言いましょうか、これと言って癖が無いのでカスタマイズする人間からすると使いやすいんですよ!
何気に商品ページで追加買いを狙う為のパーツが配置できるようになっていたりするし、そこタブで切り替えらえると商品点数見せられていいね!みたいな売上アップを狙う為のパーツもたくさん用意されている。
見た目に派手さが無いので他のテーマ見た後だとなかなか評価されづらい玄人好みなテーマではあります。
実際にカスタマイズしまくって制作する時はテーマの見た目よりも「テーマの機能」で選ぶと良いので、そうなった時の候補としてほぼほぼ毎回加えるんですけど、やっぱり落選して採用実績は0なんです。
テーマについてまとめ
これで大体テーマとテンプレートで何が違うのか、大筋の事はわかったかなと思います!要するにテーマって言うのは
積み木セット
だと言う事ですね! 積み木なので積み木のパーツを増やせば新しい物が作れるのと同じで、セクションを作っていけばオリジナルサイトの製作が可能になっている仕組みです!
それと超改造し辛い基幹的なパーツに関しては思いっきりいじる事も出来るけど、極端な工数が生まれることもあるので、なるべくならそういう部分はテーマに沿った方が費用も時間も幸せになれる。なんてことを押さえておけばよいかと思います。
これさえ押せえておけば、最初はテーマの機能でサクッと作っておいて、後から費用をかけて思いっきりカスタマイズする!なんてことも可能です。
あとはご自身のサイトにとって何がいいのか?と言う視点でベースのテーマを決めてから制作にあたってください。(よくこの順序を間違えます。テーマは必ず先に決めましょう!)
その結果が無料テーマなことも有料テーマなこともありますし、複雑なサイトの場合は有料テーマでほしい機能をいくつか買ってしまって、あとはカスタマイズとアプリで追加していく!と言うのが一番オリジナリティあるサイトの製作で使う手段です。
shopifyのテーマについてテンプレートを違う!と言う事を理解しつつ理想のサイト制作を実現していきましょう!!