第12回：インターフェースについて

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

先週の特別講義の記事を未だに掲示できず、すみません。
数日中に描き終えて掲示したいと思います。

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

 【授業内容】

① コンセプトの見直し

② 主要画面の見直し

③ ユーザーインターフェースデザインについて

④主要画面を設計する作業

① コンセプトの見直し（講義&作業）

価値仮説を用いて企画目的を明瞭にすると同時に自分の考えたコンセプトを見直す。

価値仮説は企画や目的を明確にすることができる。

価値仮説を記入してみて、一貫性がなかった場合は、戻ってコンセプトを再検討する。

② 主要画面の見直し（講義）

主要画面を設計するポイントについて学ぶ。以下に記述したことは先生が大事と仰っていたので必ず考慮しながら主要画面を設計してみてください。

「主要画面のデザインを考える際の考慮すべき重要な4点」

・毎回ユーザーが見る最初の画面には、何が表示されていたら良いかを考え、出すべき情報  　項目を整理する

・ユーザーに選択させたい項目のうち、いつも使う項目(メニュー)と、 たまに使えば良い項目 　(メニュー)を整理する。その上で、いつも 使う項目のうち、常に表示すべきものを5つ程度 　に整理する

・このアプリで、最もユーザーが嬉しいと思う特徴的な画面を特定し、そこが最も魅力的に
　なるようにするにはどうであれば良いか検討す る

・全体を通してユーザーが魅力やモチベーションを感じるようにするには、どのような

　表現、モチーフ、メタファーを用いれば良いか検討する

③ユーザーインターフェースデザインについて（講義）

ユーザーインターフェースをデザインするにあたって意識することを学ぶ。

レイヤーと地と図を意識してデザインすることが大切

「レイヤー」
ユーザーインターフェース要素のまとまり（コンポーネント）であり、場合によって全画面のこともあるが、階層的関係のこと

「地と図 」

2つの要素（コンポーネント）があるとき、人が情報を認識する際に、背景となるべき情報＝地、形もしくは主要な情報＝図、と識別される現象

「レイヤーの深度と影について」

Z軸の距離に意味がある

Z軸の距離が遠いとコンポーネントの影はぼんやりして、距離が近いと影がくっきりする

「UIをプロっぽく見せるためのコツ」

・なるべく線描に頼らず、色や影でコンポーネントを識別できるように表現する

・一般的なコンポーネントは、テンプレートを活用する

・主要画面にはモチーフやメタファーを入れる

④ 主要画面を設計する（作業）

①〜③のことを考慮しながら、主要画面を設計する。

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

最終発表に向けて発表資料を用意してください。最終発表に必要なものは以下に記載しておきます（配布資料と同様）。

展示内容（枚数自由）

①プリントアウトによる発表（2分程度）

- 表紙（テーマと名前）

- ユーザー調査のまとめ

- デザインコンセプト

- ペルソナ（対象ユーザー）

- シナリオ、利用シーン、9コマストーリー

- 価値仮説

- ストーリーボード

- 情報構造図

- インターフェースの代表的な画面枚数（イラストレーター等）

※上記は必要に応じてわかりやすくまとめて提示しても良い

※上記以外でも説明に必要なものがあるなら準備する

②プロトタイプの発表（1分程度）

魅力的なシナリオに沿い、プロトタイプを紹介する

・XDやpop、prottなどで画面遷移が、実操作で確認できる

・スマートフォン・タブレットなどで、実操作を確認できる

【授業風景】