公開:2023年11月
URL:https://mantle714.xsrv.jp/sunshine-cafe/
ターゲット
都心部のカフェの情報を求めている方々
目的
カフェの情報をまとめて発信することでお客様に安心して来店していただけるとともに、店舗としての認知度を向上すること
情報設計
若者よりも、大人がよく来る喫茶店のような雰囲気のお店を想定しました。そのため、情報を詰め込みすぎず、年配層の方でも見やすいようなウェブサイトを作成するように心がけました。
デザイン
シックでおしゃれな雰囲気を出すために、派手な色を多用せずに落ち着いた雰囲気のフォントを使用しました。簡潔に1ページに情報をまとめ、サイト訪問者が見たい内容がすぐにアクセスできるようにしました。
制作範囲・期間
- 構成:5時間
- コーディング:15時間
ページ数
1ページ
使用ツール
VScode
工夫した点
cssにて実装
- Googleマップを埋め込んでいます。
JavaScriptにて実装
ページ内リンククリックで、該当セクションにスムーススクロールします。
メニュー一覧の商品画像をクリックするとモーダルウィンドウが開き、メニュー詳細を見られるようにしました。
お問い合わせフォームにバリデーションをかけ、必須項目が未記入の場合はアラートが出るようにしました。