WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 学校・教室
  4. 大竹栄養専門学校

webcan analyze www.ohtake-nutrition.ac.jp

SCHOOL · 東京都 · PICKED 2026.10.22

大竹栄養専門学校学校・教室のホームページデザイン参考 — 専門学校・手書き文字・黄色と緑

大竹栄養専門学校のトップページ（PC）
PC（1440px）
大竹栄養専門学校のトップページ（スマホ）
スマホ（375px）
出典：www.ohtake-nutrition.ac.jp ↗確認日 2026.10.21
大竹栄養専門学校学校・教室 · 東京都
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

方眼の背景に実習の写真を散らし、手書き文字の「栄養士に、まっすぐ。」で学校の目的を短く言い切る。

東京都八王子市の栄養士の専門学校のサイト。ファーストビューは方眼の背景に、調理実習・実験・学生の写真を大小ばらばらに散らし、中央に手書き文字で「栄養士に、まっすぐ。」と書いている。ロゴの緑・青・黄の丸と四角を配色に使い、学校の紹介、学びの内容へのリンク、黄色い背景の「ONCライフ」、トピックスと動画、インスタグラムとTikTok、進路、オープンキャンパス、募集要項、メッセージと続く。

  1. 01方眼の背景に大きさの違う写真を散らし、手書き文字のコピーを中央に置いている
  2. 02ロゴの緑・青・黄をそのまま配色に使い、セクションごとに黄色や緑の大きな面で切り替えている
  3. 03斜めの短い線を、緑・黄・紺で背景に散らしている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線資料請求 / お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内

資料請求とアクセスをヘッダーに常に出す

画面の右上に、アイコンつきの「資料請求」「アクセス」とメニューのボタンを固定している。どのセクションを見ている途中でも、資料請求に進める。

オープンキャンパスをピックアップ枠で見せる

PCでは画面の右下に「PICK UP!! CONTENTS」の枠を出し、オープンキャンパスと「学びのススメ」のバナーを並べている。スマホではファーストビューのすぐ下に同じバナーを置いている。

学校生活と進路を両方見せる

イベント・キャンパスマップ・在校生のクロストークなどの「ONCライフ」と、就職実績・卒業生インタビューの「将来、どうする?」を分けて見せている。楽しさと卒業後の見通しの両方を、高校生と保護者に伝えられる。

チェック項目は 2026.10.21 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#F4F8FC背景（方眼） · ペールブルー
#EDE400セクション背景（ONCライフ） · イエロー
#19BA6Aリンクの帯・オープンキャンパス · グリーン
#0091BFTikTokのブロック · ブルー
#00233A本文テキスト・見出し · ネイビー
#FFFFFFカード・フッター

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文（見出し・本文・ナビ）
使用フォント
Zen Kaku Gothic New
無料で近いもの
Zen Kaku Gothic New
用途
英字（見出し）
使用フォント
Ubuntu
無料で近いもの
Ubuntu
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h250.6px / 7001.1332px / 500
h316.9px / 700—16px / 700
本文（p）19px / 7002.1115px / 700
ボタン16.9px / 700—16px / 700

実測値（PC 1440px・SP 375px、2026.10.21 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    左にロゴ、右にアイコンつきの「資料請求」「アクセス」とメニューのボタン。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    方眼の背景に写真を散らし、中央に手書き文字の「栄養士に、まっすぐ。」。PCでは右下に「PICK UP!! CONTENTS」の枠。

    ファーストビュー／全面写真＋コピー型
  3. 03

    大竹栄養専門学校って？

    国家試験免除で栄養士を取得できる学校であることを短く説明する。

    コンセプト／写真＋メッセージ型
  4. 04

    じっくり身になる学びを

    縦書きの見出しと、栄養士の仕事・1分でわかるONC・栄養士科・実習・資格への写真つきの緑のリンク。

    イベント・キャンペーン／特集バナー並び型
  5. 05

    ONCライフ

    黄色い背景に白いカードを置き、イベント・キャンパスマップ・クロストークへのリンクと、ファッションチェック・在校生の声のバナー。

    メニュー・サービス／アイコン／写真グリッド型
  6. 06

    Topics & Movie

    日付とカテゴリつきのトピックスと、動画のサムネイルを左右に並べる。

    お知らせ／お知らせ一覧型
  7. 07

    Instagram・TikTok

    緑の面にインスタグラムの写真、青い面にTikTokへのリンク。

    イベント・キャンペーン／特集バナー並び型
  8. 08

    将来、どうする?

    就職実績・進路サポートと卒業生インタビューへのリンク。

    イベント・キャンペーン／特集バナー並び型
  9. 09

    OPEN CAMPUS 2026

    緑の面に大きな英字でオープンキャンパスを案内する。

    イベント・キャンペーン／見学会・イベント告知型
  10. 10

    ONCで栄養士を目指す

    募集要項・学費と奨学金・社会人や大学在学中の人向けのページへのリンク。

    行動喚起／資料請求・来場予約型
  11. 11

    メッセージ

    1学年50人の少人数制・担任2人制で学べることを伝える。

    コンセプト／写真＋メッセージ型
  12. 12

    フッター

    住所・電話・FAX、資料請求とお問い合わせのボタン、サイトマップ。

    フッター／店舗情報＋ナビ型
大竹栄養専門学校の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
大竹栄養専門学校のファーストビュー（PC）PC
05ONCライフメニュー・サービス／アイコン／写真グリッド型
大竹栄養専門学校のONCライフ（PC）PC
大竹栄養専門学校のONCライフ（スマホ）SP
08将来、どうする?イベント・キャンペーン／特集バナー並び型
大竹栄養専門学校の将来、どうする?（PC）PC
大竹栄養専門学校の将来、どうする?（スマホ）SP
09OPEN CAMPUS 2026イベント・キャンペーン／見学会・イベント告知型
大竹栄養専門学校のOPEN CAMPUS 2026（PC）PC
大竹栄養専門学校のOPEN CAMPUS 2026（スマホ）SP
10ONCで栄養士を目指す行動喚起／資料請求・来場予約型
大竹栄養専門学校のONCで栄養士を目指す（PC）PC
大竹栄養専門学校のONCで栄養士を目指す（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.21 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01手書き文字の短いコピーで、学校の目的を一言で伝える
  2. 02ロゴの色をそのまま配色に使い、セクションを大きな色の面で切り替える
  3. 03資料請求の入口を画面の上に固定し、オープンキャンパスは別の枠で目立たせる
  4. 04学校生活の楽しさと、卒業後の進路を分けて見せる

FAQよくある質問

大竹栄養専門学校のサイトで使われているフォントは？

和文は Zen Kaku Gothic New、英字の見出しは Ubuntu です。どちらも Google Fonts で無料で使えます。

専門学校のサイトで、資料請求とオープンキャンパスはどう見せるとよいですか？

このサイトのように、資料請求はヘッダーに固定して常に押せるようにし、オープンキャンパスは目立つバナーで別に案内すると、検討の段階が違う人のどちらにも次の一歩を用意できます。

どんな業種の参考になりますか？

専門学校や短大のほか、資格の取れるスクール、職業訓練校など、学生生活の雰囲気と資格・就職の両方を伝えたい学校に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は大竹栄養専門学校および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの学校・教室の参考サイト

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の学校・教室サイトを。

「大竹栄養専門学校のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら