Elsama Luxury Marble

プレミアムな閲覧体験を商談へと結びつける、多言語対応の編集グレード向け大理石および建築材料プラットフォーム。

Elsama Luxury Marbleは、単なるカタログサイト以上の機能を求める高級素材ビジネス向けに設計された、ポートフォリオ主導型のLaravelアプリケーションです。プロジェクト、素材、ブログコンテンツ、お客様の声、そしてサービスポジショニングを提示し、ブランドの信頼性と販売コンバージョンを同時に促進します。本プラットフォームは国際的な視聴者を想定して最適化されており、ロケール対応のルーティング、RTL（右から左へ記述する言語）サポート、およびドメインモデル内に直接保存された翻訳済みコンテンツを備えています。運用面では、単一のコードベースが、公開向けのInertia React体験と、コンテンツ・問い合わせ・分析管理のためのFilament CMS/admin層の両方を駆動します。

主な価値提案

パフォーマンスとスケーラビリティ： 公開側の体験は、SSR対応のInertia v2を通じて提供されます。Eager Loading（先行読み込み）によるリレーションシップ、軽量なJSONリソース、設定のキャッシュ、データベースバックエンドのキュー、およびより高速なページ配信のためのWebPへの画像変換を実装しています。
優れたUX/UI： フロントエンドは、大判のタイポグラフィ、画像主導のレイアウト、レスポンシブなカード、ブログの「さらに読み込む」インタラクション、追従型のWhatsApp変換ボタン、ロケールに応じたレイアウト方向の切り替えなど、高級感のある編集ビジュアル言語を採用しています。
セキュリティと信頼性： お問い合わせフォームの送信はサーバーサイドで検証され、IPごとにレート制限が適用され、配信のためにキューイングされ、社内チームと見込み客の両方にミラーリングされます。管理画面はFilament認証によって隔離されており、コンテンツのソフトデリートとセッションベースのロケール永続化により運用リスクを軽減しています。

技術アーキテクチャとスタック

フロントエンド

フレームワーク： resources/js/app.tsx および resources/js/ssr.tsx にSSRエントリーポイントを持つ、React 18とInertia.js v2を採用。
状態管理とナビゲーション： Inertiaルーター、useForm、Ziggyによるルートヘルパー、カタログおよびブログビューのためのクライアントサイドのページネーション/フィルタリング。
スタイリングとモーション： Tailwind CSS、Headless UI、Framer Motion、そして高級素材ブランドに合わせて調整された、思慮深くダークな編集用パレット。
UIパターン： 公開レイアウトシェル、再利用可能なカードとCTA、多言語コンテンツレンダリング、レスポンシブなヒーロー/セクション構成。
リッチコンテンツ： 管理パネル内での長文CMSコンテンツ作成用にTipTapを利用可能。

バックエンド / API

フレームワーク： 公開サイト用に古典的なMVCルーティングとInertiaレスポンスを採用したLaravel 13。
ドメインモデリング： 名前、説明、SEOコピー、ブログコンテンツ用のJSON翻訳フィールド。スラッグベースのルートモデルバインディング。主要なカタログエンティティにおけるソフトデリート。
データアクセス： 専用のAPIリソースが、フロントエンドに到達する前にメディアURL、翻訳済みコンテンツ、リレーショナルペイロードを正規化。
ビジネスサービス： 翻訳ヘルパーがロケールのフォールバックを解決し、設定モデルがグローバル設定をキャッシュし、分析がサービス層を通じて永続化され、画像は保存前にWebPに変換されます。

DevOpsとインフラストラクチャ

ローカル実行環境： 標準的なPHP + NodeツールチェーンとLaravel Herd向けに設計。リポジトリにDockerスタックは含まれていません。
キューとメール： データベースキューイングをデフォルトパスとし、ローカル開発用にキューイングされたお問い合わせ通知とログベースのメールを設定済み。
ストレージ： 公開メディアは public ディスクに書き込まれ、storage/app/public から提供されます。
ビルドパイプライン： ViteがクライアントバンドルとSSRバンドルをコンパイルし、リポジトリスクリプトが開発中にアプリサーバー、キューリスナー、ログテイルを同時に起動します。
キャッシュ： Laravelキャッシュがグローバル設定に使用されており、環境に応じて他のサポートされているドライバーに切り替え可能です。

アーキテクチャフロー

flowchart LR
	Browser[公開ブラウザ] --> Inertia[Inertia React ページ]
	Inertia --> Controllers[Laravel コントローラー]
	Controllers --> Resources[API リソース + ロケールマネージャー]
	Controllers --> Models[Eloquent モデル + サービス]
	Models --> DB[(MySQL / SQLite)]
	Models --> Cache[(Laravel キャッシュ)]
	Controllers --> Queue[(データベースキュー)]
	Queue --> Mail[お問い合わせメール]
	Controllers --> Storage[(公開ストレージ / WebP メディア)]
	Admin[Filament 管理画面] --> Controllers
	Admin --> Models
	Controllers --> Analytics[(分析ログ)]

エンジニアリングの深掘り

1. ロケールを意識したコンテンツ配信

課題は単なる文字列の翻訳ではなく、6つのロケール間でSEOフレンドリーなスラッグとビジネスに適したコピーを維持しつつ、URL、レイアウト方向、コンテンツペイロードを整合させることです。解決策として、{locale} ルートプレフィックス、セッションバックのロケール永続化、およびJSONカラムから翻訳値を妥当なフォールバック付きで解決する LocaleManager を使用しています。アラビア語はレイアウト層でRTLとして扱われるため、公開シェルはテンプレートを複製することなく、動的にドキュメント方向を更新します。

2. コンバージョン重視のお問い合わせパイプライン

価値の高いお問い合わせフォームは、高速で信頼性が高く、不正利用に強いものである必要があります。コンタクトコントローラーはペイロードをサーバーサイドで検証し、問い合わせレコードとして保存し、社内チームへのメールと見込み客への自動返信メールという2つのメールをキューイングします。専用のレート制限ミドルウェアがIPごとの送信数を制限しており、これにより配信能力を保護し、正当な見込み客に摩擦を与えることなく営業インボックスをクリーンに保ちます。

3. メディアリッチなカタログと編集CMS

このサイトは、単なるフラットなデータベースレコードではなく、視覚的なカタログとして素材、プロジェクト、記事を提示します。コントローラーは画像データとリレーションシップデータを先行読み込みし、リソースはメディアURLと翻訳済みコンテンツを正規化し、フロントエンドはカテゴリフィルター、プログレッシブなブログ読み込み、そして大規模なビジュアルカードを最小限のクライアントサイドの複雑さでレンダリングします。管理側では、Filamentが構造化されたCMSと分析ダッシュボードを提供するため、開発者でなくてもアプリケーションコードに触れることなく、コンテンツの更新、お問い合わせの管理、交通パターンの監視を行うことができます。

ELSAMA