日本酒専門店　「信州酒蔵　結」HP

【制作背景と狙い】

本サイトは、全国展開を目指す日本酒専門店「信州酒蔵 結」のHPです。
「上質な和の世界観」を短時間で伝えつつ、初めての訪問者でも迷わず目的の情報に到達できる導線を重視。
主導線は ヒーロー → こだわり → お客様の声 → 店舗情報/アクセス → CTA に整理し、
来店・問い合わせにつながる体験を意識して設計・コーディングしました。

【解決したい課題とデザインの工夫】

① 和の高級感と信頼感を確実に伝えたい

▶︎課題
限られた滞在時間でブランドのこだわりと格を印象づける必要がある。

▶︎工夫

• 和紙テクスチャを背景に採用し、落ち着きと温かみを演出
• 見出しに**筆致のある書体（Yuji系）**をアクセント利用し、和の情緒と格を強調
• 墨色・生成り・アクセントの朱で配色を統一し、視覚ノイズを削減

② 初見でも迷わない情報設計にしたい

▶︎課題
デザインが良くても、知りたい情報に行き着けなければ離脱につながる。

▶︎工夫

• 王道のLP構成（ヒーロー→こだわり→声→店舗情報→CTA）で直感的な読み進め
• セクションごとに背景の切替・見出しの階層を明確化し、視認性を向上
• CTAはスクロールの流れに合わせて自然な位置に複数配置

③ 端末や画面幅に合わせて見やすさを最適化したい

▶︎課題
飲食店のサイト訪問者の多くはスマホユーザー。PCと同様に快適に見られる必要がある。

▶︎工夫

• 画面幅に応じて余白・文字サイズ・レイアウトを段階的に調整
• ハンバーガーメニュー＋マスク背景で、開閉時はナビに視線を集中
• ボタンやフォームのタップ領域を十分に確保し、誤操作を防止

④ 見た目だけでなく「使いやすさ」も意識したい

▶︎課題
第一印象が良くても、スクロールや動きが不自然だと離脱につながる。

▶︎工夫

• スムーススクロールやフェードインで自然な動きに
• ヒーローはスライダーで季節感・世界観を複数カットで訴求
• 固定ヘッダーでナビゲーション性を確保し、回遊性アップ

【技術面のポイント】

▶︎HTML5 + CSS + jQuery による静的LP構築

• セマンティックタグ（<header> <nav> <main> <section> など）で構造を明確化
• 必要箇所に aria- 属性を付与し、スクリーンリーダー配慮

▶︎レスポンシブ対応（メディアクエリで画面幅ごとにスタイル切替）

• 余白・フォントサイズ・グリッドをブレイクポイントごとに最適化
• ハンバーガー + マスクでモーダル風の開閉演出（背景タップで閉じるUX）

▶︎アニメーションとUI

• フェードイン／スムーススクロールをjQueryで実装し、過度な演出は避けて可読性優先
• Slick Carouselでヒーローの写真スライダーを構築（世界観の訴求力を強化）

▶︎コーディング設計

• BEM命名で保守性・再利用性を担保（block__element--modifier）
• RESSリセットでブラウザ差異を吸収し、共通の土台を確保

【ひとこと】

和の雰囲気や高級感を大切にしつつ、誰が見ても「迷わず・安心して」行動できるサイトを目指しました。
デザインだけでなく、使いやすさ・伝わりやすさ・行動のしやすさを意識して仕上げています。