Surf Seen｜公開サイト・予約・会員・決済・外部連携を統合した業務管理システム

湘南・江の島でサーフィンレッスンやレンタルサービスを提供する「Surf Seen」向けに、公開Webサイトと店舗業務を統合するシステムを設計・開発しました。

公開サイトでは、レッスン・レンタルのWeb予約、受講者登録、会員マイページ、予約履歴、メール認証、パスワード再設定に対応。Stripe、PayPay、現地決済から予約内容に応じた支払方法を選択できます。

管理画面には、予約、会員、問い合わせ、商品、オーダー、決済履歴、コンテンツ、FAQ、外部連携ログを集約しました。Webサイトからの予約だけでなく、Activity Japan、じゃらん、Wix、Airbnbから届く予約情報も取り込み、Google Calendarへ自動連携します。

外部予約メールの解析に失敗した場合は、ほかの予約処理を止めず、該当データだけを「要確認」として隔離。管理画面から内容を確認し、再処理または対応済みにできる耐障害性も備えています。

公開サイトには、海の写真を大きく見せる動きのあるデザインテーマを採用。従来デザインを保持したままテーマを切り替えられ、トップページのヒーロー画像や文言も管理画面から更新できます。

主な対応内容
・公開Webサイトと予約フォームの構築
・受講者登録、メール認証、会員マイページ
・Stripe、PayPay、現地決済への対応
・Google Calendarへの予約同期
・Activity Japan、じゃらん、Wix、Airbnbとの予約連携
・予約、顧客、問い合わせ、商品、オーダーの一元管理
・外部連携エラーの個別隔離、再処理機能
・コンテンツ、FAQ、トップページのCMS管理
・公開デザインテーマの切り替え
・個人情報の暗号化、権限管理、監査ログ

開発環境
Laravel 12 / Filament 4 / React / Vite / MySQL / Google Calendar API / Stripe / PayPay / Laravel Scheduler

車査定LP構築・カーセンサー／グーネット在庫連携開発

町田・相模原・八王子で車買取・整備を行う有限会社篠崎自動車様の車査定LPを構築しました。

車査定の強みと掲載在庫を1ページに集約
創業64年の整備工場として培ってきた技術力や地域密着の安心感を伝えながら、査定依頼へ自然につながるページ構成を設計しました。
スマートフォンからでも入力しやすい無料査定フォームを設置し、車種、年式、走行距離、お住まいの地域などを約60秒で送信できるようにしています。

カーセンサー・グーネットの在庫情報を連携
カーセンサーとグーネットに掲載されている在庫車両を定期的に取得し、LP内の「現在の在庫車両」へまとめて表示する機能を開発しました。

掲載元が異なる車両情報を共通の表示形式へ整え、車名、年式、走行距離、支払総額などを一覧で確認できるようにしています。各車両には掲載元を表示し、詳細情報はそれぞれの掲載ページで確認できる導線を設けました
取得に失敗した場合は、期限切れの古い在庫情報を表示し続けない制御も実装しています。

査定受付を支えるフォーム・メール機能
査定フォームには、次の機能を実装しました。

* 年式の西暦・和暦併記
* 電話番号の任意入力
* お住まいの地域の入力
* プライバシーポリシーへの同意
* 管理者への査定依頼通知
* お客様への自動返信
* 二重送信・連続送信の防止
* メール送信失敗時の記録・再送
* GA4による査定完了・電話タップ計測枠

LPの見せ方だけでなく、査定依頼を安全に受け付け、運用中の問い合わせを取りこぼしにくい仕組みまで含めて構築しています。

対応範囲
* LPの企画・構成設計
* レスポンシブデザイン
* HTML・CSS・JavaScript・PHP実装
* 無料査定フォーム
* 自動返信・管理者通知
* カーセンサー在庫情報取得
* グーネット在庫情報取得
* 在庫情報の統合表示
* 二重送信・迷惑送信対策
* メール再送・GA4設定枠

公開サイト：
車査定LPページ

WordPressとLINEを連携したユーザー向けメッセージ配信機能の開発

開発した主な機能
LINEログイン・ユーザー認証
LINE Loginを利用し、ユーザーがLINEアカウントでWebサイトへログインできる機能を実装しました。
WordPress上のユーザー情報とLINEユーザーを連携し、ログインが必要なコンテンツの閲覧や応募情報の管理に利用できる構成としています。
LINE公式アカウントの友だち追加案内にも対応しています。

LINE友だち状態の連携
LINE Messaging APIのWebhookを利用し、友だち追加やブロック解除などの状態をWordPress側へ反映します。
管理者は、メッセージを送信できる状態のユーザーを管理画面から確認できます。

