Webdesign


雀草庵 / ホームページ

http://su1313.html.xdomain.jp/jakksouan
pcモックアップ
担当内容
企画
情報設計
ワイヤーフレーム
文章構成
デザイン
コーディング
使用ツール・言語
Photoshop
figma
HTML
SCSS
Javascript
jQuery
制作期間
2023年1月(15日間)
  • → ワイヤーフレーム 2日
  • → デザイン 8日
  • → 文章構成 2日
  • → コーディング 3日

概要

サイトの詳細

お話をいただき、実際にあるお店のホームページを制作しました。

雀草庵の現状について

クライアント
雀草庵の経営者
ターゲット
観光客・常連客(20代女性多め)
狙い
お店の雰囲気や特色をより多くの人に知ってもらう
流入経路
検索・紹介

問題と解決策

クライアントの現状

更なる来客数向上を目指しているが現在ホームページがないため、公式の正式な情報として認識されにくい。また、訪れたお客さまにしかお店の雰囲気や特色を伝えられない。

サイト開設で目指す方向

金沢市の観光地である東茶屋街に位置し初めて訪れる観光客が多いため、ホームページを開設し、訪れたことのない方にも同様に様子を伝えられるようにしたい。

コンセプトとデザイン

  • 全体的に落ち着いたデザインテイストに。
  • 東茶屋街ならではの和風のイメージを連想させるために、背景を茶色ベースのグラデーションにする。
  • 昼間はカフェ、夜はBARのため、背景と写真を利用し雰囲気を出す。
  • お店の一推しメニュー「りんごのスイーツ」の写真をトップ画面に設定し商品をアピールする。

サイト設計

トップページ
  • お店の雰囲気を知ってもらうために、外観・店内をイメージしやすい写真を配置。
  • 全体のABOUTの後にCAFE、BARについての説明を入れ、その直後にメニューに飛べるリンクを設置。
    → 全体のABOUT → CAFEの説明 → CAFEのメニューボタン → BARの説明 → BARのメニューボタン という流れに。
    → お店の要であるメニューに目がいくようなサイト設計。
  • Instagramで情報発信しているため、最後にInstagramへ飛ぶボタンを配置。
メニューページ
  • ご来店時の注意事項欄を設け目立つようなサイト設計に。
    → 上下の余白を活用し、見てもらいやすいようにする。
  • メニューの見やすさを考慮し、目的のメニューにすぐに飛べるようにサイドにナビを設置。
    → パソコンなど大画面の時はメニューの右側にし、タブレット、スマホの場合は、ハンバーガーで表示させる。
    → 画面に高さをつくり、見やすくするためにナビをサイドとする。