← 制作実績の一覧へ

WORK / 04 コンペ提案 · 設計・デザイン提案

HARITOGYM

ケアと運動を、3つの表現へ。

担当・制作範囲
上流設計・UI設計・PC TOPデザイン3案、SP版FVの追加制作、共通部品・スタイル整理。実装・公開・効果測定は含みません。
使用ツール
Figma
制作区分
コンペ提案
案1 FV
案1 FV拡大して見る ↗

01 / OVERVIEW

背景と、制作の考え方。

支給ワイヤーフレームと資料をもとに、施設の特徴と体験予約までに伝える情報を整理。「ケアと運動をつなぐ」という共通の軸から、写真・書体・余白の使い方が異なる3案へ展開しました。

02 / DESIGN NOTES

初めて見る人の疑問から、伝える順序を考える。

「何をするジム?」「自分にも合う?」「誰が担当する?」「どう予約する?」。施設を知る人の疑問を想定し、各セクションで届ける情報を整理しました。

想定した閲覧の流れ
想定した閲覧の流れ拡大して見る ↗

03 / DESIGN NOTES

一本の線と、予約ボタンの優先順位。

案1は鍼を連想する細い線と2枚の人物写真を使い、ケアと運動のつながりを表現しました。予約・相談・情報確認でボタンの強さを分け、主な行動を選びやすくする設計です。

予約ボタンの優先順位
予約ボタンの優先順位拡大して見る ↗
ページ下部の予約と相談
ページ下部の予約と相談拡大して見る ↗

04 / DESIGN NOTES

伝える軸を揃え、印象を3方向に展開する。

一本の線・手のひらの距離・深呼吸の間という3案を制作。写真、書体、余白を変え、異なる魅力の伝え方を比較しました。

PC 3案比較
PC 3案比較拡大して見る ↗

05 / DESIGN NOTES

SP版FVと、共通ルールの整理。

SPはFVの追加制作です。PCの構成を一律に縮めず、各案の特徴を残して配置を調整。色・文字とボタンやFAQの開閉状態もFigma上で整理しました。

SP 案1
SP 案1拡大して見る ↗
SP 案2
SP 案2拡大して見る ↗
SP 案3
SP 案3拡大して見る ↗