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

  1. TOP
  2. 業種別ホームページカラーガイド : 第12回 幼稚園・保育園のホームページの配色

エキスパートコラム

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

第12回:幼稚園・保育園のホームページの配色

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

2017年3月21日更新

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

閲覧数2,091views

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

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

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

第12回目は幼稚園・保育園のホームページの配色です。

幼稚園・保育園でよく使われている色

今回は幼稚園・保育園のホームページで使われる色について取り扱います。第7回の学校・塾のホームページの配色では小学校以上の学校・学習塾を取り上げましたが、それより低年齢の子供たちが通う幼稚園や保育園では、配色の傾向が異なります。

主に以下のような色が使われる傾向があります。

  1. 明るく楽しそうな色
  2. パステルカラー
  3. 自然素材の色

運動会などで見られるさまざまな色の旗を少し明るくしたような色や薄いパステルカラーの組み合わせで、全体のイメージが作られ、小学校のページに比べると使われる色数が多くなります。また、ポイントで木や草木などの自然素材の色が使われたりもします。

幼稚園・保育園で多く見られる色

明るく楽しそうな色・パステルカラーの2つから構成されますが、多くの場合、明るく楽しそうな色から1色中心となる色を決め、その色を中心としたカラフルな色を見出しやボタンに配置し、足りなければパステルカラーを背景として配置するのが基本です。重々しい色をメインの色をして使っているページは、ごく一部でしか見られません。

自然の色はイラストやバナーの中で見られることが多く、全体を構成する色として使われることは、それほど多くありません。

今回は主に明るい色で全体を構成する方法を学びます。

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

明るく楽しそうな色

まず幼稚園や保育園では楽しそうなイメージが重要になってくるため、明るい色が数多く使われることが多いですが、やみくもに色を増やしてもにぎやかで派手になるだけで、楽しそうにはなりません。

そこで一番多く使いたい色を1色決め、その色から派生した色を少しずつ配置するようにします。どの色も平均的に使おうとせず、メインの色とその他の色の分量に差をつけることが重要です。

色が多いほど「カラフル」になりますが、あまり数が多くても使い方に迷ってしまうため、メインの色+3~5色を先に決めておくとよいでしょう。同じ色を使っていても、メインの色が変わると印象も全然変わります。

どの色を一番使うかを意識しておく

このように色を揃えることを、専門的には「トーンを揃える」と言いますが、詳しくは以前掲載された「0からスタート ホームページ配色入門 第6回:誰でもできる色の整理方法」の、「似たような情報をトーン(色調)を使ってまとめる」をご覧ください。

そしてメイン以外の色を目立たせたい場所を中心に配置していきます。

目立たせたい場所を中心に決めた色を配置

ここでほぼ配色の印象は決まってしまいます。もしこの時点で色が多すぎると感じた場合には、色を変える前にまずは分量を変えましょう。悩んだら色を減らすのが基本です。

色そのものではなく、色の分量で調整する

またメイン画像の部分は後で変わることもあるため、無視して配色を進めます。その場合は仮に薄いグレーを入れておくと、配色の邪魔をしません。

パステルカラー

ここでいうパステルカラーとは、最初に決めた色よりも、さらに淡い色という意味です。前項で決めた色が薄めなのであれば、それよりもさらに薄い色です。

このような薄い色は1の色とセットで使うのをおすすめします。「同じ色の濃淡」「同系色」を固めて使うと、全体の色がまとまりやすいからです。1で色を決める際に薄い色も同時に作っておくといいでしょう。

薄い色は背景色として重宝する

この薄い色は無理に使わなくてもよいです。「背景が白くて冷たい感じがする」という場合のみ使うようにします。逆にすっきりと見せたいのであれば、使わないのが無難です。

イラストの色は例外で考える

幼稚園や保育園のページでは、デザインの中にカラフルなイラストを入れたい場合もあると思いますが、イラストは例外的にどんな色のものを使っても構いません。木を使いたいときもあれば、建物を使いたいときもあるはずで、その色をページの色に合わせることは難しいからです。

イラストを選ぶコツとしては、輪郭線がしっかり付いているものの方が無難です。輪郭線が薄いと背景色に溶け込んでしまい、画面全体がぼやけて見えてしまうことがあります。

背景色が変わるような場合には、輪郭線のあるイラストを選ぶ

もちろん使う場所や背景の色が変わらないのであれば、輪郭線のないイラストも使えます。

子どもの写真の表情に注意

幼稚園・保育園の主役は園児なので、その表情が暗かったり、笑っていても写真の色が暗いことで、楽しそうに見えなかったりします。

幼稚園・保育園の写真はしっかり見られるため、表情が明るく見えるものを使う

園児の写真を使う場合には、明るい表情と明るめの色を心がけるようにしましょう。どんなに明るく楽しそうな配色を作っても、子どもの顔の出す印象にはかないません。写真はできればプロが撮影したものか、プロによって補正してもらったものを使うようにしましょう。

これは幼稚園や保育園は比較する対象が少なく、それぞれのページがしっかりと見られることも多いため、写真選びやその補正より慎重に行われなければなりません。

まとめ

  1. 小学校に比べて使われる色の数ははるかに多い
  2. 明るめの楽しそうなトーンの色とパステルカラーの組み合わせで全体の印象を作る
  3. 明るい色だけでまとめるようにする。まとまらない場合は分量で調整
  4. パステルカラーの背景色は冷たいと同じられた時だけ使う
  5. イラストを使う場合は輪郭線のしっかりしたものを選ぶ
  6. 写真は明るい表情のものを明るめの色で
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

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

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

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

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

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

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

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