• 架空のカフェのサイトデザインを行い、HTML/CSSをコーディングする。
  4ページ以上のサイトとし、すべてのページに共通のグローバルナビゲーションを配置する。
  可能であれば、PC・スマホの両方に対応したレスポンシブデザインとする。

1. ●名古屋市にある架空カフェ
   ●誰もがハッピーな気持ちになれる、憩いの場
   ●地元の方が気軽に利用できるお店
   ●コーヒーとパンがメインのお店で落ち着いた雰囲気のお店
   

1. お店の良さをアピールすること

ロゴ:
ほっとするような落ち着けるカフェを表現するために、暖色のオレンジをメインカラーに採用し、 コーヒーと家をデザインに取り入れました。
コーヒーの湯気と家の煙突の煙を合わせています。心温まる体験をしてほしいという思いを込めて、その形はハートマークにしました。

サイトデザイン:
背景色はメインカラーの同系色を使い、色合いをすべてのページで揃えて統一感を出しています。 また、画像を多く使うことで、温かみや親近感が湧くようなデザインを心掛けました。 背景画像は、その領域に表示されるコンテンツに合わせるように工夫しました。
全体の配置としては、左右の余白をそろえるように意識しました。また、レスポンシブデザインを取り入れて、PC・スマホの両方で表示できるサイトにしています。

コーディング:
JavaScriptを勉強し、ハンバーガーメニューやフェードインする文字の動きに、JavaScriptを少し取り入れました。 すべてのページに利用するクラスや個別ページのクラスを分けて、cssやhtmlを整理しながら作成しました。

3週間

Illustrator、Photoshop、vscode