読者です 読者をやめる 読者になる 読者になる

Kamihira_log at 10636

みえないものを、みる視点。

UIを模写してみてわかること

f:id:peru:20170523172043j:plain

先日のこと,カードソーティングゲームを元にUIをつくる演習の回で,「模写」を取り入れてみた.昨年度ペーパープロトのスケッチを描くあたりで手が止まってしまう学生が多くて,毎日いろんなアプリを使っているのにUIは本当に見えないものだなぁ,と思って試しにやってみた次第である.

 

軽くググってみたけど,UIの模写を教育の場で取り入れている例はほとんど無いようだ.ここで模写するアプリとして料理レシピサービスのクックバッドを選択した.理由として,学生達でも一度は使ったことがあるサービスであること(クックパッドはなんと月間6000万以上のユーザ数らしい.凄い数字だ).そしてカードソーティングゲームの題材である犬カフェで「犬を選びながら決めていくプロセス」と,「料理を選びながら決めていくプロセス」は似たような階層構造になっていること,の2つである.普段使っているこのアプリを改めてよく観察しながら,どんな画面要素でできているのか,選んでいく中でどんな風に遷移していくのかを丁寧に書き写していくのだ.

 

そしてやってみた結果.効果はとても大きかったように思う.AndroidiPhoneではUIが全く違うとか,料理の詳細画面に到達するまで何画面あるのかとか,3階層目でフッタのメニューが消えて広告に変わるとか,旬の行事(この時期は運動会)に反応して表示リストが切り替わっているとか,細かく分解して見ていくといろんなことを発見して,僕も驚いた.なかなか気付いてないものだね.

f:id:peru:20170523172102j:plain

そして,この模写ワークにクックパッドを選んだのにはもう1点の理由があった.実は,ちょうどこの日,クックパッド社のデザイナーの方々が演習の見学に来られることになっていたのだ.そこで,学生達には内緒にした上で,せっせと画面を書き写した後に,「はい,本日はクックパッドの方がお越し下さいました」というのをやってみようと考えた.一方でクックパッドのデザイナーさんも,まさか訪問した先で100人以上の学生達が自分がデザインしたものを模写していることは思わない.双方へのサプライズである.

 

その結果,クックパッドの方々は大人なのでとても喜んでくださったが,学生達はびっくりしすぎて呆然としてしまい・・・・あまりいい反応にはならなかったのが惜しいw

 

なにはともあれ,模写してわかった直後にいろいろなデザインの理由を直接聞くことができたのは大変勉強になった.なぜクックパッドのUIの閲覧履歴アイコンは,iPhoneでは左側にあってAndroidでは右側にあるのか? 観察してみてそれに気付いても理由まではわからない.それは作った人達に解説してもらうのが一番である.

 

模写は地味な作業だけれども,意識しなかったことが細部まで見えてくることに加えて,そういった現象の裏側まで考えるきっかけを含めることができれば,相当に面白いトレーニングだと言えるだろう.