生成AIで一週間の理想の夕食の献立を作成しました。
担当
chatGPT Illustrator design coding
目的
生成AIで作成した料理画像を活用し、Illustratorでデザインを制作、HTML・CSSでコーディングを行うことで、デザインからWebページ制作までの一連の流れを学ぶことを目的に制作しました。また、1週間の夕食献立を分かりやすく紹介することで、毎日の献立に悩む人の参考になるよう、見やすさと使いやすさを意識したレイアウトを目指しました。写真と文字のバランスや配色にもこだわり、料理のおいしさや楽しさが伝わるデザインに仕上げています。
ターゲット
20～40代の家庭で料理をする人や、毎日の夕食献立を考えることが多い主婦・主夫、会社員をターゲットにしました。献立を決める時間を少しでも減らし、バランスの良い食事や特別感のある夕食を楽しみたい人を想定しています。また、料理の写真を見ながら献立をイメージしたい人や、1週間分のメニューをまとめて確認したい人にも使いやすいよう、曜日ごとに整理された見やすいレイアウトを意識しました。
デザインについて
見たい曜日の献立をすぐに確認できるよう、曜日ごとにカード形式でレイアウトを統一し、情報を整理して見やすいデザインを意識しました。料理写真を大きく配置することで、献立の内容がひと目で伝わり、食欲をそそるよう工夫しています。全体はピンクを基調としたやさしい配色にし、家庭的で温かみのある雰囲気を表現しました。また、背景色や余白を活かして情報を見やすく整理し、タイトルや曜日、メニュー名にメリハリを付けることで、視認性を高めています。さらに、料理画像は生成AIで作成したものを使用し、Illustratorでレイアウトや配色を調整したうえで、HTML・CSSでコーディングを行いました。デザインの再現性を意識しながら制作し、デザインからコーディングまで一貫して取り組めることをアピールできる作品に仕上げています。
コーディングについて
Illustratorで作成したデザインをもとに、HTML5とCSS3を使用してコーディングを行いました。デザインのレイアウトや配色、余白をできるだけ忠実に再現できるよう意識し、見やすく整ったページになるよう制作しています。曜日ごとの献立はカード形式で配置し、Flexboxを使用してバランスよく並ぶレイアウトにしました。また、写真や文字の大きさ、余白を調整することで、情報が整理され、読みやすい画面構成になるよう工夫しています。さらに、パソコンだけでなくスマートフォンでも見やすく表示されるよう、レスポンシブデザインを意識してコーディングを行い、画面サイズに応じてレイアウトが崩れないよう調整しました。コードは保守性を考え、分かりやすいクラス名や整理しやすい構成を心掛けています。