目次
BRIK GALLERYについて
デザインやコンテンツの参考になる国内最大規模のWebサイトリンク集・デザインギャラリーの BRIK GALLERY では、日々クリエイターの方々の参考になる作品を更新しています。
クリエイティビティを刺激し、デザインの参考になり、仕事に役に立つ、Webサイトなどを中心に紹介しています。BRIK GALLERYでは、カテゴリーやタグから検索し、気になった作品はお気に入り機能で保存可能な機能があります。
作品は、INDUSTRY (業種)、TYPE (Webサイトなどの種類)、COLOR (キーカラー)、DESIGN (デザイン表現の方法) などのカテゴリーで分類されています。ここから目的としているデザインを絞り込んで探すことが可能です。
本特集では、BRIK GALLERYに掲載されている作品の中から、特定のテーマで作品をピックアップしていきます。
🔷はじめに🔷
キッズ向けのサイトは一括りにしても、幼稚園、保育園、子供向けの教育・レジャー・サービスなど様々な分野のものを扱います。また、ターゲット層もママ、パパ、場合によってはキッズ本人にまで及びます。このような背景から、キッズ向けのサイトを作る際は担当する分野とターゲット層の正確な理解を持ってデザインしていく必要があります。
そこで本記事では、キッズ向けのWebサイトの制作時にデザインやコンテンツの面で参考になる、優れたサイト10選をピックアップし解説していきます。
ご紹介する作品は、以下の２つの基準を元に選出しました。
- ✅キッズフレンドリーなデザインテイストを持っていることで、実際のサービスもキッズに寄り添う姿勢が感じさせる
- ✅キッズ向けのフレンドリーなテイストを表現することで、上記ターゲットに対して心の高揚感を与える
ぜひ制作の参考にしてみてください。
デザインの参考になるキッズ向けサイトの紹介 🎨
愛宕幼稚園
自然あふれるアートの街、新潟県十日町市の愛宕幼稚園。トップページのタイポグラフィは、イラストと文字が融合していて、遊び心を感じます。サイト全体にマイクロモーションが散りばめられており、理念である「遊んで学ぶ、学んで育つ」を体現しているデザインになっています。
このはな保育園
少人数でのきめ細かい保育を提供することが特長の保育園。所々に登場する可憐な花のイラストは、子供たち一人ひとりの好奇心を大切するという、園の理念を上手く表現しています。また、ワンポイントで使われているえんじ色は落ち着いた雰囲気や丁寧な印象を与えるでしょう。全体的に余白を活かしたデザインで、各要素のスペースの取り方が美しいです。タイポグラフィの明朝体が上品に映えています。
KIDS PARK
https://www.itochu.co.jp/ja/kidspark
KIDS PARKは伊藤忠商事が運営する子どもたちが「遊び」を通して、SDGsの考え方を体験できる施設。カラフルな動物のイラストで親しみを与えながらも、同時に洗練された雰囲気も演出しています。「この施設で遊ばせたら、子供が良い経験や学びを得られるだろう」と保護者にも思ってもらえそうなデザインです。デザインディテールとして、ラフに線を引いた多角形の下地、罫線 (ボーダー) を用いた背景、枠だけのタイポグラフィ、パステル調の複数のカラーリングなど、キッズ向けのエッセンスが詰め込まれています。
こどもさんかく歯科
武蔵小金井にある小児専門の歯科医院。随所に登場する三角のキャラクターが印象的です。どんな状況でも子供に寄り添うという医院の理念が、曲線を用いた図形や明るい色彩、前述したキャラクターの存在や随所に散りばめられたマイクロインタラクションやモーション、あえて縦位置をずらしたタイルの配置などによって、しっかりと表現されています。
妖怪ピーク
子供向けのアート系ワークショップを開催する団体。水彩画のようなカラーテイストや、段ボールの質感、デジタル時代にあえて使用することで新鮮味を与える手書きのイラストといった要素は、ユーザーのクリエイティビティを刺激するでしょう。また、柔らかいタイポグラフィーの塗りもベタでなくテクスチャを出していたりと、ディテールにこだわりが窺えます。子供が実際に描いたイラストの使い方も新鮮です。
IIYO
シングルマザー・シングルファーザーを対象に子育てに関する情報を提供するメディアサイト。ユーザーのバックグラウンドをしっかりと踏まえたデザインになっている点に注目です。例えば、ポジティブな雰囲気を出すためにオレンジや黄色などの暖色系のカラーリングを使っていたり、楽しげなモーションを的確なポイントで使用している点、背景にオリジナルのタイポグラフィをちりばめている点などにも工夫が凝らされています。
Hug Mag
ファッションへの感度が高い家庭に向けたライフスタイルマガジン。近年のWeb デザインのトレンドもあるボタンやブロックに細い黒の枠線や、少しだけアレンジが施されているリンクの矢印などは適度なポップ感を出しています。要素を多く散りばめなくても、キッズ・ファミリー向けのデザインが成立するという好例です。
みらいたうん
https://amami.sevenpark.jp/sdgs/
未来を担うこどもたちとそのパパママを対象にSDGsを学ぶことを目的としたサイト。トップページのひとつひとつのセクションが適度な高さで組み合わされているため、紙芝居を見る様な心地いいリズム感でスクロールできる点が秀逸です。また漢字をできる限り使わないようにしたり、フォントを大きめに設定したりと、徹底的に子供目線で制作されている点にも注目です。カラフルで賑やかなイラストは必ず子供を惹きつけるでしょう。
サンデシカ
ベビーグッズ・マタニティグッズを扱うメーカーのコーポレートサイト。スクロールによって出てくる様々な親子や風景の写真は、どこかの家族のアルバムをめくっているような感覚にさせ、温かい気持ちになります。また、パステルカラーの色味や繊細なモーションによって「優しさ」を表現できており、母子を第一に思っているメーカーであることの演出に成功しています。シックな上品さとキッズ向けのテイストをうまく両立させた、センスの光るデザインです。
思い出をおしゃれに彩る〈Beams mini〉でつくる夏の7DAYSコーデ
https://www.beams.co.jp/special/beamsmini/kids_7days/
ファッションブランドBEAMSによる、子供向けブランドのLPページ。手書きの文字やイラストがサイト全体で使われており、親しみや懐かしさ、和やかさを感じさせます。特にトップページの写真のコラージュは「夏休みの思い出」を想起させ、親子共々がワクワクするデザインとなっています。また、見出しのタイポグラフィも、マジックペンで書かれた様なハンドメイドなテイストがうまくおしゃれにまとまっている点に注目です。
🔷優れたキッズ向けのWebサイト10選のまとめ🔷
ここまで、デザインやコンテンツの面で参考になる、優れたキッズ向けのWebサイト10選を紹介、解説してきました。どのサイトも扱う分野やターゲット層を的確に捉え、デザインの流行を組み込みながら上手に表現されていたかと思います。今回ご紹介したWebサイトをぜひ今後のデザインの参考にしてみてください。
