確かな情報設計力を鍛える——社内研修「UIデザイントレーニング」レポート

グッドパッチでは社員向けにさまざまな研修を実施しています。定期的な新入社員向けの基礎研修のほか、専門性と難度をより深めた「専門研修」を実施することがあります。この記事では、筆者usagimaruがグッドパッチのデザイナー支援組織であるDesignOpsとして2024年に実施した社内研修 「UIデザイントレーニング」 の内容を一部ご紹介します。

UIデザインの新卒研修についてはこちらの記事でご紹介しています。
https://goodpatch.com/blog/ui-training-softwaredesign

研修の概要

この研修は、社内の若手UIデザイナー7名を対象に、情報設計の考え方や方法論を駆使した実践的なUIデザインに取り組むプログラムとして設計しました。主な企画をDesignOps部署中心に行い、筆者が講座自体の設計と制作、そして講師としての登壇と講評までを担いました。

進行は、模擬的なクライアントワーク（ソフトウェアサービスの開発業務）を想定し、UIデザイナーとして開発業務に携わるにあたって、与えられたテーマやさまざまなお題に沿って各課題に取り組んでいく形式を採用しました。

講義・講評のほか、1週間〜2週間で行う課題制作（宿題）の二段構成を1スプリントとし、全7回のトレーニングを積み上げ方式で行うプログラムとして設計しました。受講生は、全7回の研修の中でユーザーシナリオ整理やコンセプト定義から着手し、最終的にはワイヤーフレームレベルのUI設計の完遂を目指します。

漠然としたイメージ先行のUIデザイン（画面イメージの描画）ではなく、きちんと根拠と論理、時には推察に基づいて情報を整理しながらUI構造を組み立てていくことで、設計に迷いや手戻りが生じにくくなり、結果的には表現の幅というものも広がりやすくなります。

前提を揃えずに何となくのイメージ先行でUIモックを作ってしまうと、後になって実はその表現は実現が難しかったなどの事実が発覚し、作業に大きな手戻りが生じがちです。 そういった事象の多くは要求・要件やシステム仕様、プラットフォームの都合などをよく鑑みなかった結果として現れます。ですから、 早いうちから丁寧に情報を整理し、数ある制約の中で十分に成り立つ「形」というものを見極めることがデザインでは非常に大切なのです。

「情報設計」への認識解像度を高め、デザイナーとして必要な感性を身につける

「情報設計」というと、どこかふわっとした認識をされやすく、具体的に何が情報設計で、どのように取り組むと良いのかがわからない、といった疑問を抱かれやすいものです。それもそのはず、情報設計というのは特定の方法論を指すものではなく、 「情報に関する混乱を整える仕事」 全般を表すので、散らばった情報を整理する場面では必ず情報設計というものが関わることになります。

巷ではよく、“ナントカモデリング”と呼ばれるような方法論のことを情報設計と呼んだり、UI系ならWebサイトのナビゲーション設計のことを情報設計と呼ぶような傾向があります。確かにそれは一部は正しいでしょう。しかし、それだけが情報設計ということでもなく、より広い視野でこれを捉えなければなりません。

この研修では、全7回の期間で受講生が一貫して情報設計を強く意識しながら課題に取り組めることを目指しました。まずはユーザーシナリオの整理、ユースケースの定義から始まり、その後の情報抽出による概念定義、コンセプト定義、そしてナビゲーション構造やレイアウト構造の検討まで、設計を積み重ねながら情報を整理していく考え方と方法論を学びます。

このようなモデルベースのUIデザインは書籍などの解説では十分に理解することが難しく、実際にUIを作っていく過程に都度必要な知識と方法論を柔軟に適用していける感性が必要です。この感性は手を動かさなければ身につきません。また、決められたデザインプロセスにただ沿って作業していくのではなく、 デザイナー自ら「次に何を作るのか、そのためには今何の情報が必要なのか」を意識する、このアブダクション（遡及推論）を取り入れることが重要 で、その感性を身につけてもらうことが本研修の目的の一つでもありました。

