Logo

NEOS GYM | 理想のカラダへ導くトレーニングジム

クレジット
Avatar
コーディング
配色
画像の選択
文章
ロゴ

NEOS GYM | 理想のカラダへ導くトレーニングジム

デザインカンプをもとにコーディングを行い、ロゴ・配色・画像・テキストなどを調整し、オリジナル要素を加えて制作した架空のトレーニングジムサイトです。 初心者から上級者まで幅広く対応するジムを想定しつつ、特にこれから本格的に身体づくりを始めたい20〜30代をメインターゲットとして設計しました。 ファーストビューでは理想の身体づくりを直感的に伝えるコピーとスライド演出で視線を引き、その後選ばれる理由→入会までの流れ→実績→プランといった構成で、信頼感を高め、行動(体験予約)へとつながる導線を設計しています。 デザイン面では黒を基調にした配色でストイックさと高級感を表現し、余白やテキスト配置によって圧迫感を軽減し、初心者にも受け入れやすい印象を意識しました。 実装はHTML・CSS・JavaScriptを用い、レスポンシブ対応のほか、ファーストビューのスライドアニメーションやスクロール時のフェードイン、ハンバーガーメニューの開閉など、視認性や操作性を考慮したアニメーションを取り入れています。 使用技術 : HTML / CSS / JavaScript 制作期間 : 8日 ※リンク先ページは未実装です
クレジット
Avatar
コーディング
配色
画像の選択
文章
ロゴ
シェア
西の他の作品
ウェブ
作品を見る
採用サイト
ウェブ
作品を見る
IT企業サイト
ウェブ
作品を見る
美容室サイト
foriio

あなたのforiioを無料で作成

fori.io/
Logo

NEOS GYM | 理想のカラダへ導くトレーニングジム

デザインカンプをもとにコーディングを行い、ロゴ・配色・画像・テキストなどを調整し、オリジナル要素を加えて制作した架空のトレーニングジムサイトです。 初心者から上級者まで幅広く対応するジムを想定しつつ、特にこれから本格的に身体づくりを始めたい20〜30代をメインターゲットとして設計しました。 ファーストビューでは理想の身体づくりを直感的に伝えるコピーとスライド演出で視線を引き、その後選ばれる理由→入会までの流れ→実績→プランといった構成で、信頼感を高め、行動(体験予約)へとつながる導線を設計しています。 デザイン面では黒を基調にした配色でストイックさと高級感を表現し、余白やテキスト配置によって圧迫感を軽減し、初心者にも受け入れやすい印象を意識しました。 実装はHTML・CSS・JavaScriptを用い、レスポンシブ対応のほか、ファーストビューのスライドアニメーションやスクロール時のフェードイン、ハンバーガーメニューの開閉など、視認性や操作性を考慮したアニメーションを取り入れています。 使用技術 : HTML / CSS / JavaScript 制作期間 : 8日 ※リンク先ページは未実装です
クレジット
Avatar
コーディング
配色
画像の選択
文章
ロゴ
シェア
西の他の作品
ウェブ
作品を見る
採用サイト
ウェブ
作品を見る
IT企業サイト
ウェブ
作品を見る
美容室サイト
foriio

あなたのforiioを無料で作成

fori.io/