出典：whitecliffe.ac.nz ↗ 確認日 2026.10.30
Editor's note
編集部の視点
見学予約・出願・電話相談の3つのボタンを常に上に置き、学部の入口と学生作品・説明会・キャンパスの住所までを1ページに並べるニュージーランドの美術・デザイン系の学校。
オークランドに本部を置く Whitecliffe のサイト。画面上部には「SCHEDULE A TOUR（見学を予約）」「APPLY NOW（出願）」「BOOK A PHONE CALL（電話相談を予約）」の3つのボタンが常に表示され、出願だけが金色。ファーストビューは学生や作品の写真に「40年以上、業界とつながった実践的な学び」の一文と、学部（FACULTIES）と資格（QUALIFICATIONS）の切り替えタブ、5つの学部の入口。その下に「2027年の入学受付中」の告知と学校案内（プロスペクタス）のダウンロード、学生作品、動画、卒業生の声、イベントと説明会、ニュース、4つのキャンパスの住所が続く。右下にはチャットのボタン。
- 01 見学予約・出願・電話相談の3つを画面上部に常に置き、出願だけを金色にして目立たせる
- 02 ファーストビューで「学部から選ぶ」「資格から選ぶ」をタブで切り替え、探し方の違う人に両方の入口を用意する
- 03 学生作品のカードに、名前・学年・学部・資格名を添え、どのコースで何が作れるようになるかを見せる
Conversion
集客の工夫
- 見学の予約 （あり） 上部に常に「SCHEDULE A TOUR」
- 出願の導線 （あり） 上部に常に「APPLY NOW」（金色）
- 電話相談の予約 （あり） 上部に常に「BOOK A PHONE CALL」
- 資料請求 （あり） 学校案内のダウンロードを2か所に
- 募集時期の告知 （あり） 「2027年の入学受付中」をファーストビューの下に
- 説明会・イベント （あり） 「EVENTS + OPEN DAYS」に日時つきで
- キャンパスの所在地 （あり） 4つのキャンパスの住所と地図へのリンク
- 電話番号の掲載 （なし） フッターに 0800 の番号（文字のみ、タップ発信のリンクなし）
申し込みの手前に、小さな一歩を2つ置く
画面上部には 「SCHEDULE A TOUR（見学を予約）」「APPLY NOW（出願）」「BOOK A PHONE CALL（電話相談を予約）」 の3つのボタンが常に表示されています。色がついているのは出願だけで、見学と電話相談は黒です。いきなり出願しない人にも、見学や電話という小さな一歩が常に見えている作りです。
「分野から」と「資格から」の両方で探せる
ファーストビューには学部（FACULTIES）と資格（QUALIFICATIONS）の切り替えタブがあり、IT・デザイン・ファッション・美術・アートセラピーの5つの学部の入口が並びます。学びたい分野が決まっている人と、取りたい資格が決まっている人の両方に入口を用意しています。その下には「2027年の入学受付中」の告知と、学校案内（プロスペクタス）のダウンロードがあります。
作品と卒業生で、学んだ先を見せる
学生作品のカードには、名前・学部生か大学院生か・年・学部・資格名が添えられ、どのコースで何が作れるようになるかが分かります。卒業生の声にも修了した資格名がつきます。ページの終わりにはイベントと説明会、オークランド2か所・ウェリントン・クライストチャーチの4つのキャンパスの住所が並び、見学の予約につなげています。
チェック項目は 2026.10.30 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景
- #000000 見出し・本文
- #181818 上部のボタン・学部カード
- #D59D10 出願ボタン・矢印の金色
- #575656 補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文（すべて） | GT Walsheim Pro | Outfit |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 35px / 700 | normal | 21px / 700 |
| h2 | 48px / 700 | normal | 32px / 700 |
| h3 | 26px / 700 | 1.30 | 26px / 700 |
| 本文（p） | 19px / 300 | normal | 19px / 300 |
| ボタン | 18px / 700 | normal | 14px / 700 |
実測値（PC 1440px・SP 375px、2026.10.30 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ロゴと、見学予約・出願・電話相談の3ボタン、MENU。上部に固定。 ヘッダー／ロゴ＋メニューボタン型
- 02 ファーストビュー 学生や作品の写真に「40年以上、業界とつながった実践的な学び」と、学部・資格の切り替えタブ、5つの学部の入口。 ファーストビュー／全面写真＋コピー型
- 03 入学受付の告知 「2027年の入学受付中」と、学校案内のダウンロード。 行動喚起／ボタン帯型
- 04 学生作品 名前・学部生/大学院生・年・学部・資格名を添えた作品カード。 事例・実績／リスト＋ラベル型
- 05 動画 紹介の動画を1本。 動画／動画カード型
- 06 卒業生の声 修了した資格名と名前を添えた卒業生の声。 推薦／利用者の声型
- 07 イベントと説明会 日時つきのイベント。チケットの購入ボタンつき。 お知らせ／ニュース一覧型
- 08 ニュース 学部のラベルと日付つきの記事。 お知らせ／ニュース一覧型
- 09 キャンパス オークランド2か所・ウェリントン・クライストチャーチの住所と地図へのリンク。 会社情報／スペック表型
- 10 フッター 「Whitecliffe を選ぼう」の一文、学校案内のダウンロード、連絡先とチャット。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 学校・スクールは「見学予約」「申し込み」「電話相談」を上部に常に置き、いちばん進めたいものだけ色を変える
- 02 コースの入口は「分野から」と「資格・目的から」の2通りを用意する
- 03 在校生・卒業生の作品や声には、どのコースで学んだかを必ず添える
- 04 教室が複数あるなら、トップで住所と地図へのリンクを全部並べる
FAQ
よくある質問
Whitecliffe のサイトで使われているフォントは？
見出しから本文まで GT Walsheim Pro で組んでいます。有料書体なので、無料で近づけるなら丸みのある幾何学的なサンセリフの Outfit が候補です。
学校のサイトで、申し込みにつなげるにはどうすればいいですか？
Whitecliffe は見学予約・出願・電話相談の3つを画面上部に常に表示し、出願だけを金色にしています。いきなり出願しない人にも、見学や電話という小さな一歩を用意しておくのが要点です。
どんな業種の参考になりますか？
専門学校・スクール・資格講座・習いごと教室など、見学や体験から申し込みにつなげたい教育サービス全般に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はWhitecliffeおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
