デザインの強みをチームで働こう！👍

どうもカイクンです。今回は「UIデザイナー1年目の立ち回り」というシリーズを作成しました。このシリーズはサービスの開発における、デザインに強みを持った人の立ち回りをテーマにしています。

現場に入ったデザイナー、もしくは仕事をしていたら他のメンバーや関係各所とのコミュニケーションが仕事の半分を占めていることに気づくのではないでしょうか。開発現場のデザイナーはエンジニアさんとビジネスサイド、主にプロダクトマネージャー、と調整をしたり、意図を共有しながら進めることほとんどだと思います。

デザイン、エンジニアリング、ビジネス、この3つは見ていることが異なることが多いんですよね。そのため現場に入りたてのデザイナーがUIだけを見ていると困る事案が多く発生します。ただデザインというの非常に強力で、チームを円滑に進めるエンジンになることができるし、プロダクトが進むべき道を示す星を示すことに長けていたりもするんですね。

このシリーズではデザインの強みを定義しながら、チームにおけるデザイナーの立ち回り、顧客にとって良いUIを作るためのチームでの動きを現場10年の視点からまとめていきます💡

‍

‍

‍

現場の壁に遭遇しているデザイナーをもとに作成しました

BONOをやって2年立つと現場でデザインをやっている人の相談に乗ることがあります。「UIを提案しても聞いてくれない」「手戻りが多い」「突っ込まれるのが嫌」などなど様々あります。

基本的には知識と経験が不足していることが原因なので、これを知っていれば解決する。なんてものは存在しないと、自分も似たような時期もあるので考えたりしますが、そもそもデザイナーとして持つべき視点を持てないままデザインを続けてしまっている方も多いなと感じています。

このシリーズの役割はチームでデザインスキルを持つ人が何をすると、顧客に価値が届きやすくなるのか？引いては価値を届けるUIをデザインできる確率が増えるか？という部分の立ち回りです。

じゃあ自分にできることは何かというと、”早く良い経験を積むための視点をシェアすること”かなと思ってBONOをやっています。成長がちょびっと早くなる高速道路に乗ったり、欲しい経験値を得るための道がちょっと見えるようになるのがBONOの役割だと思ってます。

立ち回りはあまりUIデザインの話としてはシェアされることは少ないかなと思います。ただ、現場のデザイナーも多く悩んでいるし、逆に採用する側の話を聞いたりする時にもコミュニケーションの話は多く出てきます。それぐらい重要ですが対処が難しいものです。

解決作が「その人のコミュ力による」とついつい口にしたくなる内容をなるべく誰でも今日から使える形にシェアする形で作成しています。

‍

UI作成以外で必要になるデザイナーの動きを解説するシリーズ

ざっくりですがこのシリーズで扱っている内容を紹介します。無料で公開している部分もあるので詳しくはシリーズのトップページと動画をご覧ください💡

○ デザイナーの強みをチームで発揮しよう

まず、デザイナーの役割と、どのようにチームで課題解決に取り組むべきかを理解します。一人でデザインを作るのではなく、プロジェクトを成功に導くために、どのようにチームの一員としてデザインを使っていくのかをシェアします🙋

○ チームで失敗しないUI制作の流れ

UIを作ることに焦点を当てすぎると結果として良いUIを作れないことが多いです。チームの視点、避けては通れないエンジニアリグの視点、顧客の視点をいかに持ちながらUIを作るべきか？UIってなんのためにそもそもあるんだっけ？を意識するべき立ち回りを紹介します🙋

○ 要件からデザインしよう

現場にもよりますが、UIのつくる部分だけ任されるかもしれません。ただ、UIのUはユーザーであるように、UIの良し悪しは顧客と目的が決めます。つまり要件部分に関わらないと、その後ではよいUIをデザインしていくことは難しいです。要件を最初から決めれるようになれ！とは言いません。そのための要件に関わる立ち回りをシェアします🙋

○ エンジニアリングに貢献しよう

