[HP]ビストロ・クロレ

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 概要

<WebサイトのURL>

https://cw0814.xsrv.jp/works_hp/bistro-colore.jp/

ビジネスサイト向けのテンプレートをベースにしながら、  構成・ページデザイン・コンテンツ設計は飲食店の世界観に合わせて、すべてオリジナルで制作しました。 

特に「メニュー」ページではUI・UXを重視し、カテゴリー別ナビゲーションを配置し、閲覧性・操作性の向上を意識した機能を自作しています。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 制作条件

・テンプレート使用（PC：ナビゲーション左固定レイアウト）

・文章・画像選定・配色：すべてオリジナル

・スマホ対応（レスポンシブ対応）

・お知らせ一覧、よくあるご質問（Googleスプレッドシートとの連携）

・お問い合わせフォーム（Googleフォームとの連携を想定したオリジナルデザイン）

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 使用スキル

・レスポンシブ設計

・デザイン：Photoshop / Figma

・コーディング：HTML / CSS / JavaScript （jQuery）/ Google Apps Script（GAS）

Google Apps Script を用いて、Googleスプレッドシートに記載した「お知らせ」や「よくあるご質問」のデータを読み込み、JavaScript を通してサイト上に自動で表示されるように実装しました。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 制作期間

2025年4月〜7月（随時制作）

※細部にこだわりながら、無理のないスケジュールで丁寧に制作しました。

※学習や体調調整の期間を含みます。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 制作目的

地域に根ざしたフレンチビストロの魅力を伝え、来店予約・メニュー閲覧・店舗紹介を目的とし、店舗の「雰囲気」や「料理のこだわり」が伝わるデザインを目指しました。

「友人や恋人との会話で話題にしたくなる」

そんなお店の魅力を丁寧に表現するために、カジュアルさと上品さのバランスを意識してデザインしています。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 想定ターゲット

20代後半〜50代の男女

・グルメやワインが好きな方

・落ち着いた雰囲気のレストランを探している方

・記念日・女子会・ビジネスランチなど、シーンを問わず使えるお店を探している方

★「このお店、恋人とのデートで使ったら喜ばれそう」

★「あのおしゃれな店、知ってる？」と友人に話したくなる

そういう気持ちを想像しました。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 想定される課題（ターゲットが抱えていそうなこと）

・メニューや価格がWebで見づらい

・店の雰囲気がわからず不安で予約しづらい

・スマホで情報にアクセスしにくい

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 解決策（デザイン・構成上の工夫）

・メニューをカテゴリーごとに整理し、写真と一緒に掲載

・カテゴリー別のナビゲーションで迷子にならない構造

・フランスらしい上品な配色（ベージュ × ネイビー × ワインレッド）

・スマホでも見やすく、操作しやすい設計

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 工夫したポイント

・PCでは左ナビゲーション固定で回遊性アップ

・スマホではナビゲーションを上部に変更

・メニューはカテゴリごとにセクション構造を明確に設計し、閲覧ストレスを軽減

・「お知らせ」や「よくあるご質問」はスプレッドシート連携で運用しやすさも意識

・入力フォームはエラー・OK判定を視覚的に分かりやすく演出（色・アニメーション使用）

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 改善したポイント・反省点

・最初は「コンセプト」ページを独立して作成していたが、文章量が少なく見た目のバランスが悪く、トップページ内のセクションに統合したことで自然な流れにしました。

・「予約フォーム」の仕組みについても、外部サービスの導入が現実的だと学び、見た目のみのサンプルとして落とし込みました。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

============================

📌 制作プロセス

============================

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ テンプレートの選定

左ナビゲーション固定型テンプレートを使用しています。

コンテンツの邪魔にならず、常にナビゲーションが見える構造が魅力と判断しました。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 構成設計

テンプレート構造をもとに、Figma上で直接セクションの配置や要素の並びを検討しました。

「メニュー」ページなど、動線が多くなる部分は特に、操作性と視認性のバランスを重視しました。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ 配色・トーン設計

「ウポポイマガジン」公式サイトのデザインを参考に、フランスらしい上品な配色（ベージュ × ネイビー × ワインレッド）と温かみのあるトーンを採用しました。

見出しをセリフ体にしたり、余白の取り方を調整することで、カジュアルになりすぎない「ナチュラルシック」な印象に整えました。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

◼︎ ターゲットユーザーの仮説メモ

・来店前にWebでじっくりメニューを見たい

・雰囲気のいい店で写真映えする料理を楽しみたい

・予約や問い合わせが簡単にできると嬉しい

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*