プロジェクト概要

プロジェクト概要

店舗の世界観を最優先に、写真の見せ方・余白・縦組みを軸としたデザインを、ブラウザ上で破綻なく再現することが主目的のプロジェクト。

オーエスプランニング側で用意されたデザインをもとに、WordPress運用を想定したテンプレート実装・調整を担当。予約導線、料理/店内情報、メニュー導線など、来店検討ユーザーが迷わず行動できる情報設計を崩さず、表示パフォーマンスと保守性のバランスを取りながら実装した。

また、SNS/埋め込み要素やプラグイン更新に起因しやすい表示差異を想定し、運用時に「崩れにくい」構造・スタイルに整理している。


本サイトは、同一ドメイン内に「うえもり」「やまや」の2つのトップ導線を持つ構成となっており、「やまや」側はサブディレクトリ配下で運用される情報設計を採用。ブランド/店舗(または業態)単位で情報を整理しつつ、ユーザーが迷わない導線設計と、検索・運用面での管理性を両立させる形で実装・調整を行った。

※デザイン:株式会社オーエスプランニング(https://osplan.jp/

制作のポイント

  • 和の世界観を崩さない実装
    料理写真・店内写真の見せ方、縦書き要素、余白設計など、デザインの“間”を維持したままWP上で再現。崩れやすい要素はブレイクポイントごとに最適化。
  • 2トップ構成(うえもり/やまや)を情報設計として整理
    同一ドメイン内でトップ導線を二系統に分け、「やまや」側はサブディレクトリ配下として分離。ユーザーの迷いを減らしつつ、運用側の更新対象も明確化。
  • 運用を前提にしたテンプレート調整
    更新頻度が高い箇所(お知らせ・メニュー・導線系)を中心に、管理画面で扱いやすい構造に寄せ、将来の改修コストが膨らみにくい形で実装。

公開後の変化

デザイン再現度を維持したまま、レスポンシブでの表示安定性を確保
写真主体のレイアウトでも、PC/スマホで意図した印象が崩れない状態に。

2トップ構成でも導線が混線しない情報整理
「どの店の情報なのか」がページ遷移の中で迷いにくく、目的到達がスムーズに。

運用負荷の低減
更新導線・テンプレートを整理したことで、更新時の手戻りや軽微な修正依頼が発生しにくい構成に。

プロジェクト情報

業種
飲食店(和食・会席/創作料理系)
カテゴリ
コーポレートサイト(店舗サイト)/2トップ構成
制作スコープ
コーディング(外注対応)/レスポンシブ実装/表示検証(主要ブラウザ・デバイス) デザイン:株式会社オーエスプランニング(https://osplan.jp/)
制作期間
2021年
URL
https://uemoriyamaya.com/

使用技術

  • HTML / CSS3(SCSS)
  • JavaScript
  • レスポンシブ対応
  • WordPress