【Her Tech 架空案件】女性専用ジム紹介

制作の流れ

···課題内容を確認後、ペルソナを設定し、訴求ポイントを整理。参考になりそうな既存のデザインをピックアップし、それらを参考に情報設計を意識してワイヤーフレームを作成。その後、デザインのトンマナを固め、デザインカンプ制作に着手。1st viewから先に制作し、2nd view、3rd viewと順に進めていき、全体のブラッシュアップを重ねていきました。

【デザインについて】

●カラー

ベースカラーの背景は、アクセントカラーに使用した淡いグラデーションカラーが映えるようにコントラストを強める意図と、余白の開放感をより表現するため、白を選びました。

メインカラーは、LPの主軸である女性らしさを表現する落ち着いたくすみピンクを選びました。

アクセントカラーには、「前向きな気持ちになれる」「ワクワク感」をプラスするイメージで、透明度を上げた淡いグラデーションカラーを選びました。

●タイポグラフィ

ターゲットの凛とした女性をイメージし、1st viewやキャンペーン箇所では洗練された印象のモトヤアポロを選びました。

各viewの見出しは洗練されつつ見出しとして目を引くキアロを選び、本文は見やすさを重視しSource HanSansJPを選びました。

キャッチコピーの「女性のための」はターゲットを意識し、より「女性専用」というジムの特徴をアピールするためサイズを大きく工夫しました。

また、全体を通してキャンペーンの「5000」をアピールするために、キャンペーン箇所の中でサイズを1番大きく目立つように太さも出す工夫をしました。

キャンペーン内容の「入会金5000円OFF」ということを正確に伝えるために、「OFF」についてもしっかりと認識できる大きさにして、勘違いが生まれないように意識しました。

●情報設計

1st viewではキャッチコピーから、３つのアピールポイント、キャンペーン、CTAボタンへの自然な視線の流れを意識して配置しました。また、図形を使って情報を整理し、パッと見た時の見やすさも工夫しました。

導入のABOUTではユーザーの気持ちに寄り添う場面からスタートし、運動初心者で試しに見始めたユーザーを取りこぼさないことを意識しました。また、余白と整列を意識し、落ち着いた印象と信頼感を演出しつつ、導入部分でも「希望」や「前向きな気持ち」をイメージしてアクセントの淡いグラデーションカラーの装飾をプラスしました。

ABOUTからPOINTへの間隔を空けすぎないことで、自然に読み進められるように工夫しました。

キャンペーン箇所は、視線誘導を意識した配置で「今だけ→説明→入会金￥5000OFF→CTAボタン」とわかりやすさと自然な流れでCTAに繋げられるようにしました。

最後の一押しと残りの不安を解消する目的で、実際のご利用者さまの声を見ていただくVOICEを最後に配置し、CTAへの後押しができるようにと考えました。

【工夫したポイント】

ヘッダーのブランドロゴや見出しは、視認性を意識して白い光の素材を敷く工夫をしました。

キャンペーン箇所はCTAに繋げることを意識して、「今だけ」を枠外にはみ出し、枠外の左右上に置いた強調装飾、写真に角度を付けることで動きを出し、ワクワク感を演出しました。

全体を通して本文はできるだけ短く簡潔にまとめることで、まずは読んでみようかなと思ってもらえるように意識しました。

また、VOICEでは安心を感じていただく目的でご利用者さまの声をたっぷり載せつつ、上部に短くどのような内容なのかを簡潔に載せ、詳しい内容も読んでみようかなと思えるように工夫しました。

最後のCTAボタンの上には、CTAに繋げる最後の後押しの意味合いで背中を押す文言をさりげなく配置しました。