テーマとシラバス

全7回の研修では、一貫してある一つのソフトウェア製品・サービスのUIデザインに取り組みます。「飲食店における予約・座席管理サービス」というテーマで、積み上げ方式で設計を重ね、最終的にはワイヤーフレーム級のUI成果物の完成を目指します。

また、プラットフォーム／フォームファクタとしてはデスクトップWeb版とモバイルネイティブアプリ版の二種類を想定し、ワイヤーフレームの成果物は最低でも二つ作ります。インタラクションの違いなども考慮しながら適切な役割を決めてUIの表現を考えていくという、なかなかやりがいのあるお題です。

全7回の研修は以下のように進行します。

1. さまざまな知識・方法論の紹介　（講義／出題）
2. シナリオ分析・ユースケース定義 (1)　（制作の講評／講義／出題）
3. シナリオ分析・ユースケース定義 (2)、タスク整理　（制作の講評／講義／出題）
4. コンセプト定義と概念設計　（制作の講評／講義／出題）
5. ナビゲーション構造設計　（制作の講評／講義／出題）
6. プラットフォームへの適合　（制作の講評／講義／出題）
7. 機能の提示方法　（全体講評・総括）

第一回目の講義でさまざまな考え方を紹介し、第二回・第三回では最初の課題「シナリオ分析・ユースケース定義」に着手します。シナリオとユースケースの課題は二回にわたって取り組むため、一度作った成果物にさらに情報を拡張しなければならないことを強く意識できるようになっています。実際のデザインの仕事は安定的にリニアに進捗することはないので、ユースケースを後から追加したり直したりする際の適度な感性をここで身につけます。

また、タスク整理もこの段階で行い、業務として必要なタスクへの目星をつけます。

第四回では、まずコンセプト定義を行い、デザインの大方針を決めます。これは主に 設計思想とユーザー体験のコンセプト で表します。デザイナーとして一番何を重視するのか（設計思想）、どのような体験を得られるようにしたいのか（ユーザー体験）、をそれぞれ言葉に表し、今後の作業で常に意識できるようにします。

次に、シナリオとユースケースに基づく概念設計を行います。概念設計とは、サービスやUIに現れるさまざまなメタファ（モノ）を定義し、それに名前をつけ、概念同士の関連性を決めるための設計です。成果物である 概念モデル と ユースケース を今後すべての設計の基礎とすることにより、ユースケース中心・モデル中心の設計 が行えるようになります。

以降はナビゲーション構造を作り、プラットフォームごとに適したレイアウトやインタラクションの方法を検討します。

今回の研修で扱う範囲はここまでですが、UIデザインに関連するそのほかの分野・工程としては、ユーザーリサーチ、ビジュアル設計、ユーザビリティ改善、デザインシステム構築などが想定されます。実際のソフトウェアデザインの仕事では、異なる肩書きのメンバー複数人でこれらの作業を分担しながら取り組むことになります。

受講生による制作の様子

ここからは、各回ごとに受講生が実際に制作した成果物の一部をご紹介します。

まず最終成果物（UIのワイヤーフレーム案）はこちらの通りです。複数名の受講生のうちから何名かの案を引用します。基本的な要件や条件は同じですが、コンセプトや表現の仕方などにそれぞれ個性が現れており、どれも興味深い設計案に仕上がっています。

「飲食店における予約・座席管理サービス・ソフトウェア」
デスクトップWeb版およびモバイルネイティブ版（iOS）それぞれのUIモック：

▲Eさんのワイヤーフレーム案：座席表とカレンダーの同期・俯瞰表示を重視

▲Mさんのワイヤーフレーム案：座席表をグリッドUIに抽象化し、必要情報へのアクセス性、店舗スタッフの作業効率を最重視

▲Hさんのワイヤーフレーム案：サイドバーUIの開閉で情報の解像度を制御し、複雑な情報構造をシンプルに表現

▲Sさんのワイヤーフレーム案：横方向カレンダービューと座席情報の対応付け／モバイル版ではウィジェットサービスの活用案

