Slide 1

Slide 1 text

W o w s t u d e n t s . を 支 え る a t a m a p l u s の デ ザ イン シ ス テ ム 一 ノ 瀬 翔 吾 2025.01.27

Slide 2

Slide 2 text

自己紹介 atama plus株式会社 Product Engineer 友利奈緒@rettar5 2 一 ノ 瀬 翔 吾

Slide 3

Slide 3 text

atama plus

Slide 4

Slide 4 text

教育に、人に、社会に、 次の可能性を。 教育を新しくすること。それは、社会のまんなかを新しくすること。私 たちは学びのあり方を進化させます。 学習を一人ひとり最適化し、「基礎学力」を最短で身につける。 そのぶん増える時間で、「社会でいきる力」を伸ばす。 それが私たちの目指すもの。自分の人生を生きる人を増やし、 これからの社会をつくっていきます。 Mission ata ma plusとは 4

Slide 5

Slide 5 text

ⓒ atama plus Inc. 何を目指しているのか 5 Wow students.を支えるatama plusのデザインシステム 社会でいきる力の習 得 「基礎学力」の習得にかかる時間を短くし、「社会でいきる力」を養う時間を増やす これからの社会をつくる人に必要な力とは何でしょうか。 私たちは「基礎学力」と「社会でいきる力」の両方が とても大切だと考えていますが、 日本の教育においては、基礎学力の習得にほとんどの時間を使ってしまって いるのが現状です。 テクノロジーを活用して、基礎学力の習得にかかる時間を短くし、 社会でいきる力を養う時間を増やす。 それが私たちが目指すもの。 まずは、基礎学力にフォーカスして取り組んでおり、 今後社会でいきる力も取り組んでいきます。 基礎学力の習 得 基礎学力の習 得 従来の勉強時間を減らし、 成長時間を増やす

Slide 6

Slide 6 text

Wow students. 生徒が熱狂する学びを。 勉強をワクワクするもの、自分からやりたいものに変え、 生徒一人ひとりの可能性を広げる。 私たちのあらゆる行動は、ただ、そのためにあります。 私たちが何よりも大切にしているのは、 そのために日々全員でプロダクトを磨いています。 「生徒が熱狂する学び」を提供するということ。 atama plusとは

Slide 7

Slide 7 text

ⓒ atama plus Inc. atama plusとは 7 Wow students.を支えるatama plusのデザインシステム 教育に、人に、社会に、次の可能性を。 というミッションを達成するために Wow students. に向かっている

Slide 8

Slide 8 text

ⓒ atama plus Inc. atama plusとは 9 Wow students.を支えるatama plusのデザインシステム Wow students. に向かっている状態 = ユーザーファースト に向かっている状態

Slide 9

Slide 9 text

ⓒ atama plus Inc. atama plusとは 10 Wow students.を支えるatama plusのデザインシステム Wow students. を達成するために 取り組んでいること

Slide 10

Slide 10 text

uniform

Slide 11

Slide 11 text

ⓒ atama plus Inc. uniform 12 Wow students.を支えるatama plusのデザインシステム atama plusには uniformと呼んでいる デザインシステムがある

Slide 12

Slide 12 text

ⓒ atama plus Inc. uniform 13 Wow students.を支えるatama plusのデザインシステム 何を良いデザインとし、 どう実現するかの 「基準」と「手段」を提供

Slide 13

Slide 13 text

ⓒ atama plus Inc. uniform 14 Wow students.を支えるatama plusのデザインシステム その中のひとつに デザイン原則がある

Slide 14

Slide 14 text

uniform デザイン原則

Slide 15

Slide 15 text

ⓒ atama plus Inc. uniform デザイン原則 16 Wow students.を支えるatama plusのデザインシステム Wow students.が 生まれるための 秘けつをまとめたもの

Slide 16

Slide 16 text

ⓒ atama plus Inc. uniform デザイン原則 17 Wow students.を支えるatama plusのデザインシステム atama plusでは、 職種に限定されず すべての人がデザインを行う

Slide 17

Slide 17 text

ⓒ atama plus Inc. uniform デザイン原則 18 Wow students.を支えるatama plusのデザインシステム atama plusのデザインが対象とするのは 生徒が使うプロダクトだけではなく 生徒を取り巻く環境 そのものも含む

