Camellia Tea Caféは、紅茶と焼き菓子にこだわった架空のカフェのホームページです。

本書「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の課題として制作したものをベースに、デザインやテキストをオリジナルに調整しました。

レスポンシブデザインを採用し、PCだけでなく、タブレット、スマートフォンでも快適に閲覧できる構造になっています。

オリジナルロゴを作成し、全体的に温かみのあるデザインを基調としてカフェのイメージを統一できるように工夫しています。

このサイトは、紅茶や焼き菓子が好きな20～30代の女性を主なターゲットに想定しています。

カフェのこだわりやメニュー、営業時間といった基本情報を掲載し、訪問を検討しているユーザーがスムーズに情報を得られるようデザインされています。

また、ブログ形式のお知らせページを設け、カフェの最新情報を発信することでリピーターを増やすことも意識しています。

カフェのコンセプトや雰囲気を視覚的に伝えることで、新規顧客の興味を引き付ける。

紅茶や焼き菓子などの商品情報を提供し、訪問意欲を高める。

お知らせや最新情報を通じて、来店を促すシーズナルキャンペーンやイベント情報を発信する。

カフェへのアクセス情報や連絡先を明示し、顧客の訪問を容易にする。

トップページ

カフェの雰囲気や魅力を直感的に伝えるビジュアルを配置しました。画像のオーバーレイ効果を用い、優しいトーンを演出しています。

メニューページ

紅茶や焼菓子のメニューを写真付きで掲載しています。flex-gridを使用してレスポンシブ対応し、どんな端末でも見やすいようにしています。

お知らせページ

ブログ形式で最新情報を掲載しています。例えば、お店の紹介や期間限定メニュー、イベント情報などを発信する場として想定しました。

コンタクトページ

アクセス情報や営業時間、SNSリンクなどをまとめています。フォームからのお問い合わせも可能です。

コーディング：3日間

Visual Studio Code / Figma（ロゴ・バナー作成）

HTML5 / CSS3