はじめてWEBエキスパート(専門家)コラム 業種別ホームページカラーガイド(全12回)

学校・塾のホームページのおすすめ配色の見本(第7回)

第7回は学校・塾のホームページの配色です。

このコラムでは、業種ごとに「合う色と合わない色」「注意すべきこと」をまとめています。

毎回、異なる業種を取り上げて解説しますが、それらの業種でよく使われる色やたびたび見られる失敗があり、それにはきちんとした理由があります。それに加え、ホームページの色は、看板や紙のパンフレットと同じ色の場合であっても、画面の構成や使い方のポイントも異なります。

第7回目は学校・塾のホームページの配色です。

学校・塾でよく使われている色

学校・塾と言っても、小中学校から、特殊な技能や専門的な知識を習得する専門学校まで幅広く考えられますが、今回は小学校から大学、それを受験するための学習塾について説明します。

まず、学校・塾で使われている色は、主に以下のようなものとなっています。

  1. スクールカラー(特に私立大学の付属校など)
  2. 学問や知識を表す落ち着いた寒色系の色
  3. 成長を表す緑系の色

青は主に学習に合った落ち着いたイメージを、緑は木々のように成長していく生徒のイメージを表し、教育機関ではよく見られる色です。特に緑は生徒の年齢が低い場合に多く見られます。

大学の付属高校・中学校などでは、大学のスクールカラーがあれば、その色をそのまま使っているのがほとんどです。デザインも大学から幼稚園までほとんど変わらない場合もありますが、生徒の年齢に低い小学校では柔らかい色を少し加えている場合も見られます。ただし中学校と高校では差は付けられていないことがほとんどです。

学習塾などの私的な教育機関では、青や緑が使われているページが多くなっています。大手の塾や予備校では赤も多く見られます。これは一生懸命指導するという意味の赤です。また女子大学や女子高校のように、女性だけが通える学校の場合には、ピンクなどもよく見られる色です。

上記のいずれも共通する点は色数は多く使われていないということです。カラフルになると楽しそうなイメージや子供っぽいイメージが出てしまいます。もしスクールカラーが青なのであれば、青を繰り返し使い、他の色を足して色を増やさないようにするのが配色の基本です。

学校・塾で多く見られる色

色の使い方と配色のポイント

スクールカラー

スクールカラーは学校によって異なり、特に具体的な傾向があるわけではありませんが、大学などでは落ち着いた色が多く見られます。大学の場合、特に青や緑が多いと言うことはなく、紫なども少なからず見られますが、薄い色やオレンジなどはあまり見られません。

大学や進学塾などの本社で決められた色があると、高校・中学校あるいは塾でもその決められた色に準じた色が使われることが多いのですが、幼稚園だけは例外的にまったく異なるカラフルなパステルカラーが使われたりします。

スクールカラーを使った配色例。

大学などでは各研究室ごとに独自性を出したいという要望をよく聞きますが、それもおすすめしません。少なくとも同じ組織内では同じ色を使った方が、ブランドイメージを損ないにくくなります。

学習塾などの私立の教育機関ではコーポレートカラーに言い換えられますが、これもスクールカラーと同じような傾向です。ただし前述の通り、大手では赤が多く見られます。

学問や知識を表す落ち着いた寒色系の色

学校・塾のホームページの色は、遊びの場ではないことを表さなければなりません。それをもっとも簡単に表現できるのは、青系の色を使うことです。

青には落ち着きや沈静・知性などのイメージがあり、学習するには最適な色であると言えます。そのため非常に多くの学校や塾で青系の色が見られます。スクールカラーを含めて、7割くらいのホームページで青系の色が使われています。

どちらかと言えば低年齢向けのものは水色に近い明るめの青を、大学や予備校のような年齢や学習内容が難しいところになるほど紺色のような暗めの青が使われることになります。

生徒の年齢と青の明るさ

また遊戯施設や玩具のようなカラフルで様々な色が使われるホームページはほとんど見られません。青を使っているのであれば、青の濃淡を中心にした配色が行われ、青以外の色は資料請求のボタンや電話番号のような特に強調したい部分にだけ、オレンジや赤などの対照的な色が加えられています。

重要な部分だけ対照的な色を使う

例外的に幼稚園や小学校のホームページでは、様々な色も使われますが、メニュー部分にほんの少しだけであったり、カラフルなイラストを入れたりすることで、色を増やしている例が見られます。

成長を表す緑系の色

緑が使われているページでは、木々の緑のイメージから「成長」という意味合いで使われることが多いです。特に明るい緑が中学校くらいまでの生徒を対象にした学習塾で多く見られています。

逆に暗い緑は、深い森や成長したあとの木々のイメージが強く、安定感は感じるものの、子どもの成長という点では、成績を伸ばしたいという学習塾の業務と合っていません。暗い緑が合うのは長い歴史を持つ大学などのホームページということになります。

明るい緑と暗い緑の比較。学ぶことから育つという連想をする

また明るい緑を使うとホームページは比較的軽めなイメージになり、かわいらしいイラストなども使いやすくなります。堂々とした大学や予備校のホームページでは難しいでしょうが、生徒を募集するために明るいイラストや図などで、内容を説明するのに適した色であるとも言えます。

デザインに制約がある場合の配色の注意点

公立の小学校・中学校などでは自治体単位で同じシステムでホームページが作られ、学校単位で変えられるのはロゴと背景だけという場合もあります。そのような場合には無理に背景に色や模様を付けようと思わず、白のままにしておくか、薄いパステルカラーやグレーなどを敷いた方がよいでしょう。

商業的なホームページと違い、他校と競争する必要もないため、無理に独自性を出す必要はありません。使いやすさや見やすさを優先することが望まれます。

文字の意味を損なわない背景を選ぶ

また小規模の個人塾などではホームページについ過剰な装飾をしがちですが、内容が読みにくければ集客につながりにくくなります。少なくとも文字が読めないような背景になっていないかに注意しましょう。

まとめ

  1. 青は学習する環境に合った落ち着いたイメージの色
  2. 私立の学習機関は緑・青が多いが、大手では赤も見られる
  3. あまり派手な色の使い方はされず、単色で使われる傾向
  4. 同じ色であっても、明るい色の方が低年齢向けの傾向に
  5. 緑は成長のイメージ。暗い色は成長とは合わないため少な目
  6. 背景が変えられるシステムでは、控えめな背景にする

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

「はじめてWEB」掲載のオリジナル版はこちら:
業種別ホームページカラーガイド(全12回)「第7回:学校・塾のホームページの配色」(2016/10/17)

この記事が役に立ったらシェア!
tweet14はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

フラッシュマーケティング
同義語のグルーポンを参照。 「24時間」のように期限を決めたり予定数を設定 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper株式会社ブレインパッド
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore