01
概要
本サイトは、造園業者「緑彩堂造園」を想定した架空のコーポレートサイトとして制作しました。
個人宅の庭づくりから外構工事まで幅広く対応する事業者を想定し、サービス内容や施工事例の魅力が伝わる構成を意識しています。
個人経営を想定して、「安心感」と「信頼性」を重視したデザイン・導線設計を行いました。
02
デザインコンセプト
造園のイメージを彷彿とさせる、落ち着いたグリーンを基調とした配色でデザインしました。
写真をメインにすることで施工のクオリティが直感的に伝わるようにし、アイコンを使いつつシンプルなレイアウトにしています。
また、初めて依頼するユーザーの不安を軽減するため、全体的に柔らかさと親しみやすさを感じられるデザインを意識しました。
03
実装ポイント
レイアウトはFlexboxを中心に構築し、視認性と保守性を意識したコーディングを行いました。
クラス設計は再利用性を考慮し、セクションごとに役割が明確になるよう命名しています。
また、スマートフォンでの閲覧を重視し、レスポンシブ対応では縦スクロールでもストレスなく情報が追える構成にしています。
ブレイクポイントは767pxを基準としています。
04
JavaScript実装部分
- ハンバーガーメニュー
- スムーススクロール
- スクロール時のフェードインアニメーション
過度な演出は避け、ユーザーの操作を邪魔しない範囲で自然な動きを取り入れました。
05
使用技術
HTML / CSS / JavaScript / Figma