KichenLAB レシピ紹介サイト(HTML/CSS)

・ビジュアルイメージ

料理の魅力が伝わるよう、完成した料理の写真を

大きく配置し、視覚的に興味をもってもらえるデザインを

目指しました。シンプルなレイアウトにすることで、レシピ情報が

読みやすく、料理初心者でも迷わず閲覧できる構成を

意識しています。

・カラー

料理の温かみや親しみやすさを表現するため、ブラウンを

メインカラーに使用しました。

また、CTAボタンにはグリーンを作用し、視線を集めながら

自然で安心感のある印象を与えています。

・タイポグラフィ

見出しには太めのゴシック体を使用し、レシピ名が一目でわかるようにしました。本文は可読性を重視し、適度な余白と文字サイズを

設定することで、材料や作り方をスムーズに読み進められるよう

工夫しています。

・情報設計

ユーザーがレシピを探しやすいよう、ナビゲーションメニューを

設置しました。また、「材料」と「作り方」を明確に区分し、

調理中でも必要な情報を素早く確認できる構成としています。

さらに、レシピ動画への導線を設けることで、文章だけでは伝わりにくい調理工程もわかりやすく閲覧できるよう工夫しました。