架空案件①

喫茶店Cafe Lumière

工夫した点

Webデザイン全体で「円」を意識し、写真やレイアウトに丸みを取り入れて、カフェらしい柔らかい雰囲気になるように制作しました。て
全体的なレイアウトや各要素の幅・余白を確認する際には、ChatGPTを活用しました。
デザインカンプをHTML・CSSへ落とし込む際は、元のデザインにできるだけ近づけることを意識し、
実際の表示を確認しながら細かな位置やサイズの調整を行いました。
HTML・CSSについては学習途中であるため、コードの記述や調整方法をChatGPTに確認しながら制作しました。
コードをそのまま使用するのではなく、実際の表示を確認しながら修正・調整を行い、Webデザインとコーディングの理解を深めました。

苦労した点

CSSの記述とレイアウト調整に苦労しました。特にACCESS部分の写真配置では、
写真の大きさや位置を変更すると白い枠や全体のレイアウトにも影響するため、
数値を少しずつ変更しながらデザインカンプに近づけました。

改善点

情報設計を事前に十分検討できていなかったため、制作途中でレイアウトや内容の調整が増えてしまいました。
次回は制作前に情報設計を整理し、各ページ・各セクションの構成を明確にしてから制作に取り組みます。

使用素材

写真