デザインの共通認識を形作るには？フリューさんとセミナーを開催しました

Goodpatchでは、クライアント様からのご相談をもとにデザインに関するセミナーやワークショップを提供しています。今回は、プリントシール機業界シェアNo.1のフリューさんと「デザインの共通認識を形作る」というテーマでセミナーを開催しました。本記事では開催の背景から当日の様子をご紹介します。

今回のセミナーは2部構成で行いました。前半は「UIデザインという切り口から『デザイン』の見方と共通言語を考える」と題し、デザインの捉え方について様々な観点から考えました。後半では「共通認識醸成のための取り組み事例」として、Goodpatchがこれまで行ってきた事例をもとに、デザインの共通認識を形作る具体的な方法について考えました。

関連記事：
デザインチームに共通したプロダクトデザインスキルを身につけるため、マネーフォワード さんと実施したワークショップの内容

ご相談いただいた背景

フリュー株式会社は、「人々のこころを豊かで幸せにする良質なエンタテインメントを創出する」を企業理念に掲げる、総合エンターテインメント企業です。プリントシール機をはじめとする女性向けのガールズトレンドビジネスと、キャラターの魅力を様々な形で提供する世界感ビジネスの2軸で事業を展開しています。

フリューさんは、プリントシール機の開発において「デザイン」の解釈が人によってバラバラだということに課題を感じていたそうです。こうした背景から「デザイナー以外のメンバーも含めて、デザインの共通言語を作るための考え方や事例を知りたい」というご要望をいただきました。

そこで今回は、Goodpatchの新卒UIデザイナー向けの研修講義をアップデートし、デザイナー以外でも様々な立場の人が「デザイン」の捉え方を理解できるような内容にしました。

講師紹介

前半はソフトウェアデザイナーの丸がお話ししました。

・「デザイン」の意味
・ソフトウェアとは何か？
・共通言語を作るための、デザインの考え方

これら3つのトピックを軸に、デザインの捉え方について様々な観点から考えました。今回は、実際の講義内容を一部ご紹介します。

「デザイン」の意味

前半は、UIデザインという切り口から「デザイン」の捉え方と共通言語についてお話します。そのための前提として、まず「デザイン」という言葉の定義から考えていきたいと思います。

例えば「UIデザイン」とは何を指すのでしょうか？UIデザインというとイメージしやすいのが、スマートフォンアプリなどの「ソフトウェアのUIデザイン」でしょう。GoodpatchのUIデザイナーが主に取り組むのもソフトウェアのUIデザインです。しかし、これ以外にも、ハードウェアや車両、空間、建築など、UIデザインには様々な領域があります。

このように言葉によって対象範囲を決めることで、物事が捉えやすくなります。つまり、デザインの第一歩目は、曖昧な言葉をはっきりさせてみんなで同じ認識を取れるようにすることなのです。

それでは、より広義に「デザイン」の意味を考えてみたいと思います。多くの人は、スタイリッシュで洗練されたイメージを「デザインっぽい」と捉える傾向があります。

しかし本来、設計（デザイン）されていない工業製品というのは存在せず、どんなものも基本的に意図を持ってデザインされています。また、お洒落であるといった見た目は、デザインというよりは「スタイル」に関する事項であるといえます。つまり、見た目に関する部分のみを切り取って議論していては、デザインの本質を捉えきれていません。

Appleの創業者であるスティーブ・ジョブズはこのような言葉を残しました。

「デザイン＝どのように機能するのか」と捉えると、見た目ばかりが問題にならず、ツールとしてうまく機能しているものを「いいデザイン」ということができます。

ソフトウェアとは何か？

次に、改めてソフトウェアとは何なのかをお話しします。

以下の図は、Goodpatchにおいてあらゆる場面で用いられる「デザインの5段階モデル」です。

デザインの段階をざっくりと5つに分けたもので、下から上に向かって抽象から具体のプロセスへと進んでいきます。ソフトウェアデザインの場合、各プロセスを以下のように当てはめることができます。

私自身はUIアーキテクトとして構造を中心に設計しますが、その前にある要件（何を根拠に構造が成り立つのか）や、その先にある骨格（構造を反映した形）を同時に見据えることも重視しています。

このように、最終的には表層として現れてくるデザインの裏にも、様々な考え方が隠れています。特にクリエイターにとって、これら全てを俯瞰して見る目を養うことが重要です。そのためには、物事の原理や成り立ちを理解し、「当たり前」をわかった上で設計を行う必要があるでしょう。