自分で実装まではしないデザイナーが今は多いと思います。なのでエンジニアさんとの連携は必須になるでしょう。その際に何を意識するといいのか？いつ共有するのか？など、うまく連携するための立ち回りをシェアします🙋

○ ドキュメントとMTGでのデザインの伝え方

デザインを作ればみんなその良さを理解してくれません。なぜならデザインについて学んでいるのはほとんどの場合デザイナーのみだからです。つまり、自分でデザインを伝えたり、改善するために必要な意見を求める動きも必要になります。

そのためのドキュメントの作成や、MTGでの説明の仕方の例など、具体的なテクニックをシェアしながら、うまくデザインを伝えてチームで顧客に価値を届けやすくする立ち回りもお伝えします🙋

‍

価値を届けるデザイナーが増えたら幸いです✌️

顧客に価値を作って届けるには、UIを作るようなわかりやすいデザインスキルだけではなく、必要な情報を集めたり、伝えたり、チームで考えていけるような立ち回りを、デザインという強みを活かして行う必要性があると考えています💡

新米のデザイナーがうまく立ち回り、顧客に価値を届けるデザインをやりやすくなる手助けがこのシリーズでできたら幸いです。

無料で多く概要の動画を公開しています。ぜひ気になるところからでもご覧ください👍

↓

UIデザイナー1年目の立ち回り
https://www.bo-no.design/series/rookiesaction

‍

UIデザイナーとチームの仕事の認識を定義する動画です

現場に入ると"UIを作る"という狭いことに目が行きがちです。
会社に属するサラリーマンとして何をするのか？チームは何を目指しているんだっけ？を軸にして自分の職業を認識する必要があると考えております。

というと暗い感じなんですが、人にとって良いサービス、良いUIを作るとなると、チームでどう立ち回るのか？が重要になってきます。
自分という視点ではなく、メンバーに貢献するためにどうデザインを使うのか？目指す方向性を達成するために何をUIでやるべきか？という視点で動けるようになることが重要です。

‍

感想や意見を聞かせてください〜！

年内に向けて「現場1年目デザイナーが活躍するための立ち回り」コンテンツをBONOで作成していく予定です。
”こういうの知りたい”、”理解したい！”などがありましたら下のフォームから教えてください💡（2023年内なら答えていきます〜！

□ 立ち回りフォーム
‍https://docs.google.com/forms/d/e/1FAIpQLSdePxok7jLWcUXmIZrHPWDVQbjcEbZ1ICXgyMqG5kAz8om95g/viewform

‍

‍

‍

職業の強みを認識して立ち回ることが、現場での活躍につながります。

僕なりの偏見でいう、一般的には評価がされやすい伸びやすい、貢献しやすい、活躍しやすいそういうデザイナーはちゃんと職種の役割を把握して動けている人です。

UIデザイナーというものが現場ではどういう役割が求められるのかという話がまずわからない限りは前に進めないというわけで、まずはUIデザイナーが成功するためにチームでうまく働けるために自分の強みというものをちゃんと把握しようというわけで、今日は役割について話していきたいと思います。

文章の構成

UIデザイナーの強みを活かした役割を4つに分けてお話しします。それぞれ独立していますが、根幹には”解決策の具体イメージを作る”というスキルがベースになっていると考えています。

以下のような構成で、役割について共有していきます〜！

1 なぜ役割の把握が重要なのか？

2 4つの役割についてそれぞれシェア

一応僕の経験という偏見から定義しています

もちろんこれは僕の考えているものだったりとか僕が経験してきたものから導き出しているものなので、全てのデザイナーがこれに当てはまる必要性はないです。

ただいろんな組織の話を友達から聞いたりとか自分が関わっている組織を見たりとかしてきた中で基本的にまずこういうふうに動けるデザイナーさんUI UXのデザイナーさんというのはかなり評価されやすいというか一緒に仕事をしたいという率が高いなというものから逆算して役割というのをこれから話していきたいと思います。

UIデザイナーの役割とジョブの把握の重要性

