Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—

Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。

UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。
以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。

UIデザイン研修—ソフトウェアデザイン編—講義シラバス

ソフトウェアデザイン講義の設計

UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採用しました。いずれも講義＋演習＋宿題の3段構成と基本しており、講義で学んだ知識をその後の演習や宿題ですぐに活かせる教科書的な形式を取り入れました。

ソフトウェアデザイン編の講義はさらに四部構成とし、｢ソフトウェアデザイン概論」｢インタラクションデザイン基礎」｢モードレスデザイン基礎／UIモデリング基礎」「表現の可能性とその探り方」をそれぞれ1時間枠で受講するシラバスとしました。

この四部構成は、社内で俗に「ソフトウェアデザインの3段階プラス1」と通称している次の概念図を前提としています。

この概念図ではソフトウェアデザインと呼ばれる領域をそれぞれ「（デザイナーの）精神」「情報モデル」「インタラクション」「表現」の4段階で区別しています。一番下の精神レイヤーはデザイナーの心の持ちようであったりリテラシーに相当し、まずはこれらの知識や思想を持つ必要があることを示しています。上層の「情報モデル」｢インタラクション」｢表現」は、設計の対象や性質ごとに区分した段階を示しています。

ソフトウェアデザイン講義もこの精神から表現に至る4段階構成とし、私が担当した講義は表現を除く以下3段階に相当します。

なぜUIデザインを「ソフトウェアデザイン」と表現したのかというと、UI（いわゆるGUI）とは単にグラフィック要素など見た目だけで設計できるものでは決してなく、それがソフトウェアの一部としてインタラクティブに振る舞うものであるという視点を新人のうちから持って欲しかった意図があります。UIデザインとは絵を描くことではなく、ソフトウェアを作ることなのです。

研修の全体像ならびに演習や宿題に関しては、次の記事や今後公開予定の記事をご覧ください。

関連記事：GoodpatchのUIデザイナーとして持つべき価値観

◆ 講義：ソフトウェアデザイン概論

ソフトウェアデザイン概論では、ソフトウェアとしてのUIの捉え方、ソフトウェアにまつわる課題、コンピュータ史、GUI史、デザインの基礎知識といったものをかいつまんで学ぶことができます。UIに関わるすべての事柄を網羅するにはとても時間が足りませんから、約1時間枠の中で受講者が今後自らUIデザインを学ぶための“手がかり”を得られるような講義に徹し、特に重要な事柄をキーワードとして覚えてもらうことを目指しています。

◆ 講義：インタラクションデザイン基礎

インタラクションデザイン基礎では、UIにおけるいわゆる“インタラクション”と呼ばれるものの捉え方をHCI的なアプローチで解説を行います。インタラクションという言葉の意味は、実際にはかなり広い概念になってくるので、特にGUIやソフトウェアにおけるインタラクションに的を絞る内容として構成しています。

◆ 講義：モードレスデザイン基礎

モードレスデザイン基礎では、UIにおける“モード”と呼ばれる概念をまずは学んでもらいます。モードの理解なくしてUIデザインはなし得ません。この講義ではモードレスとモーダルを適切に区別するための素養を身につけ、自らのデザインに応用できるようなリテラシーを養うことを目指しています。

◆ 講義：UIモデリング基礎

UIモデリング基礎では、構造設計としてUIを組み立て構築する考え方や基礎理論を学びます。構造の区別、Master-Detailパターンの理解、「クラス」｢インスタンス」の考え方など、かなり「ソフトウェアの設計」に寄った内容となっています。巷でUIデザインというとどうしてもビジュアル的な部分が注目されがちですが、その見た目を成り立たせるためには背景にある情報の論理構造を構築しなければならないことを理解しておかなければなりません。

では、それぞれの講義の内容を少しばかりご紹介いたしましょう。

◆ 講義プレビュー1：ソフトウェアデザイン概論

まずは「ソフトウェアデザイン概論」についてです。ソフトウェアデザインの3段階プラス1でいうところの「精神」に当たる内容です。この講義で強く示しているテーマは、｢(G)UIデザインは同時にソフトウェアデザインである」ということです。

ソフトウェアに起因する不幸をデザインするな

いろいろなソフトウェアのUIに触れていると、残念な振る舞いをするUIに出会うことがあります。
次の例を見てみましょう。

このようなダイアログはよく見かけるものですし、ユーザーが気をつけていれば大きな問題は起きないかもしれません。ですが、これは明らかにソフトウェアデザインの問題です。

