今回、本業のほうでshopifyのLP案件があったので備忘録として登録します。
背景:WEB知識が少ないクライアントへの最適解
現状の課題: 「ちょっとした文言修正もエンジニアに依頼しないといけない」というクライアント側の心理的・時間的コスト。
自分の判断: 長いキャリアがあるからこそ、ただ作るだけでなく「納品後のクライアントの自走」を目指した。
実装の工夫:保守性と再利用性を両立させる
JSONテンプレートの採用: templates/page.lp-${slug名}.json を作り、ページをブロック単位で管理。
snippetsでの共通化: GTMやメタタグなど、全ページで共通する <head> 内のコードを render で呼び出し。「一箇所直せば全部直る」状態を確保
sectionsの分割: KV、ABOUT、PRODUCT、FAQなどを部品化。
blocksの活用: Q&Aやリスト項目の増減に対応するためにblocksを用いて項目の追加・削除・並べ替えを自由に行えるように実装
Schema設計:自由度はあえて少し制限
定義した内容: image_picker での画像差し替え、text / richtext での文言編集、colorでのカラー変更など
工夫した点: 「ここを触りすぎるとデザインが崩れる」という部分は固定し、クライアントが迷わず、かつ壊さずに更新できる範囲を厳選してSchemaを定義したこと。
自分の経験上、LPはリリースしてからABテストや微調整が入ることがよくありました。今回はその点を意識して作業してみたので担当者が思いついた施策をその日のうちに反映できる環境ができたかなと思います。