ソフトウェアデザインにおける構造設計を実践！マネーフォワードさんとワークショップを開催しました
Goodpatchでは、UIの構造設計を重視したデザインプロセス「モデルベースUIデザイン」を推進しています。最初にコンセプト定義やユースケースを定義し、情報整理をして最終的に機能やビジュアルなどの具体的なところを詰めていく考えをとっていくプロセスです。
今回は、マネーフォワードさんと「デジタルプロダクトのUI設計のプロセスと考え方を学び、実践することでスキルのベースを身につけること」をテーマに、モデルベースUIデザインについて理解・実践するワークショップを開催しました。本記事では開催の背景から当日の様子をご紹介します。
参加いただいたマネーフォワードのUI/UXデザイナーさんによるnoteもぜひご覧ください！
マネーフォワードがGoodpatchさんとUIデザインワークショップを実施しました！
目次
ご相談いただいた背景
「お金を前へ。人生をもっと前へ。」をミッションに掲げる株式会社マネーフォワードさんは、デザインチームが拡大する中で、スキルのバラツキに課題を感じられていたそうです。Webデザイナー出身でデジタルプロダクトのデザインの経験がまだ少ない方もいるため、「チーム全体で共通したプロダクトデザインスキルを身につけたい」と考え、今回Goodpatchにご相談をいただきました。
マネーフォワードさんにも事前にご覧いただいた、以下の記事もぜひご覧ください！
講師紹介
丸が執筆した記事：
UIデザインにおけるインターフェイスアーキテクトの役割
蔡のインタビュー記事：
「なぜこのデザインなのか」を問い続けることがGoodpatchのデザイナー。台湾出身のUIデザインリードがその答えに行き着いたワケ
1.UI設計のプロセスと考え方を知る
Day1はソフトウェアデザイナーの丸による講義が中心。
- ソフトウェアデザイン
- 構造設計
- モデルベースUIデザイン
上記3つの観点から、UI設計のプロセスと考え方についてお話ししました。
1-1. ソフトウェアデザインとは何か
まず、ソフトウェアデザインとは何であるかを考えてみましょう。
ソフトウェアとは、ユーザーが触れることのできないプログラムやデータそのものを指します。ユーザーが触れられるハードウェアとは対照的なものです。
ソフトウェアデザインの目的はUIを通してユーザーがソフトウェアに触れられるようにすることです。そして、ソフトウェアにおけるUIデザインの目的は、ソフトウェア的に振る舞うUIを設計することと言えるでしょう。その目的のために、私たちUIデザイナーはソフトウェアの性質や原理の理解が必要です。「UIのデザインとはソフトウェアのデザイン」と捉えることができます。
1-2.UIデザインにおける構造設計
続いて、UIデザインにおける構造設計とは何かをお話ししていきます。
構造と言われると建築的な表現が思い浮かぶと思いますが、UIデザインの領域でもまさにそのイメージ通りの「構造」が重要なのです。
UIデザインの「構造」とは、Jesse James Garretの5段階モデルでいう「構造」にあたります。
UXの5段階モデル分解編 vol.3 サービス/プロダクトのデータ構造を明確にする構造段階での具体的なデザイン手法
Goodpatchでは、Webデザイン向けだったJesse James Garretのモデルをベースに、ソフトウェアデザインにも当てはめられるように再解釈しています。このモデルにおける「構造」「骨格」に着目すると、構造設計やモデリング、インタラクション設計というものが必要になると分かります。
ではソフトウェアデザインにおける構造設計は、なぜ重要なのでしょうか。
画面単位でUIを作る、つまり5段階モデルにおける「構造」や「骨格」を軽視したような作り方では、成果物の合理性が低下しやすく、作業の手戻りも多くなりがちで、非常に効率が悪いと考えられるからです。また、必要なパターンの網羅性が低くなりやすいなどの懸念もあります。
「ビジュアルを作ってみたはいいものの、アプリの構造・骨格がおかしく、要件定義の段階まで戻る」ということが起こりがちです。構造設計は、このような手戻りを生じさせないという意味においても、とても重要なのです。
1-3.モデルベースUIデザイン
ソフトウェアデザインにおける構造設計の重要性が理解できたところで、続いてどのように構造設計を行うかお話ししていきます。
Goodpatchでは、UIの構造設計を重視したデザインプロセス「モデルベースUIデザイン」を推進しています。最初にコンセプト定義やユースケースを定義し、情報整理をして最終的に機能やビジュアルなどの具体的な設計を詰めていく形をとるプロセスです。
このプロセスに則ることで、コンセプトやユースケースなどの要件定義、情報分類やビュー設計などの構造設計を細かく、そして手厚く行うことができます。また、先程説明した、作業の手戻りや設計の合理性の欠如を防ぐことができます。
構造設計は方針として、UI上に現れる概念を構造化する必要があります。そして概念の構造から検討できるパターンを見出し、精緻化する手順を踏んでいくため、機能や見た目からUIを組み立てることは避けた方が良いでしょう。
2.構造設計を実践する
2-1. 概念モデルとは
ソフトウェアデザイナーの丸から、ソフトウェアデザインにおける構造設計、モデルベースUIデザインについてお話ししたところで、参加者の皆さんにはリバースモデリング法を用いた概念モデルの作成に挑戦してもらいました。
概念モデルとは、UIに現れる「概念」を図式化した設計図のことを指します。UIにどういった“モノ”があり、それらがどのように関連し合い、そしてどのような“コト”が行えるのかを記述するものです。概念モデルは、画面単位でUIを作ることをよしとしない前提で考えます。概念を組み立てる際にはコンセプト・オブジェクト・タスク 3つの考え方を用います。
- コンセプト＝製品で特に重要な事柄や目当て
- オブジェクト＝製品で扱う「モノ」
- タスク＝製品で細かく行う「コト」
写真管理アプリを例にすると次のように定義することができます。
- コンセプト＝「写真をアルバムやタグで管理できる」
- オブジェクト＝「写真・アルバム・タグ」
- タスク＝「一覧表示・アルバム管理・タグ管理・検索」
2-2.リバースモデリング法を活用した概念モデルの作成
今回、参加者の皆さんに取り組んでもらった宿題は「音楽アプリをリバースモデリングを通して概念モデルを作成する」というものでした。
リバースモデリングとは、すでに存在するUIから概念モデルを再構築する、Goodpatchが定義した手法です。
Day1までの内容をもとに概念モデルの作成は各自での宿題とし、Day2では宿題をもとに実際にUIを組み立てる設計段階に移っていきます。
2-3.宿題の概念モデルをもとに演習へ
概念モデルの形は一つとは限りません。人によって「概念」の捉え方も変わりますし、どのように表すのか次第でもあるので、複数人で概念モデルを作ればそれぞれの解釈が現れます。今回は、宿題として作ってきていただいた概念モデルを共有し、作っていく中での懸念点や疑問点を参加者の皆さんと講師陣でディスカッションしモデルを精緻化していきました。
モデル思考のおさらい：画面で考えない
モデルベースUIデザインでは、具体物を作る前に構造設計と要件定義を手厚く行います。
そのため「画面」でUI設計を考えないことが重要です。UIにおいて遷移する範囲とそうでない範囲、共通の部品とそうでない部分、さまざまな要素が組み合わさった結果が「画面」として現れています。「画面」とは結果でしかないので、それらを構成する部分に着目する必要があります。
2-4.モデル思考に基づく状態遷移の設計
状態遷移モデルを組み立てるにあたっては、宿題だった概念モデルのほか、想定ペルソナや、与件を参考にまず主要なユーザー体験を決めます。
状態遷移モデルを作ることで、必要なビュー（※個々のレイヤーのこと）のパターンを検討できたり、具体的なビジュアルを作る前に主要な遷移動線を検討できるというメリットがあります。画面単位でUIを作ってしまうと、最低でもワイヤーフレーム程度のビジュアル作成作業が必要ですし、パターンの網羅性という観点においてもモデルベースの方法より精度が悪くなりがちです。
2-5.ビュー設計
概念モデル・ユースケースモデル・状態遷移モデルを材料に、ここからはビュー設計に入ります。ビュー設計とは、UIの表現方法を検討する設計過程を指します。今回のワークでは、状態遷移モデルからいくつかの情報をピックアップし、実際にビュー設計を実践していきました。
そこから「ユーザーがアーティストの一覧から気になるアーティストを選択し、アーティストに関する記事を読み、記事の中にある曲を聴く」という一連の体験が見えてきました。この体験で必要なビューを設計していきます。
参加してくださった皆さんには、ビュー設計の一般的な手順で進めていきました。
- オブジェクト単位で階層型ナビゲーションをまず固める
- フォームファクタとユースケースを参考にビューの組み合わせを考慮
- デザインパターンを活用し、レイアウトの検討を進める
ビュー設計の共有：皆さんそれぞれの解釈が幅広く出ています！
2-6.ワイヤーフレームの共有
最後は、ビュー設計からワイヤーフレームへ。制作したビュー「アーティストの単体表示」「記事の単体表示」「曲の単体表示」それぞれの構造を具体化していきます。その後、ナビゲーションを追加してアクション動線の位置と表現パターンを検討していきました。
ここでも宿題の発表と同様、制作する中での疑問点や不安点を質疑応答を通して解消していきました。「モデルを作っている段階ではメリットに気づきにくかったが、そこから実際に具体的なワイヤーフレームを起こすことで、その意図が理解できた」という声もあがりました！
参加された皆さんの声
最後に、今回ご参加いただいたマネーフォワードの皆さんの声をご紹介します！
普段検討できていないやり方でデザインするプロセスを学べてとても良かったです。アプリケーションならではの部分もありますが、普段のWEB開発でも活かせる部分はあると思いました。ありがとうございました
講義もわかりやすく、ワークも難しすぎずにチャレンジできたので今後の自信になりました。ありがとうございました！
自分がいままでずっと画面ベースでUIを作ってたので、確かに抜け漏れ多いし、情報がうまく整理できていないので手戻りも多かったです。演出の内容自分にとって少し難しいですが、これから仕事中にも実現してみたいと思っております。本当に勉強になりました。ありがとうございました。
Goodpatchでは今回のように、ソフトウェアデザインの構造設計を実践するワークショップも提供しています。「UIデザインに構造設計の考え方を取り入れたい」という方は、ぜひお気軽にご相談ください。
また、インターフェイスアーキテクチャをはじめ、UIデザインに関わるさまざまな領域で活躍したいデザイナーも随時募集しております。もしご興味ありましたらこちらから応募くださいませ。お待ちしております。
