概要
旧サイトはPDFや画像の埋め込み具合からサーバー負荷がかかっており、重いサイトになっていたため、今回はそれらの負荷をなくし、静的なサイトへとリニューアルしました。
このサイトは、創作ダイニング アズュール（AZUR）の公式サイトを、静的HTML/CSS/JavaScriptで再構築した店舗サイトです。
目的は「店舗の雰囲気訴求」「メニュー・コース情報の整理」「電話予約・アクセス導線の強化」「SEO資産の維持」です。
単なる名刺サイトではなく、飲食店の集客導線として必要な要素が一通り入っています。特に、ローカルSEO・スマホ導線・メニュー訴求・予約導線を重視した構成です。
主な変更点
■旧サイトはお知らせ機能をほぼ使っていなかったため、wordpressから静的サイトへと変更。wordpress投稿をxmlからjsonに変換し、モーダル表示へと変更。
■サーバーをロリポップからcloudflareへ移行し、セキュリティリスクの懸念改善や速度向上計りました。
制作内容 / 作業内容
今回使用したツールは、ChatGPT/codex,claude,Github,VScode。
元のスクリーンショットをChatGPTに投げて、ChatGPTで再構成したデザインをcodexにてコード繁栄。claudeにてフォルダ構成・構造を作成したのち、中身をcodexで作成し、Githubにpush→cloudflareに反映。ネームサーバーをロリポップからcloudflareに変更。
- 既存WordPressサイト相当の内容を、静的サイトとして再構成
- トップページ、アクセス詳細ページ、キャンセルポリシーページを作成
- 店舗情報、営業時間、定休日、電話番号、住所、駐車場情報を整理
- メニュー、コース、飲み放題、店舗案内をセクション化
- 料理写真ギャラリーの横スクロールスライダーを実装
- お知らせデータ、メニューデータをJavaScriptで管理
- 電話予約・Google Maps・Instagramへの導線を設置
- スマホ向け固定フッターナビを実装
- SEO対策として canonical、OGP、Twitter Card、構造化データ、robots.txt、sitemap.xml を追加
- スライダー内の不要画像削除、2週目画像の表示不具合を修正
- GitHubへ変更をpush済み
主な実装機能
- レスポンシブ対応
- ローディングアニメーション
- ヒーロービジュアル
- グローバルナビゲーション
- スマホ用ハンバーガーメニュー
- 店舗メッセージセクション
- お知らせ表示
- Instagram誘導バナー
- メニューカテゴリカード
- メニューモーダル表示
- 料理写真スライダー
- コース紹介
- 飲み放題オプション表示
- ドリンクメニュー表示
- 営業時間・注意事項・予約案内
- Google Map埋め込み
- アクセス詳細ページ
- 駐車場案内ページ構成
- キャンセルポリシーページ
- 電話予約CTA
- スマホ固定CTA
- SEO基本タグ
- Restaurant構造化データ
- sitemap.xml / robots.txt
全体的なデザイン
全体は、和モダン × 落ち着いた居酒屋 × 少し高級感のあるダイニングという方向性です。
色はネイビー、ゴールド、生成り系を中心にしていて、安っぽい居酒屋サイトではなく、落ち着いて食事・宴会ができる店舗として見せる設計です。
写真・余白・明朝系フォントを使い、料理や店舗の雰囲気を前面に出す構成になっています。
デザインコンセプト
コンセプトは、
「那須塩原で、少し特別感のある創作ダイニング」
です。
具体的には以下です。
- 地域密着の飲食店らしい安心感
- 個室・宴会・コース料理に対応できる実用性
- 創作料理店としての上品さ
- 料理写真で直感的に魅力を伝える構成
- 電話予約へ迷わず進める導線
- Instagramで最新情報を確認できる運用設計
設計
サイト設計は、1ページ完結型トップ + 補助ページの構成です。
トップページでは、以下の順番でユーザーの意思決定を進めます。
- 店舗名・雰囲気を認知
- 店主メッセージで空気感を伝える
- お知らせで現在性を出す
- メニュー写真で食欲・期待値を上げる
- コース・飲み放題で宴会需要に対応
- 営業時間・予約ルールで不安を解消
- アクセス・電話予約へ誘導
補助ページは以下の役割です。
- access.html
駐車場・地図・来店前不安の解消 - cancel-policy.html
予約トラブル防止、キャンセル条件の明文化 - robots.txt / sitemap.xml
検索エンジン向けのクロール補助
SEO設計としては、
「創作ダイニング アズュール」「AZUR」「那須塩原 創作居酒屋」「那須塩原 宴会」「那須塩原 駐車場あり 居酒屋」
あたりを狙える土台になっています。
