10/01 学科 ECサイトデザイン基礎⑤【オンライン】
宮本真伍本日のテーマ
コーディングの準備をしましょう
WEBサイト制作の流れ
ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング
ロゴ提案→イメージカラーを作る
🎯 主なテーマ
「情報の構造化」と「視覚的な階層づくり」
デザインにおける情報整理の重要性と、それを視覚的に伝えるための技術や考え方が中心です。
🧩 内容のポイント
- 情報設計の基本
- ユーザーが迷わず情報を受け取れるよう、情報の「優先順位」や「関係性」を明確にする。
- 情報は「グループ化」「ラベリング」「順序付け」によって構造化される。
- 視覚的階層の作り方
- サイズ、色、余白、配置などを使って、どの情報が重要かを視覚的に示す。
- 「視線の流れ」を意識したレイアウト設計が重要。
- レイアウトの原則
- グリッドシステムの活用で、整然とした構造を作る。
- コンテンツの種類に応じて、柔軟にグリッドを変化させる。
- ユーザー視点のデザイン
- 情報を「伝える」だけでなく「理解される」ことが目的。
- ユーザーの行動や心理を想定した設計が求められる。
- 実例と図解
- 実際のLPやポスターなどを例に、情報の構造化と階層表現の違いを比較。
- Before/Afterのレイアウト例で、改善点が視覚的に理解できる。
