webcan analyze media-arts.ac.jp
SCHOOL · 栃木県 · PICKED 2026.10.17
宇都宮メディア・アーツ専門学校学校・教室のホームページデザイン参考 — 専門学校・オレンジ・大きな太字
EDITOR'S NOTE編集部の視点
「好きをクリエイトする 個性を仕事にできる」の大きな文字と、次回のオープンキャンパスの日付で、高校生を来校に誘う。
栃木県宇都宮市の専門学校のサイト。ファーストビューはオレンジの背景に、授業の様子を切り替えて見せる縦長の写真と「好きをクリエイトする」「個性を仕事にできる」の大きな太字を置き、右上に次回のオープンキャンパスの日付を黄色の丸いバッジで出している。ピックアップトピック、学校紹介、校長のメッセージ、3つの学科、「#イラストが好き」などの好きなことから学科を探すタグ、就職サポート、訪問者別の案内、トピックス、インタビュー、オープンキャンパスと資料請求の案内と続く。
- 01オレンジの背景に、縦長の写真と画面の左右いっぱいの大きな太字を組み合わせたファーストビュー
- 02次回のオープンキャンパスの日付を、黄色の丸いバッジにして目立たせている
- 03「#ゲームするのが好き」などのタグを並べ、好きなことから学科を探せるようにしている
CONVERSION集客の工夫
オープンキャンパスと資料請求を常に出す
PCでは右上、スマホでは画面の下に、黄色の「オープンキャンパス」と紺の「資料請求」のボタンを固定している。どのページを読んでいても、来校と資料の申し込みにすぐ進める。
次回の日付をファーストビューで見せる
「Next OC オープンキャンパス 11.14（土）」のように、次回の開催日をファーストビューのバッジで出している。日付が具体的に見えると、予定に入れてもらいやすい。
訪問者別に入口を分ける
保護者・高校生・社会人・留学生・採用担当の5つの入口を並べている。進路を考える本人だけでなく、保護者や企業など立場の違う人がそれぞれの情報にたどり着ける。
チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文本文・小見出し
- 使用フォント
- りょうゴシック PlusN（Adobe Fonts）
- 無料で近いもの
- Noto Sans JP
- 用途
- 和文の大きな見出し
- 使用フォント
- コーポレート・ロゴ ver2
- 無料で近いもの
- M PLUS 1
- 用途
- 英字（見出し）
- 使用フォント
- Alexandria / Barlow Semi Condensed
- 無料で近いもの
- Alexandria
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 10px / 500 | 1.88 | 9.6px / 500 |
| h2 | 20px / 700 | 0.75 | 17.3px / 700 |
| h3 | 16px / 700 | 1.43 | 13.5px / 700 |
| 本文（p） | 16px / 700 | 1.50 | 13.5px / 700 |
| ボタン | 16.6px / 500 | 1.00 | 13.5px / 500 |
実測値（PC 1440px・SP 375px、2026.10.17 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01次のイベントの日付は、ファーストビューのバッジなど目に入る場所に出す
- 02来校予約と資料請求の2つのボタンを、PCでは右上、スマホでは画面の下に固定する
- 03「〜が好き」のタグから学科やコースを探せるようにし、まだ進路が決まっていない人の入口をつくる
- 04保護者・本人・企業など、立場ごとの入口を分ける
FAQよくある質問
宇都宮メディア・アーツ専門学校のサイトで使われているフォントは？
和文の本文は Adobe Fonts のりょうゴシック PlusN、大きな見出しはコーポレート・ロゴ ver2、英字は Alexandria と Barlow Semi Condensed です。無料で近づけるなら、本文は Noto Sans JP、見出しは M PLUS 1 の太字が使えます。
専門学校のサイトで、オープンキャンパスはどう案内するとよいですか？
このサイトのように、次回の日付をファーストビューで見せ、予約のボタンを常に画面に固定しておくと、どこから読み始めた人も申し込みに進めます。資料請求のボタンを並べておくと、来校まで決めきれない人の受け皿にもなります。
どんな業種の参考になりますか？
専門学校・大学・高校のほか、学習塾やスクールなど、説明会や体験への申し込みを増やしたい教育機関に応用できます。
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の学校・教室サイトを。
「宇都宮メディア・アーツ専門学校のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちら