conte - ABEMA's Design System
•
0 likes•4,606 views
The presentation describes how "conte", ABEMA's design system, starts, works, and is developed. "conte" is to design all the things that are not designed yet in the product.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to conte - ABEMA's Design System
Similar to conte - ABEMA's Design System (20)
More from Yusuke Goto
More from Yusuke Goto (20)
conte - ABEMA's Design System
- 1. conte ABEMA's Design System 五藤 佑典 松本 俊介
- 2. 五藤 佑典 YUSUKE GOTO https://ygoto3.com/ @ygoto3_ ● California State University, San Bernardino グラフィックデザイン専攻 ● ソフトウェアエンジニア @ サイバーエージェント ● ABEMA 開発本部 ○ New Device チーム あらゆるデバイスにAbemaTV を展開するための技術を提供するチーム ○ Streaming Client チーム AbemaTV の再生品質を軸にUX エンジニアリングにコミットするチーム ○ 動画技術エバンジェリスト 世界各国に足を運び動画技術に関する情報をキャッチアップし、 社内外の動画サービスの発展に貢献するロール ○ DesignOps 推進バックエンド 大規模組織でスケールできるプロダクトデザイン開発組織を構築する活動
- 3. in Video Technology and Product Design
- 4. 松本 俊介 SHUNSUKE MATSUMOTO ● 2015年に新卒入社 ● 同年7月に株式会社AbemaTVに出向し、AbemaTV（現 ABEMA）の立ち上げメンバーとして参画。 ● 以降プロダクトデザインオーナーとしてサービスグロース に携わる。 ● ジェイソン・ステイサムが好き。 @shunsuke.design
- 5. イントロ
- 6. 今日の話 本日話す話は UI コンポーネントやデザイントークンといった UI デザインワークを効率化するための仕組みの話ではなく
- 9. ABEMAのデザインが抱えていた問題 ● デザイン改善の優先順位に組織としての答えがない ● 良いユーザー体験（≒良いデザイン）の定義がない ● ファクトベースのデザイン改善力が弱い ● 人が変わるとデザインがブレる
- 13. 人が変わるとデザインがブレる
- 15. 社長の言葉を 振り返る 02
- 16. 社長の言葉を振り返る ● テレビのザッピングは受け身視聴 ○ 惰性でアプリ開いちゃう ○ 1ch目が「ニュース」なのはマスメディアとして徹底したい ○ チャンネルの並び順にはこだわりアリ ■ ドン・キホーテの店舗のように、自然な回遊により番組に出会わせた い ● オンデマンドの回遊も、縦に長いページでダラダラ受動的に消費してもらいた い
- 17. 社長の言葉を振り返る ● シンプルでスタイリッシュ！シンプルだからこそ伝わる ○ とはいえ、機能追加が続きシンプルさは失われる ○ 「従来のテレビ」の印象からアップデートしたい ● 運用はTSUTAYAの店員が書いたポップの人間味が大事 ○ プロダクトは無機質だが、運用部分には親近感を ● 機能追加の欲求とシンプルにさせたい欲求が相反して存在している
- 18. 社長の言葉を振り返る ● タブバーはUIとして抵抗が...。普通のアプリ感。 ○ 「普通のアプリ感」が嫌だ、ありふれたものへの危機感 ○ 「使い慣れたもの」と「凡庸なもの」の識別は社長の中にある？
- 19. 社長の言葉を振り返る キーワードは ● 受け身でダラダラ ● シンプルでスタイリッシュ ● ありふれた凡庸なものにしない
- 20. デザインを仕組み化する 03
- 21. ABEMAのデザインが抱えていた問題 ● デザイン改善の優先順位に組織としての答えがない ● 良いユーザー体験（≒良いデザイン）の定義がない ● ファクトベースのデザイン改善力が弱い ● 人が変わるとデザインがブレる
- 22. ABEMAのデザインが抱えていた問題 ● デザイン改善の優先順位に組織としての答えがない ● 良いユーザー体験（≒良いデザイン）の定義がない ● ファクトベースのデザイン改善力が弱い ● 人が変わるとデザインがブレる 属人的な決定でしか 決断ができないことに問題
- 23. 社長の言葉を振り返る キーワードは ● 受け身でダラダラ ● シンプルでスタイリッシュ ● ありふれた凡庸なものにしない
- 24. 社長の言葉を振り返る キーワードは ● 受け身でダラダラ ● シンプルでスタイリッシュ ● ありふれた凡庸なものにしない 属人化しているビジョンを プロダクトに落とすプロセスがない
- 27. 個人の能力の限界がデザインの限界になっている 職種の狭間の要素はデザインされづらい ● 事業 KPI の向上とユーザー体験の最大化ポイント ● 通信コストを抑える選択肢 ● データ構造に矛盾しない表示 ● 個人が想定していないユーザーにとっての使い勝手 ● ...
- 28. 職種の狭間でデザインされていないもの ● 事業ミッションに連動したユーザー体験 ● インターネットプロダクトとしての最適な通信 ● アジャイルに進化可能な動画ストリーミング ● ユーザーエンゲージメントの成長 ● ユーザーの目当て ● 日本を代表するメディアとしてのアクセシビリティ ● デザインの負債返済計画
- 32. どうやって作るか 04
- 35. デザインシステムの文化構築のノウハウ Gap Stitch Design System が取り組んだ文化構築の ノウハウにヒント
- 36. 活動によって以下のものを作っていく ● 共有された価値観 ● 共通言語 ● 実行体制の共通化 ● 共通資産 ● 共有資本 ● 共有されたデザイン戦略
- 37. 共有された価値観を作る 05
- 42. プロダクトデザインビジョン STEP 1 ● ABEMAが目指す方向 ● こんなABEMAはイヤだ を洗い出してみる
- 46. プロダクトデザインビジョン STEP 2 ● すべてのコンテンツの価値を最大化する 👉どのサービスでも当てはまってしまいそう ● 最善の「普通」を積み重ね「特別」な体験を作る 👉抽象的で方向を示せていない ● ピントのあった体験を、最小限のデザインで。 👉どのサービスでも当てはまってしまいそう 👉抽象的で方向を示せていない
- 50. プロダクトデザインビジョン STEP 3 振り切ったアイデアを出してみる ● 徹底的に指標駆動 ● 市場にない価値しか作らない ● 便利な UI より間違えない UI ● 全ての人が使うことができるプロダクト を作る（視覚障害なども含めて） ● 常にステートレスな情報設計 ● 全てのユーザーストーリーをコントロー ルする ● Don't make users think ● インクルーシブデザイン ● 徹底的に1つのストーリー / 狙いを絞る ● 1度の学習で理解できるUI ● 頭を使わないエンターテイメント ● 最高になまけさせる ● 説明的で徹底的にわかりやすくする ● ユーザーファーストよりもストーリー ファースト ● ユーザーの欲求を理解する
- 52. 共通言語を作る 06
- 54. デザイン原則 1. 心理的距離が近ければ物理的距離が遠くても優先する 2. 慣用的なデザインにする 3. プライマリーストーリーを明確にする 4. 操作コストを低くする 5. 最小限のデザインをする 6. ユニークな体験を追求する 7. 一貫性を持たせる
- 58. デザイン原則 STEP 2 慣用的な デザインにする 具体的なデザインパターンを挙げ、リアリティがあるか検証する 1. 機能や概念のアイコンを使用するとき 検索,設定,再生など一般的に見慣れている機能や概念は その慣用性を表現できているアイコンを採用する。 2. アクションさせたい機能を表示するとき サービス側が強調したい機能などがあったとしても、強調 表現のためにアクションのUIを一般的に見慣れない形にし ない。
- 62. デザイン原則 STEP 3 ユーザーテストでの FBを反映 ● デザインパターンの Do / Don’t の境界線を分かりや すくするべき ● 「確かにやっちゃうかも...」と思え るようなリアルな Don't だと刺さる
- 63. 共通の実行体制を作る 07
- 65. 実行体制 初期の実行体制
- 66. Story-Assured Design スマートテレビ開発に導入した開発フロー 1. ユーザーストーリーのデザイン 2. デザイン要素の構造化 3. 視覚情報のデザイン を順番（もしくは慣れてきたら並行）に行う デザインワークフロー ストーリーオーナーというロールが ワークフローに責務を持つ
- 70. 新実行体制共通化のアプローチ ABEMA のプロダクトデザインの問題をタスクフォース・モデルで解決していく 問題① タスクフォース A課題化 conte問題② タスクフォース B課題化 問題③ タスクフォース C課題化
- 71. 並行して問題を解決するTF たち ユーザー体験 TF ネットワークシーケンス TF ストリーミング再生 TF デザイントークン TF ツーリング TF アクセシビリティ TF UI コンポーネントデザイン TF
- 72. 共通資産を作る 08
- 73. Assets 共通資産 TF によって生み出すアウトプットは 全て共通資産になるようにする ここでいう共通資産とは、ABEMA の ● 全ステークホルダーが対象になっている ● 全サポートデバイスで使う ことを前提にしている
- 77. デザイン原則（再掲）
- 81. 画像アセット自動デリバリー
- 84. デザインされていないネットワークシーケンス iOS の実装 Android の実装 Web の実装 TV の実装
- 85. デザインされていないネットワークシーケンス iOS の実装 Android の実装 Web の実装 TV の実装 それぞれの実装者によって 独自に最適化されたシーケンス
- 86. デザインされているネットワークシーケンス ● プラットフォーム間で差異がない ● ポーリング間隔、タイムアウト、遅延も含 め意図された通りに通信する ● ユーザー環境とシステムへの負荷のバ ランスを考慮している
- 90. アクセシビリティ TF サバイバルフェーズでのアクセシビリティ投資バランスが属人的 このフェーズで最も ABEMA として価値を生み出す アクセシビリティのビジョンを明示する 課題 デザインされていない 問題
- 91. ABEMA のアクセシビリティビジョン 難易度が高いお題 = 言語化が難しい 意識することは必要だが、デザインビジョンの一部として 自然と組み込まれることが現実的にワークしやすい
- 100. 資本を共有する 09
- 102. TF のジョイントワーク ある TF から出てきた課題を別の TF の資本を利用して解決 タスクフォース A conte タスクフォース B
- 103. TF のジョイントワーク ある TF から出てきた課題を別の TF の資本を利用して解決 問題 タスクフォース A conte タスクフォース B
- 104. TF のジョイントワーク ある TF から出てきた課題を別の TF の資本を利用して解決 問題 タスクフォース A conte タスクフォース B 課題化
- 105. TF のジョイントワーク ある TF から出てきた課題を別の TF の資本を利用して解決 問題 タスクフォース A conte タスクフォース B 課題化
- 106. conte TFs チェックイン 各 TF の課題を持ち寄る 解決案の提案 別組織体への エスカレーション 別 TF からの協力
- 107. conte TFs チェックイン 各 TF の課題を持ち寄る 解決案の提案 別組織体への エスカレーション 別 TF からの協力 知見のシェア 新しい TF の必要性判断
- 108. conte TFs チェックイン 各 TF の課題を持ち寄る 解決案の提案 別組織体への エスカレーション 別 TF からの協力 知見のシェア 新しい TF の必要性判断 例）ユーザー体験の課題 ユーザー体験追求のための A/B テスト実 施量増加によるデザイン負債膨張 → デザインの負債 TF 設置
- 109. conte TFs チェックイン 各 TF の課題を持ち寄る 解決案の提案 別組織体への エスカレーション 別 TF からの協力 ジョイントワーク
- 110. conte TFs チェックイン 各 TF の課題を持ち寄る 解決案の提案 別組織体への エスカレーション 別 TF からの協力 ジョイントワーク 例）アクセシビリティ x ツーリング 代替テキストを画像アセットとして Sketch から出力するツール
- 111. conte TFs チェックイン 各 TF の課題を持ち寄る 解決案の提案 別組織体への エスカレーション 別 TF からの協力 開発組織外やボードに 課題持ち込み
- 112. conte TFs チェックイン 各 TF の課題を持ち寄る 解決案の提案 別組織体への エスカレーション 別 TF からの協力 開発組織外やボードに 課題持ち込み 例）アクセシビリティ CS ヒアリング アクセシビリティに関するユーザーの直接 の声に関する課題 → 直接聞いている部署と連携
- 113. 共有資本 TF 以外からの資本
- 114. 社内オープンソース
- 115. 社内オープンソース GitHub GitHub Actions Firebase GitBook Pull Request Merge Deploy View
- 116. 社内オープンソース GitHub GitHub Actions Firebase GitBook Pull Request Merge Deploy View 誰でも変更を提案できて 誰でも見ることができる
- 117. デザイン戦略を共有する 10
- 118. デザインシステムに対する戦略共有
- 119. デザインシステムに対する戦略共有 各 TF の Q 目標を Q 始めに ABEMA 開発組織に共有 システムの方向性を 開発者が認知している状態を草の根
- 122. デザイン自体に対する戦略共有 デザイン戦略は事業、技術と歩調を合わせる必要がある 事業戦略 デザイン戦略 技術戦略 事業戦略は激しくピボット前提 グロースおよびピボット戦略に歩調を合わせられるような 基盤作りがいま conte が担うところになる
- 124. まとめ conte = ABEMA のデザインされていないものをデザインするための仕組み 手順 1. 社長の言葉からビジョンを抽出 2. 共有されるべき価値観を言語化 3. タスクフォース・モデルによる実行／資産生産／資本共有 デザインされていないあらゆる問題に ABEMA の価値観を埋め込みながら解決
- 125. 五藤 佑典 YUSUKE GOTO ありがとうございました 松本 俊介 SHUNSUKE MATSUMOTO @shunsuke.designhttps://ygoto3.com/ @ygoto3_