【自主制作】野菜販売サイト

当初は、模写課題として用意されていたサイトをもとに制作を始めましたが、デザインを確認する中で、自分なりにもっと見やすく、野菜のイメージに合ったサイトにしたいと考え、デザインから自分で考えて制作しました。HTML・CSSを使用し、デザインとコーディングの両方を自分で行っています。

デザインでは、野菜を扱うサイトということから緑をベースカラーにし、アクセントとして赤を使用することで、明るく元気な印象になるようにしました。最初はもう少し鮮やかな緑や赤を考えていましたが、実装後にAIを使ってコードやデザインを確認した際、文字とのコントラスト比が十分ではないことが分かりました。そのため、読みやすさも考慮して、あえて少し落ち着いた色に調整しました。

今回の制作では、これまでの制作とは異なり、スマートフォンの画面を基準にして制作し、そこからPC向けにレイアウトを広げていく方法でレスポンシブ対応を行いました。これまでPCからスマートフォンへ対応することが多かったため、@media (min-width: 768px)ように「画面幅が768px以上になったらPC向けのスタイルを追加する」という書き方には、最初は慣れませんでした。しかし、実際に画面幅を変えながら表示を確認することで、スマートフォンを基本レイアウトとして考え、必要な部分だけをPC向けに変更していく方が、余分なCSSを増やさずにレスポンシブ対応できることを学びました。

その上で、スマートフォンでの操作性についても意識し、ヘッダーナビゲーションの間隔を調整しました。リンク同士が近すぎるとタップしにくく、離しすぎると画面幅からはみ出してしまうため、gap: clamp(8px, 3vw, 16px);を使用して画面幅に応じて間隔が変化するようにしています。デベロッパーツールで画面幅を確認し、320px程度の狭い画面でもナビゲーションがはみ出さないことを確認しながら調整しました。

また、コンテンツの横方向の余白についても、画面いっぱいに配置するのではなく、特にAboutセクションでは左右に十分な余白を設け、文章が詰まって見えないように調整しました。見た目のバランスを確認しながら、画面幅に応じて余白が変化するようにしています。

今回の制作では、CSSの:rootとカスタムプロパティ（var(--color-...)）を初めて使用しました。色をそれぞれの要素に直接指定するのではなく、使用する色をまとめて管理する方法に挑戦しました。最初は記述方法に慣れず苦労しましたが、色を一元管理できることで、サイト全体の色を統一しやすくなることを学びました。

ホバー時の表現にも工夫を加えています。商品タイトルでは、ホバーすると下線が横方向に伸びるようにし、Recipesの「more」では赤い線が広がるような動きをCSSで実装しました。単にリンクの色を変えるだけではなく、ユーザーが操作できる要素であることが視覚的に分かるよう、動きのある表現を取り入れています。

実際のコーディング作業では、カードをgrid-template-columns: 1fr 1fr;で2列に配置した際、隣り合うカードの高さに合わせるように、変な余白が入ってしまうことがありました。そこで、align-items: start;を指定してカードを上揃えにすることで、不要な余白を抑えました。実際の表示を確認し、なぜ意図しない余白が生じているのかを考えながら調整した点が、この制作での学びの一つです。

この制作を通して、デザインを考えて終わりではなく、実際の画面での見え方や操作性を確認しながら、CSSやレイアウトを調整していくことの重要性を学びました。また、モバイルファーストでのレスポンシブ対応、CSSカスタムプロパティ、Gridの配置調整など、これまでとは異なる実装方法にも取り組みました。分からない記述については調べながら実際の表示を確認し、意図した見た目・操作性になるまで調整することを意識して制作しました。