UIデザイナーは、現場でどのような役割を果たすべきであるかを把握することは活躍するデザイン人材になるために非常に重要です。UIデザイナーがチームで成功し、ユーザーが使いやすいプロダクトを作り上げるためには、自身の職種の強みと期待されることを把握する必要があります。

UIデザイナーは、ユーザーが使いやすく目的を果たせ魅力的に見えるプロダクトを実現するために不可欠な存在ですが、プロダクトは1人では作ることができません。ユーザーにとって良いデザインを届けるために、良いプロダクトにする必要があります。そのためにチームに貢献し、事業に貢献していくスタンスが必要です。これは単純な世に出回る狭義のデザインスキルだけでは意識しづらい部分です。

そのためにプロダクトに入る組織として、UIデザイナーの強みと役割を認識して立ち回ることが大切になります。

これから述べる役割は私が考え、経験から導き出したものですので、全てのデザイナーに当てはまるわけではありません。しかし、さまざまな組織の話を聞いたり、自身が関わってきた組織を観察したりする中で見出したことを伝えます。

‍

‍

‍

4つの主要な得意分野

1. 解決策を明確にする

具体的なアイデアを形にして、チームの方針を明確にする役割があります。

2. ユーザー視点を持つ

ユーザーにとって使いやすいUIを作るため、ユーザーの視点を常に持ち、それをチームに共有します。

3. 価値のある解決策を提供

UIデザイナーは、単なるアイデア以上の価値を生み出します。創造的な思考によって、新しい視点や可能性をプロジェクトにもたらします。

4. 要点を整理する

ビジュアルな要素を整理し、それをチームと共有する能力も持っています。このスキルによって、チーム内のコミュニケーションが円滑に進みます。

これらは私の経験と観察に基づいていますが、多くの組織で評価されるポイントです。この4つの役割を理解し、活かすことで、より効果的にチームに貢献することができるでしょう。

‍

‍

役割1 : チームの解決策の解像度を高める

UIデザイナーがUIを作ることで、具体的な解決策を知覚できるようにする能力は、チームの改善度を高めるために非常に重要な役割を果たします。この能力は、具体的なイメージを作ることができるデザイナーにとっては得意な分野です。

具体的な解決策が見える方が、仕様が大丈夫かどうかの判断ができる

具体的な情報に基づく判断の重要性は、様々な場面で存在します。例えば、ウェブサイトやアプリの開発において、ディレクターや他の関係者が仕様を考えることは可能ですが、具体的なUIを見たときにその仕様が使いやすいのか、実現可能なのか、必要性があるのかを判断するには、具体的なものを見てみることが重要です。

考え方としては、例えば旅行計画をするときに役立つのと同じです。行ったことがある場所の方が、どれくらいの距離で何があるかが分かるから、計画が立てやすいですよね。

それと同様に、早めにUIのデザインを作って共有することで、そのアイデアが実際に使えるのか、どう改善すれば良いのかが明確になりやすいです。

具体的なUIの形を早くチームで確認して、その状態で解決策が正しいかどうかを判断できるとよくなりやすいです。

UIのラフは早めに作って共有したほうが、チームで良いデザインを考えやすくなる

したがって、UIを早めに作成することによって、具体的な情報に基づいた判断が行えるようになります。これがUIデザイナーの特徴です。

UIデザイナーは、早めにラフな形でUIを作成し、エンジニアやディレクター、PdMに共有するで、重要なポイントや不備、足りていない箇所などに気付くことができます。具体的なものに触れることで、問題点がより明確になります。これが、UIデザイナーがチームに貢献する方法であり、彼らの得意とするスキルです。

チームはより効果的な改善策を見つけ出し、素早く行動に移ることができます。デザイナーのアイディア作成力は、チームに新たなエネルギーとモチベーションを与え、チーム全体の成果を向上させることができるのです。

‍

‍

役割2 : ユーザー視点を入れる

UIデザイナーはユーザーの視点を代弁しやすい職種です。

ユーザーの視点でプロダクトの成長に貢献する

彼らは常にユーザーが直に触れるUIを考えているため、使い手のことを想像しやすい立場にあり、また使い手を考えてデザインすることが求められる役割になります。そのため、彼らはユーザーの視点を常に考慮する機会が多いのです。

