MENU
  1. ホーム
  2. 制作実績
  3. MELIA FITNESS パーソナルジムLP

PROJECT

MELIA FITNESS パーソナルジムLP

Figmaカンプをもとに、全11セクションの長尺LPを高い再現度で自主制作しました。カンプの気になる点は理由を添えて確認・提案しながら、公開前チェックまで行いました。

OVERVIEW

制作概要

実績区分
自主制作
制作種別
ランディングページ
担当範囲
コーディング・レスポンシブ対応・JavaScript実装・品質検証・サーバー公開
制作期間
約10日（2026年7月末〜8月上旬）
公開年
2026年
使用技術
Figma / FLOCSS・BEM / HTML / SCSS（CSS） / JavaScript
デモサイト
Basic認証 ID：hohabasha PASS：demo 公開サイトを見る（新しいタブで開きます）
目次

プロジェクトについて

Figmaカンプをもとに、パーソナルトレーニングジム「MELIA FITNESS」の全11セクションの長尺LPを実装し、公開前チェックを経てサーバーへ公開した自主制作です。体験予約（LINE予約）につなげる導線を、PC幅1440px・SP幅375px基準でピクセルパーフェクトを意識して再現しました。

実装と品質のポイント

  • FLOCSS・BEM、SP-firstで実装。カンプのない中間幅はレイアウト方針を定義して対応
  • 画像差分ツールでカンプとの表示差を計測し、全セクションでPC 1.35%・SP 2.95%以内まで調整
  • カンプの誤字や、閉じるアイコンなど分かりにくいUIは、理由を添えて修正・変更を提案し採用
  • 320〜2500pxの9画面幅での表示確認を含む公開前チェックと、別AIによるコードレビュー（4回）を経てサーバー公開

CONTACT

まだ、うまく説明できなくても大丈夫です。

「サイトが必要かもしれない」「今のままでよいのか相談したい」
そんな段階から、一緒に整理します。

まずは相談する
目次