ソルナーレ大府

制作期間
3ヶ月
担当
デザイン・コーディング
使用ソフト・スキル
  • Photoshop,
  • Illustrator,
  • Xd,
  • VScode
  • HTML,
  • CSS(Sass),
  • jQuery
制作内容
ジム、フィットネスをメインにダンススクールや、遊び場も提供する架空の複合施設「ソルナーレ大府」のWebサイト。 xdにてカンプ作成、コーディングまでを担当。課題解決を意識し、上品かつ親しみやすいデザインをコンセプトに制作しました。(TOP+下層ページ)
サイトURL
https://sornare.takuma-sakai.net
ソルナーレ大府のトップページの画像
コンセプトシート
ソルナーレ大府のコンセプトシート
サイトマップ
ソルナーレ大府のサイトマップ
デザインのポイント

■ TOPページ

  • ・メインビジュアルからは、楽しそうなイメージを持たせ幅広い年齢層から受け入れやすく、健康を意識したジムである事を連想できる様にしました。
    また、24時間制で安価だが無機質なジムとの差別化を意識し、親しみやすい、優しいなどのイメージをデザインに反映しました。
  • ・余裕のある余白をとる事で、見やすく落ち着いたレイアウトにする事を心がけました
    各セクションの情報量を減らし、ボタンで下層ページに飛ばす事で、気になる情報に辿り着きやすくする事を意識しました。
    施設やプログラムの変化や増減も考え、メンテナンスのしやすいレイアウトを心がけました。
    ソルナーレ大府のトップビュー
  • ・幅広い年齢層をターゲットにするために、暖かみのあるカラーを使用。明るく、優しいイメージで、敷居は高く無い。そんな印象を付けたかったです。

■ フッター、SNSバナー

  • ・SNSでの情報発信はアイコンの他に、力を入れているYouTubeとブログに加え、来店ポイントの貯まるアプリはバナーを設置しました。
    他のSNSと差別化し、目立たせ興味を引く形にしました。また、フッターと共に全ページに配置する事で目に留まる工夫をしました。
    ソルナーレ大府のSNSバナー
  • ・SP画面のフッターには、電話番号を発信する事を考えボタンで表示しています。
    PC画面からは発信出来るユーザーは少ないと考え番号の表記のみとしています。
    ソルナーレ大府のPC画面のフッター
    ソルナーレ大府のSP画面のフッター

■ 料金・入会ページ

  • ・料金・入会ページは、表示する内容が多くSP画面では縦長になり必要な情報に辿り着きづらいと考え、
    ページ内遷移を画面の下部に追従する形で設置しました。
    料金・入会ページのページ内リンクボタン

■ キッズスクールページ

  • ・ひと月のレッスンスケジュールは、リンクでモーダル表示し、ユーザーにとって見やすく、使いやすくを意識しました。 また予定変更があった場合も、変更しやすい(画像の差し替え)を意識しました。
    レッスンスケジュールの画像
ソルナーレ大府のページへ
ソルナーレ大府のスマホ画面の画像
ソルナーレ大府のPC画面の画像
ソルナーレ大府のスマホ画面の画像
ソルナーレ大府のスマホ画面の画像

ソルナーレ大府のページへ

Works

Contact