Slide 18

Slide 18 text

ⓒ atama plus Inc. uniform デザイン原則 19 Wow students.を支えるatama plusのデザインシステム 紙で配られるテキストや 先生に頑張りを褒めてもらえることなど 生徒が学習を通して経験する さまざまなこともデザインする

Slide 19

Slide 19 text

ⓒ atama plus Inc. uniform デザイン原則 20 Wow students.を支えるatama plusのデザインシステム ①学びに集中できる ②自分の状態がわかる ③自分から進められる

Slide 20

Slide 20 text

ⓒ atama plus Inc. uniform デザイン原則 ①学びに集中できる 21 Wow students.を支えるatama plusのデザインシステム 必要な操作・必要な要素は最小限にし 学びそのものに集中できるように デザインする

Slide 21

Slide 21 text

ⓒ atama plus Inc. uniform デザイン原則 ①学びに集中できる 22 Wow students.を支えるatama plusのデザインシステム 良い例: 問題を解いたあと 解答するボタンを意識せず押せる

Slide 22

Slide 22 text

ⓒ atama plus Inc. uniform デザイン原則 ①学びに集中できる 23 Wow students.を支えるatama plusのデザインシステム 要注意: 制限時間を 必要以上に強調する

Slide 23

Slide 23 text

ⓒ atama plus Inc. uniform デザイン原則 ①学びに集中できる 24 Wow students.を支えるatama plusのデザインシステム 要注意: 集中しているときに 先生に声をかけられてしまう

Slide 24

Slide 24 text

ⓒ atama plus Inc. uniform デザイン原則 ②自分の状態がわかる 25 Wow students.を支えるatama plusのデザインシステム 生徒の取り組みに対して 常にフィードバックがあり 成長を実感できるように デザインする

Slide 25

Slide 25 text

ⓒ atama plus Inc. uniform デザイン原則 ②自分の状態がわかる 26 Wow students.を支えるatama plusのデザインシステム 良い例: 自分がいままでできるようになったことが 常に確認できる

Slide 26

Slide 26 text

ⓒ atama plus Inc. uniform デザイン原則 ②自分の状態がわかる 27 Wow students.を支えるatama plusのデザインシステム 良い例: 手こずった問題ができたときや 目標達成したときに 先生から声をかけてもらえる

Slide 27

Slide 27 text

ⓒ atama plus Inc. uniform デザイン原則 ②自分の状態がわかる 28 Wow students.を支えるatama plusのデザインシステム 要注意: 生徒が気づかない間に 学習状況が変わってしまう

Slide 28

Slide 28 text

ⓒ atama plus Inc. uniform デザイン原則 ③自分から進められる 29 Wow students.を支えるatama plusのデザインシステム 主体的に学んでいけるよう 生徒が自分で選択する感覚を 大切にします

Slide 29

Slide 29 text

ⓒ atama plus Inc. uniform デザイン原則 ③自分から進められる 30 Wow students.を支えるatama plusのデザインシステム そのために 選択肢と選択に必要な情報を提供し 生徒が意思決定できるように デザインする

Slide 30

Slide 30 text

ⓒ atama plus Inc. uniform デザイン原則 ③自分から進められる 31 Wow students.を支えるatama plusのデザインシステム 良い例: 学習開始までの導線には 複数の教材を提示し 選択の幅をもたせる

Slide 31

Slide 31 text

ⓒ atama plus Inc. uniform デザイン原則 ③自分から進められる 32 Wow students.を支えるatama plusのデザインシステム 要注意: 勝手に学習目標が 決められてしまう

Slide 32

Slide 32 text

ⓒ atama plus Inc. uniform デザイン原則 33 Wow students.を支えるatama plusのデザインシステム デザイン原則は 何を良いデザインとし どう実現するかの基準

Slide 33

Slide 33 text

ⓒ atama plus Inc. uniform デザイン原則 34 Wow students.を支えるatama plusのデザインシステム uniformでは どう実現するかの「手段」も 提供する

Slide 34

Slide 34 text

uniform ガイドライン

Slide 35

Slide 35 text

