$30 off During Our Annual Pro Sale. View Details »

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

ミクシル
December 07, 2022

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

ミクシル

December 07, 2022
Tweet

More Decks by ミクシル

Other Decks in Design

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倍
    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では複数案提示するケースが多い

    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