1.
記事の積読アプリ
能動的な「学び」体験を助ける
慶應義塾大学文学部4年富田龍輝/TatsukiTomita

2.
サービスについて
とは...
▷前提
読んだ/読みたい記事を「URL」で積読することが
できるWebサービス
①記事蓄積機能（積読）
1.URLを貼り付けて、「つむ」を押す 2.記事が積まれ、蓄積される
②コレクション機能（カテゴリー化）
2.カテゴリーごとでまとめる
„} コレクション（カテゴリー）を作成
TSUMIKIという既存サービスをスマホアプリにRe-design
すること
▷テーマ
▷プロセス
01.ペルソナ 02.カスタマージャーニー 03.ビジネスモデル
04.wireflame&Design 05.ユーザーテスト 06.修正＆モーション

3.
ペルソナ
氏名：山本由紀子 氏名：豊本和樹
職業：大学3年生 職業：某会計事業の
スタートアップ
学部：法学部
担当：カスタマーサクセス
年齢：21歳
年齢：25歳
趣味：宝塚を見ること
趣味：キャンプ
補足： 補足：
国際系のボランティアサークルに所属している。
サークルの代表を勤めている。有名な企業の代表などの
ツイッターをフォローし、インプットしている。
本を読む時間はあまり取れないため、効率よくインプット
できる記事などを最近読んでいる。
2Bのスタートアップでカスタマーサクセス担当として
業務に関わっている。自分の領域以外でのMTG参加も
あり、広いオーナーシップと知識が必要とされている。
インターンシップも自分の下に何人かおり、学びの共有
を求められている。（育てるという文脈でのマネージ
メントも求められてきた）

4.
カスタマージャーニー
読む
行動
心理
課題
保存 蓄積 共有 発見
学校に行く電車の中で、ツイッ
ターで見つけた記事を読む。
読み終わった記事を消す。 スラックにカテゴリーごとでスレッ
ドを立てて、URLを保存している
コミニティーのComチャンネルでよ
かった記事を共有する
いい記事を見つけるためにネット
サーフィンしている。
著名人のツイートを見たりしている
いい記事を簡単に見つけたいが見つ
けられない
自分の興味ある・担当領域に関わる
記事を簡単に探したい/見つけたい
業務に関わるキーワードで検索をか
けている
学びを他の人に共有して学びを深め
てもらいたい
他の人に共有して学びを深めたいが
できない。共有する場所がない。
学び続けるモチベーションが続かな
い。
優秀・尊敬する人がどんなもので
inputしているのか気になるがわから
ない
学ぼうとしている自分の姿勢を誰か
に褒めてもらいたい
あの人優秀だなと思っているが普段
どんなものでInputしたりしてるんだ
ろう
他の人（尊敬する人とか）の読んで
いる記事に興味があり、共有された
記事を読む
インプット用にブックマークをつけ
て保存している
読み返す・共有するために前の記事
を探す
スラックのDMで保存するのがめんど
くさい。
過去の記事を読み直したい
検索性が低いため、過去の記事を見
つけることができない。
カテゴリーごとに蓄積したいができ
ない・手間がかかる
読み終わった達成感がある。
学んだことを自分のことでまとめた
いかもしれない。
学んだことを自分のことでまとめた
いかもしれない。
いい記事だったから他の人にも共有
したいな
今は読めないが後で読みたい。
読んだことを が
されない（自己完結だけ）
賞賛してもらいたい
言語化するためにどこかでOutputし
たいができない
後で読み直したいが忘れている
保存する場所がない（あるがよくな
い）
読みたいと思ったが、時間がなくど
こかに残しておく
いい記事であった場合はまた読み直
す、 にスラックのDMに
貼り付けておく
共有するため
電車の中では立っていることがほ
とんどのため、携帯で見れるnote
などの記事がいい。
読みきれないものもあり、また読
み直そう
時間がなく、記事を読み切ること
ができない。
読みきれなかったものがタブに
残ってしまう
参加しているコミニティーのある
人がスラックで共有していた記事
を読む。
読み切ることができず、タブを残
している。