そのため他の職種ではなかなか深く考える機会の少ないユーザーが喜ぶ視点から、解決したい課題や達成したい目標に対してのアイデアを出しやすいポジションです。

逆にいうと他の職種では想像がつきづらいユーザー視点かもしれませんが、ビジネスと顧客のどちらも上手く行かせるために必須なユーザー視点をチームに提供することによってより良いアイデアを作ることに貢献できる確率が高いです。

そのため現場ではユーザー視点からの提案がチーム、事業、ビジネス、顧客に良い影響を与えられるほど活躍できるデザイナーであると認知されやすいです。

ユーザーの声を早くから取り入れる

ユーザーのフィードバックも重要です。ユーザーの意見や要望を取り入れることで、より良いUIや機能を実現することができます。ユーザーの声を早い段階から反映させることで、改善や修正を行いながら、より良い品質のプロダクトを提供することができます。

さらに、提供する価値を明確にすることも重要です。ユーザーがどのようなメリットや価値を得ることができるのかを明確に伝えることで、ユーザーの関心を引き付けることができます。

‍

‍

役割3 : 良い解決策を作る

効率的で伝わりやすい解決策をデザインできる強さ

UIデザイナーは具体的な解決策を作ることが得意です。彼らは単に1+1=2という解決策ではなく、3や10など画期的な解決策を考えることができます。具体的な要素を作り、それに基づいて考えることができるため、UIデザイナーは画期的なアイデアを生み出しやすい立場にあります。

例えば、Twitterのようなサービスでは、ツイートやフォローの仕組みだけでなく、追っかけファンやジャニーズのような特定のファン層に対しても解決策を提案することができます。

UIデザイナーは、ユーザー視点を代弁し、具体的な要素を作り、画期的な解決策を考えることが得意な職種です。彼らの役割はチームにおいて重要であり、ユーザーにとってより良い結果を生むために不可欠な存在です。

早期共有による開発効率化

エンジニアたちと早めにUIのデザインや仕様について共有することで、開発プロセスを効率化できるということがあります。この共有の方法にはいくつかの利点があります。

まず一つは、エンジニアたちに考える負荷を下げることができるという点です。例えば、デザイナーやプロダクトオーナーが早い段階でどのようなUIになりそうかを共有することで、エンジニアたちは具体的なイメージを持つことができます。この結果、開発時における悩みや問題点を事前に解決することができるため、開発の効率化につながります。

また、早い段階で必要な仕様を引き出すことによって、より失敗のない早い開発が望めます。エンジニアたちは、早めに必要な情報や要件を知ることで、それに合わせた設計や実装を行うことができます。このため、開発中に仕様変更や修正が発生するリスクを軽減することができます。その結果、迅速かつスムーズな開発プロセスを実現することができます。

さらに、早めに共有することによって、より早くユーザーに価値を届けることができます。デザインや仕様が早い段階で固まることで、開発チームは素早く実装に取り掛かることができます。結果として、製品やサービスを早い段階でリリースし、ユーザーにとって価値のあるものを提供することができます。

早期共有による開発効率化は、エンジニアや他の関係者とのコラボレーションを強化し、プロジェクトの成功につなげる方法です。エンジニアたちとの円滑なコミュニケーションを促進するために、デザイナーやプロダクトオーナーは早い段階での共有を意識し、積極的に関わることが重要です。これによって、より効率的でクオリティの高いソフトウェア開発を実現することができます。

‍

‍

役割4：整理して共有する

ビジュアライズ力とデザイナーの役割

ビジュアライズ力とデザイナーの役割デザイナーには、ビジュアライズ力があります。チームで仕事をしていると議論をしている中で、よく何の話をしているのか理解しづらくなることがあります。特にビジネスサイドの人々は、これによく陥ります。そこで、デザイナーは簡単に要点を整理したり、まとめたり、可視化したりして、議論を整理する役割を果たすのに力を発揮できます。

