出典：thevillageschool.co.uk ↗ 確認日 2026.10.20
Editor's note
編集部の視点
ファーストビューに「1講座 £34.99 から」と予告編を置き、4つの分野ごとに講師名つきの講座を色分けして並べる、スコットランドのオンライン講座。
スコットランドの家族経営の会社が運営する、職人や作り手が教えるオンライン講座のサイト。ファーストビューは講座の予告編を背景に流し、分野名が入れ替わる見出しと「Lessons for Life」、「View Courses（講座を見る）」のボタンと「1講座 £34.99 から」の一文、右下に予告編の再生ボタンを置く。続いて「UKの優れた作り手によるオンラインのマスタークラス」という一文と、暮らし・食・ビジネス・アートと文化の4分野ごとの講座一覧。FAQ・受講者の声・掲載メディア（The Times・House & Garden・The Scotsman）・メール登録・読みものと続く。
- 01 ファーストビューに「1講座 £34.99 から」と価格を書き、予告編を再生できるようにする
- 02 講座を4つの分野に分け、分野ごとにボタンの色を変えて、講師名＋講座名のカードで並べる
- 03 FAQ・受講者の声・掲載メディアを続けて置き、申し込み前の疑問と信用をまとめて扱う
Conversion
集客の工夫
- 価格の表示 （あり） ファーストビューに「£34.99 per course」
- 予告編 （あり） ファーストビュー右下に「Play Trailer」
- 分野別の一覧 （あり） 暮らし・食・ビジネス・アートと文化の4分野
- FAQ （あり） 6問と「すべての FAQ」へのリンク
- 掲載メディア （あり） The Times・House & Garden・The Scotsman
- ギフト （あり） フッターに「Redeem Gift」、FAQ にギフトカードの質問
- メール登録 （あり） 「The School Report」とフッターの2か所
- 電話・メールのリンク （なし） トップにはなし（Contact へ）
価格と予告編を、最初の画面に置く
ファーストビューは講座の予告編を背景に流し、「講座を見る」ボタンのすぐ横に 「Start learning for £34.99 per course（1講座 £34.99 から）」 と書いています。右下には予告編の再生ボタンがあり、どんな映像で学ぶのかをその場で確かめられます。オンライン講座で気になる「いくらか」と「どんな内容か」に、最初の画面で答えている作りです。
講師の名前と、分野の色で選ばせる
講座は暮らし・食・ビジネス・アートと文化の 4つの分野ごとに並び、カードには 講師名と講座名 が上下に書かれています。ボタンの色は分野ごとにピンク・黄・ミント・ラベンダーと変えてあり、どの分野を見ているかが色で分かります。新しい講座には「New」、準備中には「Coming soon」の印が付き、講座が増えていることも伝わります。
疑問と信用を、続けて扱う
講座一覧のあとは、受講のしかた・視聴のしかた・ギフトカードなど 6問の FAQ、受講者の声、The Times・House & Garden・The Scotsman の掲載ロゴが続きます。申し込む前に気になる仕組みの疑問と、「ちゃんとした所なのか」という不安を、同じ流れの中でまとめて解消しています。運営は家族経営の小さな会社で、「私たちの話」のページでは、小さな独立した作り手とだけ組み、講師に安定した収入を届けたいと書いています。
チェック項目は 2026.10.20 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFAF0 背景
- #281926 FAQ・受講者の声の背景（深い紫）
- #4F384F 本文・見出し
- #FDE7FE 暮らしのボタン（ピンク）
- #FFD679 食のボタン（黄）
- #CEEEDF ビジネスのボタン（ミント）
- #D2C9F7 アートと文化のボタン・登録欄（ラベンダー）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| ナビ・見出し・ボタン・本文 | Acumin Pro Wide | Archivo（Expanded） |
| 講座名・「Lessons for Life」などのセリフ | Kansas New | Fraunces |
| 「JOURNAL」など幅の狭い大見出し | Nein | Oswald |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 63px / 400 | 1.10 | 33px / 400 |
| h2 | 40px / 400 | 1.10 | 20px / 400 |
| 本文（p） | 12px / 400 | 1.30 | 16px / 400 |
| ボタン | 20px / 400 | 1.30 | 15px / 400 |
実測値（PC 1440px・SP 375px、2026.10.20 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー メニュー、講座・私たちの話、中央にロゴ、右にログインとカート。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 講座の予告編を背景に流し、分野名が入れ替わる見出しと「Lessons for Life」、「講座を見る」と「1講座 £34.99 から」。右下に予告編の再生ボタン。 ファーストビュー／全面動画＋コピー型
- 03 ひとこと 「UKの優れた作り手によるオンラインのマスタークラス」という一文。 メッセージ／大きな一文型
- 04 分野別の講座 暮らし・食・ビジネス・アートと文化の4分野ごとに、講師名と講座名のカードと「すべて見る」。ボタンの色を分野ごとに変え、新しい講座に「New」、準備中に「Coming soon」。 入口／カテゴリ別スライド型
- 05 FAQ 受講のしかた・視聴のしかた・開催日・講師になるには・ログイン・ギフトカードの6問と「すべての FAQ」。 会社情報／スペック表型
- 06 受講者の声 受講者の一言を、名前と肩書きつきで。 推薦／利用者の声型
- 07 掲載メディア 「As featured in」として The Times・House & Garden・The Scotsman のロゴ。 信頼／ロゴ帯型
- 08 メール登録 「The School Report」として最新情報のメール登録。 行動喚起／メール登録型
- 09 読みもの 「JOURNAL」の大きな見出しと記事、「View Journal」。 お知らせ／ニュース一覧型
- 10 フッター 映像を背景に、メール登録、講座・FAQ・ギフト・講師募集などのリンク、使える決済手段のロゴ。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 講座やレッスンの価格は、ファーストビューに「〇〇円から」と書いてしまう
- 02 教える人の名前を講座名と並べて出し、誰に習うのかを一覧の段階で見せる
- 03 分野が複数あるなら、分野ごとに色を決めてボタンや印に使う
- 04 FAQ・受講者の声・掲載メディアは、一覧を見た直後に続けて置く
FAQ
よくある質問
The Village School のサイトで使われているフォントは？
ナビ・見出し・本文に Acumin Pro Wide（Adobe Fonts）、講座名や「Lessons for Life」に Kansas New というセリフ体、「JOURNAL」など幅の狭い大見出しに Nein を使っています。無料で近づけるなら、Archivo の Expanded・Fraunces・Oswald の組み合わせが候補です。
スクールのサイトで、価格はトップに書くべきですか？
The Village School はファーストビューのボタンの横に「1講座 £34.99 から」と書いています。価格が分からないまま講座を見比べるより、最初に目安が分かるほうが、一覧を見る人の気持ちが前に進みます。コースごとに価格が違う場合でも「〇〇円から」の形なら書けます。
どんな業種の参考になりますか？
オンライン講座・料理教室・ものづくりのワークショップ・習いごと教室など、講師と講座を並べて選んでもらうスクールに向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はThe Village Schoolおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
