WebSig会議 vol.33： http://websig247.jp/meeting/33/ グループワーク 直感的なUIデザインアプローチの体感 ／村越悟（WebSigモデレーター、グリー株式会社）、馮富久（WebSigモデレーター、株式会社技術評論社）

1. WebSig会議 vol.33
「感覚的アプローチからのスマホUIデザイン」
ワークショップ
2013.06.29

2. “直感的なUIデザインアプローチの体感”
-とにかくUIについて考えてみる
- プロトタイプを作り上げる
- 形にしていく過程を体感する
ワークショップのゴール

3. ワークショップのアジェンダ
自己紹介とお題設定
オープニング：５分
ワークテーマに対する自分の体験の振り返り
ワーク１＿問題点・課題点・改善の洗い出し：10分
アイデアスケッチたくさん出す
ワーク２＿理想型のUIの模索：10分
チーム内でアイデアを発表し、方向性を決める
ワーク３＿課題意識の共有と絞り込み：15分
プロトタイプを作る
ワーク４＿アイデアの具現化：20分
チーム同士で発表＋評価 → 講評
ワーク５＿プレゼンテーション＋講評：15分

4. 相手のアイデアを否定しない
「何か」は必ず書く
常に建設的な思考で
ワークショップを始める前に

5. ワークショップを始める前に
モノの動き・手触りを観察する

6. ワークショップを始める前に
動かしてみる、触ってみる

7. “「学び」を楽しくする教材のUI”
ワークショップのお題１
ワークショップテーマ
• スマホのタッチインターフェースは幼児でも操作できるUI。シンプルさ、動きの楽しさ
があるから？
•たとえば数式を解くなど、解のある学びではなく、自由な創造力を育むことができる幼
児・児童向けの教材ができると 面白いかも。

8. “新聞のUIを考える”
ワークショップのお題２
ワークショップテーマ
• 新聞はスマホになっても新聞の見た目
でなくてはいけないの？
• 使うシーン、使うシチュエーションに
よって「使いやすさ」「理解しやす
さ」「心地よさ」は違うはず。
世の中にある既存の情報を、新しい利
用シーンで活性化させることはできな
いか？！を自由に考えてみる

9. それでは始めましょう！

10. “自己紹介とお題設定”
- まずは、お互いに自己紹介
- やってみたいワークテーマを選ぶ（多数決で）
- チームのリーダーを決める（せーので）
オープニング

11. “ワークテーマに対する
自分の体験の振り返り”
ワーク１：１０分
-ワークテーマに対する自身の体験を想像してみましょう。
- ワークシートに思いつく限り、自分の体験を書き出してください。
困ったこと、課題だと思うこと。などなど。
例：新聞を、入浴中にスマホで見たい。
そのときの「読みやすさ」って？
例：子どもと、もっと遊ぶ時間がほしい。
親も楽しみたい。
ワーク１：問題点・課題点・改善の洗い出し

12. “アイデアスケッチをたくさん出す”
ワーク２：１０分
-前のワークでピックアップした体験をスケッチとして形にする。
- 精度が高くなくてもいいので、ワークシートにとにかく書く。
- ○○（課題）を○○（する）UIという形でまとめる。
ワーク２＿理想型のUIの模索

13. “スケッチをチーム内で発表”
ワーク３：１５分
書き出したスケッチをチーム内で発表。
一人ずつ順に発表する。
良いアイデアを選び、深堀りするか、誰かと誰かのアイデアを
合体させるか、などプロトタイプづくりの方針を決める。
テーマに対して、「課題意識」と「実現したいこと」を
チームで共通認識として持つ。
ワーク３＿課題意識の共有と絞り込み

14. “プロトタイプを作る”
ワーク４：２０分
ワークシート、スケッチブックにプロトタイプを書く。
会場に置いてあるモノを参考に使ってよい。
UIの要素はボタンや画面の要素、タッチだけではなく、音や動き、
ボタンを押してから待っている時間も含めて
すべてインターフェース。
ワーク４＿アイデアの具現化

15. “プロトタイプを発表する”
ワーク５：１５分
作ったプロトタイプを隣のチームに発表。
発表をきいたチームはその発表の
「良かった点」「気づきになった点」をそのチームに伝える。
一組目の発表と評価が終わったら役割を逆に。
ワーク５＿プレゼンテーション＋講評

16. “ふりかえりと講評”
ワーク５＿プレゼンテーション＋講評

17. おつかれさまでした！
WebSig会議 vol.33
「感覚的アプローチからのスマホUIデザイン」