← WORKS

Web Design / 2026

GRIT+

First View Design

GRIT+ パーソナルトレーニング ファーストビュー PC版

01

ABOUT THE PROJECT

パーソナルトレーニングサービス「GRIT+」のファーストビューをデザイン。
「運動嫌い専用」というサービスの特徴を軸に、初心者でも親しみやすく、それでいて結果への期待感を感じられるビジュアルを目指しました。

Client
GRIT+
Category
Web Design
Scope
First View Design / Responsive Design
Tools
Photoshop

02

DESIGN CONCEPT

「運動が苦手」な人にも、
変わった自分を想像してもらう。

ブラックを基調とした力強いトーンの中に、前向きな表情の人物を大きく配置。 「完全オーダーメイド」「会員満足度94%」などの強みを視覚的に整理し、 初めてパーソナルトレーニングを検討するユーザーにも安心感と期待感が伝わる構成にしました。

トレーニングする迷彩ウェアの女性
TRAINING努力・トレーニング
白いウェアの笑顔の女性
IDEAL理想の自分・ポジティブな未来

03

VISUAL MAKING

Material → Retouch / Composition → Final

  1. 01Original Material
  2. 02Retouch / Composition
  3. 03Final Visual
素材写真 — 白いウェアの女性
AMaterial
ファーストビュー内で切り抜き・色調補正された人物
AIn First View
素材写真 — トレーニングする女性
BMaterial
ファーストビュー内で背景と合成された人物
BIn First View
  • Cut-out人物を切り抜き、背景から独立させる
  • Color Grading肌と衣装のトーンを黒背景に合わせて補正
  • Composite斜めの面とオレンジの光の中に配置
  • Light & Shadow光・影を調整し、奥行きと立体感をつくる
2人の人物と背景を組み合わせた最終構成
03Final Visual — Composition

04

FIRST VIEW DESIGN

Desktop — 1440px

GRIT+ ファーストビュー PC版 — デザインポイント注釈付き 01 02 03

  1. 01MESSAGE

    「運動嫌い専用」「完全オーダーメイド」を大きく配置し、サービスの特徴をファーストビュー内で明確化。

  2. 02TRUST

    「会員満足度94%」を視覚的に強調し、サービスへの安心感につなげる。

  3. 03CONVERSION

    無料カウンセリングへのCTAを画面下部に大きく配置し、次のアクションへ誘導。

05

RESPONSIVE DESIGN

Desktop / Mobile

GRIT+ ファーストビュー PC版
PCDesktop — 1440px
GRIT+ ファーストビュー SP版
SPMobile — 375px
  1. 1Copy
  2. 2Figure
  3. 3Trust
  4. 4CTA

スマートフォンでは、キャッチコピー・人物・実績・CTAの優先順位を維持しながら、縦方向の視線移動に合わせて再構成。 限られた画面内でもサービスの特徴が直感的に伝わるレイアウトに調整しました。