ダイアログは「キャンセルしても良いか？」の問いに対して「キャンセル（する）」と「OK」の二つの答えをユーザーに示して回答を促しています。これを読んだユーザーは、「キャンセルして良いことのキャンセル」なのか「キャンセルして良いことのOK」なのかで混乱してしまう懸念が考えられます。俗にいう“キャンセルのキャンセル問題”です。このような誤った選択をしてしまいそうになるわかりづらい表現は、避けなければなりません。

ソフトウェア側の残念な仕組みや表現によって、ユーザーに不利益・不幸がもたらされる可能性のある仕組みをデザインしてはいけないのです。仮にもし、これがユーザーの資産、あるいは人命に関わる製品のUIだとしたら、あなたはどうしますか？

関連記事：キャンセルのキャンセル問題から考えるダイアログデザイン

別の例も見てみましょう。

次のイメージはMac版Safariが備えているパスワードオートフィル（自動入力）のUIです。他のブラウザも似たようなUIを備えているかもしれませんが、Safariではパスワードフォームと認識されたフォームにはブラウザ機能で自動的に「鍵」マークのメニューボタンが設置されます。ここをクリックするか、あるいはフォームにフォーカスを当てることによって、イメージのようなメニューが展開されるというものです。Touch ID対応機種であれば指紋認証でパスワード自動入力がそのまま実行可能ですので、便利でとても重宝します。

これらのうち、パスワードを自動生成する機能に着目してみましょう。Safariではブラウザ上でセキュアなパスワードを自動生成し、SafariローカルまたはiCloudキーチェーンにそれを自動保存してくれます。ユーザーがパスワードをいちいち覚える必要が全くないのです。Touch ID対応機種なら指を指紋センサーに触れるだけでログインが完了してしまいます。夢のような機能です。

しかしこの夢のような機能は大抵の場合うまく機能しません。なぜでしょうか。
問題はSafariにあるのではなく、Webサイト（システム）側にあります。実際にパスワードを設定してみようとすると、次のようなエラーが返されることがほとんどなのです。うーん。

いくらユーザーがセキュリティ意識が高くとも、ブラウザが良きに計らってくれようとも、利用するWebサイトの方がパスワード8文字までしか受け付けませんとなると、嫌でもそれに従うか、利用をやめるしか選択肢が残されません。せっかくオートフィル機能があるのにそれを活かせないというのも困ったものです。結局私たちがこのようなシステムを利用するためには「8文字以内に収まる堅牢そうなパスワード」というものをなんとか頭で考えて設定しなければなりません。うーん。

Design is how it works

かつてスティーブ・ジョブズが述べた言葉の中に “Design is how it works” というフレーズがあります。意訳すると「デザインとは、（見た目だけでなく）どのように機能するのかということだ」になります。デザインというとどうしても見た目の部分で捉えられがちです。しかし私たちデザイナーは見た目以外の目に見えない部分も含めてデザインとして考える必要があります。特にソフトウェアというものはモニターの映像がなければ全く何も「見えない」わけですから、UIの裏側の構造だとか、その製品に触れた人々の行動にも着目する発想を持たなければなりません。

デザインにおいては「『普通』を指向する」ことも大切です。あるコンテクストに合った使い方、機能の仕方というものを考えてデザインと向き合っていかなければなりません。特にソフトウェアという世界においては、プラットフォーム（基盤）となる仕組みに適切に載っかってアプリケーションを機能させる、ユーザーに使ってもらうことを考えなければならないものです。

そのプラットフォームを取り巻く環境での「普通」とは何か、いろいろな視点からそれを探ってみましょう。

歴史探究：ソフトウェアの起源とiPhoneに至るまでのGUI史

そもそも「ソフトウェア」とは何なのでしょうか。そしていつそれが興ったのでしょうか。起源を少し探究してみたいと思います。

コンピュータの歴史を遡るとENIACと呼ばれるコンピュータに行き着きます。ENIACにはいくつかの版がありますが、それらのうち「プログラム固定内蔵方式」と呼ばれる仕組みを採用したものが現れたときがソフトウェアの起源だとも言われています。元々は外部から制御盤を操作してプログラムを直接入力してしていたところを、プログラムを内蔵できるように改良したのがこの改良ENIACです。ENIACとは別にEDVACと呼ばれるコンピュータも作られ、それは「プログラム可変内蔵方式」と呼ばれる仕組みを世界で初めて採用しました。プログラムを可変的に扱えるということで、現代のコンピュータの原型になったモデルです。

