架空のトリミングサロンのWebサイトにおいて、TOPページのデザインおよびコーディングを担当しました。 ⸻ ■ 概要 【役割】情報設計、デザイン、コーディング 【制作期間】1ヶ月 【使用ツール】Figma、HTML、CSS、JavaScript 【URL】https://acane-design.com/portfolio/trimming-salon ⸻ ■ 課題・目的 ・ペットがリラックスできる清潔感のある印象を与えること ・初めて利用する飼い主にも安心感を与えること ⸻ ■ ターゲット ・定期的に通えるサロンを探している飼い主 ⸻ ■ 情報設計 ・「コンセプト → サービス → 特徴 → ニュース」の順に構成し、安心材料を段階的に提示する導線にしました。 ・サービス利用中のペットの自然な表情が伝わる写真を多く使用し、来店後の体験を具体的に想像できる構成にすることで、不安の軽減につなげました。 ⸻ ■ デザイン ・「優しさ・安心感・清潔感」を第一印象で伝えるため、温かみのあるアースカラーを基調としました。 ・丸みのある写真トリミングや余白設計により、親しみやすさと清潔感を両立させました。 ・情報のまとまりを意識し、セクションごとに背景色を切り替えることで視認性を高め、情報の整理を明確にしています。 ⸻ ■ 制作時の工夫 ・コーディングはBEM設計を意識し、保守性の高い構造にしています。 ・適度なアニメーションを取り入れ、デザインの世界観を損なわないよう表現面にも配慮しました。