https://karada-camp.com/

今日の分析するHP: カラダCAMP様
種類：コーポレートサイト

STEP1：デザインをパッと見たときの印象を言語化する

「楽しく運動できそう！」と期待感が持てた。写真が中心になっていて、ブルーベースのデザインだけど、女性にも好まれる要素がたくさんある。

STEP2：ロゴ・文章・写真からブランド理解を深める

• 機能面：
  キャンペーンやお知らせのカード型スライダーから始まり、トップページでジムの雰囲気を伝え、ジムに興味を持ってもらい、下層ページへつなげる導線がうまく作られていると感じた。スライダーや小さい動きのアニメーションをポイントごとに入れてあり、見てもらいたい部分への視線誘導がされている。

• 情緒面：どのような印象を与えたいか（どうターゲットに見られたいか）
  体を鍛えたいけど一人じゃなかなか続かない、始められない人をサポートする環境があるジム。一人でもくもくとトレーニングに励むジム、ではなく、トレーナーや同じくトレーニングしたい人とつながりを持って楽しみながらトレーニングできるジム。

STEP3：レイアウト・余白を分析する

▼機能面

• 写真には共通して角丸が使われ、統一感がある。

• カード型のレイアウトと、大きく写真を使い、短いテキストを左に配置して余白をゆったり取るレイアウトが交互に使われ、情報のまとまりがわかりやすい。

など

▼情緒面

• 余白は狭めの印象。スピード感、エネルギッシュな印象。

• 要素の配置は整頓されている部分とずらしている部分を組み合わせていて単調さがなく、リズム感が合って読み進めやすい。

STEP4：色味を分析する

メインカラー：#265EDD（ブルー）、#00A7FF（明るい水色）
アクセントカラー：#E2FF00（黄緑よりのイエロー）

STEP5：フォントを分析する

機能面
英字：vinyl(Adobe fontに有）　縦長のサンセリフ体。癖がなく可読性が高い。
日本語：fot-cezanne-pron(Adobe fontに有）、ヒラギノ角ゴ
情緒面
vinylが大きく配置されてスタイリッシュさはありつつも、セザンヌがやや曲線的な暖かいイメージを与えていて、女性にも好まれる、親しみやすさを感じる。

STEP6：あしらい

斜めのモチーフを使い、かっこいい、勢いのある印象。
スライダーにページを動かすボタンがかぶっている部分があり、ちょっと視認性や操作性の面でもったいないと感じた。

STEP7：アニメーション

FV：マウスの動きに合わせてじわっと動く。
MOREボタン：ホバーすると矢印の先から波紋が広がるアニメーションが珍しく、目を引かれた。
トレーナー・プログラムの写真：スクロールすると下からスライドして現れる
メニューの写真：上からスライドしてくる
勢いがあり、「ジム」のイメージに合っているように感じた。