開発の流れ
設計
紙ラフ & ブラウザで直接プロトタイピング（モバイルファースト）
開発・実装
HTML / CSS / JavaScript。スムーズスクロール、ハンバーガー、スライダー
公開
Vercel によるホスティング・プレビュー・本番公開
ターゲット
アニマルケアや暮らしの知見を素早く知りたい飼い主。ライト層でも迷わず情報に到達できる導線を重視。
課題
知見がSNSや掲示板に分散して見つけづらい。検索条件と情報の整理が必要。
目的
種類・年齢・テーマで迷子にならない導線設計の検証。操作時の気持ちよさも重視。
使用言語 / 技術
HTML / CSS / JavaScript / Vercel
デザイン・実装上の工夫
モバイルファーストで実装し、PCでは左サイド固定ナビを追加。 スムーズスクロール + アクティブ状態の視覚化（足跡アイコンの濃淡切替）。 画像は遅延読込・装飾はCSS/JSアニメーションで軽量化。