デザイナーは他の職種に比べてビジュアルツールを使う時間がないためその力を使って整理やまとめ、改革などを行いやすいです。

ユーザーへの価値提供の早期化

確かに、良いUIは大切ですが、単に見た目やデザインだけにこだわっても十分な価値は提供できません。

ユーザーへの価値提供を早期化するためには、UIだけでなく、機能やパフォーマンスも重要です。ユーザーが問題を解決できるような使いやすい機能や効率的なパフォーマンスを提供することが必要です。

ま

総合すると、良いUIを作るためには、単に見た目やデザインにとどまらず、機能やパフォーマンスの向上、ユーザーのフィードバックの反映、提供する価値の明確化といった要素が重要です。これらを早期に実現することで、ユーザーへの価値提供を早めることができます。

‍

‍

UIデザイナー特有の役割把握が、
チーム貢献、良いデザインにつながり、結果として信頼につながります。

UIデザイナーの役割は、ユーザーの満足度を高めるために使いやすい体験を創ることです。そのため、UIデザイナーは自分自身もUIを作りやすくすることで、ユーザーに満足のいく体験を提供することができます。この役割を理解することは非常に重要です。

この前提を踏まえて、このシリーズではデザインのフローに沿ってさまざまなチップスやテクニックを紹介していきます。具体的には、仕様が共有された後にどのようなUIやデザインの方向性を考えてデザインを作成し、それを共有するという流れです。エンジニアリングに入る前の段階でもあります。

このフローにおいて、重要だけれども行われていないことを実践していくための話やアドバイスをシェアしていく予定です。この4つの前提は非常に重要であり、今回話しておきたいと思いました。

もし不安や疑問が生じた場合は、この前提に立ち返って考えてみることが大切です。なぜこの話をしているのか、それはこの前提が基礎となっているからです。以上です。

‍

今回は”UI作成”する時に、いかに課題解決に向けてデザインを使うのか〜という立ち回りを紹介しています！

感想や意見を聞かせてください〜！

年内に向けて「現場1年目デザイナーが活躍するための立ち回り」コンテンツをBONOで作成していく予定です。
”こういうの知りたい”、”理解したい！”などがありましたら下のフォームから教えてください💡（2023年内なら答えていきます〜！

□ 立ち回りフォーム
‍https://docs.google.com/forms/d/e/1FAIpQLSdePxok7jLWcUXmIZrHPWDVQbjcEbZ1ICXgyMqG5kAz8om95g/viewform

‍

もくじ

• 00:00 良いサービス作るのにやるべき、身につけるスキル
• 02:07 前提:UIデザイナー、役割はUI作ることじゃない？
• 04:02 【立ち回り①】共有を早くする
• 08:47 【立ち回り②】課題/ユーザーを主語にUI検討
• 12:57 【立ち回り③】理想と現実のUIパターンを作る
• 18:15 【立ち回り④】要件整理してからUIを作る
• 23:18 【立ち回り⑤】共有するドキュメントを作る
• 28:29 【立ち回り⑥】自分のUIにツッこむ
• 32:44 【立ち回り⑦】ビジュアルを使って説明する
• 38:51 【立ち回り⑧】UIテストをする
• 42:51 誰も教えてくれない立ち回り、解説していきます

‍

【UIデザインする時の立ち回り①】最初のUI共有を早くする

‍

【UIデザインする時の立ち回り②】課題/ユーザーを主語にUI検討

‍

‍

【UIデザインする時の立ち回り③】理想と現実のUIパターンを作る

‍

‍

【UIデザインする時の立ち回り④】 要件整理してからUIを作る

‍

【UIデザインする時の立ち回り⑤】共有するドキュメントを作る

‍

【UIデザインする時の立ち回り⑥】自分のUIにツッこむ

‍

‍

【UIデザインする時の立ち回り⑦】ビジュアルを使って説明する

‍

【UIデザインする時の立ち回り⑧】UIテストをする

‍

要件からデザインしていこう

前回は”UIをつくる時"の立ち回りについて話しました。今回はその前のフェーズ、”要件を伝えられた後”のお話です。言われたものをそのまま作れるほどデザインを考慮した仕様/要件は出てこないです😇

