子ども向けウェブサイトの視覚構造レイアウト設計手法の分析

1. 温かくて優しい
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

関連アドレス: http://www.web-designers.cn/post.aspx?id=2481
高輝度、低彩度の黄色と緑色は柔らかく温かみのある雰囲気を演出し、重要な情報は高彩度の緑と赤で強調表示されます。背景にランダムな大きさの円が重ねられ、夢のような愛らしい雰囲気を醸し出しています。雲のような曲線のエッジ、ロゴとナビゲーションのステッチ、ナビゲーションバーの背景のピン、赤ちゃんの日記のステッカー、赤ちゃんの写真のハングタグ、テキストタイトルの手書きフォントなど、その他のデザイン要素はすべて、デザインスタイル全体に使用され、全体的に温かみのある雰囲気を作り出しています。
2. 春が来て、すべてが生き返る
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

ウェブサイトアドレス: http://tf.dtbaker.com.au/preview/?theme=26&style=0
こちらのデザインも、至る所に柔らかな緑が広がり、ちょうど到来した春のように柔らかな印象を与えます。カラースキームは、高明度、中低彩度の黄色と緑の2色の組み合わせを採用しています。ナビゲーションには、連続した雲のような弧と手書き風のフォントも使用されており、かわいらしく温かみのある雰囲気を醸し出しています。メインビジュアルのイラストは、デザイン全体の雰囲気を高める上で非常に重要な役割を果たしています。木に掛けられたバナーにはブログのロゴが書かれており、興味をそそります。しかし、Web ページのような正方形のレイアウトは非常に従来型であり、創造性と画期性に欠けています。
3. 色鮮やかで明るい春
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

関連アドレス: http://themeforest.net/theme_previews/92492-kids-toys
非常に高い彩度と明度を持つ空、雲、山、太陽、草、さまざまな漫画の動物や植物で構成されたイラストの背景は、全体的な雰囲気を作り出す上で最も重要な要素です。背景を全体のデザインに溶け込ませるために、ロゴバナーは鳥によって空中に吊り下げられ、検索ボックスを引っ張る飛行船も青空に浮かんでいます。メインコンテンツエリアの左側にある水彩インクと手形、右側に飛び出すダイナミックな星の形が、楽しく愛らしい雰囲気をさらに高めています。雲の形をしたナビゲーションバーとかわいい手書きのテキストは少し荒いですが、それでも同じデザインスタイルを継承しています。メインコンテンツエリアにある2枚の明るく楽しい家族写真は、人々に春と暖かさを感じさせます。
4. 新鮮で柔らかい
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

関連アドレス: http://tf.dtbaker.com.au/preview/?theme=22
低彩度、高明度の緑がかった青の広い領域がこのデザインに穏やかで新鮮、そして柔らかい心理的感覚を与えます。ピンク、赤、黄色、緑の地元の色と組み合わせることで、デザイン全体が過度に単調な配色から脱却します。このデザインで注目すべきその他のデザイン要素は次のとおりです。1. チェック柄に似た背景素材。2. メインコンテンツ領域の雲型の縁。3. ロゴ、ナビゲーションテキスト、タイトルの手書きフォント。4. 曲線のタグとボタン。5. 各コンテンツ領域に追加された控えめなイラスト背景。
5. 柔軟なレイアウト
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

ウェブサイトアドレス: http://www.freesam.com/
このデザインの第一印象は、枠組みを破った情報レイアウトと、多数の断片化された情報ブロックです。情報領域ごとに異なるデザイン手法が、人々の探索意欲を掻き立てます。ページ全体に可愛らしいスタイルが貫かれており、白と彩度の高い明るい緑とオレンジの組み合わせがページに爽やかな印象を与えています。手描き風のイラストは子供向けのウェブサイトには欠かせない要素であり、ウェブサイト全体の雰囲気を大きく高めることができます。円形や大きな丸みを帯びた枠のデザインスタイルも、ページ全体のスタイルにマッチしています。常に現れるタグとパンチングカレンダーのデザインは互いに響き合い、さまざまな情報領域を分割するという機能的な目的を果たします。最も重要なのは、このデザインが以前のデザインのメインコンテンツ領域のフレームワークの制限を打ち破り、レイアウトがより自由になったことです。子供向けのウェブサイトとしては、このような創造的なアプローチが必要です。
6. 温かい雰囲気
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

