制作実績 / 03
串や
商品の魅力を伝え、
予約につなげる。
Webデザイン / 情報・導線設計 / HTML・CSS
01 — 制作の概要
串やのWebサイト制作
地域のお客様にお店を知ってもらい、商品の魅力と予約への導線を伝えるWebサイト。セット商品の紹介を軸に、情報の整理からデザイン、HTML・CSSでの実装まで取り組みました。
- 担当したこと
- 情報・導線設計 / Webデザイン / PC・スマートフォン対応 / HTML・CSSでの実装
- 使用したツール
- HTML / CSS / Figma
- 制作したもの
- PC・スマートフォンに対応したWebサイト
- 制作の目的
- 地域のお客様への認知と、セット商品の予約につながる情報・導線の整理。
02 — 制作前の課題
知ってもらうことから、
予約の一歩へ。
商品を選び、予約するための情報を
分かりやすく。
設計のポイント
初めてサイトを訪れるお客様に、どんな商品があり、どのセットを選べばよいか、どう予約するかを伝える。商品の魅力と予約に必要な情報を順に確認できる構成を考えました。
どんなお店？
お店の雰囲気・商品を知る
何を選ぼう？
メニュー・セット内容を確認
どう予約する？
予約方法・連絡先を確認
03 — 情報・導線の設計
興味を持ち、メニューを選び、予約する。
お客様が知りたい順に、情報をつなぐ。
予約までの情報の流れ
01
お店を知る
地域・お店の紹介
02
魅力を感じる
写真・こだわり
03
商品を選ぶ
メニュー・セット
04
予約方法を確認
予約に必要な情報
05
予約へ進む
分かりやすい導線
04 — デザインの工夫
一つひとつの設計に、
理由を。
見た目と情報の整理で、商品の魅力を伝える。
01 / 商品の見せ方
セット商品の魅力を、
分かりやすく。セットの内容や特徴が伝わるように、写真と説明の優先順位を整理。選ぶ理由が伝わる見せ方を意識しました。
02 / 認知と予約の導線
知ってもらうことと、
予約をつなぐ。SEOと導線の整理を軸に、お店や商品を知るための情報と、予約に進むための情報をつなぐ構成を考えました。
03 / スマートフォンへの対応
小さな画面でも、迷わせない。
スマートフォンでも写真・メニュー・予約方法を順に確認できるよう、情報を縦に整理して読みやすさを整えました。
05 — 完成したデザイン
完成画面と、使いやすさの工夫。
商品の写真と予約への導線を、ひとつの体験に。
06 — 実装
店主の管理方法に合わせた実装を。
更新頻度に合わせてカスタマイズ。
実装で意識したこと
特に販売に力を入れたいセット商品は、ページ上部に表示されるよう配置を工夫しました。
スマートフォンではタップするだけで電話がつながるようにし、いつでも予約しやすい状態に。
お店の運用に合わせて、お問い合わせ・ご予約は電話に一本化しています。
その結果、検索結果で上位に表示されるようになり、セット商品の売上が半年で前年度の実績に達したとのご報告をいただきました。