【Webサイト】 架空のグランピング施設

OVERVIEW

職業訓練校のチーム課題作品です。 レスポンシブ対応。

YEAR 2022

《目的

宿泊施設の宣伝と集客、予約受付ができる

《ペルソナ》

女性(27歳)。

普段はビジネス街に勤める会社員。

趣味はSNSで、流行に敏感で映えるものが好きなイマドキ女子。

友達とちょっと贅沢な旅行をしたい。自然に触れて日々の疲れを癒したい。

《制作担当箇所》

●フレームワーク

●工程管理

●全ページ共通(ヘッダー)

・コーディング(HTML)


天体観測ページ

お部屋ページ

↑担当したページです。

・デザイン

・ライティング

・コーディング(HTML,CSS,JavaScript)

・レタッチ(Photoshop)

※デザイン、ディレクションは複数名で共同担当しました。


トップページ

天体観測ページ

↑リンクからWebページをご覧いただけます。

こだわりポイント

●天体観測をアピールポイントにしている施設なので、美しい星空の写真の選定にこだわりました。

●CSSを使用し、装飾的意味合いだけでなく可読性も考えてあしらいを加えました。

課題

イベントカレンダー部分にphp導入して管理画面から編集可能にしたく、表示ページへのデータの出入力まではできるようにしたものの、CSSのレイアウト通りに表示させる部分が上手くいかず…。

現在、実装に向けて引き続き学習に取り組んでおります!


お部屋ページ

↑リンクからWebページをご覧いただけます。

こだわりポイント

●スライダーと説明のセットの同じレイアウトが続くので、左右交互に配置し、スライダーの影色も交互に変え、サイズ可変時の(PC:2カラム→モバイル:1カラム)も含めて見やすさに配慮して余白の調整を行いました。

●スライダーの写真をメインで見せたい+写真とスライダーの数が多いので、デザインはその邪魔をしないよう極力シンプルに、統一感を持たせています。