Shopify Liquidで独自デザインをどこまで作り込めるかの境目

Shopifyのテーマを選び、色とフォントを整え、写真を差し替える。そこまでは気持ちよく進むのに、途中で「思っていたのと違う」に行き当たる。そんな経験はありませんか。

ご相談の場でよく出るのが「Shopify Liquidなら、どこまでできますか」という質問です。テンプレート言語の機能の話として聞かれることがほとんどです。

かいなの見立ては少し違います。Liquidの限界は技術としてではなく、運用の限界として先に現れます。作れるかどうかより、作ったあとに誰が変えられるかで、そのデザインの寿命が決まります。

Liquidのカスタマイズが「できる・できない」で語られてしまう理由

テーマは見た目の器ではなく、更新の手順書でもある

Liquidはテーマの中で、商品名や価格、在庫の状態といったデータを呼び出して表示するための言語です。HTMLの中にデータの置き場所を書いていく、と考えると分かりやすいと思います。

ここで見落とされやすいのが、テーマがデザインの器であると同時に、公開後の更新の手順そのものを決めているという点です。

どこを管理画面から変えられるようにするか。どこはコードでしか変えられないままにするか。その線引きが、そのまま日々の運用の重さになります。

かいながLiquidで最初に決めるのは、誰が触る場所か

実装に入る前に決めるのは、配色やレイアウトではありません。公開後に社内の誰が、どのページの、どの部分を変えたくなるかを先に洗い出します。

変えたくなる場所はセクションとブロックに切り出し、テーマ設定から編集できるようにします。逆に、そうそう動かさない骨格は固めて作り込みます。

この順番を逆にすると、見た目は理想どおりなのに、文言ひとつ直すたびに制作会社へ依頼が必要なサイトができあがります。

コードで書けることと、管理画面から変えられることは別の話

Liquidは条件分岐や繰り返しが書けるので、商品タイプごとに表示を変える、在庫が少ないときだけ表記を足す、といった制御は素直に組めます。

ただし、その条件をあとから運用側で足せるかは別の設計です。商品のタグやメタフィールド（商品ごとに追加できる自由項目）に紐づけておけば、担当者が商品登録の画面で切り替えられます。

条件をコードの中に直接書き込むか、データ側に逃がすか。ここが独自デザインを長持ちさせるかどうかの最初の分岐になります。

ブランド体験がLiquidで伸びる場所と、伸びにくい場所

商品ページで効くのは装飾より、迷いを解く出し分け

商品ページのカスタマイズというと、装飾の話になりがちです。実際に購入の手前で効くのは、その商品を選ぶときに迷う部分を先回りして出すことです。

サイズで迷う商材なら寸法の見方を、素材で迷う商材なら手入れの条件を、同じ位置に必ず出す。商品タイプごとにLiquidで出し分ければ、テーマ標準の枠内でも十分に組めます。

ここはLiquidが得意な領域です。テーマの構造を壊さずに、ブランドらしい説明の順番をつくれます。

読みもののページで買える状態をつくろうとすると窮屈になる

反対に、Liquidが苦しくなるのは、産地や製法を語るページの中にそのまま購買を置きたくなったときです。

Shopifyのブログ機能でも商品への導線は作れますが、記事のレイアウト自由度や、コンテンツの構造をブランド独自に組む余地は限られます。結果として、読みものはWordPress、購買はShopifyという分け方に落ち着きやすくなります。

この分断をなくす構成が、フロントを自由に設計しつつ在庫や決済はShopifyに任せるHAKOBのヘッドレス構成です。Liquidの話が構造の話に変わるのは、たいていこの地点です。

自社ECを運営して分かった、試せないデザインは古びる

かいなは厳選日用品のECであるSOREDAKEを自分たちで運営しています。コンセプトで品揃えを束ねているので、並べ方や説明の切り口を何度も変えたくなります。

そのとき、変更のたびにコードを開く必要があると、試すこと自体をやめてしまいます。売れない理由が並べ方にあるのか商品にあるのか、確かめる前に手が止まります。

