白瑛には、売上アップや運用リソースの不足に関する相談とあわせて、自社でストアを更新できないという相談がよく寄せられます。制作会社に作ってもらったものの、季節の商品入れ替えやセールのたびに修正を依頼する必要があり、反映までの待ち時間と費用が重なっているという内容です。
ストアを社内で更新できるかどうかは、構築時のスキーマ設計で決まります。
見た目が整っているだけでは、公開後にどこまで変更できるかは判断できないでしょう。本記事では、自社で更新できないストアの状態を整理し、日々の運用負担を抑えるための設計原則と、構築前・構築後に確認したい点を解説します。
自社で更新できないストアの状態
自社で更新できないストアは、文章や画像がコードに直接書かれていて、管理画面に編集欄が無い状態です。
Shopifyの「テーマ」（ストア全体のデザインのひな形）は、複数の「セクション」（ページを構成するブロック）を組み合わせてページを表示します。メイン画像、商品一覧、文章と画像を並べた紹介欄などを、それぞれ一つのセクションとして考えると分かりやすいです。
セクションは、用意されていれば管理画面から追加や並び替えができます。テキストや画像を登録する入力欄もあれば、コードを書き換えなくても担当者が内容を差し替えられます。
この編集範囲を決めるのが「スキーマ」（セクションを管理画面から編集できるようにする設定の定義）です。たとえば、見出し、説明文、画像を設定項目としてスキーマに定義しておけば、それぞれを管理画面から変更できる仕組みです。
自社で更新できないストアでは、セクションの入れ替えやテキスト・画像の差し替えを想定したスキーマが作られていないケースも見られます。画面に表示されている文章や画像がコードの中に直接書かれていると、管理画面を探しても編集欄を見つけられない状態です。
これは、ストアが正常に動かないという意味ではありません。構築時の要件に対して必要なページが完成していても、公開後の更新まで考慮されていなければ、変更のたびにコードの修正が必要になるという状態です。
更新運用で実際に困る場面
更新のしにくさが表面化しやすいのは、公開直後よりも、商品や販売方法を変えたくなったときです。運用担当者が必要な変更を管理画面で完結できなければ、内容を整理して外部へ依頼し、反映を待つ工程が生まれます。
季節ごとの商品入れ替えでは、掲載する商品だけでなく、画像や説明文、セクションの順番も変えたくなるでしょう。差し替え用の設定がなければ、小さな変更でもコーディングが必要です。
セールの実施時も同様です。期間に合わせて案内を掲載し、終了後に元へ戻す運用では、開始と終了の両方で修正が発生します。管理画面から変更できる範囲が狭いほど、販売スケジュールと制作側の作業予定を細かく合わせる必要が生じます。
ストア改善のためのコンテンツ更新では、商品のこだわりや利用方法を追加したり、情報の順序を見直したりします。売上拡大に伴って機能やセクションを増やす場合も、既存の作りが追加や並び替えに対応しているかが影響します。
実際に白瑛が対応したストアでは、ハックルベリーの定期購買アプリを使う際、定期購買の商品IDがコードに直接書かれていました。対象商品を変える必要が生じても、運用担当者が管理画面から商品IDを変更できない状態だったのです。
アプリが利用できている間は問題が見えにくくても、商品構成が変われば修正が必要です。ストア運用で起こり得る変更を構築時に洗い出し、担当者が触る項目を設定として用意しておくことが、更新時の待ち時間を減らす土台です。
更新できるストアを支える3つの設計原則
すべての要素を自由に変更できるようにするのが適切とは限らないでしょう。設定項目が増えすぎると、どこを触ればよいのか分かりにくくなるためです。運用時に変更が発生しそうな箇所を見極め、必要な範囲をスキーマとして作り込むことが大切です。
セクション間の余白調整
一つ目は、セクションの上下にある余白を管理画面から調整できる設計です。セクションは単体で見たときに整っていても、前後の組み合わせが変わると、間隔にばらつきが出ます。
季節の商品特集を上へ移す、セールの案内を追加するなど、並び順を変える運用では余白の確認も欠かせません。セクションごとに調整できれば、入れ替え後の見え方に合わせて社内で整えやすい仕組みです。
余白をコード内の固定値だけで管理していると、セクションの順番を変えられても、ページ全体の間隔までは調整できない状態です。並び替え機能と余白設定を組み合わせて用意することで、管理画面で完結できる変更の範囲が広がります。
PCとスマホの個別設定
二つ目は、PCとスマホで個別に設定できる作りです。同じ画像や余白を使っても、横長のPC画面と縦長のスマホ画面では見え方が同じになりません。
PCでちょうどよい大きさの画像が、スマホでは小さく見えることもあります。反対に、スマホに合わせた余白がPCでは広く感じられるなど、一つの設定だけでは両方を整えにくい場面が出てきます。
画像や表示の仕方を端末ごとに設定できれば、更新後もそれぞれの画面に合わせた調整が可能です。商品や案内を差し替える担当者がPCとスマホの両方を確認し、必要な項目だけ変更できる形が実務に合います。
新商品追加を見据えたスキーマ設計
三つ目は、新商品や機能の追加を見据えて設定項目を設計することです。公開時の商品だけを前提にコードを組むと、商品IDや表示内容が変わったときに管理画面での対応が困難です。
先ほどの定期購買の例であれば、対象となる商品IDを設定項目として変更できる作りが必要でした。将来追加する商品をすべて予測するのではなく、運用の中で何が入れ替わるかを確認し、その値をコードに固定しないことが要点です。
コンテンツを追加する可能性があるなら、文章や画像の差し替えだけでなく、必要なブロックを増やせるかも設計に含めます。商品追加、機能追加、並び替えという日々の作業に沿って設定項目を決めると、公開後の変更に対応しやすい設計です。
入れ替えを妨げないデザイン
更新しやすさには、スキーマだけでなくデザインの作り方も関わります。特に注意したいのが、隣り合う二つのセクションに装飾がまたがる、セクションまたぎのデザインです。
二つのセクションが決まった順番で並ぶことを前提に装飾すると、片方を移動した際に背景や図形が途中で切れ、デザインが崩れることがあります。管理画面に並び替え機能があっても、実際には順番を変えられない状態になることがあります。
セクション単位で入れ替える運用を想定するなら、各セクションの中でデザインが成立するように作ります。またがる表現を採用する場合は、組み合わせを固定する箇所と、自由に動かせる箇所を構築時に区別しておく必要があります。
デザインの自由度と運用の自由度は、常に同時に高められるわけではないでしょう。公開後によく動かす場所を先に決めると、見た目を保ちながら更新できる範囲を設計しやすくなります。
構築前と既存ストアで確認すること
新しくストアを作る場合と、すでに運用しているストアでは、確認の順序が異なります。どちらも、担当者が管理画面から何を変更したいのかを具体的な作業に置き換えることが出発点です。
これから構築する場合
依頼先には、完成時のデザインに加えて、管理画面からどこまで触れられるかを確認します。テキストや画像の差し替え、セクションの追加と並び替え、余白、PCとスマホの個別設定など、更新したい項目を挙げて共有すると認識を合わせやすくなります。
季節の入れ替えやセールを予定しているなら、実際の更新作業も伝えておきたいところです。定期購買などで対象商品が変わる可能性がある場合は、運用担当者が管理画面から変更できる設計になっているかを構築前に確かめます。機能をアプリで足すか個別に作るかの判断は「Shopifyの機能追加｜アプリと個別カスタマイズはどちらを選ぶ？」で解説しています。
操作方法を引き継げるかも確認項目の一つです。白瑛のShopify構築では、公開前にZoomなどを使った操作レクチャーを2回程度行っています。設定項目が用意されていても、担当者が場所や手順を知らなければ日々の運用にはつながらないためです。
既存ストアを改修する場合
すでにあるストアは、更新できないからといって全体を作り直す必要があるとは限りません。変更頻度が高いセクションや、コードに固定されている項目を確認し、必要な部分からスキーマを整える方法があります。
白瑛では、他社が構築したストアもShopifyカスタマイズの対象です。カスタマイズは1箇所10,000円（税別）からで、改修履歴をGitで管理し、プレビューを確認してもらった後に本番へ反映します。
改修する場所を決める際は、更新の回数と、外部へ依頼したときの待ち時間や作業負担を整理します。毎月変える箇所と、ほとんど変えない箇所では、管理画面から編集できるようにする優先度が違うためです。
まず頻繁に触る商品、画像、文章、並び順から確認すると、部分的な改修でも運用負担を見直せます。既存のデザインを前提に、どのセクションを独立させるか、端末別の設定が必要かを整理していく流れです。
更新運用を見据えたストア作り
社内で更新しやすいストアは、管理画面に編集項目が多いストアとは別物です。季節の商品入れ替え、セール、コンテンツ更新、新しい商品や機能の追加を想定し、変わる箇所を適切なスキーマとして用意したストアです。
セクション間の余白、PCとスマホの個別設定、商品追加に対応する設定を構築時に考えておけば、変更のたびにコードへ触れる場面を減らせます。セクションまたぎのデザインにも配慮することで、並び替え後の見た目を保ちやすい構成です。
必要な設定は、商品構成や更新体制によって異なります。新規構築で更新範囲を整理したい場合や、既存ストアのどこから直すべきか判断しにくい場合は、30分の無料相談で現在の運用状況を伺います。
