TIPSTARでのデザイナーの働き方について

Transcript

1. TIPSTARでのデザイナーの働き方について
   

   View Slide

2. 友達と一緒に競輪・オートレースの
   
   ネット投票を楽しめるスポーツベッティングサービス
   とは？
   

   View Slide

3. 2020年6月リリース
   3周年
   基本無料で遊べる
   今年で
   ミッション・イベントで楽しく軍資金をGETできる
   マネーの他に無料のTIPメダルで遊べる
   

   View Slide

4. TIPSTARで働く人たち
   TIPSTAR開発部
   サーバー クライアント QA
   プロデューサー
   企画 デザイン
   

   View Slide

5. TIPSTARのデザインチームは現在7名
   マネージャー
   App Web
   TIPSTARで働く人たち
   

   View Slide

6. TIPSTARのデザインチームは現在7名
   マネージャー
   App Web
   TIPSTARで働く人たち
   私は主にAppを担当しています
   

   View Slide

7. ・アプリ内のバナー、お知らせ画像のデザイン
   
   ・紙媒体、グッズ制作
   
   ・外部コラボのクリエイティブ制作(バナーやグッズなど)
   ・新機能開発 / 大規模なUIUX改修
   
   ・UI改善(他デザインガイドラインの作成など)
   部署内で
   
   完結
   外部と
   
   連携
   グラフィックデザイン
   UIUXデザイン
   デザインチームの業務内容
   マネージャー
   App Web
   

   View Slide

8. TIPSTARのデザインがどんなプロセスで作られているか？
   今日のテーマ
   バナー業務
   
   (新規デザイン)
   UI改修業務
   UIUXデザイン
   グラフィックデザイン
   

   View Slide

9. バナー業務
   
   (新規デザイン)
   グラフィックデザイン
   

   View Slide

10. TIPST
    ARのバナー(一部)
    

    View Slide

11. リリースまでのフロー
    デザイナー
    
    担当箇所
    企画チームが仕様書作成
    案件へのアサイン
    仕様書をもとにデザイン作成
    企画チェック
    デザイン修正
    バナー完成 / その他画像や素材の作成
    githubにデータ反映
    QA・リリース
    

    View Slide

12. リリースまでのフロー
    企画チームが仕様書作成
    案件へのアサイン
    仕様書をもとにデザイン作成
    企画チェック
    デザイン修正
    バナー完成 / その他画像や素材の作成
    githubにデータ反映
    QA・リリース
    新規案件だと大体1週間 踏襲だと2〜3営業日
    企画とやり取り
    、 で
    
    作成します(制作物の数や踏襲の度合いによって日数は変わる)
    
    
    バナー業務は主に しながら
    
    進めます
    デザイナー
    
    担当箇所
    

    View Slide

13. 「TIPSTAR農場」施策バナーのグラフィックデザイン
    仕事紹介 ①
    

    View Slide

14. TIPSTAR農場 とは？
    競輪やオートレースにTIPマネーをベットすると参加できるイベント施策の1つ
    

    View Slide

15. 【仕様内容】
    
    ・ゲーム感覚で遊べる施策なのでゲームのようなテイストで
    
    ・ギラギラ系を避けて、ハートフルなイメージ
    
    ・パキッとではなく、淡く柔らかい印象
    今回の施策のターゲットユーザーは？
    金額訴求バナーと差別化するには？
    TIPSTARでハートフルさを表現するには？
    仕様書をもとにデザイン作成 企画チェック デザイン修正 バナー完成 / その他画像や素材の作成
    企画チームが作成した仕様書をもとに要件を整理し、どうデザインに落とし込むかを考える
    企画 デザイナー
    

    View Slide

16. 仕様書をもとにデザイン作成 企画チェック デザイン修正
    繰り返し
    疑問点や詳細も聞く！
    バナー完成 / その他画像や素材の作成
    企画さんと密なコミュニケーションを取って細かい部分までデザインの擦り合わせる
    ゲーム→ファンタジー系
    
    四角＜丸いイメージ
    
    ハートフル＜淡い
    
    こんな順序付けで！
    企画
    デザイナー
    方向性の擦り合わせしたいです！
    訴求したい情報の優先度は？
    実のなるイメージは(木か根か？)
    ・さくらんぼのような「実」をイメージできるよう、
    
    畑から木をモチーフにしたデザインに変更
    
    
    ・ターゲットユーザーが幅広く設定されていたため、文字は親近感の
    
    湧く丸みを帯たものに変更
    
    →淡さが半減したので色味や背景を水彩画風のテクスチャを使って補った
    

    View Slide

17. 仕様書をもとにデザイン作成 企画チェック デザイン修正 バナー完成 / その他画像や素材の作成
    

    View Slide

18. UI改修業務
    UIUXデザイン
    

    View Slide

19. ベッティング(車券を選んで購入する)画面のUI改修
    仕事紹介 ②
    改修前 改修後
    

    View Slide

