第10回　情報構造図・画面設計の検討

TAの岩井です。本日の授業ではサイト構造図 / 情報構造図を検討・作成し、プロトタイプを検討しました。

【本日の授業内容と流れ】
■ストーリーボードを完成させる
■サイト構造図 / 情報構造図を考える
■画面プロトタイプの検討・制作

■ストーリーボードを完成させる

前回課された「ストーリーボードを完成させてくる」という課題を共有し、ストーリーボードを完成させました。

■サイト構造図 / 情報構造図を考える

完成させたストーリーボードを参考に提案するインターフェースデザインのサイト構造図 / 情報構造図を検討しました。

目的
サイト全体の大まかな情報構造を設計して、アプリやwebサイトの全体像を視覚化することが目的
作成時のポイント
・全ての画面をサイト構造図に配置する
・サイト構造図は上から上位画面を、下に向かって下位画面を書いていく（下にいくほど詳細になっていく）
・リンクしているページには線を引いて結ぶ

■画面プロトタイプの検討・制作

検討したサイト構造図 / 情報構造図から画面プロトタイプを設計しました。授業で紹介させていた画面設計するポイントを以下に記載しておきます。

画面設計時に意識するポイント
・プロダクトの外形・ボタンなどを入れる
・プロダクトとのサイズを意識して画面設計をする（原寸・倍寸）
・グローバルメニューを挿入する
・サイト構造図とグローバルメニューの矛盾が内容に設計する
・モバイルの場合は持つ箇所を意識して画面設計
・メタファを活用することで魅了的になる

また、POPを用いたプロトタイプの作成ポイントを記載しておきます。

POPによるプロトタイプ作成のポイント
1. サイト構造図 / 情報構造図を描く
2. 紙に必要な数の画面スケッチを描く
3. 各画面のスケッチを写真撮影する
4. 各画面にリンクを追加する
5. みんなでシェアする、評価する

■情報インターフェースの中間発表について

①パワーポイントによる発表内容（3分程度）
1.テーマのタイトル、テーマ概要、グループ名、メンバー名
2.デザインコンセプト、インターフェース
3.対象ユーザーとシナリオ
4.ストーリーボード（シーンと各画面のスケッチ10枚程度）
5.情報構造図

②アクティングアウトによる発表（2分程度）
1.シナリオに沿って、最も魅力のある部分だけアクティングアウト
2.背景にはシーンと各画面デザインを表示