- 12 min read
- インスピレーション,ショーケース,ウェブデザイン,子供
- Twitterで共有,LinkedInの
著者について
Louisはカナダのトロントに拠点を置くフロントエンドの開発者、作家、著者です。 彼は時事通信網用具を毎週キュレーションし、技術の生産性およびBlogsについての…Louisについての詳細↬
メールマガジン
フロントエンドの週間ヒント&UX.
190.000人
子供のために設計されたウェブサイトは、主にWebデザインの記事やラウンドアップで見落とされてきましたが、議論と分析の価値がある子供のウ また、子供のサイトのためのWebデザインに排他的なベストプラクティスの数があります—通常、典型的なウェブサイト上で試行されるべきではない
関連記事を見てみたいと思うかもしれません:
- 子供のためのウェブデザインのためのベストプラクティス
- 子供のためのデザインは子供の遊びではありません
- 子供のためのウェブインターフェー
もっとジャンプした後！ 続きを読む↓
感覚を刺激するデザイン
人間はいくつかの要因によって精神的に刺激されており、これは特に子供に当てはまります。 成功した子供のウェブサイトは、子供の性格や興味に適した環境を作り出す多くの要素とデザイン原則を実装しています。
明るく鮮やかな色
明るい色は簡単に子供の注意を長時間キャプチャし、保持します。 色の選択は、ウェブサイトの任意のタイプを設計する際の主な要因であるが、色は子供の若い心に大きな印象を与えるので、これは子供のためのウ 典型的なウェブサイトを設計するとき多分拒絶されるか、または笑われる組合せおよび色の選択は子供のためのウェブサイトで歓迎されるかもし
以下のスクリーンショットで使用されている色の組み合わせのうち、大人の視聴者を対象としたウェブサイトで成功するのはどれくらいですか？ 多くはない。 だから、子供を対象としたサイトを設計するときは、忘れられない方法で視覚的に刺激する明るく鮮やかな色を使用してください。
PBSキッズ
ハーマンのホームページ
Funbrain Playground
幸せな気分
子供たちは覚えていて、彼らの経験が幸せなものであればウェブサイトに戻ります。 要素は設計に陽気で、肯定的な気分が示されることを保障するために組み込むことができる。
ミッキーマウスクラブハウスは、ミッキー自身をページ上の視覚的な焦点にすることによって幸せな気分を作成します。 彼の幸せな顔とボディランゲージは、歓迎された雰囲気を作成し、この幸せな気持ちを高めるのに役立ちます。
プレイ-Dohのウェブサイトは、晴れやかな子供を焦点として幸せな気分を作り出します。
FifiとFlowertotsのウェブサイトには、視覚的に焦点を当てた大きな笑顔のFlowertotキャラクターがあり、幸せな気分を作り出しています。
自然からの要素
子供たちは、彼らが関連することができる認識可能な要素によって刺激されます。 生活の中で子供たちの経験は限られているので、彼らが最も精通しているもののいくつかは、自然の中で発見されています。 以下に示すウェブサイトでは、木、水、雪、動物などの自然の要素を使用しています。 多くの場合、これらの要素は、サイズまたはデザインの単純さによって過度に強調されています。
ディズニーのウェブサイトは、どの製品が宣伝されているかに応じてテーマを変更します。 このスクリーンショットでは、グランドキャニオンのような風景を使用して、思い出に残る視覚体験を作成します。
ディスカバリーキッズは水中テーマを使用しています。
クラブペンギンは北極をテーマにしています。
CBC Kidsは、シンプルで目を引くグラフィックに基づいて季節のテーマを使用しています。
PopCapゲームは、太陽の大きな光線の前に草で覆われた風景を使用しています。
Larger-Than-Life Design
大きなデザイン要素は、大きなタイポグラフィ、大きなボタン、大きな行動を促す領域が現代のデザインでは一般的になっているという事実によって実証された、すべてのタイプのWebデザインに有効であることが証明されている。 子供たちは自然にシンプルで明白で認識可能なオブジェクトに描かれているので、子供のために設計されたウェブサイトは、大きなデザイン要素
アニメキャラクター
大きくアニメーション化された話すキャラクターは、子供の注意をつかみ、保持するための魅力的で魅惑的な方法です。 子供のために設計された多くのサイトは、この要素を効果的に使用します。
バービー
ミスター-ロジャースの近所
ミスター-ロジャースの近所 ミスター-ロジャースの近所 ミスター-ロジャースの近所 ディズニープリンセス
トーマスタンクエンジン
バーニー&フレンズ
> 
デザインの深さ
子供たちは、自分の想像力が本物のように見え、感じている世界で野生実行させるのが好きです。 この種の雰囲気は、デザイン要素の深さによって作成することができます。 これには、押し出しシェイプ、シャドウ、ランドスケープ、ベベルエフェクト、光沢のあるグラデーション、またはフローティングオブジェクトが含まれます。 多くの場合、これらの要素の多くは、以下に示すように、漫画のようなディスプレイに存在します。
ウェブキンズ”採用センター”は、影や生命のようなキャラクターなどの3次元要素を使用して、奥行きのあるデザインを作成します。
ポアソン-ルージュは、他の多くの3次元要素とともに、太陽を外に見る窓を使用して、深く現実的な雰囲気を作り出します。
Rainbow Magicは、ユーザーが異なる要素の上に置くと移動するフラッシュアニメーションの風景シーンを通じて、デザインに深みを作り出します。
目立つナビゲーションと行動を促すエリア
どのウェブサイトのデザインにおいても、ナビゲーションと行動を促すエリアは焦点であるべきである。 子供のウェブサイトの設計者は、子供が簡単にナビゲートできるように、これらの領域を単純化しすぎることができます。 子供のウェブサイト上のテキストベースのナビゲーションは、ページに視覚的な焦点がないため、大きなボタンやグラフィックほど効果的ではありません。
Peppa Pigには、大きなアイコンと各項目の読みやすい説明を含む水平ナビゲーションバーがあります。
Winnie The Poohのウェブサイトは、ユーザーが見落とされない大きな木製のグラフィカル要素を使用して、”森”をテーマにナビゲーションバーを組み込んでいます。
セサミストリートには、簡単に見つけることができる水平ナビゲーションバーがあり、大きな行動を促すエリアがあります。
My Little Ponyはテキストベースのナビゲーションを使用し、グラフィカルではないエクスペリエンスを作成し、コンテンツ要素に焦点を当てることができます。 これはいくつかの状況では理想的かもしれませんが、子供のウェブサイトではグラフィックベースのナビゲーションバーが効果的である可能性が高
ユーザーとの対話
おそらく、子供のウェブサイトが成功するための最も重要な方法の一つは、子供が何らかの方法でサイトと対話できる 子供は強い読書か研究をしたいと思わない;彼らは遊び、心に抱かれたいと思う。
一般的なウェブサイトでは、特定のデザイン要素は気を散らし、使用できず、面倒であると見なされます。 子供のウェブサイトでは、それらの同じ要素がユーザーを引き付ける効果的な手段と見なされます。
アニメーションとサウンドを介した相互作用
Adobe Flashで作成された効果や経験は、典型的な現代のWebデザインでは推奨されませんが、子供のサイトでは他の選択肢はほとんどありません。 これは、JavaScriptのアニメーションやエフェクトがあるため、利用可能な多くのJavaScriptライブラリの長い道のりを歩んできたことは事実ですが、Flashで複雑なアニメーシ
Pauly’s Playhouseサイトは、この記事で紹介されているほとんどのウェブサイトと同様に、完全にFlashで構築されています。
Hot Wheelsのウェブサイトには、ページが読み込まれたときに画面にズームインし、視覚的な相互作用を作成するアニメーション”car of the day”が含まれています。
Roaryレーシングカーには”skip”ボタン付きの簡単な”flash intro”があります。 これは典型的なWebデザインの古い学校の傾向ですが、子供ベースの聴衆にケータリングの効果的な手段です。 イントロは、文字が地平線に表示されるまで、道路を通ってアニメーション化されます。 これは、彼らが個人的にRoaryのアニメーションの世界に入っているかのようにユーザーが感じるのに役立ちます。
The Yahoo! キッズナビゲーションバーは、Flashで作成され、効果音を作り、その項目が上に推移しているときにアニメーション化されています。 この傾向は、この記事で紹介されているサイトの多くで非常に一般的です。
ビデオを通じた対話
テレビは何時間も子供の視聴者を魅了することが知られているため、「土曜の朝の漫画」は何十年もの間、多くのテ 同様に、子供のウェブサイト上のビデオは、サイトのコンテンツに楽しく、インタラクティブで教育的な側面を追加します。
キッズCBC-Video
Yahoo!ニュース キッズムービーガイド
ナショナルジオグラフィックキッズ-ビデオ
ゲームを通じた相互作用
楽しませるための最も効果的な方法の一つ,教育やその他のウェブサイト上で子供を占有することは、”ゲーム”セクションを含めることです. この記事のために研究されたほとんどすべてのウェブサイトはまた既に論議される設計要素の多数を組み込んでいる間教育し、刺激し、直接相互作用を可能にするゲームを含んでいる。 以下はいくつかの例です。
CBeebies-ゴードン-ザ-ガーデンGnome
トイ-ストーリー-ウッディの大脱出
ディズニー-ピクサーの車の世界独自のカスタムカーを作成、共有、およびレース。
印刷可能な要素
子供たちは、彼らが彼らの経験を覚えて助けるために、彼らと一緒に取るために具体的な何かを持 印刷できる映像および着色のページはウェブサイトの所有者にコンピュータ画面の外の彼らのブランドを高め、促進する機会を与えている間子供が彼らの経験の記念品を持つことを可能にする。 以下は、子供のウェブサイト上の印刷可能な着色ページのいくつかの例です。
ピングーぬりえページ
クレヨラデジカラー
ペッパピッグぬりえページ
テレタビーズ-カラーに印刷
型破りな色に印刷
型破りな色に印刷
我々はすでに、現代の典型的なWebデザインでは、今型破りと考えられている要素の数を議論してきました。 音、生気、および大きい目立たないグラフィックは頻繁に典型的な網の設計で眉をひそめられる。 子供のwebサイトでは、これらの要素はユーザーエクスペリエンスに役立ちます。 他の型破りな要素および設計選択は下記に論議される。
カーソルを変更する
これは、標準的なWebデザインでは絶対に悪い習慣と見なされていますが、子供のwebサイトのテーマに遊び心のある要素を追加する楽し これは動的HTMLを使用して行うことができますが、より多くの場合、Flashを介して行われます。
ディスカバリー-キッズのウェブサイト上のカーソルは、スナップ-ベア-トラップのグラフィックに変わる。
セサミストリートのウェブサイト上のカーソルは、標準のHTML要素の上に置くと黄色の星が続き、カーソルがクリック可能なFlash要素の上に移動すると、黄色の星に変わります。
トーキングナビゲーション
ナビゲーションバーが効果音を出すことがありますが、それ以外の場合は、ナビゲーションリンクが陽気な声
PBSキッズナビゲーションバーは、ユーザーがそれの上に置いたときに、子供の声を使用して話します。
CBeebiesナビゲーションバーは、各ナビゲーション項目の宛先を鳴らすために音声を使用しています。
ビルダーナビゲーションバーのボブは、マウスオーバー時にユーザーに話します。
FifiとFlowertotsには、話すナビゲーションバーがあります。
グリッドを破る
伝統的な現代のWebデザイン技術は、グリッドベースのデザインの利点と美学を受け入れてきましたが、子供のウェブサ
これは、設計の基礎としてグリッドを使用することが間違っていることを示唆するものではありません。 グリッドから始めて、グリッドの外側の要素を制御された方法で設計することは有益かもしれません。 このようなデザインとレイアウトの柔軟性は、すでに説明した多くのサイトで実証されていますが、以下の例のナビゲーションバーでも明らかです。
Spongebob Squarepantsのウェブサイト上のナビゲーションバーは傾斜しており、典型的なグリッドベースのWebデザインの慣習に反しています。
ハンナ-モンタナのウェブサイトは、グリッドを破るナビゲーションバーのグラフィックを備えています。
イン-ザ-ナイト-ガーデンのウェブサイトは、従来の構造化されたデザインにほとんど似ていない非常に珍しいナビゲーション-バーのデザインを特徴としている。
以下は、より剛性のあるグリッドベースのフォーマットを利用するウェブサイトの例であり、その結果、この記事で既に検討されているもののいくつかほどユニークで、思い出深いものではなく、魅力的ではありません。
子供たちWBは剛性であり、思い出に残るものではありません。
Crayolaのウェブサイトは、グリッド形式と垂直ナビゲーションでやや古い学校です。
Neopetsもより構造化されたグリッド上に設計されています。
確かに、以下に示すSI Kidsの場合のように、観客が年長の子供の観客であれば、より強力なグリッドベースの設計が必要になる場合があります。
責任を取る
オンライン体験を通じて若い、印象的な人々の心と心に到達しようとしている場合、あなたは重い責任を委ねられています。 子供たちは精神的に壊れやすく、見たり、聞いたり、触れたりすることによって簡単に影響を受けます。 子供たちに害がもたらされていないことを確認するために、すべての子供のウェブサイトで対処する必要がある特定の要因があります。
教育の促進
ゲームやその他のインタラクティブな要素は、あなたの会社のブランドやアイデンティティを促進するだけでなく、有益で肯定的な方法で若 ゲームや活動を通じて教育を促進することは、あなたの会社がユーザーを気にし、彼らのオンライン体験が将来どのように影響するかを示します。
Fisher Priceのオンライン学習ゲームには、年齢層によって異なるゲームが含まれています。
Funbrainは、「K-8の子供と教師のためのインターネットの＃1教育サイト」としての地位を促進しています。”
両親のための情報
両親は子供のインターネット習慣に細心の注意を払っています。 多くの子供のサイトはこれを認識しているので、親に向けた情報が含まれています。 時にはこれは、セサミストリートゲームのウェブサイト、または単に親のセクションを指すナビゲーション項目の場合のように、ヒントの形であります。
セサミストリートゲームには”親のヒント”ボックスが含まれています。
ベン10は、彼らのプライマリナビゲーションバーに”親のもの”リンクを持っています。
トーマスタンクエンジンには”親”リンクが含まれています。
ユーザビリティテスト
最後に、子供のためのオンライン体験を成功させるための最良の方法の一つは、子供がサイトのゲームやその他のユニークな機能をナビゲートしたり操作したりするのを見ることです。 すべての企業が広範なテストのための予算を持っているわけではありませんが、ほとんどすべての企業が少なくとも最小限のテストを行う能力を これは、あなたが子供の目を通してサイトを見て、任意のユーザビリティテストで行われるのと同じように、必要な変更を行うことができます。
Disney、Sesame Street、PBSのような企業は、もちろん、何年も子供の行動を研究してきたので、上記の例の多くは、ユーザビリティテストが行われていなくても、成功した子供
結論
ここでは、子供のためのウェブサイトを設計するための従来と型破りな両方のベストプラクティスの要約です:
従来のベストプラクティス
- 大きく、視覚的に記憶に残る要素を作成
- 感覚を刺激する明るく鮮やかな色を使用
- 自然からの要素を組み込む
- デザインの深さを作成
- 大きく、見つけやすいナビゲーション要素を追加
- ビデオを使用する
- 印刷可能な要素を含める
- グリッドを破る
- ユーザビリティテストに基づいて変更を行う
型破りなベストプラクティス
- 幸せで遊び心のある気分を作成する
- アニメーションを使用する 文字
- グラフィック重いナビゲーションバーを使用
- フラッシュアニメーションを豊富に使用
- ページの読み込み時にトリガーされる動きと音を埋め込む
- “ゲーム”セクションを含める
- テーマに貢献するためにカーソルを変更
- ナビゲーションロールオーバーに声を追加
- 責任を負う子供と親の両方に
子供のウェブサイトで働いているウェブデザイナーは、おそらくそれは彼らが作業の特権を持っていた最も楽しく興味深いプロジェ 子供向けのユーザーエクスペリエンスを作成する機会がある場合は、ここで説明する多くのサイトで実証されている実証済みの方法のいくつかに従