# neuler pilates（ニューラピラティス）｜サービス / SaaSのWebデザイン参考

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

- URL: https://neuler.jp/
- 解説ページ: https://katapick.com/sites/neuler-pilates
- カテゴリ: サービス / SaaS / 地域: 国内（JP）/ 業種: ピラティススタジオ
- テイスト: 写真主体、くすみカラー、角丸、固定ナビ、固定CTA、ロングページ
- 公開・リニューアル: 2025-09 / Katapick掲載: 2026-09-28 / 最終確認: 2026-10-28
- 再現難易度: 2/5

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

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

## 配色
- #f3caaf Peach Beige（カラム外の背景）
- #ffffff White（中央カラム・予約カードの背景）
- #333333 Charcoal（本文テキスト）
- #886556 Cocoa（英字ラベル・見出しのアクセント）
- #837362 Mocha（料金・プランと体験の流れの背景）
- #eda849 Apricot（FV下の予約帯・Web予約バッジ（スクショから採色））

## フォント
- 本文・見出し・ナビ: Gen Interface JP（代替: Noto Sans JP）
- FVのキャッチ（身体が整う パーソナルマシンピラティス）: Noto Serif JP（代替: Noto Serif JP）
- 英字ラベル（About・Plan・Flow）と講師名: Libre Baskerville（代替: Libre Baskerville）

## よくある質問
### neuler pilates のサイトはPCでどう見える？
PCでも幅540pxのスマホ幅カラムを画面中央に置き、左右の余白に目次ナビと体験レッスンの予約カードを固定する構成です。本文はカラム内で読ませ、移動と予約はカラム外に任せています。

### 小規模スタジオのサイトで予約導線を常に見せるには？
PCでは右の余白に予約カードを固定し、スマホでは画面下の固定バーに切り替える方法が参考になります。FV下と本文の途中にも価格入りの予約帯を置き、どこからでも体験予約へ進めるようにしています。

### 料金表を見やすくするコツは？
料金・プランから背景を茶色に切り替え、半透明の行に項目と税込価格を2列で並べています。回数券には1回あたりの金額と有効期限を小さく添えています。

### サイトの写真を参考資料として使ってもいい？
スタジオ・講師・ビフォーアフターの写真やロゴの権利は運営元に帰属します。参考にするのはカラム構成や配色、予約導線にとどめ、画像は使用しないでください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「デザイン分析MD」は https://katapick.com/sites/neuler-pilates からダウンロードできます。
出典: Katapick（https://katapick.com）