5.
問題と仮説（課題）
読む
言語化
共有
継続
発見
保存
蓄積
i
n
p
u
t
.
outp
u
t
.
読みたい記事・読み途中の記事を残しておけない
仮説
・一箇所にまとめて保存できない/場所がない
・めんどくさい（工数が多い）
・・・問題 ・・・仮説（課題）
モチベーションが続かない
仮説
・承認欲求
・他者から
・自分自身で
・刺激がない
・一緒に頑張る人がいない
・自分より頑張っている人がいない/見えない
読みたい/読み途中の記事の存在を忘れている
仮説
・想起する機会がない（思い出せない）
・学習へのモチベーションが下がっている
・読んだもの/読み途中のもの/読んでいないものがわからない
・たくさんありすぎる
・忘れている
仮説
・上司や周りの優秀な人のインプット物が見えない
・興味があるが言えない/聞けない
・自分の周りにいない
以前読んだ記事を再度見つけることができない
仮説
-保存していない（＝場所がない）
-保存する場所があるが、検索性が低い
-名前を思い出せない
-検索しても出てこない
-他の記事がとても多い
記事を共有できない/しない
仮説
・共有したくない（見られたくない）
・見られたくない人がコミュニティに存在する
・共有する場所が適切ではない
・学びを共有する場所がない
・不適切（業務系のやりとりがメイン）
・学びだけを共有しあう場所が欲しい

6.
ユーザーストーリー
氏名：山本由紀子
氏名：豊本和樹
職業：大学3年生
職業：某会計事業のスタートアップ
学部：法学部
担当：カスタマーサクセス
年齢：21歳
年齢：25歳
趣味：宝塚を見ること
趣味：キャンプ
・読みたい記事が溜まっていて手をつけてない
・いい記事を自分で見つけるのが難しい
・インプットしなきゃだがモチベーションが続かない
・チームメンバーに共有したい記事があったが見失った
・いちいちコミュニケーションツールで共有するのが
めんどくさい
Pain
Pain
URLで簡単に積読できる
通知で学びを逃さない
新しい学びが見つかる
自動で記事が共有される
自分・友達の学びが見える
カテゴリごとに保存可能
学生
社会人
記事を見つける
Push通知で想起
積読した記事が共有される
ステータスや頑張りが可視化される
友達・知り合いの読んだ記事を見れる
読み終わった記事を記録
自動的にフォロワーに共有される
カテゴリごとに保存する
URLで簡単に保存
URLだけで保存できて楽
気になる記事をとりあえず
保存できる
以前保存していた記事のリマ
インドがきて思い出せた
友達の頑張りが刺激になる
毎日自分も頑張ってるんだな〜
カテゴリごとに保存だから
見つけやすい！！
あの人普段こんな記事読んでる
んだ。読んでみよう
自動で共有されるから自分で
共有する必要がないぞ

7.
コンセプトとビジネスモデル
「遊び心」
学びをコツコツと積み上げ
なりたい自分を描いて欲しい
その助けとなるサービスに
学びを積み上げる
学ぶ楽しさを再認識してほしい
誰でもないたい自分になる権利が
ありそれをサポートするサービスに
学びに夢中になる
大人だからと限界を決めないで欲しい。
逆説的に「まだまだ子供」
なんだと気づいて欲しい
学びの可能性を広げる
Color
Stroke&Shape
積み木をイメージ
子供っぽさ/Toy感

8.
UI
<ログイン画面>
サインアップ
電話 / メールアドレス
認証コード
誕生日
アカウント作成
完了（Feedback）
ユーザーネーム（ID）
パスワード
サインイン
ID・パスワード
サインアップ
電話 / メールアドレス
認証コード
誕生日
アカウント作成
完了（Feedback）
ユーザーネーム（ID）
パスワード
サインイン
ID・パスワード
▷情報設計と画面遷移
アプリの世界観である
「Toy感」を伝わるFirst
Viewに。
外部アプリ・アカウント
でのログインも用意
Inputの要素も世界観を
演出するために、Stroke
を使用している
細かな部分にブランド /
ユーザーファーストが反映
されると考え、FeedBack
画面も用意した
UXをしっかりと意識し
エラーメッセージを用意
してデザインからユーザー
体験を考え画面作成に挑ん
だ
MyPoint
ユーザーの最初の体験であり離
脱を防ぎたかったため入力情報
を厳選した。
その中世界感や遊び心をデザイ
ンの要所に使用した。
ブランドイメージ「Toy」
「Pop」な印象を伝える
エラーメッセージを用意した
FeedBack（完了）を用意した

