EIJI YAMAMOTO
UI/UX D e s i g n P o r t f o l i o 2 0 2 1
やま もと
えい
じ
山本 瑛士 芝浦工業大学大学院 1 年 /UX デザイン研究室 茨城生まれ / 出身
情報デザインを専攻したのち、UX デザイン研究室で 医療機器の UI デザインの研究を学部から 2 年間行う。 画面外の体験を含めたデザインに興味を持つように。
My Mind
- わたしの強み
Biography
- わたし年表
大学 1 年 大学に入学して UI/UX デザインに出会い、面白さを知る
たりなさを武器に。
大学 3 年 Bravesoft 株式会社
デザイナーアルバイト
産学協同研究は自分の能力だけでは目的に達せない大きな壁でした。 しかし、知識ゼロのスタートでも複雑な課題を関係者全員が互いを 巻き込み進んでいくことで解決し、成長してきました。
変わり続ける中で、決まったやり方に囚われない 多くの仲間を巻き込むデザイナーを目指しています。
(2019.8〜2020.6)
大学 4 年 産学協同研究で医療機器の UI 改善プロジェクトに参加。 全く知らない分野で開発会社側との共創で複雑な課題に 巻き込んでデザインすることにやりがいを感じるように。
修士 1 年 インターンに参加
3Day product Design コース
(2021.8)
デザイン & リサーチコース
(2021.8)
Creative Workshop(UI コース )
(2021.8)
Desingner Internship
(2021.9)
就業型インターン ２週間
(2021.11)
Index 4Works & 2others
UI/UX design
UI Redesign
01/CAPMEAL
02/Manable オンライン学習支援サービス ユーザーテスト & リデザイン
自家製ミールキットで平日の 料理を楽しみにするアプリ
Workshop & Novelty
Miro Design
Illust/UI Work
03/ インタフェ 6,7
04/UX Rocket
00/Other
学生企画 UI/UX ワークショップ メンター＆運営＆ノベルティ
千葉工業大学主催 UX Rocket 作品パネル展示会場設計
個人制作など
2021年 夏季 Cookpad
インターンシップ課題
UI/UX Design
UI/UX Design /01
01. Capmeal
個人
作品
自家製ミールキットから料理を探すレシピアプリ cookpad 3DAY Internにて提案。「ひとり暮らしの仕事から帰ってから料理するの は億劫・作り置きは 飽きる」などのひとり暮らしがもつ課題から生まれました。
ISSUE
実際にひとり暮らしにインタビューを行い。ペルソナを設定。 Pain
Persona 上村 弘樹
25歳 (一人暮らし歴 : 3年)
UI/UX Design /01
・忙しい時期は平日に料理する時間も取れない。
・休日に調理し、ラップをして冷蔵庫に入れている。
・料理は好きだが、凝った料理は作りたいとは思わない。
-1
作りおきによって食べることが義務に。
休日に平日の分を作りおきするが、それが一方でその日食 べたい気分じゃなくても、義務的に食べないといけない。
“ 作りおきは日が持たないし、数日続くと
飽きてまた今日も食べないとか...と思う。 Mon
-2
Tue
”
Wed
長期的には作りおきのレパートリーが尽きてしまう。 ひとり暮らしの作りおきはレパートリーも少なく、毎週作っていると
最終的には同じ料理をループして食事自体の楽しみが減ってしまう。
IDEA
価値仮説を立てて、ペルソナの料理の時間を楽しくするアイデアを発散。
自家製ミールキットで自由度と手軽さを得る発想。 休日に下準備
焦らずに食べ切れて、腐らす心配もない
残り
3日16時間
+2
ミールキットの組み合わせで新しい料理の発見
UI/UX Design /01
+1
平日に調理
週末に自炊ミールキットをつくり、平日の夜の自分が食べたい料理を作っておい たミールキットの組み合わせですぐに見つけられる。平日の調理の手間を省き つつも「食べたい」を犠牲にしない新しい提案。
UI Design 休日
COOK
下準備でベタベタな手でも見やすく
UI/UX Design /01
音声認識による単純な操作によって、ユーザーがスマホの画面を
汚すことなくレシピを見れる操作感をデザインしました。
「材料」
Select Mealkit
何が作れるかをイメージしやすく ホーム画面は必要最低限の情報量で、完成の料理をイメージ
できるように”ないといけない”情報のみに制限しました。
「次」
平日
UI/UX Design /01
パッと違う料理に変えられる気軽さ
ミールキットの組み合わせを簡単に変更できるようなデザイン 当日にユーザーが気まぐれでメニューを変えて発見できます
慣れないミールキット作りをフォロー
冷凍保存に向いた食材など、ミールキットを始めるときに初心者の
人が安心して料理できるような体験をデザインしました
Brush UP
AFTER
最初に料理の完成のイメージ湧かない
完成のイメージと組み合わせの幅がわかるように
UI/UX Design /01
BEFORE
1.方向性の違う完成品をトップビュー
2.組み合わせでつくれる料理のパターン数
3.下準備にかかる時間や保存方法
アプリ起動後、つくりたい！と思うように。
monetize Business Model
Business Development 更なる体験の発展
材料
都市近郊の生産者( if Cookpad Side) タイアップ企業
代金
ユーザー
探索
広告料
利用データ
レシピ
近所のスーパーとの連携 運営
売り上げ
蓄積・分析
運営・教育
運営会社
運営補助
レシピ
作成
Capcook
(料理研究家)
スーパーが売り切りたい食材を中心に
まとめたものを作り置きセットとして
販売、アプリ側では作り置きセットで
紹介しスーパーで受け取れるように。
UI/UX Design /01
月額
利用料
情報提供
Cookpad社の事業CookpadMartの冷蔵
庫ステーションで食材受け取りを可能に。
ミールキットの冷凍/冷蔵保存を活かし
新鮮な食材を美味しく平日に調理する。
UserTest & Improvement/02
UserTest & Improvement
02. Manable
ペア
作品
オンライン学習サービスのユーザーテスト 開発会社の依頼で研究室の先輩と取り組んだ、「Manable」のユーザーテス ト &UI改善プロジェクトです。テスト設計から改善UI提案まで一貫して責任 をもち、実現性と緊急性のバランスを考えることのできたいい経験でした。
Overview 仕組み
とは 各生徒の理解度や学習過程の“見える化”、授業内容や
指導方法の見直しに繋がるオンライン学習支援サービス。
UserTest & Improvement/02
Product Analyze
誰に使われて、どんな期待値なの？ 想定ユーザーやプロダクトの現場(学校)の導入事例を
調査しプロダクト使用前の前提状況を明確化しました。
ITスキルは普段は必要とされないユーザー
GIGA SCHOOLの予算で導入されがメインは教科書
公教育で社会科の先生
教科書と連動した補助的な立ち位置 会
社
3年
学
Interview
“ 現場の先生から操作方法の問い合わせが多く、
よく訪問してご説明する機会がありますね UserTest & Improvement/02
開発会社への聞き取り調査から、コアとなる課題を明確化
”
「導入されたが初期設定でつまづき使用率が上がらない」という核となる課題発見 Inerview
サービス開発責任者 プロダクトマネージャー
役職
導入してくれた学校の特徴： ・私立が協力的
・都立になるともっと厳しい状況になる。
現場から出ている不満： ・初期設定が難しすぎる
→これは実際に現場に営業が
出ていってヘルプしている
現状の初期セットアップ完了率：
開発側が感じている不安： ・導入は予算や世の中の流れで
スムーズに進んだが、今後
実際に使ってもらう必要がある。 ・問題が初期段階で発生している
のはわかるがそれ以上のことが
明確にわからない。 利用してくれるユーザーの特徴： ・教育熱心の先生がほとんど
・教科書を進めるだけでも大変なの
で、機械が苦手な先生は昔ながら
の方法でスキャンして自作している
10%
どんな経緯で導入してくれる学校が多いのか： ・教科書を購入すると付属でもらえるため
認識しないで購入している人も多い。
・指導教員
・学年主任
・クラス担任
・副担任
デジタル理解度 25代まで:デジタルネイティブ(息をするようにできる)
26歳~41歳：Y世代(仕事に入るタイミングで身近)
・個人差が一番出る世代なのでは？
・仕事内容や家庭環境に大きく依存する
42歳〜50代
・アナログで慣れた仕事(経験値がある)→デジタル化に慣れる
・逆言えば、この世代は知識0がマジョリティ
TEST GOAL ユーザーテストで何を知りたいのか、そのためには誰に聞くのかを設定しました。
Goal
COOK
初期セットアップ率を向上させる
わからない
追加機能 コア機能 初期設定 UserTest & Improvement/02
導入時 UT
Segment
学校で導入時に頼られる人は誰か？
情報の教師
若手の教師
学年主任
社会科教師
熱心な教師
User Test
Lostness 定量調査
ユーザーのプロダクト操作したときに
タスクを完了しやすいかの定量化 task4 損失 あり
2
視線計測
&
ユーザーテスト
損失メトリックス分析
UserTest
r
e
e t
& Imp ov m n /0
定性調査
-損失メトリックス
テスト人数：5名 (大学生)
担当
：シナリオ設計,モデレーター
task1
教師新規登録
task2
クラス新規作成
task3
task4
生徒登録
生徒登録(一括)
画面収録のデータから、4つ各タスク中の画面遷移数と画面の種類、
今回のテストでは「改善のインパクトの大きい課題の選択」と「改善
最短距離のを基にどれだけユーザーが苦労したかを定量化しました。
提案へと繋がる課題の分析」が必要になると考えて手法を選択しました。
これにより、今回は生徒一括登録画面の改善を決定しました。
生徒登録(一括) -- -- -- -- --
students CSV
CSVファイル作成
アップロード
テンプレートがあるとは思わなかった。 この画面で何をすればいいの？ CSVファイルって何ですか？(全員)
ユーザーテストの結果から現在のUIデザインはユーザーが初めて
生徒一括登録画面に訪れることへの考慮が足りないことがわかりました。
?
students CSV
視線計測の分析からユーザーが“CSV書式について”ボタンを見ていなく、
テンプレートファイルの存在自体に気づいていないと考えられる。
UserTest & Improvement/02
テンプレートDL
Improvement Concept
CONCEPT
UserTest & Improvement/02
見たまま従うまま自然に生徒登録(一括)ができる
生徒一括登録画面の改善 今回は生徒一括登録画面をデザインした。
Point
①manableだけでなく、Excelなどの外部サービスによる作成が必要だと伝わる
②それぞれの用語がわからなくても、何をすれば生徒登録が完了するのか理解できる
③初めて遷移したユーザーが上から順番に進めるだけで完了できる
Final Design
改善前のUI
Excelで何かすることはわかる ファイルを開く 「なるほど、これでリストを作るのか！」
!
Point1
"この画面で全てを伝えようとしない”
1.グループ指定
2.ログインIDの種類指定
3.ファイル選択
4.CSVの書式について
5.テンプレートダウンロード
!
実際の行動 1.テンプレートダウンロード
2.ファイル作成
3.ファイルアップロード
4.グループ指定
5.ログインIDの種類指定
Point2
“UI上の表示を実際の行動に合わせる” UserTest & Improvement/02
1
2
Workshop /03
Workshop＆novelty
03. インタフェ
Group
Project
学生主体ワークショップUI勉強会
HCD(Human Centered Design)プロセスを実践し、学内の学生にチームで体 験してもらい、理解を深める。さらにコロナ禍で失われた上下の繋がりを作る ことを目的とし活動しました。
Point
学生のみで企画・運営
4月
5月
告知
説明会 ・数回に渡って
・学内広告展示
zoomで実施。
6月
7月
キックオフ
実施期間
・数回に渡って
zoomで実施。
・メンターとして
8月
9月
最終成果発表
次年度の
(OB・OG)
方針設計
サポート
Workshop /03
Point
立場を変えて2年間携わる
学部3年
修士1年
参加者として
運営&メンターとして
4名１チームでHCDプロセスを通じて
運営とメンターの２役を担当しました。
「ちょっぴり得する」をテーマに
キックオフ企画やノベルティ制作を通じ
サービス提案をしました。
て運営の難しさを学びました。
Workshop /03
メンターとして担当したチームの作品
メンバー：3年生4名 担当：メンター,進捗管理 制作期間：2021.5〜8(約2ヶ月)
ISSUE
自分の中にやりたいことがない 急に休みになって時間ができても、いざやりたいことがない
気づけばYoutubeにSNSで一日が終わって後悔してしまう。
他者との比較や評価を意識しない SNSや人気のある世間的に良いとされて評価される時間の
過ごし方ではなく、自分が本当にやってみたいと思う過ごし
方を見つける一歩目をサポートする。
workshop /03
WHAT’S SERVICE
メンターとしての動き メンターの立場で、3年生に答えを教えるのではなく壁にぶつかった時に
どう軌道修正するのかを学んでもらうような立ち回りを意識しました。
05/15
豊な おうち時間 1
刺激のない環境で、触発される
ような偶発的な機会を得られる時間
UX Design/01 Work shop /03
Week1
2
とは
!
第二の落とし穴
“ペルソナが曖昧” 要件定義でチーム内の議論が止まりました。
誰を対象にしていて、その人はどんな人なのか
今回は対象にしていない人はどんな人なのかを
図で見せて共有認識を揃えました。
Week2
Week3
3
みんな一日中だらだらして
終わっている。
課題として、扱えるような
出来事が起きていない。
4
!
第一の落とし穴
“プロセス通りやれば言い訳ではない” 何を目的としてそのプロセス/フレームワークを
用いるのか、改めて3年生に何で自分たちが止ま
ってしまっているのかを考えさせる。
Week4
Thema
Week6
Week7
08/01
7
8
Workshop /03
! 5 Week5
第三の落とし穴
“あったらいいなはいらない” つい、アイデアが出てきて機能や情報を
盛り込んでしまっていました。そのため
このアプリに本当に必要な機能を定義し
やらないを定義するよう助言しました。
OB・OGからのフィードバック 作って終わりではなく、さらに
よくするためのヒントをもらう。
運営メンバーとして自分の成果物
Workshop /03
ワークショップキックオフの体験設計を担当しました。初めてのオンラインで の開催でもあったため、印象に残り始まったことを体感できるよう考えました。
ウェルカムボックス welcome box ワークショップのキックオフに 参加者へ配布した
ウェルカムボックス。オンライン開催になり、
チームメイトとの交流の機会が少なくなるため
印象に残るものにしました。
招待カード inviting card
参加者によりUXプロセスに興味を持ってもらえるように
プロセスを擬人化したデザインのオ リジナルキャラクターを
作成し、招待カードをデザインしました。
Wireframe
Research
CJM
当日のアイスブレイク司会進行 MC
キックオフ当日、アイスブレイクの司会進行を
担当して3年生がチームと打ち解けられるように
サポートしました。
Design
Usertest
Workshop /03
Persona
千葉工業大学 主催
Miro design/04
Miro Space Design
04. UX ROCKET
Group
Project
Project Startpoint
リアルのパネル展示のよさが出せない..。 オンライン開催が2021年で2回目だが、オフラインでのパネル展示と異なり パネル前での会話がなく、展示者個人の”らしさ”が伝わりづらい点がある。
Miro Design/04
Team Member
Schedule
運営本体 千葉工業大学
4
人
芝浦工業大学
イラスト チーム代表
会場設計
10月
11月
12月
week 01：10/19〜
week 02：11/01〜30
week 03：12/12
・キックオフ
・コンセプト定義
・作品１次募集開始
・ラフ案作成
・イラスト作成
・パネルエリア体験設計
・千葉工大との中間共有
・募集パネル展示準備
・イベント開催日
Tutorial Area
Miro design/04
情報を制限して、1つずつ理解する導線設計
Panels Area
展示者のデザインへの想いを伝える情報設計
振り返り
イベント当日
チームの動きを可視化することでチーム内の
コミュニケーションを円滑化させました。
チーム代表として、パネル展示会場のプロジェクトのタスク管理を
Googleスプレッドシートを用いて進捗を見れる仕組みを作りました。 Result & Feedback
多くのイベント参加者に展示会場を利用してもらえた firebaseを用いてconpassのイベント申し込み人数とmiro会場会場訪問 者数を記録しました。反省点から次回へ活かせるようにしました。
Motto
展示者と参加者の会話の輪が生まれるようにする 今後はmiroのコラボレーションできるメリットを活かして、 双方向のコミュニケーションができる体験設計をしたい。
Miro Design/04
Good
Other/00
50 DAYS UI Chalenge
00. Daily UI
Solo
Project
50日間継続して、UIのアウトプット
UIデザインの引き出しを増やし、手を素早く動かせるようになるために
行っている。既存のサービスのUIトレースや考察も必ずセットにしました。
64px
Button
なぜか、素人っぽいUIになる..。
何が悪いのかがイマイチわからない
32px
ガイドラインと原則を意識した
UIデザインをできるようになる。
Other/00
STUDY PROCESS 1.Input
2.Design
3.Feedback
参考アプリのUIのマージン、ピクセル数を調べる。
なぜこのデザインなのか考察し、トレースを行う。
テーマとターゲット、情報の定義を行う。
誰のためのデザインかを意識してデザイン
制作したUIを人に見てもらい、率直な
意見をもらって客観的にUIを評価する。
既存UI分析
UIトレース
ターゲット/情報定義
最終デザイン
レビュー
UX Design/01
UX Design/01
Other/00
00. illsutration 好きなもの
Solo
Project
自主制作で身の回りの好きなものをイラストで描きました。シリーズ化して
自身のInstagramで投稿して、苦手意識のあるグラフィックを練習しています。
2D Illustration
My Favarite 好きなものを。
気ままに。
イラスト。
Other/00
Portfolio Logo お互いの色を尊重しながら、互いの境界線を超えて影響を
与え合うデザイナーになる。在りたい姿を表現しました。
THANK YOU.