Moreps Official Website

Moreps ランディングページ — ワークアウトトラッカーアプリのプロモーションサイト

背景と目的

Morepsランディングページは、FlutterとSupabaseベースのワークアウトトラッカーアプリ Moreps を紹介するために構築したプロモーションサイトです。このランディングページは単なる情報ページではなく、ユーザーがアプリをダウンロードする前にその体験を伝えることができるブランディングメディアとして設計されています。

開発の主な焦点は、モダンなデザイン、高いパフォーマンス、そして生き生きとしたインタラクションの組み合わせにあります。スムーズなアニメーション、3Dパララックス効果、シームレスな要素トランジションまで — すべてが読み込み速度を犠牲にすることなく魅力的な体験を提供するように設計されています。

このウェブサイトは、SEO、Open Graph、サイトマップ、拡張可能なコード構造を備え、プレゼンテーション、ポートフォリオ、デジタルプロダクトのプロモーション用に最適化されています。

主な機能

インタラクティブヒーローセクション. シャイマーエフェクトのヘッドライン、GitHubリポジトリとデモ動画へのCTA、カーソルの動きに追従する3Dパララックスアプリモックアップ、アプリの主要機能を表示するフローティングUIカード。

機能紹介. ランディングページはMorepsの3つの主要機能を視覚的に提示 — ワークアウトビルダー（トレーニングプログラム作成、リアルタイムでのレップ数と重量記録、スマートレストタイマー、KG↔LBS変換）、分析と進捗（自動PR検出、トレーニング進捗チャート、体重追跡、インタラクティブな進捗可視化）、ワークアウト履歴（トレーニングカレンダー、詳細なセッションログ、アクティビティサマリー、無限スクロール履歴）。

ユーザーエクスペリエンス. Lenisによるスムーズスクロール、Framer Motionを使用したアニメーション、グラスモーフィズムとネオンデザインシステム、インタラクティブなカスタムカーソル、デスクトップ・タブレット・モバイルに対応したレスポンシブデザイン。

ブランディングとマーケティング. リポジトリへのCTA、機能ハイライトセクション、クイックナビゲーション付きフッター、チーム情報を含むデベロッパープロフィールモーダル。

SEOと最適化. Open Graphメタデータ、Twitter Card、自動サイトマップ、robots.txt、Next.js App Routerを使用したパフォーマンス最適化。

開発の課題

このプロジェクトの最大の課題の一つは、パフォーマンスを犠牲にすることなくモダンでインタラクティブなランディングページを作成することでした。パララックス、フローティングカード、グローエフェクト、カスタムカーソル、ページトランジションなど、さまざまなアニメーションがすべての画面サイズでスムーズに動作する必要がありました。

さらに、各セクションを他のプロジェクトでさらに開発したり再利用したりできるよう、コンポーネント構造をモジュール式に保つことも重要でした。

技術スタック

成果

このプロジェクトを通じて、私は単なるランディングページではなく、Morepsアプリの価値を視覚的かつわかりやすく説明できるプロダクトプレゼンテーションメディアを構築しました。デザイン全体、コンポーネント構造、アニメーション、SEO最適化はすべて、プロフェッショナルな印象を与えながら、潜在的なユーザーやポートフォリオを見る採用担当者に対するアプリの魅力を高めるように設計されています。

🔗 Live website: https://moreps.vercel.app