いずれのコンピュータにもジョン・フォン・ノイマンという人物が直接的、あるいは間接的に関わっています。彼がこれらを一人で発明したのではありませんが、結果的に彼の名が歴史に残ることになりました。（その辺りの経緯は割愛）
現代のコンピュータアーキテクチャは彼の名を取って「ノイマン型コンピュータ」と分類されることがあります。

ノイマン型コンピュータ（アーキテクチャ）を成す要素の一つに「プログラム可変内蔵方式」が挙げられます。コンピュータ（ハードウェア）にプログラムを内蔵（ソフトウェア）できる仕組みであることを言いますが、ここでようやく着目したいキーワードが現れました。

ハードウェア、ソフトウェア、アーキテクチャの3つの語句です。

これらのうち、ハードウェアは直接に触れられます。物理的に存在するから当たり前ですね。一方ソフトウェアやアーキテクチャはどうでしょう。物理には存在しないものなので、概念として捉えるか、ディスプレイ越しに見ることしかできません。ではこれらに触れられるようにするにはどうすれば良いのでしょう。

アーキテクチャは設計様式や設計思想を指しますから、アーキテクチャに基づいてソフトウェアを設計をし実装をすれば良いのです。実装されたソフトウェアにはUIを与えればユーザーが触れられるようになります。UIを通してデザイナーの設計思想にも触れることができるでしょう。

UIデザイナーの一つの目当てはここにあります。この手で直接触れられない「何か」であるはずのソフトウェアに触れられるようにすること。その仕組み、環境をデザインすること。そしてその素材がソフトウェア—コンピュータを動かすためのプログラムやデータ—であるわけですから、前提をどこに持つのか捉えるのかについては、自ずと見えてくるのではないでしょうか。

私たちが使っているiPhoneも同じようにコンピュータの歴史の先端にある製品です。iPhoneができるまでには多くの製品、多くのソフトウェア、そして多くの偉人たちのアイディアが連なって大成しています。iOSには20年、30年前に作られたソフトウェアも組み込まれていて、当時の設計思想のもと、私たちがよく知るアプリケーションが動いているわけです。

UIデザイナーとしては、ここ1、2年のトレンドに流されずに、温故知新の精神でUIやソフトウェアというものと向き合っていきたいものです。

関連記事：UIデザインと守破離の精神

◆ 講義プレビュー2：インタラクションデザイン基礎

次は「インタラクションデザイン基礎」の中身について軽くご紹介しましょう。

以前スティーブ・ジョブズの言葉として紹介した “Design is how it works” の意図するところを念頭にインタラクションというものを考えてみると、インタラクションを考えることがUIデザインの本質なのではないかと思うのです。すなわち、人間（ユーザー）がUIを通じてシステムにどのように作用を与え、システムはUIを通じてどのように挙動するのか、この連環を成す仕組みを考える分野だということです。（おそらく、インタラクションとはもっと広義にとらえることもできます。）

UIデザインではしばしば、アイコンの見た目や色の具合などを強く志向することがありますが、それだけではUIとして機能し得ないことを理解しなければなりません。UIとは人間がソフトウェアに触れられる唯一の部分です。人間がソフトウェアと対話するためにはどのような表現を行い、どのような作用の与え方が考えられるのか。インタラクションデザインではいずれの「方向」からも相手を見る視点を養うことが求められるのです。要するに、インタラクションデザイナーは「ユーザー」の視界も見えますし、「システム」の視界も見えます。

この、二者間それぞれの相互作用—作用と挙動の連環—が、インタラクションの様子です。

作用と挙動の分解：｢ボタンをクリックすること」

では試しに、「ボタンをクリックすること」という操作を考えてみましょう。ここでいうボタンとはGUIとしてのコントロールを指しています。それをマウスやトラックパッドを用いてクリックするのです。こんな単純な操作は何も深掘りすることなどないではないかと思われるかもしれませんが、クリック一つにも緻密な設計が求められるのがソフトウェアの世界なのです。

たかがクリックでも、システムから見ればあらゆる状態（ステート）を想定して状態遷移やモードの切り替えを制御しなければなりません。一方ユーザーから見れば指を押して離すことでしかないため、この間で起こる多くの挙動をそれ以上に複雑に感じられないようデザインしなければなりません。

ボタンひとつとっても、緻密な設計が必要であることがわかりました。デザイナーはそのことをよく知った上で、どのような状態（ステート）があり得るのか、どのようなパターンが存在するのか、構造そのものを考えなければなりません。（これはデベロッパー／エンジニアはもとより、デザイナーも担う役割だと考えています。）

