URL

https://energygym.ymizomasa.com/

Source Code (GitHub)

https://github.com/mizonoel/lp-concept-site

Production Period

・デザイン：20時間
・フロントエンド開発：12時間
・WordPress構築：3時間

Overview

架空のフィットネスジム「ENERGY GYM」のランディングページを制作。
 大会を目指す上級者からダイエット目的の初心者まで、幅広い層に訴求できる構成を意識しました。
 無料体験や見学申し込みなど、ユーザー行動を自然に促す導線設計を行っています。

Design Concept

テーマは「エネルギッシュ × スタイリッシュ」。黒と赤をベースに力強さを表現しつつ、白余白を多く取り入れて視認性を確保。 太めのフォントや大きなビジュアルを用い、見るだけでモチベーションが上がるような“熱量のあるデザイン”を目指しました。 また、視線誘導を意識したセクション構成により、ページ全体で流れのある体験を実現しています。

Skills

HTML / CSS / JavaScript / GSAP / WordPress / Figma

Technology

・HTML / CSS / JavaScript：数値カウントアップアニメーションで実績（会員数）を動的表示、セクションごとのフェードイン・スライドイン演出、画像拡大、サイドスクロールを実装
・Figma：ワイヤーフレームからデザインモックまでを制作し、配色やタイポグラフィを統一
・WordPress（オリジナルテーマ）：PLANやFAQなどをCMS化し、UI上から簡単に更新できる仕組みを構築

Result / Learning

アニメーション演出を取り入れつつ、可読性やアクセシビリティを損なわないバランスを学びました。 また、CTA（行動喚起）の配置と文言によるコンバージョン最適化を意識した設計を実践。 デザイン・構成・UI演出をトータルで統一することで、説得力のあるブランドLPの構築ノウハウを得ました。