フラワーカフェの架空サイト制作

「当店は開業5周年を迎え、オンライン予約システムの導入と新メニューの告知を目的としたWebサイトのリニューアルを検討。モバイルフレンドリーな設計で集客力を高めたいと考えている。また、店内で行っているフラワーアレンジメント教室の認知度向上も図りたい。」という目的で制作を始めました。

本プロジェクトでは、生成AIとFigmaを使用してデザインカンプを制作しました。そして、HTMLとCSS,JavaScriptを使って、デザインカンプを実装しました。

ハンバーガーメニューの動き・デザインは、デザインカンプに指示がなかったため自身で対応

CSS設計はBEMを使用し、保守性・拡張性・再利用性を高めました。コンポーネント化も行いました。

ピクセルパーフェクトを意識し、デザインカンプを忠実に実装しました。画面幅が変わってもデザインが崩れないようにしました。