こんにちは！

本記事は、2020年6月10日に東京大学松尾研究室の大学院講義「Web工学とビジネスモデル」にGoodpatchのオンラインホワイトボード Strapの事業責任者 北村が登壇させていただき、「プロトタイピングにおけるUI/UXデザイン」と題して行ったオンライン講義のレポートです。東京大学でWeb工学を学ぶ学生にUI/UXデザインの重要性やチーム開発におけるプロトタイピングの有用性、オンラインでの合意形成の方法としてのクラウドワークスペースの活用法などについてレクチャーしました。

なぜGoodpatchが東大の講義に参加したのか

今回登壇させていただいた「Web工学とビジネスモデル」という講義はWebの歴史や成功したWebサービスの事例などを学びつつ、Web開発からビジネスやマーケティング、財務・法務までを一体的に理解することを目指すものです。今回、東京大学松尾研究室の卒業生でもある株式会社Gunosy 共同創業者 関さんから、プロダクト開発を行う際にサービスをいいものにしていくために重要な要素であるデザインについての講義をして欲しいとお声かけいただきGoodpatchのメンバーが協力させていただく運びになりました。

登壇者紹介

北村篤志

株式会社グッドパッチ Strap事業責任者

クライアント事業部で、UXデザイナーとして事業課題を解決する業務を経験した後、UXデザイナーの組織責任者として、クオリティー管理、UXデザイナーの採用と教育に取り組む。現在は自社プロダクトの事業責任者として、Prottの運営と新規プロダクトStrapのサービス立ち上げに取り組んでいる。HCD-Net認定 人間中心設計専門家の資格を保有。

講義内容

なぜデザインが重要なのか

昨今Facebook, Googleや大手コンサル・金融機関などが全世界でデザイン会社やデジタルエージェンシーを相次いで買収しています。またInstagramやAirbnbなどデザイナーが共同設立した会社が大きく成長しています。海外企業の多くは、デザイナー1人当たりに対するエンジニアの人数を表すデザイナー：エンジニア比が数年前と比べて大きく変化し、世の中でより多くのデザイナーが求められている状況です。

その背景にはモノの価値からコトの価値へと人々の重視する価値観がシフトしているという経緯があります。昔は機能の差異でプロダクトの優位性が保てていましたが、最近はサービスやプロダクトのユーザー体験（UX）の差別化がビジネスに大きく影響するようになっています。今の時代はユーザーとのタッチポイントを点でデザインするだけではなく、ユーザー体験やサービス全体の価値循環を線で繋ぎデザインしていくことが重要なのです。

今後の社会でのデザインの重要性は公的機関も認めています。経済産業省が発表した『DXレポート』にはDX市場において、UXを設計し、要求としてまとめ上げる人材が求められると明記されています。また、２０１８年に経済産業省と特許庁が発表した「デザイン経営」宣言では経営層にデザイン責任者をおき、事業戦略構築の最上流からデザインが関与することを推奨しています。

デザインという言葉は設計に基づいて見た目を作り上げることのみを表すのではありません。デザインという言葉は広義で問題の本質を明らかにし、解決のための設計を行い、その設計に基づいて見た目を作り上げ、問題を解決に導くことを指します。

UXデザインとはユーザーの課題を見つけその課題を解決することで良い体験を届けることを指し、UIデザインはその解決策をプロダクトとユーザーの接点を設計することで具体化する過程を指します。プロダクトを開発する上でこのようにユーザーの本質的な課題を見つけその解決策をUIのデザインを通して実現することで、サービス全体のユーザー体験の差別化を図ることが非常に重要です。

なぜプロトタイピングをするのか

プロトタイピングとはアイデアをユーザーに試せる形にして実際に触ってもらいながら価値の検証を行うことです。ユーザーはイメージできないものを判断することはできないので、実際のビジュアルを見せながらユーザーから学びサービスや事業にフィードバックすることが重要です。

ウォーターフォール型と言われるような従来のサービス開発プロセスではディレクターが仕様書の作成、デザイナーがデザインカンプの作成、エンジニアがコーディングをそれぞれ担当します。しかし、ここでメンバー間の意思疎通の齟齬などがあった場合は大きな手戻りが発生します。その結果、ユーザー検証などに必要な時間が削られプロダクトのクオリティを十分に上げ切ることが出来ないままリリースすることになるかもしれません。

そこでプロトタイピングを導入してチームメンバー全員で議論をしながらプロトタイピングの共有、編集を行うアジャイル型の開発にすることで共通認識を持って手戻りを防ぎ、開発を効率化することができます。

弊社で開発しているProttはそのようなプロトタイピングを導入した開発を助けるためのツールです。

ワーク①
Prottでのプロトタイピング体験ワーク

ここから受講生に実際にProttを使用してプロトタイピングを体験してもらいました。

まずワイヤーフレームの作成を体験してもらいます。ワイヤーフレームとは、UI上のどの部分にどんな要素を配置するのかを記した簡易的な設計図です。

学生には紙とペンを用意してもらい、ワイヤーフレームでよく使われるパーツの模写を行いました。。デザインを行うというと絵心やセンスが必要になってくると思われがちですが、とても簡易的な要素のみでUIのデザインを始められることを体験してもらいました。

次に、実際のスマートフォンのUIをみて、そのUIをワイヤーフレームに戻す演習です。実際に完成した画面とワイヤーフレームのどのような要素がそれぞれ対応しているのか確認しました。

次にプロトタイピングツールのProttを体験していただきます。