ただ角Rのついた青いボタンを綺麗に描くだけではなく、どのように振る舞うのかについて着目してからようやくインタラクションデザインに踏み出せるのです。

これはPhotoshopやSketchでは表現できないデザインでしょう。

イディオムの構築

イディオムとは慣用句とも訳せますが、ここでいうのはインタラクションを構成する仕組みやその表現を指しています。

複雑な表現や操作というものは、因数分解していくと最後には単純なものに分けることができます。テキストの表示やクリック操作のような要素は、GUIにおけるほぼ全ての表現—イディオム—を成り立たせている原始的要素です。

私たちはインタラクションデザインあるいはUIデザインにおいて、この原始的要素から成り立つ仕組みやイディオムのパターンを知識として持っておかなければなりません。独自の表現をする前に、その環境、アーキテクチャにとってどのようなイディオムが適切であるのかを見極め、適用してゆくのです。

カーソルインタラクション、反応時間とラグ、自己帰属感ほか

UIの表現には様々なものがあります。スマートフォン、PC、ゲームコンソール、自動販売機など、その製品の特性に合わせたUIやインタラクションがデザインされています。

PCにおいてはマウスを使ったカーソルインタラクションを基本としますから、マウスカーソルの下にある要素がどのような性質ものであるのかを表す仕組みが多用されます。

iPhoneのようなスマートフォンにおいては、マウスではなく直接画面に触れてUIを操作します。このとき、指の動きに合わせて追従する物体があったとして、その描画速度に“ラグ”が生じていたとしたら、ユーザーはそれを「もっさりしている」と感じることがあります。それが意図的なのか性能的な限界なのかにかかわらず、自身の指の動きと目で見た映像の不一致が疑似的な感触を生じさせるのです。

このようなもっさり感をなるべく排除しようと描画速度の向上に力を入れることもあれば、このことを逆手にとって面白い表現をすることもあります。どちらもインタラクションデザインだと言えるでしょう。

◆ 講義プレビュー3：モードレスデザイン基礎／UIモデリング基礎

このパートでは二つの講義をつなげて行いました。まずは前半のモードレスデザイン基礎です。

UIデザインではしばしば「モード」と呼ばれる概念が登場します。これは一体何なのでしょう？
過去のApple Human Interface Guidelinesを開いてみると、「モード」あるいは「モードレス」について次のようなことが書かれています。

うーん。なんだか言葉で言われてもよくわからないので、ここは一旦具体例を見てみましょうか。次のイメージはいわゆる「モーダルウインドウ」を表したものです。UIに触れていると必ずと言っていいほど見かける表現の一つです。そう、モーダルとは「モードのある〜」の意なので、このウインドウ周辺のインタラクションにはモードが生じているのです。

モーダルインタラクション、モードレスインタラクションの特徴

モーダルウインドウは、モードの内側では操作が行えるけど、その外側に対しては操作が行えない性質を持っています。モード外とのインタラクションはブロックされてしまいます。ちなみに、手前にポップアップしてくるウインドウの類はすべて「モーダルなんとか」……ではないことに注意してください。

では、モードがない状態＝モードレスとはどのようなものを言うのでしょうか。これは簡単な話で、クリックできなかった部分がクリックできる、すなわちウインドウの内外問わず好きに操作できる状況をモードレスと言います。

こう考えると、まるでモーダルの方が不自然な動きをしているようにも見えます。実際その通りなのです。

UIにおけるモードとは、
UIに状態が複数あるとき、同じ操作でも状態によって異なる挙動をすることを「モードが生じている」と言います。

また、それぞれのインタラクションの特徴は次のように説明ができます。

モーダルインタラクションの特徴として、まずコマンド（動詞）を選択し、次に実行対象となるオブジェクト（名詞）を選択する手順を踏みます。
たいていの場合、最後にコマンド確定に相当する操作も実行します。

モードレスインタラクションの特徴として、まず操作対象となるオブジェクト（名詞）を選択し、次にコマンド（動詞）を選択する手順を踏みます。
この操作の中では、オブジェクトもコマンドも一覧から任意に選ぶことができ、コマンド選択＝実行までの間には操作の中断も行いやすいです。

UIのモデル化

さて、いよいよ私の講義も最後のパートです。

