出典：odysseeclinic.com.au ↗ 確認日 2026.10.22
Editor's note
編集部の視点
「施術名」と「悩み」の2つの入口を用意し、相談予約のボタンをナビに残し続けるシドニーの美容医療クリニック。
シドニーのハンターズヒルにある美容医療クリニック Odyssée のサイト。ファーストビューは顔のアップの動画を全面に流し、その中央にロゴと「Medical aesthetics for timeless results.」の一文、ナビの「TREATMENTS（施術）」「CONCERNS（悩み）」「ABOUT」「BOOK CONSULTATION（相談の予約）」を一列に並べる。スクロールするとナビは画面の上に残る。続いて「WHY ODYSSÉE?」の4項目、根拠のある医療に基づくという方針、「Method, not myth.」の一文。フッターには住所と道順、電話・メール、ギフトカード、曜日ごとの営業時間と現地の時刻が載っている。
- 01 施術名から探す入口と、悩みから探す入口の2つをナビに並べる
- 02 「相談の予約」をナビに入れ、スクロールしても画面の上に残す
- 03 曜日ごとの営業時間と現地の時刻をフッターに出し、今開いているかがすぐ分かる
Conversion
集客の工夫
- 予約ボタンの常設 （あり） ナビに「BOOK CONSULTATION」（外部の予約システムへ）
- 2つの入口 （あり） 施術（Treatments）と悩み（Concerns）
- 営業時間 （あり） フッターに曜日ごと（火曜・日曜は休み）
- 現地の時刻 （あり） フッターにニューサウスウェールズ州の現在時刻
- 住所と道順 （あり） 建物名・番地と「Get Directions」
- 電話・メール （あり） tel:リンク 1か所・mailto:リンク 1か所
- ギフトカード （あり） フッターから購入へ
- 料金の掲載 （なし） トップにはなし
施術名と悩み、2つの入口を並べる
ファーストビューの中央には、ロゴと一文に続いて「TREATMENTS（施術）」「CONCERNS（悩み）」「ABOUT」「BOOK CONSULTATION（相談の予約）」のナビが一列に並びます。施術の名前を知っている人と、悩みの言葉でしか探せない人の両方に入口があります。スクロールしてもナビは画面の上に残り、相談予約のボタンはいつでも押せます。
方針を、短い言葉で言い切る
トップの中ほどでは「WHY ODYSSÉE?」として4つの特徴を番号つきで並べ、続けて「根拠のある医療と美容医学の研究に基づく」という方針と「Method, not myth.（神話ではなく方法を）」の一文を置いています。効果を約束するのではなく、どう考えて施術するかを伝える書き方です。
今行けるかが分かる、フッターの情報
フッターには、建物名つきの住所と「Get Directions（道順）」、電話とメール、ギフトカードの購入、そして 曜日ごとの営業時間（火曜と日曜は休み）が並びます。その横には現地の現在時刻も表示されていて、今開いているかどうかがすぐ分かります。
チェック項目は 2026.10.22 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFCF8 背景（生成り）
- #1E305E 見出し・本文（紺）
- #28292A 暗いセクションの背景
- #FFFFFF 動画の上のロゴ・ナビ
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・ロゴまわりの一文（セリフ体） | psTimes | Newsreader |
| 本文・ナビ・ボタン | Basel Grotesk | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 18px / 400 | 1.10 | 18px / 400 |
| h2 | 48px / 400 | 1.00 | 32px / 400 |
| h3 | 18px / 400 | 1.10 | 24px / 400 |
| 本文（p） | 15px / 400 | 1.30 | 13px / 400 |
| ボタン | 14px / 400 | 1.00 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.22 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ファーストビュー 顔のアップの動画を全面に。中央にロゴと一文、施術・悩み・クリニック紹介・相談予約のナビ。 ファーストビュー／全面動画＋コピー型
- 02 ナビ（スクロール後） スクロールすると画面の上に残る。メニュー・施術・相談予約。 ヘッダー／ロゴ＋横並びナビ型
- 03 方針 一人ひとりに合わせること、ハンターズヒルの院に来てほしいこと。 メッセージ／大きな一文型
- 04 WHY ODYSSÉE? 体験・オーダーメイド・複数の施術の組み合わせ・肌の再生の4項目を番号つきで。 機能・強み／左右交互型
- 05 OUR PHILOSOPHY 根拠のある医療と美容医学の研究に基づくこと。施術一覧へのボタン。 メッセージ／大きな一文型
- 06 Method, not myth. 縦長の動画と、科学と研究に基づくという一文。 動画／動画カード型
- 07 OUR APPROACH 医学の知識と美的な感覚を組み合わせること。施術とチームの紹介へ。 コンセプト／写真＋メッセージ型
- 08 相談予約 「Begin your tailored journey」として相談予約へ。 行動喚起／ボタン帯型
- 09 フッター 住所と道順、電話・メール、Instagram、ギフトカード、曜日ごとの営業時間と現地の時刻。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 医院やサロンは、施術名から探す入口と、悩みや症状から探す入口の両方を用意する
- 02 予約や相談のボタンは、スクロールしても見える場所に残す
- 03 営業時間は曜日ごとに書き、休みの曜日をはっきりさせる
- 04 住所の横に地図アプリへのリンク（道順）を置き、来院の手間を減らす
FAQ
よくある質問
Odyssée のサイトで使われているフォントは？
見出しや一文はセリフ体（サイト内の名前は psTimes）、本文とナビは Basel Grotesk です。どちらも有料書体なので、無料で近づけるならセリフ体は Newsreader、本文は Inter が候補です。
「悩みから探す」入口は、医療・美容のサイトに必要ですか？
初めての人は施術の名前を知らないことが多く、「しわが気になる」「肌が荒れている」のように悩みの言葉で探します。Odyssée はナビに施術（Treatments）と悩み（Concerns）の2つを並べています。効果を約束する言い方は避け、どんな相談ができるかを示すのが要点です。
どんな業種の参考になりますか？
美容クリニック・皮膚科・歯科・エステサロン・整体など、施術の種類が多く、相談から始まる医院やサロンに向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はOdysséeおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Site of the Day