シナリオ分析

ユーザーシナリオは、ユーザーリサーチなどの工程によって作られる成果物の一つです。想定されるユーザー（今回の場合、飲食店で利用する予約・座席管理のソフトウェア）がその製品を使うさまざまな場面をテキストに書き起こしたものです。これがあると後のユースケース定義を行いやすくなります。

この作業は、UIデザインというよりもう少し前段の調査工程にあたるため、グッドパッチでは主にUXデザイナーが担います。しかし今回の研修では、受講生に「自身の業務領域を閉じない」ことを意識して欲しかったので、あえてシナリオ整理から行ってもらいました。

▲シナリオ設計の様子（Eさん）

ユースケース定義

ユースケースは、いわばユーザーの用途を表す情報です。この製品のユーザーがどのような用途に基づいてそれを使おうとするのか、きちんと想定して機能を設計しなければなりません。ユースケースを定義しておくことで、今後のUI設計、ひいては機能開発でも用途外の余計な機能を作ったり、考慮が足りていない設計というものが現れにくくなります。つまり、ターゲットにささりやすいUI設計を目指しやすくなります。

ユースケースを表す方法にはいろいろありますが、筆者発案の 「〈主体〉が〈対象物〉を〈行動〉できる」構文（通称、“誰が何をどうできる構文”） に当てはめて簡易定義する方法を採用しました。グッドパッチでもこの方法でユースケースを検討することがあります。UMLユースケース図等ではその設計に時間がかかりすぎたり、それを読み書きできるリテラシーの差に苦労するなどの問題が生じがちなのですが、この方法であれば、シナリオ文に含まれる名詞や動詞の言葉に着目して構文に当てはめていくだけで、簡単にユースケースを定義することができます。ルールもシンプルなので共通言語として扱いやすいです。

▲ユースケース定義の様子（Eさん）

▲シナリオ分析・ユースケース定義の様子（Sさん）

タスク整理

タスク整理では、シナリオから想定されるユーザーの行動やシステムの振る舞い（機能）を検討します。行動主体がユーザーかシステムかを意識しながら表にまとめる課題を出題しました。表現方法は受講生それぞれ任意の形式に委ねました。

▲シナリオ分析・タスク整理・ユースケース定義の様子（Hさん）

コンセプト定義

ここでいうコンセプト定義は、UIデザインとしてのコンセプト定義です。デザイナーとして一番何を重視するのかを表明する 「設計思想」 と、どのような体験をもたらしたいのかを決める 「目指したいユーザー体験」 の二つを言葉で表します。

設計思想とは、例えば「お金を扱うアプリなので、プライバシーとセキュリティは第一に設計する」とか、そういったものです。今回のテーマ「飲食店で利用する予約・座席管理のソフトウェア」の場合、デザイナーの皆さんは何を一番重視しますか？という問いかけを行って、各々に表明してもらいました。

ユーザー体験は製品の先にある価値の姿です。最終的にユーザーにはどのようになっていて欲しいのかを意識してもらうようにしました。また、「ユーザー体験はUXデザイナーが考える仕事であり、UIデザイナーは関係ない」という誤解を解く意図もあります。たとえ分業体制では主担当領域でないとしても、それは決して無関係ではなく、自らのデザインと地続きの事柄であるということを強く意識してもらいたかったのです。

わざわざこの作業を行う理由は、 「デザイナーとして、あなたはこのデザインをどうしたいのか？」 といった問いかけに対して、明確な答えを持てるように普段からその意識を持ってもらうためです。独善的な制作姿勢はデザインというものからかけ離れてしまう懸念がありますが、逆に、他者の意見に対して協調的な姿勢に傾倒しすぎると、今度は指示待ちの受け身姿勢が強まる懸念が生じます。

言われた通りにただ手を動かすだけの仕事はいずれ機械に取って代わられますから、デザイナーはきちんと創造性を持ち合わせて、それを効果的に発揮していく方向に意識を向け続けなければなりません。