ⓒ atama plus Inc. uniform ガイドライン 36 Wow students.を支えるatama plusのデザインシステム デザイン原則を プロダクトに適用するため FOUNDATION UI PATTERN COMMUNICATION などをガイドラインで提供

Slide 36

Slide 36 text

ⓒ atama plus Inc. uniform ガイドライン FOUNDATION 37 Wow students.を支えるatama plusのデザインシステム

Slide 37

Slide 37 text

ⓒ atama plus Inc. uniform ガイドライン FOUNDATION 38 Wow students.を支えるatama plusのデザインシステム

Slide 38

Slide 38 text

ⓒ atama plus Inc. uniform ガイドライン FOUNDATION 39 Wow students.を支えるatama plusのデザインシステム

Slide 39

Slide 39 text

ⓒ atama plus Inc. uniform ガイドライン UI PATTERN 40 Wow students.を支えるatama plusのデザインシステム

Slide 40

Slide 40 text

ⓒ atama plus Inc. uniform ガイドライン UI PATTERN 41 Wow students.を支えるatama plusのデザインシステム

Slide 41

Slide 41 text

ⓒ atama plus Inc. uniform ガイドライン UI PATTERN 42 Wow students.を支えるatama plusのデザインシステム

Slide 42

Slide 42 text

ⓒ atama plus Inc. uniform ガイドライン UI PATTERN 43 Wow students.を支えるatama plusのデザインシステム

Slide 43

Slide 43 text

ⓒ atama plus Inc. uniform ガイドライン COMMUNICATION 44 Wow students.を支えるatama plusのデザインシステム

Slide 44

Slide 44 text

ⓒ atama plus Inc. uniform ガイドライン COMMUNICATION 45 Wow students.を支えるatama plusのデザインシステム

Slide 45

Slide 45 text

ⓒ atama plus Inc. uniform ガイドライン COMMUNICATION 46 Wow students.を支えるatama plusのデザインシステム

Slide 46

Slide 46 text

ⓒ atama plus Inc. uniform ガイドライン COMMUNICATION 47 Wow students.を支えるatama plusのデザインシステム

Slide 47

Slide 47 text

ⓒ atama plus Inc. uniform ガイドライン 48 Wow students.を支えるatama plusのデザインシステム これらの「基準」と「手段」を ガイドラインとし 社内の誰でも アクセスできるように提供

Slide 48

Slide 48 text

ⓒ atama plus Inc. uniform ガイドライン 49 Wow students.を支えるatama plusのデザインシステム uniformは どう運用されているのか

Slide 49

Slide 49 text

uniformパーティ

Slide 50

Slide 50 text

ⓒ atama plus Inc. uniformパーティ 51 Wow students.を支えるatama plusのデザインシステム デザインシステムと プロダクトが乖離し 「使えないデザインシステム」 になることを避けるため 更新し続ける必要がある

Slide 51

Slide 51 text

ⓒ atama plus Inc. uniformパーティ 55 Wow students.を支えるatama plusのデザインシステム uniformは uniformパーティという組織で運営 uniformパーティのコアな役割は 「判断する」こと

Slide 52

Slide 52 text

ⓒ atama plus Inc. uniformパーティ 56 Wow students.を支えるatama plusのデザインシステム デザイナー2名 エンジニア3名 で専門性を活かし、 適切な人から情報を集めながら その時の最適を判断する責任を持つ

Slide 53

Slide 53 text

ⓒ atama plus Inc. uniformパーティ 57 Wow students.を支えるatama plusのデザインシステム uniformが浸透し 全員が当たり前に使えるように 取り組む役割も持つ

Slide 54

Slide 54 text

ⓒ atama plus Inc. uniformパーティ 58 Wow students.を支えるatama plusのデザインシステム uniformの改善のリード uniformに対する質問への解答

Slide 55

Slide 55 text

まとめ

Slide 56

Slide 56 text

ⓒ atama plus Inc. まとめ 60 Wow students.を支えるatama plusのデザインシステム atama plusでは Wow students. = ユーザーファーストを デザインシステム uniformで 実現している

Slide 57

Slide 57 text

AIで、一人ひとりに、最短で「わかる!」を。