自社スタジオで撮った写真が増えても、見せ場をページ側に用意できなければ、写真は溜まるだけです。運用の軽さは、作り込みの質と同じくらいデザインの寿命に効きます。

Liquidで粘るか、ヘッドレスへ移すかの分かれ目

テーマ更新のたびに作業が発生しているなら構造の問題

テーマのコアファイルを直接書き換えるカスタマイズを重ねると、テーマ本体のアップデートのたびに差分を当て直す作業が発生します。

この作業が定例化しているなら、それはカスタマイズの量の問題ではなく、拡張の仕方が構造に合っていないサインです。

まず試すのは、セクション単位への切り出しとカスタムファイルの分離です。それでも追いつかないなら、テーマの上で粘り続ける前提そのものを見直す段階に入ります。

アプリで埋めている機能が増えてきたとき

やりたいことをアプリで足していくと、表示速度と管理画面の複雑さの両方に効いてきます。アプリごとにスクリプトが読み込まれ、どこが何を出しているのか把握しづらくなります。

判断の目安は、月額のアプリ費用の合計ではなく、退会したときに戻せなくなる表示がいくつあるかです。

戻せない箇所が増えているなら、それは自社の体験の一部を外部に預けている状態です。自前で持つべきものを選び直す時期にあたります。

ヘッドレスをすすめない場合

標準テーマの範囲でまだ表現しきれている段階なら、かいなはヘッドレス化をすすめません。

フロントを切り離すと、テーマのアップデートで自動的に手に入っていた改善が入ってこなくなります。新しい表示機能も、自分たちで実装する対象になります。

「テーマの制約に不満はあるが、具体的にどのページで何ができないかを説明できない」という状態も、まだ早い段階です。その不満はデザインの整理で解けることが少なくありません。カート移行やリニューアルの相談でも、構成を変えずに整理で足りると判断することがあります。

明日から自分で判断するための3つの条件

条件1 世界観を伝えるページが、ECの外にあるか

ブランドの物語や使い方の記事が別サイトにあり、そこからShopifyへ移動してもらっている。この状態なら、Liquidをいくら磨いても分断は残ります。

逆に、伝えたいことがすべてShopify側に載っていて、それでレイアウトが足りているなら、当面はテーマの作り込みで進めるほうが速くて安く済みます。

判断の軸は、離脱が起きているのがページの中か、サイトの移動のときかです。

条件2 更新の主語が社内にあるか、制作会社にあるか

商品追加、特集の入れ替え、季節のビジュアル変更。この三つを社内だけで完結できているかを数えてみてください。

できているなら、テーマの設計はうまく機能しています。構成を変える前に、伸ばす場所は別にあります。

三つとも外注が必要なら、どの構成に移ってもその重さは引き継がれます。移行を検討する前に、どこを管理画面から編集可能にするかを決め直すところから始めます。

条件3 表示の遅さがアプリ由来か、構造由来か

速度の問題は、原因を切り分けないまま構成変更の理由にされがちです。アプリを一時的に止めて改善するなら、それはアプリ由来です。

止めても変わらず、画像やページの組み立て方そのものが重いなら、フロントの持ち方を見直す価値があります。

商品点数が多く、探しづらさが離脱につながっているのであれば、カート本体に手を入れずに選ぶ体験だけを足すERABのような進め方も選択肢になります。

Shopifyのデザインと構成の判断、お気軽にご相談ください

Liquidは、使い方を決めてから触ると強い道具です。どこを固め、どこを運用側に開くか。その線引きさえ決まれば、標準テーマのままでもブランドらしい売り場はつくれます。

それでも表現が足りない、コンテンツと売り場が分かれたままだ、という段階に来たときに、フロントを切り離す構成が候補になります。かいなはShopifyを基盤にしたヘッドレス構築をHAKOBとして提供しています。

かいな自身も複数のECを自分たちで運営しています。だからこそ、作り込む価値がある場所と、そこにお金をかけても効かない場所の区別をお話しできます。

いまのテーマで粘るべきか、構成から変えるべきか。判断の材料を持ち帰るだけでも構いませんので、お気軽にご相談ください。