デザイン全体で 「固持すべき軸」 というものをデザイナー自身が強く意識することにより、デザインの質を向上させられるようになります。今回の研修でも、最終成果にデザイナー自ら打ち立てたコンセプトがきちんと反映できているかどうかを講評者として着目しました。こういった視点はユーザーは決して指摘してくれないし、クライアントやパートナーでもそこまで理解が及ばないことがあります。設計思想やコンセプトを持つのはデザインですから、デザインを一番よく理解しているデザイナー自身がそこに対する責任を持たなければなりません。

▲コンセプト定義の一部（Hさん）

▲コンセプト定義の一部（Hさん）

概念設計

概念設計は、UIに現れるさまざまなメタファ（モノ）を定義し、名前をつけ、関連性を決める設計工程です。成果物である概念モデルとユースケースを今後すべての設計の基礎とすることにより、ユースケース中心、モデル中心の設計が行えるようになります。

今回のお題では、シナリオやユースケース、タスク、要求から想定される概念の定義を行い、 「コンテンツ構造」 と呼ぶモデルに表してもらいました。

▲コンテンツ構造定義の様子（Sさん）

ナビゲーション構造設計

ナビゲーション構造設計は、これまでの成果に基づいて大雑把にナビゲーションの様子をモデル図に描くという作業です。具体的なUIのレイアウトイメージが出来てから遷移の流れを検討する、いわゆる「画面遷移の設計」ではなく、レイアウト設計の前にナビゲーション構造を考えます。

この際に、筆者が発案したナビゲーション設計メソッドである 「『ボトムアップ型』と『トップダウン型』の二つのアプローチを駆使して精度を高めるテクニック」 を案内し、各自作業してもらいました。

▲筆者発案によるナビゲーション設計メソッド＝「ボトムアップ型」「トップダウン型」による設計テクニック

▲「ボトムアップ型」「トップダウン型」それぞれの設計（Sさん）

プラットフォーム別の成果物

ナビゲーション構造までは概ねプラットフォームの区別なしに設計を行ってきました。しかしここからは具体的なUI表現（特にインタラクション関係）が必要になりますので、デスクトップWebとモバイルネイティブアプリとでそれぞれに適したフォームファクタ、インタラクション手段、レイアウト骨格を考えてもらいました。

▲プラットフォーム／フォームファクタ別のユースケース整理（Hさん）

▲プラットフォーム／フォームファクタ別の条件整理（Mさん）

おわりに

冒頭で述べたように、情報設計というものは何か特定の知識だったり方法論のことを指すものではなく、情報の混乱を整える取り組み全般を言います。情報があるところにはどこにでも使える知識体系、考え方です。これを応用し、ソフトウェア的に十分に扱える、論理的に成り立つ構造というものを目指すことが、確かなUIデザインへの近道となります。

この研修では簡単な課題を通して情報設計的な思考力と制作力を鍛えることに注力しました。全7回の研修では伝えきれなかったことはまだ多くあるのですが、受講生はプロのデザイナーでもありましたから、一から十まで教える必要はなく、要点を絞って講評することができました。

受講生の中には、

「元々情報設計力に不安を抱いていたが、この研修で克服したい」

と表明していたメンバーがいました。この方は最終発表の場では非常に良いUI設計を提案されていて、このトレーニングによって何か感性を身につけられた様子を伺うことができました。

今回のような専門研修は、デザイン組織がより良いデザインを志すためには不可欠であると考えています。グッドパッチではDesignOpsが中心となり、このような研修を通してデザイナーの活動環境をサポートしています。講師を担当した筆者個人としても、デザイナーたちの成長を少しでも後押しすることができていたら嬉しく思います。

「社内研修『UIデザイントレーニング』レポート」は以上です。

グッドパッチでは、クライアントに寄り添ってソフトウェア製品を共創するクライアントワーク事業のほか、クライアントに所属するクリエイターの方々を対象にしたデザインワークショップやセミナーも随時提供しています。ご興味がございましたら、ぜひお問い合わせください。