出典：themindroom.com.au ↗ 確認日 2026.10.19
Editor's note
編集部の視点
「何に悩んでいますか？」と問いかけ、33の悩みのテーマから担当の心理士を探せるようにしたメルボルンの心理クリニック。
メルボルンのコリングウッドにある心理クリニック The Mind Room のサイト。PC のファーストビューは左右2分割で、左のミント色の面に「What’s on your mind?（何に悩んでいますか？）／Find your psychologist（あなたの心理士を探す）」と、不安・ADHD・燃え尽き・カップルセラピー・睡眠など33の悩みのテーマのボタン。右は黄色の面に「個人でも組織でも、経験ある心理士がお手伝いします」という一文と、シドニー進出のお知らせ。続いてライブラリの記事（タグつき）、個人向け・組織向けのサービス紹介、メール登録、住所・電話・メール・曜日ごとの受付時間。
- 01 「何に悩んでいますか？」と問いかけ、悩みのテーマから担当の心理士を探せるようにする
- 02 PC では悩みのテーマの面を左に固定し、どこまで読んでも探す入口が見える
- 03 受付時間を曜日ごとにフッターに書き、電話する前の疑問に答える
Conversion
集客の工夫
- 悩みから探す入口 （あり） ファーストビューに33のテーマ（SP は8つと「More」）
- オンライン予約 （あり） ヘッダーに「Book Online」
- 予約ボタンの目立たせ方 （なし） 「Book Online」は塗りのないテキストリンク
- 受付時間の明記 （あり） フッターに曜日ごとの時間（日曜休み）
- 電話・メール （あり） tel:リンク 1か所・mailto:リンク 1か所
- 個人と組織の入口 （あり） For Individuals と For Organisations
- 読みもの （あり） ライブラリの記事を、執筆者・日付・タグつきで
- メール登録 （あり） 「What updates would you like to hear from us?」のフォーム
「何に悩んでいますか？」から始める
PC のファーストビューは左右に分かれ、左のミント色の面に「What’s on your mind?（何に悩んでいますか？）」と「Find your psychologist（あなたの心理士を探す）」。その下に、不安・ADHD・燃え尽き・カップルセラピー・睡眠・トラウマなど33の悩みのテーマがボタンで並びます。専門用語の診療メニューではなく、相談者が自分の状況を言い表す言葉を入口にしているのが要点です。ボタンはスタッフ紹介ページの該当テーマにつながります。SP では8つを見せ、残りは「More」にまとめています。
探す入口を、ずっと見える場所に
PC では、この悩みのテーマの面が左に固定されたまま、右側だけがスクロールしていきます。お知らせやライブラリの記事を読んでいる間も、「自分の悩みから心理士を探す」入口が画面から消えません。ライブラリの記事には執筆者・日付・タグがつき、タグから同じテーマの記事に移れます。
受付時間と連絡先を、はっきり書く
フッターには住所（コリングウッド）・電話・メールと、月〜木・金・土・日の受付時間が曜日ごとに書かれています。ヘッダーには「Book Online」もあります。ただし予約は塗りのないテキストリンクで、ほかのナビと同じ見た目です。予約を主な目的にするなら、ボタンに色をつけて見分けやすくする余地があります。個人向けと組織向けのサービスは、別々の入口で案内しています。
チェック項目は 2026.10.19 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #BDEEE1 ファーストビュー左の面・記事のタグ（ミント）
- #EED55C メッセージの面（黄色）
- #13B5EA ロゴの円（青）
- #000000 見出し・本文
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ボタン | Montserrat | Montserrat |
| 「Find your psychologist」などの添え書き（セリフ体） | Minion Pro | Crimson Pro |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 30px / 400 | 1.46 | 30px / 400 |
| h2 | 20px / 400 | 1.50 | 20px / 400 |
| h3 | 26px / 400 | 1.39 | 18px / 400 |
| 本文（p） | 26px / 400 | 1.39 | 18px / 400 |
| ボタン | 16px / 400 | 1.15 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.19 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー クリニックの紹介・サービス・ライブラリ・「Book Online」・検索と、右上の丸いロゴ。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 左に「何に悩んでいますか？」と33の悩みのテーマのボタン、右に黄色の面のメッセージ。PC では左の面が固定される。 ファーストビュー／文字＋画像の左右分割型
- 03 お知らせ シドニー（ランドウィック）への拠点の拡大を、写真つきで。 ファーストビュー／全面写真＋コピー型
- 04 ライブラリ 心理士が書いた記事を、執筆者・日付・タグつきで。タグから同じテーマの記事に移れる。 一覧／カード並び型
- 05 メール登録 受け取りたい更新の種類を選ぶ登録フォーム。 行動喚起／メール登録型
- 06 サービス 「Psychology Services in Melbourne」。個人向けと組織向けの2つの入口。 機能・強み／左右交互型
- 07 フッター 住所・電話・メール、曜日ごとの受付時間、SNS、採用、法人の問い合わせ。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 症状や悩みの言葉をボタンにして、相談者が自分のことだと思える入口を作る
- 02 悩みのボタンから、そのテーマを担当するスタッフの紹介に直接つなぐ
- 03 受付時間・住所・電話は曜日ごとにはっきり書き、フッターに常に置く
- 04 個人の相談と法人の依頼は、入口を分けて案内する
FAQ
よくある質問
The Mind Room のサイトで使われているフォントは？
見出し・本文・ボタンに Montserrat（無料の Google Fonts）、「Find your psychologist」などの添え書きにセリフ体の Minion Pro を使っています。Minion Pro は有料なので、無料で近づけるなら Crimson Pro などが候補です。
クリニックのサイトで「悩みから探す」入口は、どう作ればいいですか？
The Mind Room は、不安・ADHD・睡眠・カップルセラピーなど、相談者が使う言葉そのものをボタンにしています。ボタンはスタッフ紹介ページの該当テーマにつながります。診療科や治療法の名前より、相談者が自分の状況を言い表す言葉を入口にするのが要点です。効果や結果を約束する言い方は避け、何を相談できるかを示すにとどめます。
どんな業種の参考になりますか？
心療内科・カウンセリングルーム・歯科・整骨院など、相談内容によって担当や受け方が変わる医療・相談系の事業に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はThe Mind Roomおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
