【サイトリニューアル】創作ダイニングアズュール様

AZURリニューアル

URL:https://azur-dining.com/

目次

概要

旧サイトは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ページ完結型トップ + 補助ページの構成です。

トップページでは、以下の順番でユーザーの意思決定を進めます。

  1. 店舗名・雰囲気を認知
  2. 店主メッセージで空気感を伝える
  3. お知らせで現在性を出す
  4. メニュー写真で食欲・期待値を上げる
  5. コース・飲み放題で宴会需要に対応
  6. 営業時間・予約ルールで不安を解消
  7. アクセス・電話予約へ誘導

補助ページは以下の役割です。

  • access.html
    駐車場・地図・来店前不安の解消
  • cancel-policy.html
    予約トラブル防止、キャンセル条件の明文化
  • robots.txt / sitemap.xml
    検索エンジン向けのクロール補助

SEO設計としては、
「創作ダイニング アズュール」「AZUR」「那須塩原 創作居酒屋」「那須塩原 宴会」「那須塩原 駐車場あり 居酒屋」
あたりを狙える土台になっています。

アーカイブ

カテゴリー

よかったらシェアしてね!
  • URLをコピーしました!

頑張る個人事業・中小企業さまを応援しています!Web集客のサポートはきむらぼにお任せください♪

木村 水癸のアバター 木村 水癸 きむらぼ代表

『補助金専門のWebコンサルタント』

京都府木津川市を拠点に、補助金×Webビジネス×AI活用×DX推進支援で地域事業者をサポート。|ウェブ解析士|商工会青年部|デジタル推進委員|医薬品登録販売者|セラピスト|Codex / Claude

1993年生まれ|AB型|INTJ-T|L'Arc-en-Ciel好き

目次