【架空案件】インテリア販売サイト（複数ページ）

Figmaのデザインと模写サイトの見本を確認しながら、家具・インテリア商品のWebサイトをHTML・CSS・jQueryでコーディングしました。コードの見本は使用せず、デザインや実際の表示を確認しながら、自分でHTML・CSSの構成を考えて実装しています。

制作では、見本のデザインをできるだけ正確に再現することを意識しました。FigmaでAltキーを使って要素同士の間隔を何度も確認し、余白や要素の幅・高さ、文字サイズなどを調整しながら、実際の画面との違いを一つずつ確認しました。

レスポンシブ対応では、指定された900pxをブレークポイントとして、PCでは商品一覧を4列、画面幅が狭くなった場合は2列に切り替えています。

また、商品画像は画像ごとに縦横比が異なっていたため、aspect-ratio: 1 / 1とobject-fit: coverを使用し、一覧で表示した際の大きさや見た目が揃うようにしました。

ページによってコンテンツ量が異なり、商品詳細などのページではフッターが上に詰まってしまうことがありました。そこで、bodyをFlexboxで縦方向に配置し、mainにflex: 1を指定することで、余った縦方向のスペースをmainが使うようにし、フッターがページ下部に配置されるよう調整しました。

ハンバーガーメニューの実装では、特にCSSとjQueryの連携に苦労しました。2本の線をCSSのtransformで上下に配置し、メニューを開いたときには中央に戻して45度ずつ回転させることで、「二」から「×」へ変化する動きを実装しています。

また、jQueryでボタン・ナビゲーション・オーバーレイにis-openクラスを付け外しし、メニューの開閉を制御しました。メニューを閉じる際は、×ボタンだけでなく背景のオーバーレイをクリックしても閉じられるようにし、操作しやすさにも配慮しています。更に、 メニューの開閉状態に合わせてaria-expandedも変更するようにしています。

この制作を通して、複数ページのWebサイトも、一つひとつのページを積み重ねながら構築していけることを実感しました。また、CSS GridやFlexboxを使うことで、要素の配置や画面幅に応じたレイアウトを効率的に調整できることを学びました。見た目を再現するだけでなく、実際に操作する人の使いやすさや、画面全体のバランスまで考えて実装することの重要性も学びました。