出てきても内容に齟齬がないか確認したり、具体物（UIなど）を作り始めると考慮した方が良いものも出てきます💡

‍

感想や意見を聞かせてください〜！

年内に向けて「現場1年目デザイナーが活躍するための立ち回り」コンテンツをBONOで作成していく予定です。
”こういうの知りたい”、”理解したい！”などがありましたら下のフォームから教えてください💡（2023年内なら答えていきます〜！

□ 立ち回りフォーム
‍https://docs.google.com/forms/d/e/1FAIpQLSdePxok7jLWcUXmIZrHPWDVQbjcEbZ1ICXgyMqG5kAz8om95g/viewform

‍

‍

‍

1.クイズ:何がデザインを決めているでしょうか？

デザインが何よって決まってしまうのか？を考えると、要件を決める、受け取るフェーズからデザインを考えることに気づけるはずです。
（必ずしもデザイナーが企画や要件をやる必要はないですが、良い体験の設計を求めるなら必須になるでしょう）

2.要件共有まわりでUIデザイナーが悩むあるある

現場でデザイナーが悩むあるあるに「デザイン的な考え方を理解してくれない」的なものがある〜ような気がします！
が、それもそのはずで、プロジェクトの中でデザイナーの人口比率は確実に少ないことが多いですし、デザインを全てのビジネスパーソンが学んでいるわけでもないのです。

なのでこういう理解してもらえない系あるあるに対処して、本当に良い体験を求めるために”協業”の自分の動きを”デザイン”する必要があります。

3.“要件”にデザインを入れよう

言われたことの中であれこれ悩むのではなく、意思決定する人とキャッチボールしながら”デザインの方向性”を固めていく立ち回りが基本的に必要です。
相手にもデザイン的な価値観を伝えつつ、相手のビジネス的な価値観も理解して上手いポイントを探していきます。

また、何をデザインするのか？は組織の方向性によって決められることが高いです。
ビジネス理解というと広いので、「組織のビジネスモデル、今期は何を目標にして向かっているのか？その中で自分のプロジェクトは何をするためのものか？」という視点を持つことで提案できることも変わってきます。

エンジニアリングに貢献するのもデザイナーの仕事

‍

現場の立ち回りシリーズ「要件」「UI作成」の次は

エンジニアリングフェーズです！

リリースするために

UI仕様をエンジニアさんに伝えるのも

デザイナーの仕事です....え！？まじ？

そうなんです、結局UIのクオリティも上がるのです。

という話をしております！

じゃあ具体的に何をしたらいいの？

が気になる方はBONOメンバーになって続きの閲覧を

検討してください！

‍

続きの動画

□ 『【エンジニアとのズレ減らす】開発しやすいUIをデザインする3つのコツ』

-------------------------------------------

https://www.bo-no.design/contents/rookiesaction-engineering02

‍

‍

感想や意見を聞かせてください〜！

年内に向けて「現場1年目デザイナーが活躍するための立ち回り」コンテンツをBONOで作成していく予定です。
”こういうの知りたい”、”理解したい！”などがありましたら下のフォームから教えてください💡（2023年内なら答えていきます〜！

□ 立ち回りフォーム
‍https://docs.google.com/forms/d/e/1FAIpQLSdePxok7jLWcUXmIZrHPWDVQbjcEbZ1ICXgyMqG5kAz8om95g/viewform

‍

要件を受け取った時の5つの立ち回り

受け取った要件をそのままデザインしてしまう、中身の確認や質問をせずに作りきってしまう。忙しいことがあればそれでも良いかもしれませんが、大半はそれではうまくいくことはないでしょう。

この動画では要件から一緒にデザインする内容について喋っています。

前編はこちら

「新人デザイナーが要件共有で成功する立ち回り。ディレクターと協業して顧客目線にしていこう！」
https://www.bo-no.design/contents/rookiesaction-idea01

‍

感想や意見を聞かせてください〜！