配信パターンの作成
LINEプロフィールやWordPressに登録された情報、応募時に取得した情報などを基に、配信対象者を抽出する条件を保存できる機能を実装しました。
作成した条件は「配信パターン」として繰り返し利用できます。
配信の作成時には対象者を再計算し、対象人数や除外理由を確認できるため、意図しないユーザーへの配信を防ぎやすい設計としています。

少人数向けLINE個別配信
応募者への連絡、開催前のリマインド、少人数への案内、緊急連絡などを、WordPress管理画面から直接送信できます。
送信人数に応じてLINE Messaging APIの送信方式を自動的に使い分け、管理者がAPIの仕様を意識せずに操作できるようにしています。
本文と任意のURLを設定し、送信前に対象者と人数を確認したうえで配信します。

大人数向けLINEオーディエンス連携
募集告知、広報、キャンペーンなどの大人数への配信では、WordPressで対象者を抽出し、LINEオーディエンスとして登録します。
メッセージ本文の作成、画像・カードの設定、配信予約、配信結果の確認は、LINE Official Account Managerから行います。
これにより、LINE公式アカウントが提供する配信機能を活用しながら、WordPressの登録情報に基づいた対象者選定が可能になりました。

配信手順のナビゲーション
管理画面には、現在どの作業を行っているのか分かる進行案内を設置しました。

1. 配信パターン作成
2. 対象者確認
3. 配信下書きまたはオーディエンス作成
4. メッセージ送信
5. 配信結果確認

各画面に次の操作を表示することで、システムに詳しくない担当者でも順番に沿って操作できる設計としています。

配信履歴・API結果の管理
LINE個別配信では、送信内容、送信対象者、受付結果、失敗件数、再送が必要な対象者などを管理します。
配信下書きの作成時点で送信対象者を確定するため、後から配信条件が変更されても、送信対象が意図せず変わらないようにしています。

管理画面の設計
管理画面では、LINE個別配信とLINEオーディエンスの違いを比較できる案内を表示しています。
それぞれの用途、送信場所、対象人数、利用できるメッセージ、送信後の確認方法を画面内で確認できるため、担当者が配信方法を判断しやすくなっています。

また、少人数向け配信と大人数向け配信について、それぞれの作業手順をステップ形式で表示しています。

開発におけるポイント

配信目的に応じた送信方法の使い分け
少人数への業務連絡と、大人数への広報配信を同じ方法で処理するのではなく、それぞれに適した配信経路を用意しました。

WordPress内の情報を配信条件として活用
既存のユーザー情報や応募情報を配信対象の抽出条件として利用できるため、CSVの作成や別システムへの手作業による登録を減らせる構成です。

誤配信を防ぐための対象者確認
配信前に対象人数と対象者を確認し、配信下書きの作成時点で送信先を確定します。
対象者の抽出条件と配信履歴を分けて管理することで、後から条件が変更された場合でも送信対象が変わらないようにしています。

非エンジニアでも操作しやすい画面設計
管理画面上に用途の説明、送信方法の比較、操作手順、注意事項を表示し、次に行う作業が分かる構成としました。

導入によって実現したこと
* LINEログインによるユーザー認証
* WordPressの登録情報とLINEユーザーの連携
* 応募状況や登録情報に応じた対象者抽出
* 配信条件の保存・再利用
* 少人数へのLINE個別配信
* 大人数向けLINEオーディエンスの作成
* LINE Official Account Managerを利用した画像・カード・予約配信
* 配信対象者、送信履歴、API結果の管理
* 友だち追加・ブロック状態の連携
* 操作手順を案内する進行ナビゲーション

使用技術・サービス
* WordPressテーマ開発
* PHP
* WordPressカスタムプラグイン開発実装
* LINE Login
* LINE Messaging API
* LINE Webhook
* LINE Official Account Manager
* WordPress REST API

対応範囲
* 要件整理
* LINE連携方式の設計
* WordPress管理画面の設計・開発
* LINEログイン機能の実装
* Messaging API・Webhook連携
* 配信対象者抽出機能の開発
* LINE個別配信機能の開発
* LINEオーディエンス連携
* テスト・導入支援
* クライアント向け設定手順書の作成

WordPressとLINEを連携した機能開発に対応しています
QReatorでは、WordPressの会員情報、申込情報、応募情報、予約情報などとLINE公式アカウントを連携した機能開発に対応しています。
LINEログイン、ユーザー情報の連携、対象者を指定したメッセージ配信、Webhookを利用した状態管理など、サービスの運用に合わせて設計・開発します。