9.
UI
<チュートリアル>
完了
チュートリアル
スキップ
はじめる
最初の画面
①URLで保存できる
②読書状況を管理できる
③記事をシェアできる
▷情報設計と画面遷移
「URLだけで保存ができ
る」ことだけ伝わるよ
うにタイトルの文章や
イラスト作成を工夫した
読書情報を管理できると
いうことが伝えられる
文章設計とイラスト作成
SNS的な要素が伝えるよ
うなカードのイラストを
使用。重要なアクション
には「黄色」を使い、他
のボタンと差別化した。
My Point
ユーザーの最初の体験であるこ
とから情報は最小に工夫した。
イラストを中心にビジュアル的
に伝わるよう作成した。
最低限の機能が伝わるよう情報
を選定した
文字情報は基本読まれないた
め、できるだけ簡潔に
イラストだけで伝える工夫/ブラ
ンドイメージ

10.
UI
<記事保存>
記事を追加（Plus Button）
記事追加メニュー
URL Input
Category
Symbol
Color
Open / Private
Read Status
Memo Input
追加完了
カテゴリ追加メニュー
完了FeedBack
▷情報設計と画面遷移
完了
元にもどす
記事を追加しました
検索性を上げるためにカ
テゴリごとで保存できる
ように設定
カテゴリの追加もできる
カテゴリは「Shape」と
「Color」で整理できる
追加後はアプリから
FeedBackを受け取る
言語化を助けるため、メ
モができる領域も用意し
た
PlusButtonからモーダルで表示す
る。より目立つホームボタン周辺に
配置
MyPoint
できるだけ少ない工数でタスク
を完了できるようにデザイン
ブランド・機能的にも
「Shape」と「Color」を採用
できるだけ一画面でタスク完了
するようにデザイン
視覚的に識別できるように図形と
色でカテゴライズできる

11.
UI
Home画面（記事一覧）
各カテゴリを選択
記事一覧（カテゴリ内）
記事を新しく追加Button
検索領域
記事を選択 記事保存
記事閲覧
▷情報設計と画面遷移
<記事閲覧>
作ったカテゴリに記事が蓄
積される
記事はHomeから見ること
ができる
一階層下がることでタブが
消えるため、こちらからも
記事が追加できる
一覧性を高めるために、画
像とタイトルが見れるUIを
採用した
できるだけ画面が大きく動
くことがないように、アプ
リないで記事が見れるよう
にした
数が多くなればキーワード
検索で見つけたい記事が簡
単に見つかる
My Point
見やすい（一覧性 / 検索性）を
意識してUI設計をした
記事を見つけやすいようなカー
ド型のUIを採用
進捗が見れるように可視化

12.
UI
記事一覧画面
記事一覧画面
該当記事閲覧画面
該当記事を長押し
編集Button
記事を閲覧
ボタンをスライド
消去と完了エリア出現
消去する 記事消去
完了する
学習完了
学習完了
▷情報設計と画面遷移
<記事編集>
パターン①
パターン②
学習において「達成感」が
重要な要素と考え、達成感
を感じることができる操作
を採用
同じく達成感や喜び
を感じられるように
FeedBackを用意した
学習達成の操作を行った後に
画面中央部に出現する。
My Point
「達成感」を意識した操作方法
とUIデザインを使用した
スライドによるステータスを更
新するUIデザイン
長押しからカードを移動させる
操作方法を採用
達成感を感じられるような
FeedBackを用意

13.
UI
タイムライン画面
進捗状況を確認
フォローした人の共有された記事
学びの軌跡を確認
閲覧
保存
応援
▷情報設計と画面遷移
<TimeLine> <記事編集>
<積読>
<学習完了>
記事を保存したタイミングでフィー
ドに反映される
学習完了したタイミングでフィード
に反映される
友達の学習に対して
「応援」することが
できる（いいね機能）
学びの進捗状況を可視化すること
で現状を把握し、学びを促進する
「積み木」のように頑張りが蓄積さ
れていく / その様子がみれることで
学びのモチベーションをあげたい
TimeLineから気になっ
た記事をそのまま読むこ
とができる
友達の共有された
記事を保存するこ
とができる
My Point
他の人の投稿が見えることでモ
チベーション・新たな学びに繋
がる
更新性が高いためTimeLIneのよ
うな形式を採用した
いいねだと少し寂しい印象のた
め「応援（旗）」を使用
色で「保存」「学習完了」を分
けるようデザイン
My Point
自分の学びの軌跡を見ることで
モチベーションをアップさせる
可愛いポップなUIで思わず貯め
たくなるような動機付けにも
なってほしい
進捗状況を可視化
今までの頑張り/学びの軌跡を
可視化

14.
Thank you for Reading!!