23
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-10-11

はじめに

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

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

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

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

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

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

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

やってみた結果

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

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

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

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

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

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

①ペルソナ作成

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

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

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

:writing_hand_tone1:カスタマージャーニーマップとは?
体験の全体像を時系列で整理し、設計することによって課題や伸び代の発見になる

ユーザーの心理、行動理由や感情の起伏などをグラフ上に追加していくことで、
サービスやプロダクトの体験を俯瞰できるだけでなく、顧客視点で体験を設計できる

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

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

モザイク_カスタマージャーニー.png

③1万円テスト

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

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

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

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

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

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

モザイク_一万円テスト.png

スクリーンショット 2023-09-29 17.25.22.png

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

④UIデザイン(ワイヤーフレームの作成)

:writing_hand_tone1:ワイヤーフレームとは?

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

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

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

モザイク_ワイヤーフレーム.png

おわりに

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

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

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

23
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?