Jazz Cafe & Bar Left Alone(職業訓練校：制作課題)

01.サイト概要

このサイトは、昭和レトロな雰囲気を大切にするJazz Café & Bar「Left Alone」 という架空店舗のサイトです。
落ち着いた店内の空気感や、レコードが流れるゆっくりした時間をWeb 上でも感じてもらえるようにHTML / CSS で1ページずつ丁寧にコーディング しました。
初めてのお客様でも迷わず「雰囲気・メニュー・場所」が分かるように情報量を絞ったシンプルな構成にしています。

02.デザインコンセプト（世界観）

• テーマは 「昭和レトロ × ジャズ カフェ＆バー」
• TOPのヒーロー画像部は昼のCafeと夜のBarの店舗内を夜の帳が下りるようなゆっくりとしたスライダー表示で切り替え
• コーヒーやバーボンの色味をイメージしたブラウン系を基調にアクセントとしてターコイズブルーを使用
• 写真・背景・文字色を抑えめにして、夜のジャズバーのような“静かなトーン”を表現
• フォントはメインターゲットである中年～シニア男性に馴染みのあるserif（明朝体）でサイズは18pxと大き目
• 余白を多めに取り、情報よりも 「雰囲気が先に伝わる」 レイアウトを意識

03.制作の狙い（設計思想）

※サイト作成前に制作した資料となります。

3-1. 世界観：昭和レトロ × ジャズバー

• 「にぎやかなカフェサイト」ではなく、一人でもふらっと立ち寄れる大人向けの隠れ家 をイメージ
• 写真のトーンや色味を揃え、サイト全体で一つの空間にいるような没入感を狙いました

3-2. カラーパレットとタイポグラフィ

• ベースカラー：深めのブラウン(#8F6F30)、アイボリー(#ecdbbb)
• 見出しと本文でフォントの太さを分け、メリハリと可読性を両立

3-3. レイアウトと UI / UX

• 「店の雰囲気 → メニュー → アクセス」の順で、初めての来店者が知りたい情報に自然と辿り着ける導線を作成
• 画像とテキストのバランスを調整し、文字だけで疲れないよう配慮

3-4. バイリンガル表記（日本語 / 英語）

• 外国人観光客も想定し、店名やメニューに英語表記を併記
• 日本語を主としつつ、英語はサブ情報としてレイアウトに組み込むことで、
  読みやすさを損なわない範囲で“ジャズバーらしさ” を出しました。

04.制作プロセス（構築フロー）

4-1. ページ構成の設計

• 事前に ターゲット設定シート / カスタマージャーニーマップ をなどを作成
• 「常連客」と「初めて来る人」の両方を想定し、それぞれが欲しい情報をスムーズに取得できるようページ構成を整理
• TOP・メニュー・ギャラリー・アクセスの4つを中心に、迷子になりづらいシンプルなサイトマップを設計

4-2. 画像・素材の統一

• 店内・ドリンク・フード写真を同じトーンになるように調整し、バナーや見出し画像も含めて 「一つのブランド」 に見えるよう統一
• レコードや機材の写真は、サイトの“空気感”を伝える要素として装飾的に配置

4-3. HTML / CSS コーディング

• ヘッダー・フッター・メニューなどは共通パーツ化を意識し、更新しやすいコード構造に整理
• 余計なライブラリは使わず、軽量で表示速度の速いサイトになるよう実装しました。

05.成果（ユーザー視点でのメリット）

• 写真とコピーから 店内の雰囲気が直感的に伝わる ようになった
• 初めての来店者が、営業時間・場所・メニューをすぐ確認できる構成になり、電話での問い合わせ内容が整理
• レトロ感のあるデザインと見やすい UI を両立し、「行く前からお店の世界観が分かる」と評価をもらえた
• クライアント側で今後ページを追加する際にも、既存のレイアウトとトーンを真似しやすい 「ひな形」として機能 している

06.使用ツール

• HTML / CSS（手書きコーディング）
• Sublime Text（コードエディター）
• Figma（ワイヤーフレーム・簡易デザインカンプ）
• Chrome DevTools（HTML / CSS調整・デバッグ）
• Excel（ターゲット設定シート / カスタマージャーニーマップ）
• Photoshop /Illustrator（写真トーン補正・画像作成など）
• W3C Validator（マークアップチェック）