Webサイトの実装前に、PC・スマートフォンそれぞれの画面サイズに合わせてデザインカンプを作成しました。
カフェの雰囲気を表現しながら、メニューや営業時間などの情報が見やすくなるよう、余白や文字サイズ、コンテンツの配置を調整しています。
PC版では各コンテンツをゆとりを持って配置し、スマートフォン版では画面幅に合わせてレイアウトを整理することで、異なるデバイスでも統一感のあるデザインになるよう意識しました。
作成したデザインカンプをもとにHTML・CSS・JavaScriptで実装し、実際のWebサイトとして仕上げています。