社内の勉強会でミニミニデザインスプリントやってみたYO☆

### はじめに

* 社内でflutter、デザイン（UI・UXデザイン）勉強会を情報の共有や学習目的で実施。
* 他のチームの方と協力し実施した内容のデザイン部分を記事に記します。
* 既存のアプリを題材にミニミニデザインスプリントをやってみました!


##### ちなみに、、最初かるく感想を

個人でもデザイン関連の勉強はしていて、一人で教材に沿ってやることはあったのですが
複数人でチーム内で作業するということを経験したことがなかったので

**「 結構楽しかったです！！！ 」**:relaxed::sparkles:

（個人的にUI・UXとか好きだな〜てゆうのがでかい:ramen:）

あと、やっぱりチームでやらないといろんなアイデアが出ないなあ〜と

自分では思いつかないこと、良いデザイン案とかは、チーム（複数人）でやるから生まれるんだなと思いました！

### ミニミニデザインスプリントやってみた:baby_tone1:
#### やってみた結果

* **良いアイデアが集まった**
* **もっとアプリをよくできそう**な所が見えた
* まだまだ不慣れで**デザインの難しさ大変さを知れた**
* やっぱり、**一度作って終わりではなく何度もデザイン、アプリの改善は必要**だと改めて思った
* **デザインシステムの重要性**、一貫したデザインを作成するのに大切だなと感じた
* チームでデザインを設計していくのは、根気のいる作業でもある
    * （今回はミニミニだったので、ちゃんとやるとなると時間も体力もいるなと）

#### そもそも、デザインスプリントとは？

https://studist.tech/full-remote-design-sprint-a358ed13e036

:point_up_2_tone2:こちらの記事が使用ツールや実施方法フローが詳しく書かれていて参考になりました

今回は、時間が足りないのでめちゃくちゃ端折ってミニミニデザインスプリントをやってみました！

:::note info
以下の順で、やることを絞って実施


**①ペルソナ作成**
**②カスタマージャーニーマップ**
**③ 1万円テスト**
**④ UIデザインに落とし込む（ワイヤーフレーム作成）**

:::

##### ①ペルソナ作成

:writing_hand_tone1:**ペルソナとは？**
ペルソナとは、商品やサービスを利用する最も重要なユーザーとして定める架空の人物のこと

今回はちょうど良いペルソナ人物像がが社内の方にいたので、時間削減のためその方にしました！
※本来はちゃんとペルソナ作成の工程を踏みます

https://ssaits.jp/promapedia/method/persona-analysis.html#toc_id_1



##### ②簡単なカスタマージャーニーマップを作成

:writing_hand_tone1:**カスタマージャーニーマップとは？**
体験の全体像を時系列で整理し、設計することによって課題や伸び代の発見になる
>ユーザーの心理、行動理由や感情の起伏などをグラフ上に追加していくことで、
サービスやプロダクトの体験を俯瞰できるだけでなく、顧客視点で体験を設計できる

https://blog.btrax.com/jp/good-customer-journey-map/


15分〜20分ほど以下の点についてアイデアを出し合う時間を取りました


 * アプリを開く目的
     * Actions 顧客は何をするか
     * CustomerThought 顧客は何を思うのか
     * 対応策


![モザイク_カスタマージャーニー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2899739/2760f8c6-b84a-03ef-ee86-94571d9e62c8.png)





##### ③１万円テスト

:writing_hand_tone1:**１万円テストとは**
１人１万円ずつ疑似通貨を持ち、一度発散した全アイデアに自由に投資する取り組み

上記のカスタマージャーニーマップで出た意見をもとに
投資したいと思えるものに金額の書かれた付箋を貼ります。（※各メンバー投資可能上限は1万円）

１万円以内であればどのアイデアにいくら投資してもいいので、

「あれ今、いくら使ったけ？:joy:」という

残金いくら問題が多発しました。 w

これも結構ワイワイしながらできて楽しかったです:sparkles:

![モザイク_一万円テスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2899739/a8aecb3a-b4a8-227c-927e-653c5f4f5f69.png)


![スクリーンショット 2023-09-29 17.25.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2899739/c921e001-13e6-7eb2-03b8-dc583ae8144e.png)

似たような意見は集計して、１位、２位の順にでた意見に対してUIデザインのワイヤーフレームを
各自考えて作成しました。

##### ④UIデザイン（ワイヤーフレームの作成）

:writing_hand_tone1:**ワイヤーフレームとは?**
>「何を・どこに・どのように」配置するかを表現した設計図です。「ワイヤー（導線）」と「フレーム（枠組み）」の言葉のとおり、シンプルに要素や情報だけを配置し視覚化したWebサイトの骨組みを指す

https://mieru-ca.com/heatmap/blog/what-is-wireframe/


###### Figmaでワイヤーフレームの作成

あまり時間がなかったのでざっくりとですが、それぞれ素敵な案が出ました！:cherry_blossom:
出てきたアイデアをワイヤーフレームとして書き起こして設計していくのが個人的に一番楽しいポイントでしたw:relaxed:


![モザイク_ワイヤーフレーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2899739/8eeab76d-49cf-26aa-da85-816f68e953a1.png)


### おわりに
基本的にはみなさん住んでいる場所がバラバラなので普段はフルリモートなのですが
勉強会の実施は金沢で行いました:v:
オフラインの良さは、コミュニケーションコストの低さですが、
それと普段あまり関わることのない他チームの方ともお会いできて
直接お話できたことはすごく良かったなと思いました。:relaxed:

こうゆう機会がないとあまり他チームの方と関わらないのでとても良い機会をいただけたのが
ありがたかったです！:information_desk_person:謝謝

:point_down_tone3:勉強会＆会社のことを書いてる記事もあるので良かったら覗いてみてください！:point_down_tone3:

https://qiita.com/kusano_keito/items/49d40f74d33b8f0f9689