出典：vcass.vic.edu.au ↗ 確認日 2026.10.21
Editor's note
編集部の視点
「オーディションと入学」のボタンをヘッダーに常に置き、入学までを6つの手順で見せるメルボルンの芸術系中等学校。
ダンス・音楽・演劇・美術を学ぶメルボルンの中等学校 VCASS のサイト。ファーストビューは公演の映像に「教育と芸術が出会う」という大きな見出し。PC のヘッダーには「オーディションと入学」のボタンが常に表示される。トップは4つの専攻、日付と専攻名つきの公演・イベント、学校の様子、ニュースと続き、入学のページでは、学年と専攻ごとの締め切り、受け入れる学年、出願の6つの手順、学校での実技審査の日程を1ページにまとめている。
- 01 PC のヘッダーに「オーディションと入学」のボタンを常に置き、どのページからでも出願の案内へ行けるようにする
- 02 出願を「準備動画を見る」から「支払って提出」まで6つの番号つき手順にし、必要な書類も具体的に書く
- 03 公演とニュースに日付と専攻名のラベルを付け、生徒の活動を学校の実績として見せる
Conversion
集客の工夫
- 出願への導線 （あり） PC のヘッダーに「AUDITIONS & ENROLMENT」を常に表示
- 締め切りの明示 （あり） 学年と専攻ごとに受付開始日と締切日
- 出願の手順 （あり） 番号つきの6つの手順
- 受け入れる学年 （あり） 音楽・ダンスは7〜12年生、演劇・美術は11年生から
- 行事の告知 （あり） 公演・イベントを日付と専攻名つきで
- 電話番号と住所 （あり） フッターに 03 8644 8644 と所在地
- 在校生・保護者向けの入口 （あり） フッターに学校の連絡システムへのログイン
- スマホのヘッダーに出願ボタン （なし） なし（MENU の中）
出願の入口を、ヘッダーから外さない
PC のヘッダーは画面上部に浮いた濃い帯で、右端に 「AUDITIONS & ENROLMENT（オーディションと入学）」のボタンが常に表示されています。ファーストビューは公演の映像に「教育と芸術が出会う」という大きな見出しだけですが、どこまでスクロールしても出願の案内に戻れます。入学希望者を集めることが学校のサイトのいちばんの仕事だと、はっきり分かる作りです。
出願の流れを、6つの手順で見せる
入学のページは「入学はオーディションで決まる」と最初に書き、学年と専攻ごとの締め切りを並べます。続いて出願の流れを 「準備動画を見る」「書類をそろえる」「動画を撮る」「オンラインの申込書」「アップロード」「支払って提出」の6つの番号つき手順で示し、写真・前年の成績表・200〜300語の志望理由書など、用意するものまで具体的に書いています。迷う人が出やすいところを先回りして答える構成です。
生徒の活動を、そのまま実績にする
トップの中盤は、オレンジの背景に公演や展示を 日付と専攻名つきで並べ、その下に受賞や行事のニュースが続きます。8月から10月だけで、音楽・ダンス・演劇・美術の7つの行事が並ぶことで、「ここに入ると何ができるか」が具体的に伝わります。学校の説明を長く書くより、活動の量を見せるほうが説得力があります。
チェック項目は 2026.10.21 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #1F1E1D 背景・ヘッダー
- #FFBC5E 公演・イベントの背景
- #FFF2E0 ニュースの背景
- #E6E5DD 濃い背景の上の文字
- #854000 オレンジの上の文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・ラベル | GT Walsheim Condensed | Barlow Condensed |
| 本文 | GT Walsheim | DM Sans |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 129px / 800 | 0.80 | 52px / 800 |
| h2 | 93px / 800 | 0.90 | 40px / 800 |
| h3 | 50px / 800 | 0.90 | 28px / 800 |
| 本文（p） | 13px / 400 | 1.50 | 11px / 400 |
| ボタン | — | — | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.21 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 浮いた濃い帯に、ロゴ・4つのナビ・検索・「オーディションと入学」のボタン。上部に固定。 ヘッダー／中央に浮くピル型
- 02 ファーストビュー 公演の映像に「教育と芸術が出会う」と、次の世代の踊り手・音楽家・作り手を育てるという一文。 ファーストビュー／全面動画＋コピー型
- 03 学校の考え方 芸術の訓練と学業のどちらかを選ばなくていい、という大きな一文と、州の上位校に入る成績。 メッセージ／大きな一文型
- 04 4つの専攻 音楽・ダンス・演劇・美術の入口。 一覧／カード並び型
- 05 公演・イベント オレンジの背景に、日付と専攻名つきの公演・展示。 お知らせ／ニュース一覧型
- 06 学校の様子 授業や公演の写真と映像。 動画／動画カード型
- 07 ニュース 受賞や行事のお知らせを、日付と専攻名つきで。 お知らせ／ニュース一覧型
- 08 フッター 大きな学校名、所在地・電話、連絡システムへのログイン、規約。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 生徒募集がいちばん大事な学校は、出願・入学の案内をヘッダーのボタンにして常に見せる
- 02 出願の流れは番号つきの手順にし、各段階で用意するものを具体的に書く
- 03 締め切りは学年やコースごとに表にして、受付中か締め切ったかも書く
- 04 発表会や受賞のお知らせに日付とコース名を付け、活動の多さを実績として並べる
FAQ
よくある質問
VCASS のサイトで使われているフォントは？
見出しとラベルに GT Walsheim Condensed、本文に GT Walsheim を使っています。どちらも有料書体なので、無料で近づけるなら Barlow Condensed と DM Sans の組み合わせが候補です。
入学案内のページは、どう組み立てればいいですか？
VCASS は「締め切り」「出願できる人」「受け入れる学年」「出願の6つの手順」「実技審査の日程」の順に1ページで並べています。知りたい順に上から答えていくと、問い合わせを減らしながら出願まで進んでもらえます。
どんな業種の参考になりますか？
音楽教室・ダンススクール・美術予備校・専門学校など、入学や入会に審査や選考がある教育機関に向きます。発表会や展示会を多く開く教室なら、行事の告知の見せ方も使えます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はVCA Secondary Schoolおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