これまでの講義を通して、UIは表現のみでは機能し得ないことを学びました。ユーザーにとって明快な表現をしつつ、わかりやすく使いやすい操作方法によって触れられる仕組みをデザインしなければなりません。それには情報の並べ方や展開の仕方、モードレスデザインの原則を理解しておかなければなりません。

ここではUIのモデル化という発想で構造設計の方法を考えてみたいと思います。構造というのは目に見えづらい、論理的な関係性や仕組みのことを言います。たいていは概念図的な表現を用いて「モデル図」と呼ばれるものを描いてそれを組み立ててゆきます。モデル図にも様々な種類の表現がありますが、すべてを紹介し切るのは難しいため、UIの構造を組み立てるにあたっての基礎的な考え方をいくつかご紹介しておきましょう。

構造化パターン

Master-Detail

GUIで表現される多くの構造が「一覧」から「詳細＝単一」の表示に向かって連なる形をしています。このパターンをMaster-Detailと呼びます。

例えばiPadのインターフェイスを眺めてみると、左側にサイドバーと呼ばれる一覧があり、右側に詳細ペインが横並びになっていることがわかります。もちろんこれが全てのアプリケーション共通の表現というわけではありませんが、大なり小なり、このようなMaster-Detailの構造は多くの箇所でみられるはずです。

UIの構造パターンにはそのほかにもいろいろあります。

階層化

階層を深掘りするほどに情報の解像度も上がり、詳細度合いが増して行くインターフェイス表現パターンです。
Master-Detailもこれの一種です。

並列化

階層化パターンではコンテンツ同士の親子関係がありましたが、並列化パターンでは対等に横並び（レイアウトとしては縦横問わない）になります。
ただし、カルーセルのような表現の場合は、左側に寄るほどに露出機会が増え、右側に行くほど減ります。単純に画面に収まりきらずにスクロール領域に隠れやすいことが理由です。このことはコンバージョンを考える際には抑えておきたい基本です。

重層化

要は手前に積み重なる表現のことです。昨今一般的なGUIの多くがこのパターンを採用しています。手前にくるコンテンツほど新しく、隠れているほど古いです。階層化パターンとは違った「階層化」が行われているとも捉えられるでしょう。
古い（後ろの）隠れているコンテンツにアクセスするためには、手前の新しいコンテンツをなんとして消去する必要があります。モーダルビューもこの性質を利用してモードを表現しています。

離散化

これはハイパーテキストシステムに見られる離散ネットワーク構造です。コンテンツ同士に親子関係はなく、それぞれが独立して存在しています。ナビゲーションの経路も多様にあり、自由に行き来できることが特徴です。

Webブラウザはこの構造をブラウジングできるソフトウェアですが、さらに階層化パターンの応用で作られたページ履歴の仕組みも提供しています。

ツリー構造

ツリー構造はフォルダとファイルの関係、組織図、家系図などに見られる構造です。子（ファイル）から見て親（フォルダ）が必ず一つである制約を持っています。
人間はこの構造をイメージしやすいという特性を持っています。

セミラティス構造

セミラティス構造はツリー構造に似ていますが、子（ファイル）から見て親（フォルダ）が複数存在し得る点が異なります。要するに、ファイルは複数のグループ（フォルダ）に所属することが可能です。
人間はこの構造をイメージしづらいという特性を持っているため、セミラティス構造を表現したUIはわかりづらくなる傾向があります。ただし、ツリー構造よりもセミラティス構造の表現の方が自由度は高くなるでしょう。

iPhoneの写真アルバムはセミラティス構造を応用しているため、写真は複数のアルバムに同時に所属することができます。

おわりに

2020年の新卒UIデザイナー全員にこのソフトウェアデザイン研修を受講してもらい、さらに演習や宿題もこなしてもらいました。

内容は基礎教養から専門的なものまで多岐に渡るので、かなり詰め込み教育的になっていることは否めません。ですが、100点満点をとることを目指すのではなく、まずは現場で交わされる言葉を理解し身につけてもらうために、その手がかりとなるキーワードを示す形を取りました。

（しかも今回は完全リモート、ZoomやSlackを介したオンライン型研修形式をとりました。）

これから実際に「UIデザイナー」として各プロジェクトに入っていった際にたまに研修のことを振り返ってもらい、「そういえばあの時の講義で教わったことだ」……と思い出してもらえればまずはそれで良いのかなと思います。

Goodpatch Design Advent Calendar 2020, 3日目の記事でした。

Goodpatchの新卒選考・面談・イベントへ参加ご希望の方は、以下のページをご覧ください！

◆ 新卒採用

◆ 中途採用・UIデザイナー