出典：healthplus.cz ↗ 確認日 2026.10.31
Editor's note
編集部の視点
申し込みボタンと会員ページの入口をヘッダーに置き、拠点数・対象別の入口・利用者の声で迷わず選べるようにしたプラハの総合クリニック。
プラハに4つの拠点を持つ私立の総合クリニック Health+ のサイト（英語版）。ファーストビューは診察の場面の動画だけで、その下に「Health Care」「4 branches in Prague」「Our Programs」の3枚のカードが重なる。続いて成人・子ども・企業の3つのプログラム、「Why Choose Health+?」として担当医、院内で受けられる専門診療の割合（96%）、24時間365日のコールセンター、オンラインの診療記録とアプリの5点、日付つきの利用者の声、ブログ、加盟団体と続く。ヘッダーの「Get services（申し込み）」はスマホでも上部に残る。
- 01 ヘッダーに「申し込み」と「会員ページ」の2つの入口を並べ、新しい人と通っている人を最初に分ける
- 02 ファーストビュー直下のカードに「プラハに4拠点」を入れ、通える場所があるかを最初に答える
- 03 成人・子ども・企業の3つに入口を分け、自分がどれに当たるかで選べるようにする
Conversion
集客の工夫
- 申し込みボタンの常設 （あり） ヘッダーに「Get services」（PC・SP とも上部に固定）
- 会員ページの入口 （あり） ヘッダーに「Client zone」
- 拠点の案内 （あり） ファーストビュー直下に「4 branches in Prague」
- 対象別の入口 （あり） 成人・子ども・企業の3つ
- 料金の案内 （あり） ナビに「Our Programs and Price List」
- 利用者の声 （あり） 名前の頭文字と日付つき
- 電話・メール （あり） tel:リンク 1か所・mailto:リンク 1か所
- 言語の切り替え （あり） チェコ語・英語
新しい人と、通っている人の入口を分ける
ヘッダーの右側には、白い「Get services（申し込み）」と、青い「Client zone（会員ページ）」の2つのボタンが並びます。これから申し込む人と、すでに通っている人では、サイトに来た目的が違います。最初の画面で行き先を分けておくことで、どちらの人も迷わずに済みます。スマホでも「Get services」はヘッダーに残ります。
「通えるか」に、最初に答える
ファーストビューは診察の場面の動画だけで、文字は載せていません。そのかわり、動画の下端に重なる3枚のカードの1枚が 「4 branches in Prague（プラハに4拠点）」 です。クリニックを探す人が最初に気にする「自分が通える場所にあるか」に、スクロールする前に答えています。
自分に当てはまる入口と、選ばれる理由
その下では、成人・子ども・企業の3つのプログラムを写真と説明で並べ、自分がどれに当たるかで読み進められるようにしています。続く「Why Choose Health+?」では、担当医がつくこと、専門診療の96%を院内で受けられること、24時間365日のコールセンターなどを短い見出しで示し、利用者の声には名前の頭文字と日付を添えています。
チェック項目は 2026.10.31 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #1F519C ヘッダー・見出し（青）
- #EFEEE2 カードの背景
- #E8E6D6 セクションの背景
- #FFFFFF 申し込みボタン・背景
- #98936C スライダーの矢印ボタン
- #000000 本文
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・カード | Victor Serif | Newsreader |
| 本文・ナビ・ボタン | Inter | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 44px / 400 | 1.20 | 36px / 400 |
| h3 | 32px / 500 | 1.20 | 24px / 500 |
| 本文（p） | 18px / 400 | 1.50 | 16px / 400 |
実測値（PC 1440px・SP 375px、2026.10.31 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 医療・会社案内・利用者向け・医療関係者向け・ブログ・連絡先のナビ、「申し込み」と「会員ページ」の2つのボタン、検索、言語切替（CZ）。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 医師と患者が話す場面の動画を全幅で。文字は載せない。 ファーストビュー／全面動画＋コピー型
- 03 3つの入口 「医療」「プラハに4拠点」「プログラム」のカードを動画の下端に重ねる。 一覧／カード並び型
- 04 3つのプログラム 成人、子ども、企業向けのプログラムを、写真と説明を左右交互に。 機能・強み／左右交互型
- 05 選ばれる理由 担当医、専門診療の96%を院内で、24時間365日のコールセンター、待合室のかわりのラウンジ、オンラインの診療記録とアプリの5点。 機能・強み／左右交互型
- 06 利用者の声 名前の頭文字と日付つきの声をスライドで。 推薦／利用者の声型
- 07 オンラインの診療記録 提携病院と診療記録を共有し、アプリでチャットやビデオ通話ができること。 コンセプト／写真＋メッセージ型
- 08 最新の記事 花粉症・食べすぎ・血糖の測定などのブログ記事3件。 お知らせ／ニュース一覧型
- 09 加盟・取り組み 国際的な患者中心の医療の団体 Planetree への加盟、医療経営の講座、関連の取り組み。 一覧／カード並び型
- 10 問い合わせ 「サービスに興味がありますか？お問い合わせください。」と連絡先へのボタン。 行動喚起／ボタン帯型
- 11 フッター 電話・メール、SNS、ISO 認証の案内、医療・会社案内のリンク、求人。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 ヘッダーに「新しく申し込む人」と「すでに通っている人」の入口を別々に置く
- 02 拠点の数や場所は、ファーストビューのすぐ下で答える
- 03 対象（大人・子ども・法人など）ごとに入口を分け、それぞれのページで内容と料金を案内する
- 04 利用者の声には日付を添え、今も選ばれていることを伝える
FAQ
よくある質問
Health+ のサイトで使われているフォントは？
見出しとカードの文字に Victor Serif、本文・ナビ・ボタンに Inter を使っています。Inter は無料で使えます。見出しのセリフ体を無料で近づけるなら Newsreader が候補です。
クリニックのサイトで、申し込みと会員ページを分ける意味は？
初めての人は申し込みの方法を、通っている人は予約や記録の確認をしたくてサイトに来ます。Health+ はヘッダーに「Get services」と「Client zone」を並べ、どちらの人も最初の画面で行き先が分かるようにしています。
どんな業種の参考になりますか？
複数の拠点を持つクリニック、歯科、動物病院のほか、個人と法人の両方と契約する整体院や健診の事業者などに向きます。医療の効果を書く部分は、日本では医療広告ガイドラインに沿って表現を確かめてください。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はHealth+および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Honorable Mention
