【自主制作】乗馬クラブPACA架空サイト

まつもとかおり
デザイン・システム導入


◆ 制作サイトURL（本ページ下部にデザインカンプ掲載）

◆ 制作概要

  • 制作時期：2023年8月下旬～9月
  • 制作時間：総計約80時間
    • 情報整理、ワイヤーフレーム制作：約8時間
    • デザインカンプ制作：約40時間
    • コーディング：約32時間
  • ページ数：1ページ
  • 使用ツール：Photoshop・VScode・Google開発者ツール

◆ 使用スキル

  • ワイヤーフレーム制作（PC,SP）

  • デザインカンプ制作（PC,SP）

  • HTML

  • CSS

  • JavaScript/jQuery

  • レスポンシブ対応

◆ 制作要件

  • 構成：1ページのサイト
  • セクション数：５つ以下
  • レスポンシブ：PC、スマホに対応

◆ コーディング実装内容・工夫した点

◇ HTML/cssにて実装

  • 「体験乗馬を予約」ボタンをスクロールしても常に右下に表示されるように実装しました。
  • メインビジュアルの印象を強く感じてもらえるように、ヘッダーの位置をメインビジュアルの下に配置し、　メインビジュアル通過後は画面上部に固定するように実装しました。
  • Googleマップを埋め込みました。

◇ JavaScript/jQueryにて実装

  • ハンバーガーメニューを実装しました。

  • ページ内リンククリックで、該当セクションにスムーススクロールします。

  • BUDDYを、Slickにて実装しました。（Slickもレスポンシブ対応済）

  • FAQはアコーディオンにて開閉し、開閉に合わせて開閉ボタンが回転します。

◆ デザイン・工夫した点

[デザインイメージ]

　・動物のぬくもりを感じられる 

　・自然や動物に癒される 

　・楽しく馬と触れ合えそう

  • 全体的に緑、ベージュ(グラウンドの色をイメージ)を使い、自然や動物のぬくもりをイメージできるような配色を心がけました
  • 性別を問わず、大人の趣味として、乗馬を検討している方(25歳以上～)を想定しているため、あしらいは最低限でシンプルなデザインを心がけました
  • メインビジュアル、LESSONに実際に乗馬している写真を使用し、自分が乗馬しているイメージを持ちやすいようにしました

◆ デザインカンプ


WEBSITE