共通言語を作るための、デザインの考え方

ここからは、デザインの共通言語を醸成するために必要なデザインの考え方や、共通言語の例を見ていきたいと思います。

1つ目に、文化や慣習に基づくインターフェイス設計についてです。UIの成り立ちは、人の文化や慣習と切っても切り離せません。例えば、iPadの五十音キーボードを考えてみましょう。iOSのUIはほとんど全てが横書きですが、五十音キーボードによって縦書きの秩序が入ってきています。

iPadのUIの秩序に合わせるなら左から右という方向性も考えられますが、このキーボードは日本語における文化のルールを尊重し、右から左へ展開しています。人々に馴染みのある文化や慣習がユーザーインターフェイスにも反映されているのです。

また、文化に基づくデザインの考え方の1つに「Right to Left」があります。これは、アラビア語やヘブライ語といった右から左に横書きする言語では、ユーザーインターフェイスも左右反転したものに変えていこうという考え方です。

このように言語、文化、宗教など様々な観点について緻密に調べ最適なUIを考えていくことで、よりよいデザインができます。こうした考え方をインクルーシブデザインと呼ぶこともあります。

インクルーシブデザインについての記事：

2つ目に、モデルに基づいて設計を検討する「モデル思考」という考え方についてです。モデル（型）とは、物事の共通部分を見出して単純化、抽象化したものです。似たような構造や表現が繰り返し現れるものは、モデルを用いると設計しやすくなります。

ソフトウェアデザインは「パターンの応用」と言われることがあり、モデルを適切に用いて設計が行われます。例えば、インターフェイス上に現れる概念を定義する「概念モデル」は、UIの構造設計に非常に役立つモデルです。

普段エンジニアとデザイナーは全く違う言葉を扱っていますが、概念モデルという設計図が共通言語となって認識を揃えることができます。ソフトウェアデザインではこれ以外にも様々なモデル化の方法があり、それぞれが適切な場面で共通言語として機能します。

3つ目に、デザインの共通言語となる「設計ガイドライン」についてお話しします。設計ガイドラインとは、ものごとの設計指針や設計思想などを言語化して記述したものです。UIデザインにおいては、UIの各種部品の構成と活用ルールを定めたものやスタイルガイドなどがあり、有名な例としてHuman Interface Guidelines（Apple）やMaterial Design（Google）などがあります。

こうした設計ガイドラインは、複数人が同じ設計思想のもとでデザインを築き上げていくのに役立ちます。デザインの思想を誰かの頭のイメージにとどめずみんなが読める文書に書き出すことで、デザイナーの独りよがりでなく、誰にとって何のためのデザインであるのかをみんなで共有することができます。

最後に、私は、デザインの共通言語はデザイナーやエンジニアだけでなく、制作に関わるクリエイター全員が備えるべきものだと思っています。ある製品に関わっているのであれば、全員が同じ言語でその製品について語り合えることが理想だと思います。

講師紹介

後半はUIデザインリードの蔡がお話ししました。

・なぜ共通認識が必要なのか
・Goodpatchでの取り組み（4つの事例から）

Goodpatchでの実例をもとに、共通認識を形作るためにできる具体的な工夫をご紹介しました。

なぜ共通認識が必要なのか

ここからは、Goodpatchがこれまで行ってきた事例をもとに、デザインの共通認識を形作る具体的な方法についてお話しします。

Goodpatchは、デザインパートナーとして様々な領域で顧客企業と共創を行っています。関わる領域は主に3つで、デジタルプロダクトのUIデザインおよびUXデザイン、ブランドデザイン、ビジネスデザインです。これら3つを横断し、事業の戦略を考えることから実際にプロダクトに落とし込むまでを支援しています。

この一連のプロセスをクライアントと1つのチームになって進めていきます。チームとして共創するためには、常にメンバー全員が同じ方向に向かっていることが重要です。そのため、デザインプロセスの各段階で共通認識を醸成する様々な工夫を行っています。

Goodpatchでの取り組み事例

今回は、Goodpatchのメンバーが普段から行っている共通認識を作るためのプロセスやアウトプットについて、公開情報を元に4つの事例の中でご紹介します。

事例1：SUNTORY＋

SUNTORY＋は、企業の「健康経営」のため、従業員の健康行動習慣化をサポートするヘルスケアサービスアプリです。

Goodpatch Work | SUNTORY＋

