WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 学校・教室
  4. 中村国際ホテル専門学校

webcan analyze hotel.nakamura-s.ac.jp

SCHOOL · 福岡県 · PICKED 2026.10.18

中村国際ホテル専門学校学校・教室のホームページデザイン参考 — 専門学校・水色グラデーション・写真コラージュ

中村国際ホテル専門学校のトップページ（PC）
PC（1440px）
中村国際ホテル専門学校のトップページ（スマホ）
スマホ（375px）
出典：hotel.nakamura-s.ac.jp ↗確認日 2026.10.18
中村国際ホテル専門学校学校・教室 · 福岡県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

PCでは右側にオープンキャンパス・LINE相談・資料請求・メニューをまとめた列を置き、どこまで読んでも申し込みの入口が隣にある。

福岡市のホテル・ブライダル系の専門学校のサイト。ファーストビューは水色のグラデーションの上に、ホテルや式場で働く学生の写真を散らして並べ、左上に「あの日の憧れに、なってみせる。」のコピーを置いている。PCは右側の列にオープンキャンパスの日付、LINE相談・資料請求のボタン、メニュー、WEB出願、人気ワードをまとめている。ピックアップ、3つの特長、コース、お知らせ、人気ワード、保護者の方へ、LINE、Instagramと続く。

  1. 01水色のグラデーションの背景に、大きさの違う写真をコラージュのように散らしている
  2. 02オープンキャンパスの案内をオレンジの帯にして、青い画面の中で目立たせている
  3. 03特長を「01」「02」「03」の大きな数字と、職種名をつけた写真の組み合わせで見せている

CONVERSION集客の工夫

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

申し込みの入口を右の列にまとめる

PCでは画面の右側に、オープンキャンパスの日付、「LINEで何でも相談」「資料請求」のボタン、メニュー、WEB出願をまとめた列を置いている。本文を読み進めても、行動の入口がいつも隣にある。

スマホでは3つの行動を下に固定

スマホでは画面下に「まずはオープンキャンパス！」と次回の日付、「LINEで何でも相談」「資料請求」を固定している。高校生がよく使うLINEを、資料請求と並ぶ相談の入口にしている。

保護者向けの入口を分ける

ページ後半に「保護者の方へ」のバナーを置いている。本人と保護者で知りたいことが違うので、保護者が読むページへ迷わず進める。

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

COLOR配色

#EFF0EC背景 · ライトグレー
#0397F3ボタン・グラデーション · スカイブルー
#0C364B本文テキスト・資料請求ボタン · ネイビー
#57D387LINE相談ボタン · グリーン
#F7EFD9セクション背景 · クリーム
#FFFFFFメニュー・カード

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

TYPOGRAPHYフォント

用途
和文（見出し・ナビ）
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
欧文・数字
使用フォント
Geist
無料で近いもの
Geist
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h115px / 5001.8015px / 500
h215px / 5001.8015px / 500
h321px / 5001.7521px / 500
本文（p）13px / 5001.5013px / 500

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

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

  1. 01

    右サイドの列（PC）

    オープンキャンパスの日付・LINE相談・資料請求・メニュー・WEB出願・人気ワード。

    ヘッダー／左固定サイドナビ型
  2. 02

    ファーストビュー

    水色のグラデーションに学生の写真を散らし、左上にコピー。

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

    オープンキャンパス

    オレンジの帯に開催日と体験の内容。

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

    Pick up（ピックアップ）

    見学ツアー・学園祭・WEB個別相談などをスライドで。

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

    Feature（ナカムラの特長）

    大きな数字と、職種名をつけた写真。

    強み・選ばれる理由／番号つき3〜4項目型
  6. 06

    Course（コース）

    ホスピタリティ学科の2年コースと4年コース。

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

    写真の並び

    客室や式場の写真。

    事例・実績／写真グリッド型
  8. 08
  9. 09

    Keywords（人気ワード）

    オープンキャンパス・学費・就職などのタグ。

    記事・メディア／カテゴリナビ＋検索型
  10. 10
  11. 11

    Instagram

    投稿の写真を並べる。

    事例・実績／写真グリッド型
  12. 12

    フッター

    住所・電話・SNS。

    フッター／店舗情報＋ナビ型
  13. 13

    スマホ追従ボタン

    オープンキャンパスの日付・LINEで何でも相談・資料請求。

    行動喚起／SP追従ボタンバー型
中村国際ホテル専門学校の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
中村国際ホテル専門学校のファーストビュー（PC）PC
04Pick up（ピックアップ）イベント・キャンペーン／特集バナー並び型
中村国際ホテル専門学校のPick up（ピックアップ）（PC）PC
05Feature（ナカムラの特長）強み・選ばれる理由／番号つき3〜4項目型
中村国際ホテル専門学校のFeature（ナカムラの特長）（PC）PC
06Course（コース）メニュー・サービス／アイコン／写真グリッド型
中村国際ホテル専門学校のCourse（コース）（PC）PC
08News（お知らせ）お知らせ／お知らせ一覧型
中村国際ホテル専門学校のNews（お知らせ）（PC）PC

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01PCでは申し込みの入口とメニューを右側の列にまとめ、常に見えるようにする
  2. 02オープンキャンパスは次回の日付を大きく出し、背景と違う色の帯で目立たせる
  3. 03相談の入口にLINEを入れ、資料請求と並べる
  4. 04保護者向けの入口を本人向けとは別に用意する

FAQよくある質問

中村国際ホテル専門学校のサイトで使われているフォントは？

和文は Noto Sans JP、欧文と数字は Geist です。どちらも Google Fonts で無料で使えます。

右側にメニューを固定するレイアウトは、どんなときに向いていますか？

オープンキャンパスや資料請求など、申し込んでほしい行動がはっきりしているサイトに向いています。広い画面の右側を入口の置き場にすると、本文の邪魔をせずに常に見せられます。スマホでは同じ役割を画面下の固定ボタンに任せます。

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

専門学校・大学・スクールのほか、見学会や説明会への申し込みを集めたい住宅会社や式場などにも応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら