DETAIL
ガーデニングショップ Paradise garden ホームページ
店舗紹介と集客を目的とした架空のガーデニングショップのデモサイトです。このページは、サイト訪問者がお店に来店することを目的としています。
デザイン解説
ベースのライトベージュを基調としてコーポレートカラーのグリーンをメインカラーに、ポイントカラーとしてチャコールグレーと白を取り入れています。どのようなお店なのかわかりやすいように、トップページは概要、二階層目はサービスの詳細やお知らせ、アクセス情報を載せています。
ショップロゴは「秘密の花園」をイメージしたデザインで作成しました。
各ページのサイドバーには、お店の営業日やイベント日が一目でわかるようにカレンダーとハウス型のフロアマップを設置しています。 また、「ページトップに戻る」ボタンは植木鉢の画像を使用しています。
架空の店舗のため、店名や住所地名などは全て架空のものとなっています。GoogleMapは実際のMap読み込みをせず、新宿御苑近辺の加工画像を表示しています。
技術スタック
トップページから二階層目の詳細ページに遷移する多ページのWebサイトです。ヘッダーやフッターなどの各ページに共通する部品のHTMLを別に用意して、JavaScriptで取り込んでいます。 また、カルーセルやカレンダーなどもJavaScriptで作成しています。 レスポンシブ対応：無し。
- HTML,CSS,JavaScriptを使用
- 店舗名称やテキスト素材はChatGPTと自分で作成
- 画像素材はAdobe stock の無料素材を使用
- ロゴ作成にIllustratorを使用
- 画像加工にIllustrator、Photoshop、デザインカンプ作成にPhotoshopを使用