スマートフォンサイトを表示する

  1. TOP
  2. 業種別ホームページカラーガイド : 第7回 学校・塾のホームページの配色

エキスパートコラム

業種別ホームページカラーガイド(全12回)

第7回:学校・塾のホームページの配色

執筆:坂本 邦夫(フォルトゥナ)

2016年10月17日更新

  • このエントリーをはてなブックマークに追加

閲覧数968views

このコラムをPDF形式でダウンロードする

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

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

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

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

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

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

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

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

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

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

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

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

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

スクールカラー

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

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

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

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

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

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

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

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

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

生徒の年齢と青の明るさ

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

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

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

成長を表す緑系の色

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

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

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

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

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

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

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

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

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

まとめ

  1. 青は学習する環境に合った落ち着いたイメージの色
  2. 私立の学習機関は緑・青が多いが、大手では赤も見られる
  3. あまり派手な色の使い方はされず、単色で使われる傾向
  4. 同じ色であっても、明るい色の方が低年齢向けの傾向に
  5. 緑は成長のイメージ。暗い色は成長とは合わないため少な目
  6. 背景が変えられるシステムでは、控えめな背景にする
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

坂本 邦夫(さかもと・くにお)

坂本 邦夫(さかもと・くにお)

カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/

1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。

主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート ホームページ配色入門』(ワークスコーポレーション)、『ウェブ配色 コーディネートカタログ』(技術評論社)など。

ウェブデザイン&配色の見本帳

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/3/12~2017/3/18]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!