年内に向けて「現場1年目デザイナーが活躍するための立ち回り」コンテンツをBONOで作成していく予定です。
”こういうの知りたい”、”理解したい！”などがありましたら下のフォームから教えてください💡（2023年内なら答えていきます〜！

□ 立ち回りフォーム
‍https://docs.google.com/forms/d/e/1FAIpQLSdePxok7jLWcUXmIZrHPWDVQbjcEbZ1ICXgyMqG5kAz8om95g/viewform

‍

‍

‍

こんな悩みを持っている人にもおすすめ

以下の中身はうまく他メンバーと協業できてないケースで発生しています。
直接的にデザインに関わる部分ではありませんが、デザインを決める部分が関係してきます。
うまく協業してデザインできるようにしていきましょう

5つの立ち回り

1. 03:19 仕様を考える人と二人三脚を
目指す
2. 10:48 組織/ ビジネス理解：
組織が追っているイシューで
デザインする
3. 19:39 味方を1人でいいので見つける
4. 27:48 ラフUIを最速で作って仕様/要件を顧客目線で
詰める
5. 33:25 リアルな顧客が想像できる『ユースケース』の定義と確認をする！

‍

要件から入ると受ける2つのメリット

組織/ ビジネス理解：
組織が追っているイシューで
デザインする

味方を1人でいいので見つける

ラフUIを最速で作って仕様/要件を顧客目線で
詰める

リアルな顧客が想像できる『ユースケース』の定義と確認をする！

‍

エンジニアリングしやすいUIデータ作成3つのコツ

この動画では、エンジニアリングに貢献するUIデザインデータの作り方として、”UI作成時に意識するべき3つのコツ”をシェアします！

かなり初歩的ではありますが、3つの要素を通して”どういうことをエンジニアは気にするのか”のはじめの1歩を踏んでもらえると嬉しいです！

意識する点は2つ

いろんな手段とかこれやった方が良いとかはあるんですが、

基本的に以下の2つを意識することがエンジニアリングとデザインの協業で重要になってくると思っています。

1. WHY なぜやるのかを共有
2. UIの共通認識を作る

あるあるの３ポイント

動画内で解説しているあるあるで最初から意識すると良いポイント3つを紹介しています。（ちなみにデザインデータの作り方はまた別の話になるので、今回はしてないです）

1. 『状態管理』をデザインする
2. デザインの『共通認識』でズレを減らしていく
3. 『コスト』が気になってもベストを共有する

この次の動画では「実際に共有するとき」に意識するべきポイントを話しています。

1 : 概要

エンジニアとの共有の難しさについて、実装フェーズでの3つの立ち回りポイントが説明されている。1つ目は口頭での共有を心がけ、お互いの価値観のすり合わせをすること。2つ目は詳しい人に教えを請い、エンジニアの視点を学ぶこと。3つ目はエンジニアを初期段階から参加させること。最後に、なぜ機能を実装するのかを伝えることの重要性が述べられている。

‍

2 : 動画で得られること

• 口頭での共有を心がけ、相手と価値観のすり合わせをする
• エンジニアからのフィードバックを学ぶ機会と捉え、早めに共有する
• エンジニアを初期段階から参加させ、方向性を確認する
• なぜ機能が必要なのか、ユーザーストーリーを伝えて納得感を与える

‍

3 : 動画の目次

• 0:59
• 2:17
• 7:38
• 13:19
• 19:37

‍

4 : コンテンツ内容

口頭で共有し、お互いの価値観をすり合わせる

ドキュメントだけで共有するのは難しく、口頭での共有が大切。お互いの価値観や解釈の違いをすり合わせ、共通認識を作ることが重要。

詳しい人に教えを請い、エンジニアの視点を学ぶ

エンジニアからのフィードバックを頼りにし、学んでいく姿勢が大切。早めに投げかけて固めることで、開発効率と精神衛生の向上につながる。

エンジニアを初期段階から参加させる

エンジニアに早い段階で方向性を確認し、気になる点を聞くことで、デザインを進めやすくなる。3つの共有タイミングがある。

