Service / SaaSJapanPicked 2026.09.28

neuler pilates（ニューラピラティス）

サービス / SaaSのWebデザイン参考 — ピラティススタジオ

サイトを見るneuler.jp

neuler.jp開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

目次は左に、予約は右に追い出してる。

大阪梅田・中津のマシンピラティススタジオneuler pilatesのサイトは、PCでも540px幅のカラムを中央に置き、ナビと予約カードを左右へ逃がして本文を読み物に専念させた。

BrunoStructure & IA

ビフォーアフターで変化を見せて、お客様の声、講師4人ときて、料金はそのあとなんだよね。何が変わるか、誰が教えるかを納得させてから値段を出す。予約までの順番に無理がないのがいい。

1FVの写真は上辺を半円にしたアーチ型。四角い画面の中で、スタジオの柔らかさを輪郭だけで伝える
2予約カードは右の余白に常駐。どこまで読んでも、体験レッスン5,500円の入口が視界から消えない
3料金表から先は茶色の面に切り替え。白い読み物パートからトーンを落とし、お金の話をはっきり区切る

Color

neuler pilates（ニューラピラティス）の配色

Typography

使用フォントと無料の代替

本文・見出し・ナビ

Aa あア

使用: Gen Interface JP
代替: Noto Sans JP

FVのキャッチ（身体が整うパーソナルマシンピラティス）

Aa あア

使用: Noto Serif JP
代替: Noto Serif JP

英字ラベル（About・Plan・Flow）と講師名

Aa あア

使用: Libre Baskerville
代替: Libre Baskerville

実測タイプスケール1440px幅 · 2026-09-27 計測

特大見出しKatapick 型13px · 1.5 · 500
見出しKatapick 型20px · 1.4 · 500
小見出しKatapick 型17px · 1.4 · 600
本文The quick brown fox — 参考を型にする15px · 1.4 · 500
ボタンKatapick 型13.3px · — · 400

Structure

ページ構成（上から順）

01
カラム外の固定要素
1440px幅では中央540pxの外側をピーチ系の背景にし、左に「neuler pilatesについて」から「お問い合わせ」まで9項目のテキストナビ、右に「かんたんWeb予約」バッジ付きの白い予約カード、上部中央にロゴを置く。
02
FV
上辺を半円にしたアーチ型のレッスン写真に、「完全個室／女性専用」の小見出しと明朝体のキャッチ、「全員が有資格者」など3つの白いピル型バッジを重ねる。下端はオレンジのグラデーション帯で「体験レッスン 50分 5,500円（税込）」と予約ボタン。
03
About（特長）
スタジオ写真の下に、丸いアイコン付きで5つの特長を罫線区切りで縦に並べる。ホームエクササイズ動画の資料見本2枚と「サンプルページを見る」リンク、スタジオとマシンの写真のコラージュが続く。
04
中間の予約バナー
オレンジの地に白いカードを置き、ロゴと「体験レッスンを予約する」を再掲する。
05
ビフォーアフター・お客様インタビュー
方眼の背景に、体験レッスン50分1回での姿勢の変化をbefore/afterの写真2枚で比較し、変化点を吹き出しで注記。その下に写真付きのインタビューカードを1枚置く。
06
インストラクター
講師4名を、右寄せの写真・英字の名前・資格の箇条書き・紹介文の順で縦に並べ、最後に薄いグレーのカードで学術監修者を紹介する。
07
料金・プラン
上辺をアーチ状にした茶色の面に、体験レッスン5,500円・入会金11,000円・単発50分8,800円・4回券34,400円・6回券49,500円を半透明の行で並べ、右端に税込価格を揃える。
08
体験レッスンの流れ
「ご予約」「ご来店・お着替え」「カウンセリング」「体験レッスン」の4ステップを、写真付きカードの横並びで見せ、右上に「scroll →」の表示を置く。
09
よくあるご質問〜店舗情報・フッター
「はじめてピラティスを行いますが大丈夫でしょうか？」など6問のFAQ、お知らせ3件、お問い合わせ、店舗情報、フッターの順で締める。

Interaction

アニメーション・インタラクション

左ナビ・右の予約カード・上部のロゴは position: fixed でカラムの外に常駐している（フルページキャプチャの各所に写り込んでいる）
予約カード内の「体験レッスン最短 9月30日(水)12:00〜」はキャプチャごとに見えている位置が違い、横に流れるティッカーと思われる
スマホでは右の予約カードが画面下の固定バーに変わり、レッスン写真のサムネイル付きで常に表示される
体験レッスンの流れは横に並んだカードを横スクロールで送る作り。Next.js で構築されている

スクロールのコマ撮り200–8000ms

neuler pilates（ニューラピラティス）をスクロールしたときのフレーム1 — 01

neuler pilates（ニューラピラティス）をスクロールしたときのフレーム2 — 02

neuler pilates（ニューラピラティス）をスクロールしたときのフレーム3 — 03

neuler pilates（ニューラピラティス）をスクロールしたときのフレーム4 — 04

neuler pilates（ニューラピラティス）をスクロールしたときのフレーム5 — 05

neuler pilates（ニューラピラティス）をスクロールしたときのフレーム6 — 06

検出された技術:Next.js

Reproduce

再現するときのポイント

01PCでは幅540pxのカラムを中央に置き、左に9項目のテキストナビ、右に予約カードを position: fixed でカラム外に配置する
02カラム外はピーチ系のグラデーションにざらついた質感を重ね、白いカラムを紙のように浮かせる
03FVの写真は上辺だけを大きく角丸にしたアーチ型で切り抜き、下端に価格入りの予約帯を重ねる
04料金表は茶色の面に半透明の行を重ね、左に項目・右に税込価格の2列で揃える

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

neuler-pilates.katapick.md

1---
2title: "neuler pilates（ニューラピラティス） デザイン分析書"
3source: https://neuler.jp/
4katapick: https://katapick.com/sites/neuler-pilates
5category: サービス / SaaS
6region: 国内 (JP)
7tags: [写真主体, くすみカラー, 角丸, 固定ナビ, 固定CTA, ロングページ]
8launched: 2025-09
9verified: 2026-10-28
10measured: 2026-09-27 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# neuler pilates（ニューラピラティス） — デザイン分析書
16 
17> 目次は左に、予約は右に追い出してる。大阪梅田・中津のマシンピラティススタジオneuler pilatesのサイトは、PCでも540px幅のカラムを中央に置き、ナビと予約カードを左右へ逃がして本文を読み物に専念させた。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-27 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22