PLEX PROGRAM REPORT

  • コンセプトデザイン
  • デザインプロセス
  • デザイントレンド
  • デザインプレゼンテーション
  • コミュニケーションデザイン

「初めてのUI/UXデザイン」

2019年3月23日(土)

UI/UXデザイナー

高宮 修平 氏

Shuhei Takamiya

<PROFILE>

かねてより、UI/UXデザインに携わり、現在はフィンテック関連のプロダクトUI/UX設計に携わる。また、テキスタイルデザインにも精通し、ロンドン芸術大学で非常勤講師を勤める。2007年に経済産業大臣賞を受賞する。東京デザインプレックス研究所 UI/UX専攻 主任講師

高宮 修平 氏

第1部:講義「初めてのUI/UXデザイン」

講義1

今回のプレックスプログラムは1年ぶり2回目のご登壇となる高宮修平さんをお迎えしてお送りします。高宮さんは東京デザインプレックス研究所に昨年から新設されたUI/UX専攻の講師を務めています。UI/UXは産業として発展途上であり、メガトレンドでもあるため学生たちも大きな関心を抱いている様子が伺えます。本日は情報設計、プロダクト設計を中心にUI/UXデザインについてお話しをしてくださいます。また大学でテキスタイルを学ばれており、服飾デザイナーの顔を持つ高宮さんの経歴にも注目が集まります。因みにプレックスプログラム用のスタッフパーカーも高宮さんが制作されたものになります。

講義2

現在、高宮さんは会社での決算書の作成など、企業の経営に関わる収支を扱う際に使用されるアプリケーションの設計を行なっているとのことで、収支のお金の流れを自動化する仕組みを設計するため、やっていることはすごく堅い仕事です。と高宮さんは話します。今回はまず学生たちにモバイルとPCにはどんな違いがあるのか考えてみてほしいと促します。そして高宮さんはモバイルプロダクトをつくる際に「電車の中やベッドの上で使う」、「プッシュ通知を受け入れる」、「詳細確認・詳細編集には向いていない」の3つが大切な要素になると言います。

講義3

Appleの「Human Interface Guidelines」を例に出し、UI/IXデザインのお話しを詳しくしていただきます。クリエイティブデザインと情報設計は180℃違うものと認識していると高宮さんは言います。情報設計はガイドラインに沿って最良性のあるコンポーネントを定義、構成していくというプロセスを踏むと高宮さんは学生たちに伝えていました。モバイルは特に断続性を考慮した設計になっており、線形的なステップUIを採用し、一度作業を中断した際もファーストステップに戻らないようまた時間を区切って作業を再開できるような形にするのがモバイルのUIデザインとしては望ましいなどと実用的な技術のお話しを詳しく聞かせてくださいました。利用シーンを考えて設計しないとUXとして破綻していくと高宮さんは語ります。

講義4

次の話に移ります。ソフトウェア設計では「人間中心設計(HCD)」という設計手法が一般的であると高宮さんは言います。まずは利用者の潜在的ニーズを特定することから始まり、利用者の要求定義から要件定義を決めていくプロセスを踏むそうです。利用者の顕在的な要求にパッと飛びつくのではなく、より深い本質的な意図を把握することがソフトウェア設計に大切な要素である。グラフィックデザインは見るという閲覧モードで一方向の設計なのに対し、ソフトウェアのUI/UXデザインは「見た目と状態」、「性質」と「挙動」の3セットで設計しないといけないもので、見た目の先の動的な部分まで設計しなければいけないところがUI/UXの要だといいます。

第2部:ワークショップ「画面をレビューしUI/UXの修正案を考える」

ワークショップ1

ここからは後半のワークショップへと移ります。今回のお題は「よくある画面をレビューし修正案を考える」です。学生たちは三人一組でチームを組み、お題に取り組みます。シンプルながら頭を使う課題に学生たちからもやる気充分といった雰囲気が伝わっています。一見画面がきれいでも、これはモバイルアプリで画面設計がこうなっており各コンポーネントがこうある。と論理的に順に考えていくと意外と問題が見つかると高宮さんからワークショップの取り組み方としてのアドバイスをいただいたところで、早速ワークショップのスタートです!

ワークショップ2

今回のお題に使われた画面はiOSのモバイル画面です。学生たちはフレームワークの見えにくい課題に対して苦戦していました。前提条件がはっきりしないなどの声が学生から上がるなど、学生たちは問題をどの様に捉えて良いか戸惑っている様子でした。その中で「画面遷移」と「分岐」の違いなど、UIならではの考え方に戸惑いながらも粘り強く問題を発見し、指摘していたのが印象的でした。学生からの指摘に対して高宮さんからはOSや各パーツに対して持つユーザーのメンタルモデルは年代などによって固定的だったりするので、情報設計をする上である程度、限定的な設計になる。だからこの部分に違和感があると指摘できるなどの解説をいただきました。

ワークショップ3

学生たちも段々と要領が掴めてきた様で次々に指摘が上がってきます。戻るボタンはここにある必要があるのか、ここの四角の領域は下の部分とまとめて表示した方が良い、ここの文字はなくては良いのでは、などと指摘が続きます。高宮さんからはアクションシートというものがあって、それに沿えばあまりユーザビリティ的には問題が起きないなどの解説をいただきました。最後に昨年ご登壇された際のワークショップのお題を問題形式で投げかけるなど、非常に知的な時間を過ごすことになりました。

総評

最後に昨年のお題に対しての解説を高宮さんからいただきます。
「例えばアップルのデザイン哲学として、身体に近い製品ほど丸くし、遠くなるほど四角になる特性を持つので、ボタン一つ設計するにもそういったことを考えて情報設計する必要があります。またポップアップについてですが、これはアラートコンポーネントとして定義されているので、基本的にポップアップは使用しない方が良いです。画面サイズが小さい場合、プライマリーのボタンが二つあるとユーザーを混乱させる可能性があるのでやめた方が良いです。今日はなんかシュールな会になってしまってすみませんでした。」高宮さんそんなことないです!本日はUI/UXに関しての詳しいお話ありがとうございました。

このページの先頭へ