なぜ機能を実装するのかを伝えることが重要

ユーザーのストーリーを伝えることがエンジニアの納得感につながる。機能実装が目的ではなく、ユーザーを良い状態にすることが目的。

‍

エンジニアリングしやすいUIデータ作成3つのコツ

この動画では、エンジニアリングに貢献するUIデザインデータの作り方として、”UI作成時に意識するべき3つのコツ”をシェアします！

かなり初歩的ではありますが、3つの要素を通して”どういうことをエンジニアは気にするのか”のはじめの1歩を踏んでもらえると嬉しいです！

意識する点は2つ

いろんな手段とかこれやった方が良いとかはあるんですが、

基本的に以下の2つを意識することがエンジニアリングとデザインの協業で重要になってくると思っています。

1. WHY なぜやるのかを共有
2. UIの共通認識を作る

あるあるの３ポイント

動画内で解説しているあるあるで最初から意識すると良いポイント3つを紹介しています。（ちなみにデザインデータの作り方はまた別の話になるので、今回はしてないです）

1. 『状態管理』をデザインする
2. デザインの『共通認識』でズレを減らしていく
3. 『コスト』が気になってもベストを共有する

この次の動画では「実際に共有するとき」に意識するべきポイントを話しています。

目次

• オープニング 00:00
• 伝わる3つのポイント 01:54
• ドキュメント：結論パート 07:11
• ドキュメント：中身と経緯 13:42
• 【補足】前提を伝えよう 18:36

‍

動画のFigma

動画で見せているスライドとデータのイメージはこちら
※理解で使ってください

Figmaのリンク

‍

ドキュメントの書き方について

• ドキュメントの書き方についての方針を共有するために、具体的な例を示しながら説明することが重要である
• 受け手やチームの状況に合わせて伝え方を変えることが大切であり、その点を考慮した立ち回りが必要である
• UI改善をテーマにした架空のドキュメントを作成し、それを元にUI共有時のミーティング方法も紹介する予定である

デザイナーのUIとアイディア共有に関するポイント

• 伝える相手に合わせることが重要
• ゴール、ユーザー、アイディアの三つの要素を伝えることが重要
• ドキュメントの目的を明確にすることが大事
• 具体的な物を早めに示すことで説明を省くことができる
• ユーザーの共通課題感を持つことも重要

デザイン改善に関する議論

• 無線の目的に合わせて数字や機能を設定することが重要
• ユーザーの状態を改善するためにアイディアを出し、議論する必要がある
• ユースケースを共有し、認識合わせして議論を進めることが重要
• UIの改善理由やビフォーアフターの具体例などを明確に伝えることが大事
• 議論の土台となる1つのテーマに絞って共有し、議論を進める

UIデザインの議論について

• 議論の土台を1つに絞り、具体的なテーマを決めて議論することが重要
• UIや機能の変更点を具体的に示すことで議論がしやすくなる
• ユーザーの理想の状態や現状、課題を明確にし、改善仮説を考える流れが重要
• ユースケースを決めておくことで、UIや機能の変更にリソースを効果的に使える
• 実物やイメージがあるとUI設計の議論がしやすくなる

UI改善に関するミーティング

• 取引時期や検索機能の改善が必要な現状を確認
• UIの改善案として、名前での検索やフィルター機能を提案
• ドキュメント作成時に目的や議論の方向性を明記する必要性が指摘された
• ドキュメント作成時に自信がない部分や気になる点を明示することで意見交換しやすくなる
• 次の工程で何を目指すか、チーム全体で認識合わせが重要だという意見も述べられた

‍

動画で出しているドキュメント

https://takumikai.notion.site/MTG-a09638b3ed7c4e5d83ec79bafa3a8416?pvs=4

‍

目次

• オープニング 00:00
• 動画の流れ 00:58
• ①大前提で大事なこと 02:18
• ②MTG前のポイント 05:22
• ③まず目的と結論 09:22
• ④実演：目的と結論 12:36:
• ⑤経緯を伝える 14:12
• 【補足】前提を伝えよう 19:02