まずProttのスマートフォン用アプリを使用してワイヤーフレームをProttに取り込みます。スマートフォンのカメラを使用してワイヤーフレームの写真を撮り、トリミングすれば完了です。

最後にProttのPC用のアプリに移動し、取り込んだ画面に遷移をつけていきます。タップ可能範囲を選択し、その部分をタップした時の挙動を設定していきます。今回の場合は別の画面に遷移すればいいので、タップ可能範囲と遷移先画面を線で繋ぎます。合計で約１０分ほどで簡易的なプロトタイプが作ることができました。

プロトタイプが完成したら、プレビューから作ったプロトタイプが端末上でどのように見えるのか確認できます。プレゼンモードではシェア用のURLやQRコードを取得し作ったプロトタイプを他の人に共有することができます。

ワーク②
Strapを使用したカスタマージャーニーマップ作成ワーク

Strapとは？

コロナウイルスの影響でGoodpatchでは現在原則リモートワークで仕事を進めています。 ZoomやSlackなどのほかにGoodpatchでは自社で開発しているオンラインホワイトボード「Strap」を使用しています。Strapとはリアルタイムで図解やテキスト情報の共同編集が可能なオンラインホワイトボードのようなもので今年夏に正式版のリリースを予定しています。 

このようなオンラインホワイトボードではチームメンバーとリアルタイムに情報を共有しながら素早く視覚化したり、意見を集約したりすることができるので共通認識をとりやすくなります。また、ボード上にどのようなプロセスで思考しプロジェクトを進めてきたのかが記録として残るため、あとからプロジェクトを振り返り再現性を高めるナレッジを蓄積し、組織の資産としていくことができます。

特に昨今リモートワークの需要が増えている中で、オンライン上でもプロジェクトメンバーと合意形成と行うために非常に有用なツールです。

 

Strap公式HP：https://beta.strap.app/

Strapの使用方法：

https://goodpatch.com/blog/howtouse-strap/

 

カスタマージャーニーマップ作成

 

講義では受講生に実際にStrapを使用してカスタマージャーニーマップを作成する演習を行ってもらいました。

カスタマージャーニーマップとはUXデザインにおいてよく使用されるフレームワークの一つで、ユーザーインタビューを元に作成したペルソナの行動や思考、ニーズや困りごとなどを可視化してユーザーの真のニーズや課題を探るために使われます。

今回のワークでは「自身がECサイトで購入するまでの体験」をテーマに自身の行動、タッチポイント、思考、ニーズ/困りごと、モチベーションなどを書き出しカスタマージャーニーマップを作成してもらいました。

演習はグループに分かれたStrapのワークスペース内で行いました。ボード内に用意された説明や、グループ内の他のメンバーの作業もリアルタイムでみれるため、Strapを初めて触る学生たちも10分ほどでカスタマージャーニーマップを完成させていました。

みんな同じテーマで取り組んだカスタマージャーニーマップでしたが、それぞれの学生が想定した体験がそれぞれ異なり、体験設計の中でチームの共通認識を合わせることの重要性が再確認されました。

 

Strapを使った授業のメリット

 

講義の最後に振り返りとして学生に今日学んだことをStrapのボード上の付箋に書き出してもらいました。

 

実際の講義中にワークスペースに集まった授業の感想の抜粋

 

・本質的なUI/UXの定義と重要性がわかった

・装飾的な意味合い以外でのデザインを改めて意識できた

・良いUIは、使用者にとって目的や手段が明確になっているもの

・UIデザインをするためには必ずしも綺麗な絵がかける必要はない

・プロトタイピングが非常に手軽にできるツールがあることを知れた

・プロトタイピングの手軽さと重要性がわかった

・連携ワークツールがすごい

 

このようにリアルタイムに参加者の反応が確認できることもStrapの大きな強みです。授業前にそれぞれのワークで何を行うのかという説明と必要な付箋やカスタマージャニーマップのテンプレートを予めボード上に配置しておくことで学生がスムーズにワークに取り組めるようになります。学生と教員の間にある情報の非対称性が少なくなるのでオンラインでのインタラクティブな授業を行う際にもStrapの強みが生きてきます。

 

さいごに

 

以上、東京大学でのオンライン講義のレポートをお届けしました。

Web開発においてのデザインの重要性やプロトタイピングにより開発の効率化、クラウドワークスペースツールを使うメリットなどを学生にお伝えしました。またデザインに触れたことのない学生にもプロトタイピングやカスタマージャーニーマップを作り、チームの共通認識を作る体験をしていただけました。

 

Goodpatchは、デザイナー以外の人にもデザインの力を届けるためにProttやStrapなどのプロダクトを開発しています。今回主にご紹介したStrapはデザイン業務やプロダクト開発といったシーンだけでなく、今回のようなオンライン講義やオンラインイベントでの活用も可能です。新たなコミュニケーション手法や知識の集約を可能にします。

Strapに興味を持ってくださった方へ

誰もが簡単に思考を図表化して、チームに共有し同じモノを見ながらコラボレーションできるStrapは、全てのチームのためのクラウドワークスペースを目指していきます。

資料ダウンロードはこちら： https://product.strap.app/resources
お問い合わせはこちら：https://product.strap.app/contact

追加機能やStrapの使い方についての最新情報はこちらで随時更新中！
◆公式Twitter
◆公式YouTube
◆公式Facebook

Strapに関する記事一覧はこちら！
◆Strap紹介記事一覧

Strap. リモートコラボレーションの可能性を広げる。クラウドワークスペース。資料ダウンロードはこちら

Share on

Tomoki Sato
Goodpatchでライターのインターンをしている大学生です。