概要

購入検討者が目的の商品に素早く辿り着けることを第一優先に、 一覧性と拡張性に優れた商品一覧ページと、全ページ共通のヘッダー／フッター（グローバルナビ）を設計・実装。 ユーザビリティ／アクセシビリティと多端末での表示安定性を重視しました。

役割・担当

• デザイン
• コーディング
• 写真編集

使用技術

Illustrator, Photoshop, HTML, CSS, JavaScript

要件・制約

• 現在17点 → 1年で約40点に増加してもレイアウトが崩れない拡張性
• ヘッダー／フッターのグローバルナビに トップ／商品一覧／特集／会社概要／採用情報／店舗情報／お問い合わせ を実装
• 主要デバイス・ブラウザでの表示安定性とアクセシビリティ/ユーザビリティ優先

工夫点

• 商品一覧：将来の点数増に耐えるカードレイアウト。CSS Grid（repeat(auto-fit, minmax(260px, 1fr))）で 自動段組みを実現し、レスポンシブかつ保守性の高い実装。
• グローバルナビ：情報探索の最短経路を意識したメニュー設計（上記7項目）。 ランドマーク／見出し階層／フォーカス可視化でアクセシブルに。
• ビジュアル：ブランド主色 #a8c7fa を基調に淡いトーンで“リラックス”の情緒を設計。 必要に応じて販促商品の視認性を高める演出を追加。