Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
TIPSTARでのデザイナーの働き方について
ミクシル
December 07, 2022
Design
0
520
TIPSTARでのデザイナーの働き方について
ミクシル
December 07, 2022
Tweet
Share
More Decks by ミクシル
See All by ミクシル
デザイン本部デザイナーのお仕事
mixil
0
570
みてね サービスとデザイン組織
mixil
0
560
モンストの組織とUIデザイナー業務の紹介
mixil
0
530
MIXI スポーツ領域とライフスタイル領域のデザイン
mixil
0
500
Other Decks in Design
See All in Design
FIT2022_levii
levii
0
250
UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発
misaaa09
0
150
「文脈を理解する」ということについて 考えてみる
yutaromurakami
0
180
i3DESIGN_Culture_Book / for Designer
i3design
0
7.9k
みらいのしごと after 50(書籍版)
koel
0
100
超簡単!デザインシステム導入の手引き
fixel_admin
1
240
Introduction to Design Tokens
fmerian
PRO
2
130
顧客信頼性向上のためのデザイン
mizuena
1
490
後悔しないデザインシステムの始め方
takanorip
4
2.4k
組織でデザインが推進できる人の思考術
yhassy
6
5k
【MICIN】Designer RECRUTING INTRODUCTION(デザイナー採用資料)
micin_hr
0
410
Recreating the DuBois Data Portraits
ajstarks
5
2.7k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Web development in the modern age
philhawksworth
197
9.6k
Happy Clients
brianwarren
90
5.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
Raft: Consensus for Rubyists
vanstee
130
5.7k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
The Language of Interfaces
destraynor
149
21k
Visualization
eitanlees
128
12k
Transcript
TIPSTARでのデザイナーの働き方について
友達と一緒に競輪・オートレースの ネット投票を楽しめるスポーツベッティングサービス とは?
2020年6月リリース 3周年 基本無料で遊べる 今年で ミッション・イベントで楽しく軍資金をGETできる マネーの他に無料のTIPメダルで遊べる
TIPSTARで働く人たち TIPSTAR開発部 サーバー クライアント QA プロデューサー 企画 デザイン
TIPSTARのデザインチームは現在7名 マネージャー App Web TIPSTARで働く人たち
TIPSTARのデザインチームは現在7名 マネージャー App Web TIPSTARで働く人たち 私は主にAppを担当しています
・アプリ内のバナー、お知らせ画像のデザイン ・紙媒体、グッズ制作 ・外部コラボのクリエイティブ制作(バナーやグッズなど) ・新機能開発 / 大規模なUIUX改修 ・UI改善(他デザインガイドラインの作成など) 部署内で 完結 外部と
連携 グラフィックデザイン UIUXデザイン デザインチームの業務内容 マネージャー App Web
TIPSTARのデザインがどんなプロセスで作られているか? 今日のテーマ バナー業務 (新規デザイン) UI改修業務 UIUXデザイン グラフィックデザイン
バナー業務 (新規デザイン) グラフィックデザイン
TIPST ARのバナー(一部)
リリースまでのフロー デザイナー 担当箇所 企画チームが仕様書作成 案件へのアサイン 仕様書をもとにデザイン作成 企画チェック デザイン修正 バナー完成 /
その他画像や素材の作成 githubにデータ反映 QA・リリース
リリースまでのフロー 企画チームが仕様書作成 案件へのアサイン 仕様書をもとにデザイン作成 企画チェック デザイン修正 バナー完成 / その他画像や素材の作成 githubにデータ反映
QA・リリース 新規案件だと大体1週間 踏襲だと2〜3営業日 企画とやり取り 、 で 作成します(制作物の数や踏襲の度合いによって日数は変わる) バナー業務は主に しながら 進めます デザイナー 担当箇所
「TIPSTAR農場」施策バナーのグラフィックデザイン 仕事紹介 ①
TIPSTAR農場 とは? 競輪やオートレースにTIPマネーをベットすると参加できるイベント施策の1つ
【仕様内容】 ・ゲーム感覚で遊べる施策なのでゲームのようなテイストで ・ギラギラ系を避けて、ハートフルなイメージ ・パキッとではなく、淡く柔らかい印象 今回の施策のターゲットユーザーは? 金額訴求バナーと差別化するには? TIPSTARでハートフルさを表現するには? 仕様書をもとにデザイン作成 企画チェック デザイン修正
バナー完成 / その他画像や素材の作成 企画チームが作成した仕様書をもとに要件を整理し、どうデザインに落とし込むかを考える 企画 デザイナー
仕様書をもとにデザイン作成 企画チェック デザイン修正 繰り返し 疑問点や詳細も聞く! バナー完成 / その他画像や素材の作成 企画さんと密なコミュニケーションを取って細かい部分までデザインの擦り合わせる ゲーム→ファンタジー系
四角<丸いイメージ ハートフル<淡い こんな順序付けで! 企画 デザイナー 方向性の擦り合わせしたいです! 訴求したい情報の優先度は? 実のなるイメージは(木か根か?) ・さくらんぼのような「実」をイメージできるよう、 畑から木をモチーフにしたデザインに変更 ・ターゲットユーザーが幅広く設定されていたため、文字は親近感の 湧く丸みを帯たものに変更 →淡さが半減したので色味や背景を水彩画風のテクスチャを使って補った
仕様書をもとにデザイン作成 企画チェック デザイン修正 バナー完成 / その他画像や素材の作成
UI改修業務 UIUXデザイン
ベッティング(車券を選んで購入する)画面のUI改修 仕事紹介 ② 改修前 改修後
先輩デザイナーの 案件をもとに紹介 ベッティング(車券を選んで購入する)画面のUI改修 仕事紹介 ② 改修前 改修後
スプリント開発フロー 企画チームが改修案の企画立案〜仕様書作成 案件へのアサイン 仕様書をもとにデザイン作成 企画・エンジニアチェック デザイン修正 デザイン完成、企画書に反映 企画書をもとにキックオフ デザインFIX(必要に応じて修正) リリース
デザイナー 担当箇所
スプリント開発フロー 企画チームが改修案の企画立案〜仕様書作成 案件へのアサイン 仕様書をもとにデザイン作成 企画・エンジニアチェック デザイン修正 デザイン完成、企画書に反映 企画書をもとにキックオフ デザインFIX(必要に応じて修正) リリース
制作期間は (案件の粒度や開発工数によって日数は変わる) UI改修業務は主に して進めます 2週間〜2ヶ月 企画とエンジニアメインに やり取り デザイナー 担当箇所
レース映像が常に表示されているため 肝心のレース情報の表示スペースが狭い ホームまで戻らないと他の場を選択が できない レース選択のボタンが見えづらい この画面はレースを見るのではなく、 レースに賭ける画面 ↓ 選手情報の見やすくしたい 課題①
課題② 13:20 レース情報 改修目的:レース画面のユーザビリティ向上
デザイナー 仕様書の内容をそのままデザインに落とし込むのではなく、 自分なりに目的や背景を考えたり、疑問に感じた点を整理する 仕様書をもとにデザイン作成 企画・エンジニアチェック デザイン仮完成 / キックオフ デザインFIX この機能を実装することで
ユーザーにはどんな価値がある? TIPSTARらしいビジュアルって なんだろう? ユーザーはレース画面において どんな情報を見たいか?比較したいか?
TIPメダルのみ TIPマネーのみ 両方で まとめて編集 まとめて分配 展開する 2連単 6組 43.7倍 ~
187.7倍 のっかりベット 展開する 3連複 6組 43.7倍 ~ 187.7倍 1人目 2人目 3人目 展開する 2連複 8組 9999倍 ~ 9999倍 1人目 2人目 マルチ裏目 1R TIPSTAR杯 A級チ予選 999,999,999枚 999,999,999枚 10分 締切あ と 立川 購入確認へ 予想を追加 合計 払戻 収支 10,000枚 2,000〜123,00G -8,000〜+113,00 3,000円 3,100〜33,000円 +100〜+30,000 13:20 予想 TIPメダルのみ TIPマネーのみ 両方で まとめて編集 まとめて分配 展開する 2連単 6組 43.7倍 ~ 187.7倍 のっかりベット 展開する 3連複 6組 43.7倍 ~ 187.7倍 1人目 2人目 3人目 3連単 6組 展開する 2連複 8組 9999倍 ~ 9999倍 1人目 2人目 マルチ裏目 立川10R [最終日] 10分 締切あと 購入確認へ 予想を追加 合計 払戻 収支 10,000枚 2,000〜123,00G -8,000〜+113,00 3,000円 3,100〜33,000円 +100〜+30,000 13:20 予想 999,999,999枚 999,999,999枚 TIPメダルのみ TIPマネーのみ 両方で まとめて編集 まとめて分配 展開する 2連単 6組 43.7倍 ~ 187.7倍 のっかりベット 展開する 3連複 6組 43.7倍 ~ 187.7倍 1人目 2人目 3人目 3連単 6組 43.7倍 ~ 187.7倍 1着 2着 展開する 2連複 8組 9999倍 ~ 9999倍 1人目 2人目 マルチ裏目 立川10R [最終日] 10分 締切あと 999,999,999枚 999,999,999枚 購入確認へ 予想を追加 合計 払戻 収支 10,000枚 2,000〜123,00G -8,000〜+113,00 3,000円 3,100〜33,000円 +100〜+30,000 13:20 予想 A案.PIP マネーやメダルの要素が隠れるので、ベットするときにジャマになってしまわないかどうか? B案.現状と同じ このサイズになったときに動画を閉じれない問題あり C案.動画非表示 ついでにヘッダー部分もこの画面のときは狭くして、ベットエリアを広く見せる バックグラウンドで音声だけ再生しておくかどうか? デザイン仮完成 / キックオフ デザインFIX 仕様書をもとにデザイン作成 企画・エンジニアチェック TIPSTARでは複数案提示するケースが多い
作成したデザインをもとに方向性や実装可否について議論 デザイン仮完成 / キックオフ デザインFIX 仕様書をもとにデザイン作成 企画・エンジニアチェック 企画 エンジニア デザイナー
B案は小さい端末になるとレース情報が 見えにくいので目的を達成できないです A案は実装が難しいです... C案をベースに修正案を作ってみます!
デザイン修正後、キックオフにて仕様内容やデザインの確認・共有、 仕様漏れがないかチェックする キックオフにはTIPSTAR部署の 全てのチームが参加 デザイン仮完成 / キックオフ デザインFIX 仕様書をもとにデザイン作成 企画・エンジニアチェック
D案.修正案 C案をベースにレース画面の表示/非表示を切り替えられる サーバー クライアント QA 企画 デザイン
デザイン仮完成 / キックオフ デザインFIX 仕様書をもとにデザイン作成 企画・エンジニアチェック
映像ONのデフォルト表示やめ、 レース情報を見やすくした 自分でベット画面上で場を選択できる ようにした タブでレースをすぐに切り替えるよう にした ↓ 画面遷移を最小限に押さえ、 ユーザーストレスを与えないようにした ↓
この画面のメインアクションとなる 「レース情報を比較して車券購入する」を スムーズにできるようにした 改善点① 改善点② 改善点③ 自分でベット画面_改修後
デザイナーとして、自ら考えて行動することの大切さ 他者を思いやるコミュニケーションが仕事のパフォーマンスに大きく繋がる TIPSTARのデザインチームで半年働いて感じたこと まとめ
みなさんに少しでもTIPSTARの働き方や雰囲気が 伝わっていると嬉しいです!
TIPSTARでのデザイナーの働き方について