Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインシステム×マルチプラットフォームアプリ開発 / abceed_Tech_Night

Recruit
April 21, 2022

デザインシステム×マルチプラットフォームアプリ開発 / abceed_Tech_Night

2022/04/20_abceed Tech Night「大人気教育アプリ 3社のモバイルアプリ開発秘話」での、石田智宏・ロークニヨム チャッチャイの講演資料になります

Recruit

April 21, 2022
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. @chuymaster / チャイ - iOS アプリエンジニア - 「スタディサプリ 中学講座」開発担当 @geckour

    / 石田 智宏 - Android アプリ開発者 - 「スタディサプリ 中学講座」開発担当
  2. リクルートグループでの位置づけ メディア& ソリューションSBU 人材派遣SBU HRテクノロジーSBU 創業 本社 連結売上収益 グループ企業数 グループ従業員数

    創業 1960年 設立 1963年 東京 22,693億円 (2020年4月1日~2021年3月31日) 連結子会社 351社 関連会社8社 (2021年3月31日時点) 46,800名(2021年3月31日時点) OUR MISSION
  3. サービス会員推移 47万人 74万人 26万人 8万人 4万人 国外 国内 2014 2015

    2016 2017 2018 2013 97万人 194 22 127万人 2019 2020 216万人 サービス開始から 7 年、有料会員数は国内外で累計 216 万人となりました (2020 年度単体)
  4. デザインシステムとは グッドパッチエンジニアが選ぶ、推しデザインシステム 10 選|Goodpatch Blog グッドパッチブログ より 「 デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの 原則や指針と、それらを実現するための仕組みの集合体です。

    (中略) 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トー ンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイン トークンなどが含まれます。 」
  5. enum と Extension で Tokens を実装 • enum で Tokens

    を定義し、View の Extension に関数を追加することで、 馴染みやすい実装に
  6. Jetpack Compose とデザインシステム 詳細はコチラ: Jetpack Compose と GraphQL Fragment でつくるデザインシステム実装

    (blog.studysapuri.jp) • Jetpack Compose: 宣言的 UI • デザインシステム: デザインコンポーネントの関連付け • コンポーネントの実装と宣言的 UI は相性が良い
  7. • SwiftUI & Jetpack Compose とデザインシステムは相性が良い ◦ コンポーネントの表現がしやすくなり、コードの見通しがよくなった ◦ カタログ化で、コンポーネントの認知負荷が減った

    ◦ UI 部品のテストの自動化で、画面レベルではコンポーネントの状態を気に しなくて良くなった デザインシステムを取り入れてよかった!