概要
炭火・七輪のホルモン焼きを看板にした焼肉店「珍満」の Web サイト。
Figma
支給デザインをもとに、コーディングからサイト構築、本番適用までを担当しました。
WordPress
オリジナルテーマで実装し、メニュー紹介・店舗案内に加え、テイクアウト受注フォームまでを一つのサイトに集約。
支給デザインを忠実に再現しつつ業務課題を技術で解き、納品後はクライアント自身で運用できる状態まで引き渡しています。
課題
テイクアウトで取り扱うメニュー数が多く、注文ごとに「どのメニューを何点」「いつ受け取るか」を一件ずつ指定する仕様により入力項目が多くなり、フォーム構成として煩雑になりやすい点が技術的な課題でした。
あわせて、料理メニュー表のPDFは公開後も店舗側で更新したいという要件があり、制作者の手を借りずに運用できる仕組みが必要です。
これらを、支給デザインの完成度を保ったまま実装することが求められました。
解決アプローチ
受注フローの構造化： 受付の土台に Contact Form 7 を採用し、メニュー別の数量選択（select 群）と受取日選択を組み込みました。受取日には flatpickr を導入し、「明日以降のみ選択可（当日・過去日は選択不可）」という業務ルールを反映。専用システムを新規開発せず、受注フローを理解したうえで実績あるプラグインを土台に過不足なく要件を形にしました。
自走できる運用設計： メニュー表 PDF をお店側で差し替えたいという要望には、カスタムフィールド化で対応し、管理画面から PDF を更新できるようにしました。あわせて更新手順書を作成し納品。公開して終わりにせず、専門知識がなくても運用を続けられる状態まで引き渡しています。
支給デザインの忠実再現と軽量なアニメーション： 年齢層が高めのペルソナをふまえ、「王道でわかりやすい」という方針を崩さず、表示は軽快に、動きは視認性を妨げない範囲でピンポイントに効かせました。パララックスや画像の横スライドも加え、横スライドは swiper・splide・素の JavaScript を比較し、軽さと安定性から splide を採用しています。
表示速度への配慮：
画像は <picture> と WebP で配信し、軽さを確保。
画面外の画像は lazysizes と
loading="lazy"
で遅延読み込みする一方、ヒーロー画像には
fetchpriority="high" を付与し、初回表示で影響の大きい LCP の負担を軽減しました。
Sass は FLOCSS
で構成し、公開後も保守しやすい設計です。
成果
煩雑だったテイクアウト受付を、メニュー別の数量と受取日まで一件で伝わる受注フォームに作り替え、本番環境へ公開しました。
受取日は「明日以降のみ選択可」という業務ルールに沿って動き、運用に乗せやすい形に。
メニュー表はカスタムフィールド化し手順書とあわせて納品したことで、お店側が
PDF を差し替えながら自走できる更新体制を引き渡せました。
支給デザインは年齢層に合わせた「わかりやすさ」を保って再現し、表示の軽快さと必要な動きを両立。
業務フローの構造化から運用の引き渡しまでを設計として形にした一件です。