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

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

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

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

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

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

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

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