SUNTORY＋のデザインプロセスでは、メンバーが共通認識をもち、企業理念をサービスの思想に反映するために様々な工夫を行いました。

• ワーキングプロトタイプによる検証
• 情報管理体制
• デザインプリンシプルとTone of Voiceの定義

ワーキングプロトタイプによる検証

0→1でサービスを作るにあたり、サービスがユーザーにとって価値があるのかを検証するための「ワーキングプロトタイプ」を制作しました。

ワーキングプロトタイプとは、紙やFigmaなどで作る簡易的なプロトタイプでなく、開発者も入って実際のアプリと同様に動くようにしたプロトタイプのことです。これをユーザーに1,2週間継続して使ってもらい行動データを集めました。データを取ることで、アプリ内でユーザーがどんな行動をしているのかや、サービスがユーザーにとって本当に価値があるのかを客観的に観察することができました。

サービスのコンセプトについて言葉でのみ議論していると、デザイナーの認識で作られたアウトプットが、他のメンバーの認識とずれてしまうことがあります。本開発に入る前には、チームが同じプロトタイプを見ながら議論することが非常に重要になってきます。

情報管理体制

Notionなどのツールを使って情報を集約し、常にチームメンバー全員が一次情報にアクセスできるようにしました。SUNTORY＋のプロジェクトはかなり多くのステークホルダーを抱えており、最も多い時で100人以上が関わっていました。途中から入ってくるメンバーも多い中、仕様書やデザインデータなど全ての情報を1つのソースに集約しておいたことで、オリエンテーションのコストが減ったり、情報の透明性が担保されました。

そのほか、アイデア出しの際にStrapも活用しました。オンラインホワイトボードツールを使うことで、リモート環境でもメンバーが目線を揃えることができました。また、付箋の整理やコピーがしやすいため、外部に情報を共有することも簡単になりました。

多くのメンバーが同じ目線で資料を共有できることは、共通認識を形作るために重要なポイントです。

デザインプリンシプルとTone of Voiceの定義

SUNTORY＋には多くの人が関わっていたため、バックグラウンドによってメンバーそれぞれの価値観やサービスの作り方があり、共通言語がないまま走り続けることは危険でした。そこで、サービスが何を目指すのか、どういう価値を提供するのかについて全員で目線を合わせるための指針を作ることにしました。

サービスのビジョン、ミッション、バリューを定義したあと、それらより具体的なかたちに落とし込む橋渡しとなる「デザインプリンシプル」を策定しました。

また、アプリ内で使用する文言のデザインに関しても「Tone of Voice」というルールを定義しました。これらの工夫によって、チーム内での議論の質が上がり、企業の理念とサービスの思想をつなげることができました。

事例2：助太刀

助太刀は、建設現場で働くすべての人を支えるプラットフォームサービスです。

Goodpatch Work | 助太刀

助太刀のデザインプロセスでは、特にユーザーインタビューに力を入れ、結果として様々なアウトプットを制作しました。

• ぺルソナシート・カスタマージャーニーマップ・価値マップ
• プラットフォーム概念図

ぺルソナシート・カスタマージャーニーマップ・価値マップ

建設現場で働く人の状況を知るため、20名以上に1日をどのように過ごすのかを徹底的にインタビューしました。

助太刀にはいろいろな種類のユーザーが存在するため、特にペルソナの策定にはこだわり、4名の特徴のあるユーザー像を作りました。ミーティングをする際はこのペルソナを常に壁に貼り、「このペルソナはどう利用するかな」というように議論しました。

このように詳細なインタビューを行いそのデータをまとめることで、ユーザーについての認識を揃えるための共通言語が生まれます。

プラットフォーム概念図

ビジネス視点で、中長期的にサービスをどう発展させていくのかを「プラットフォーム概念図」にまとめました。ビジネスモデルを可視化しサービスの構造（グロースサイクル）を明らかにすることで、何がサービスにとってのコアの体験なのかを見極めることができます。

重点的に取り組むべき部分をチームで共有することで、「これも作りたい」「あれも作りたい」といった発散的な議論を避けることができました。また、クライアントのビジネス側のメンバーと議論をする際に共通言語として役立ちました。

これらの工夫によって、チーム全員がユーザーの課題に対してより深く認識できました。また、将来的な展望を可視化することで、サービスをどう展開するのかを構想しやすくなりました。

事例3：DELISH KITCHEN

