第8回：情報構造・画面スケッチ

こんにちは。TAの岩井です。

6月に入り梅雨の時期になりました。雨が降り続き、気分が沈みこむ時期ですが

頑張りましょう。

今回の授業は以下の内容でした。

【授業内容】

①ワークショップ

②情報構造について

③画面スケッチ（ペーパープロトタイプ）について

①情報設計に必要な視点を理解するワークショップ

情報整理をするワークショップを行い、情報設計について学ぶ。

内容として50枚の犬カードを使って情報設計に必要な「視点」について学ぶ

ためのCARD SORTING GAMEをグループごとに行なった。

②情報構造について

安藤先生から情報構造化の重要性を学ぶ講義。

ポイントは以下の項目です。

・システムをつくるにおいて、情報量は膨大になるなることが多く、構造が整理されて
　いないとユーザーはたどりつけない。そのため情報を整理することが大切。

・情報の整理がされていないままUIを作成してしまうと、UIが破綻してしまうため、
　情報を整理し、情報構造図を作ることが大切。

・ユーザーが欲しい情報を整理して情報構造図を作成する。

・ストーリーボードから情報を抜き出す際に「提示する情報（目的語）」と「ユーザーが

　行う作業（動詞）」意識してポストイットで情報を抜き出す。

　例：iPhoneの写真アプリでアルバム作成

　目的語：写真を
　動詞：選択してアルバムを作成

・ポストイットを整理して構造図にする。作業の部分は情報構造図の機能の部分として
　整理する。

③画面スケッチ（ペーパープロトタイプ）について

山崎先生から画面スケッチにおけるポイントを学ぶ講義。

【ペーパープロトタイプでのポイント】

・紙で素早く作成するプロトタイプ

・スマホやタブレットの画面のサイズを考慮してスケッチをする。

・外形サイズまであるテンプレをダウンロードして、画面スケッチを描くのがオススメ。

・ワイヤーフレーム作成時にどんな文章が入るのか、どんな写真が入るのかまで
　考えながら作成していく。まずはラフで大丈夫。

【サイト構造（情報構造図）を作成する際の注意】

・サイト構造図（情報構造図）はサービスのUIシステム全体のサイト構造図を作成する。

※ストーリーボードに沿ったUIの構造は情報構造図の一部なのでそこだけ作っても
　意味がありません。

　ストーリーボードの一部分を埋め込んだ、全体のサイト構造図を作成する。

【画面ワイヤーフレームのポイント】

・中間発表ではグローバルナビゲーションは必ず入れる。

・基本的な画面設計としてグローバルナビゲーションで選択した画面では

　グローバルナビゲーションの名称が画面の上部の名称と一致している。

【ローカルナビゲーションとグローバルナビゲーション】

ローカルナビゲーション…特定のページにだけ表示

グローバルナビゲーション…どこのページにも表示

どの位置にグローバルナビゲーションを配置するか検討する。

なぜそこに配置したのかを考える。

これだけは絶対忘れないで

・絶対に原寸を意識した画面サイズで画面スケッチをする。

・UI全体のサイト構造図（情報構造図）を作成する。

【次回までのやってくること】

・改善したストーリーボード

・ストーリーボードに沿った画面のペーパープロトタイプを作ってくる

・自分が提案するサービスの情報構造図を作ってくる

提出はありませんが、早めにやっておくことをおすすめします。
期限ギリギリに取り組むと絶対間に合いません。

よろしくお願いします。

【中間発表について】

展示形式で発表時間は3分程度

先生やM2の人がきたら発表する感じになると思います。

展示内容の詳細

A4横づかい・印刷・枚数は自由

・テーマとタイトル

・提案するデザインのコンセプト・特徴

・提案するデザインの使い方がわかる資料

・画面のペーパープロトタイピング（ストーリーボードに沿った画面）

【授業風景】