20. 先輩デザイナーの
    
    案件をもとに紹介
    ベッティング(車券を選んで購入する)画面のUI改修
    仕事紹介 ②
    改修前 改修後
    

    View Slide

21. スプリント開発フロー
    企画チームが改修案の企画立案〜仕様書作成
    案件へのアサイン
    仕様書をもとにデザイン作成
    企画・エンジニアチェック
    デザイン修正
    デザイン完成、企画書に反映
    企画書をもとにキックオフ
    デザインFIX(必要に応じて修正)
    リリース
    デザイナー
    
    担当箇所
    

    View Slide

22. スプリント開発フロー
    企画チームが改修案の企画立案〜仕様書作成
    案件へのアサイン
    仕様書をもとにデザイン作成
    企画・エンジニアチェック
    デザイン修正
    デザイン完成、企画書に反映
    企画書をもとにキックオフ
    デザインFIX(必要に応じて修正)
    リリース
    制作期間は
    (案件の粒度や開発工数によって日数は変わる)
    
    
    UI改修業務は主に
    して進めます
    2週間〜2ヶ月
    
    企画とエンジニアメインに
    
    やり取り
    デザイナー
    
    担当箇所
    

    View Slide

23. レース映像が常に表示されているため
    
    肝心のレース情報の表示スペースが狭い
    ホームまで戻らないと他の場を選択が
    
    できない
    
    
    レース選択のボタンが見えづらい
    この画面はレースを見るのではなく、
    
    レースに賭ける画面
    
    ↓
    
    選手情報の見やすくしたい
    課題① 課題②
    13:20
    レース情報
    改修目的：レース画面のユーザビリティ向上
    

    View Slide

24. デザイナー
    仕様書の内容をそのままデザインに落とし込むのではなく、
    
    自分なりに目的や背景を考えたり、疑問に感じた点を整理する
    仕様書をもとにデザイン作成 企画・エンジニアチェック デザイン仮完成 / キックオフ デザインFIX
    この機能を実装することで
    
    ユーザーにはどんな価値がある？
    TIPSTARらしいビジュアルって
    
    なんだろう？
    ユーザーはレース画面において
    
    どんな情報を見たいか？比較したいか？
    

    View Slide

25. TIPメダルのみ TIPマネーのみ 両方で
    まとめて編集 まとめて分配
    展開する
    2連単 6組
    43.7倍 ~ 187.7倍
    のっかりベット
    展開する
    3連複 6組
    43.7倍 ~ 187.7倍
    １人目
    2人目
    3人目
    展開する
    2連複 8組
    9999倍 ~ 9999倍
    １人目
    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倍
    １人目
    2人目
    3人目
    3連単 6組
    展開する
    2連複 8組
    9999倍 ~ 9999倍
    １人目
    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倍
    １人目
    2人目
    3人目
    3連単 6組
    43.7倍 ~ 187.7倍
    １着
    2着
    展開する
    2連複 8組
    9999倍 ~ 9999倍
    １人目
    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では複数案提示するケースが多い
    

    View Slide

26. 作成したデザインをもとに方向性や実装可否について議論
    デザイン仮完成 / キックオフ デザインFIX
    仕様書をもとにデザイン作成 企画・エンジニアチェック
    企画 エンジニア デザイナー
    B案は小さい端末になるとレース情報が
    見えにくいので目的を達成できないです A案は実装が難しいです... C案をベースに修正案を作ってみます！
    

    View Slide

27. デザイン修正後、キックオフにて仕様内容やデザインの確認・共有、
    
    仕様漏れがないかチェックする
    キックオフにはTIPSTAR部署の
    
    全てのチームが参加
    デザイン仮完成 / キックオフ デザインFIX
    仕様書をもとにデザイン作成 企画・エンジニアチェック
    D案.修正案
    C案をベースにレース画面の表示/非表示を切り替えられる
    サーバー クライアント QA
    企画 デザイン
    

    View Slide

28. デザイン仮完成 / キックオフ デザインFIX
    仕様書をもとにデザイン作成 企画・エンジニアチェック
    

    View Slide

29. 映像ONのデフォルト表示やめ、
    
    レース情報を見やすくした
    自分でベット画面上で場を選択できる
    
    ようにした
    タブでレースをすぐに切り替えるよう
    
    にした
    ↓
    
    画面遷移を最小限に押さえ、
    
    ユーザーストレスを与えないようにした
    ↓
    
    この画面のメインアクションとなる
    
    「レース情報を比較して車券購入する」を
    
    スムーズにできるようにした
    改善点①
    改善点②
    改善点③
    自分でベット画面_改修後
    

    View Slide

30. デザイナーとして、自ら考えて行動することの大切さ
    他者を思いやるコミュニケーションが仕事のパフォーマンスに大きく繋がる
    TIPSTARのデザインチームで半年働いて感じたこと
    まとめ
    

    View Slide

31. みなさんに少しでもTIPSTARの働き方や雰囲気が
    伝わっていると嬉しいです！
    

    View Slide

32. TIPSTARでのデザイナーの働き方について
    

    View Slide