DELISH KITCHENは、30,000本以上のレシピを配信するレシピ動画サービスです。

関連記事：
思想でプロダクトを磨く。DELISH KITCHENデザインチームの挑戦

DELISH KITCHENのチームでは、どのようなデザインがDELISH KITCHENらしいのか共通認識が取れていないという課題がありました。そこで「DELISH KITCHENらしさ」を整理するためのデザインプロセスを行いました。

• エグゼクティブインタビュー・ワークショップ
• デザイン原則の策定

エグゼクティブインタビュー・ワークショップ

クライアント側の経営者たちに、どのような思いでサービスを作っているかをインタビューしました。

また、こうして聞き出したサービスの思想をデザインにどう落とし込むかを考えるワークショップを実施しました。

デザイン原則の策定

ワークショップで整理したDELISH KITCHENらしさをデザイン原則に落とし込んで行きました。アイコンデザインガイドラインを制作し、それまでバラバラだったアイコンのデザインを統一しました。このように共通認識の上でブランドイメージを明文化したことで、デザインが統一されただけでなく、その後のデザインを決める軸ができました。

事例4：ワンキャリアクラウド

ワンキャリアクラウドは、戦略人事をターゲットとしたSaaSプロダクトです。

Goodpatch Work | ワンキャリアクラウド

ワンキャリアクラウドのデザインプロセスでは、デザイナーと開発側の連携を促進するために様々な工夫を行いました。

• モデルベースUIデザイン
• アジャイル開発・ライブデザイン
• デザインドキュメントの作成

モデルベースUIデザイン

前半の講義でも解説がありましたが、デザイナーとエンジニアの共通言語として様々なモデルを用いてUIを構築していきました。

例えば「ユースケースモデル」によって、ユーザーが実際にソフトウェはとどうインタラクトするのかを言語化して構造化しました。

モデルに基づいて設計することで、「今はこういう段階で、将来を見据えたらこういうデザインをした方がいい」といったように拡張性のあるデザインを行うことができました。

アジャイル開発・ライブデザイン

プロダクトを柔軟に変化させていけるよう、アジャイル開発の体制を取りました。2週間ごとに機能の優先度や開発の順序を考え、早い頻度で作り直しを行いました。

また、デザイナーがその場でデザインし、質問があったらすぐにエンジニアに質問する「ライブデザイン」という手法も行いました。共通言語となるモデルに加え、作業環境の物理的な距離を縮めることで、デザイナーとエンジニアがより共創しやすくなります。

デザインドキュメントの作成

サービスの納品後、今回使用した設計思想やガイドラインを今後も運用してもらえるよう、デザインドキュメントを作成しました。ドキュメントには、ワンキャリアクラウドがどういった思想のもとでどういう手法やモデルを使って設計されたのかが全てまとめてあります。

Goodpatchはデザインパートナーとして、サービスを作ることにとどまらず、クライアントのデザイン組織に「デザインする文化を残す」ことを重視しています。Goodpatchが離れた後もチームが共通認識を持てるような材料を残し、その後も拡張性を担保してサービスを続けられる状態にしたいと思っています。

ワンキャリアクラウドの事例では、拡張性を見据えたソフトウェアデザインが実現し、さらにクライアント側に設計思想を残すことができました。

参加された皆さんの声

開催後のアンケートより、いくつかのご意見を抜粋しました。

セミナー後に参加メンバーで対話をしました。そのとき、セミナーで教えて頂いたデザインの5段階をベースに話すことができ、共通の言語があることで対話が進みました。

自分は元々ソフトエンジニアなので、道具の透明化や各モデルの話に非常に共感できましたし、すんなり理解ができました。ただしデザイナーからは難しかったという声を貰っていますので、特にモデルの部分はデザイナーもメリットを感じることができる状態にまでこれから持っていきたいと考えています。

これまで個別にセミナーを受けて部内に共有していましたが、プロフェッショナルな方の力を借りて全員で一緒に知識をインストールすると、これほど対話を深めるんだ、と改めて感じました！

さいごに

Goodpatchでは今回のように、クライアント様からのご相談をもとに様々なワークショップを提供しています。「デザイン組織で抱えている課題を解決したい」という方は、ぜひお気軽にご相談ください。

お問い合わせフォーム | Goodpatch

また、この記事を読んでGoodpatchのUIデザインやソフトウェアデザインに興味を持った方は、ぜひこちらをご覧ください。

採用情報：UIデザイナー