ウェブサイトアドレス: http://kidsplus.shinhan.com/
雰囲気たっぷりのフルFlash韓国サイトです。雰囲気作りは、黄色とオレンジ色の大規模な使用に直接関係しています。メインカラーはこの2色ですが、この2色に限定されるわけではありません。ピンク、紫、青、緑もこのデザインに登場しますが、色の割合で見ると、それらははるかに少ないため、全体の雰囲気を圧倒したり、薄めたり、矛盾させたりすることなく、配色を豊かにすることができます。ページ全体が黄色一色になっているわけではありません。下部フッターの白色は、開いたグリーティングカードのようなメインビジュアルに安定した水平面を与えるだけでなく、デザイン全体に通気性のある心理的感覚を加えています。漫画のパターンがグラデーションの黄色い背景の広い領域に重ね合わされ、デザインにレイヤーが追加され、デザインのトーンが作成されます。ロゴの多色パズルスキームは、背景のパズルパターンを反映しています。視線を下に伸ばす大きな丸いタグをナビゲーションデザインスタイルとして使用し、手書きの漫画フォントを使用しています。関連するアクティビティコンテンツの右側にある円形のタグも同様のデザインを採用しています。このデザインでは丸みを帯びた白いストロークが繰り返されていることがわかり、これは子供向けの Web サイトのデザインに対する細かい配慮と言えます。
7. 爽やかでエレガントなオリエンタルスタイル
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

ウェブサイトアドレス: http://www.agabangncompany.com/cha/index.jsp
メインビジュアル部分には、広い白地、ぼやけた水彩画の背景、温かみのある家族写真を配置し、柔らかく新鮮な印象を与えるデザインに仕上げています。ナビゲーションなどのページ上の要素は過度に装飾されておらず、それがこのデザインを大胆にしています。しかし、レイヤースタイルの効果を追加しないと、ぎこちなくデザインらしくないと感じることが多いです。その理由は、私たちの頭の中にデザインの大まかな方向性がなく、惰性で盲目的に突き進んでいるからです。最終的なデザインがどのようなものになるのか、どこに向かっているのか、まったくわかりません。このデザインにより、私たちはより大きなスケールでデザインのアイデアを学ぶことができ、さまざまなデザイン手法を試して、デザインをさらに進めていくことができました。
8. 幼少期の創造性の重要性
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

ウェブサイトアドレス: http://www.toysrus.co.kr/index.jsp
青い背景は、玩具展示ホールとメイン情報エリアの色の間に鮮明なコントラストを形成し、メイン情報エリアを背景から際立たせます。開いたおもちゃ箱のアイデアは、ウェブサイトのテーマに関連しているだけでなく、楽しさも増します。このアイデアは、具体的なデザインの作業を開始する前に完成しました。そのため、Web サイトをデザインする場合、Photoshop を開く前に行う作業は、実際にはデザインの方向性を決める上で非常に重要な役割を果たします。この部分には、優れた Web サイトを設計するために不可欠な調査段階とスケッチが含まれます。
9. 落ち着いた配色
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

ウェブサイトアドレス: http://www.babymeal.co.kr/
これは、黄色、オレンジ、茶色の配色を使用したデザインの例です。基本的には同じ色相と異なるレベルの色の組み合わせなので、大きな飛躍のあるさまざまな配色よりも全体的に落ち着いた雰囲気になります。このウェブサイトの事業は乳幼児に栄養のある食事を提供することなので、温かみのある落ち着いた配色の方が適しています。
10. 下部が少し壊れている
子供向けウェブサイトの視覚構造レイアウトデザイン分析、PSチュートリアル、123WORDPRESS.COM

ウェブサイトアドレス: http://www.gymboree.co.kr/
さまざまな高明度および高彩度の色の使用は、子供向けの Web サイトのデザインにおいて今でも最も一般的なアイデアです。このウェブサイトのホームページには比較的多くの情報が掲載されています。メインビジュアルより上の部分は構造が明確で視覚的な体験も良好ですが、メインビジュアルより下の部分は列が多すぎて構成が明確でなく、少し断片的に見えます。「遊び」「アート」「音楽」「家族」の 4 つの並行セクションを視覚的にもっと明確に分割し、タイトルテキストを周囲の本文テキストから飛び出させると、視覚効果はもっと良くなるかもしれません。しかし、デザイナーはメインの情報エリアに白や明るいグレーなどさまざまな色を使い、爽やかで清潔な雰囲気を演出しようとしていることがわかります。しかし、情報の構成と視覚的な表現は十分ではなく、より詳細かつ思慮深いものにすることができます。

<<: Momentsで写真を整理するためのCSSコード

>>: Lua モジュールを使用して WAF を実装する Nginx の原理の分析