SlideShare a Scribd company logo
Civictech Challenge Cup U-22 Workshop #2
UXが重要と⾔われる
理由を知ろう
UIとUXの違いはなんとなく分かったけど…
.どこから始めたらいいの?
チームにデザイナーがいないけど、
誰ができるの?
Name: ⽔野真⼦
@macotien15
mizmako
ブログライター
広報・運営のサポート

2017.9 カナダ・バンクーバーに移る
2018.11 現地ソフトウェア開発企業に就職
UX/UIデザイナーとして働く
Web制作会社Webデザイナーとして約4年勤務
UX/UIデザイナー
Experience:
UXの重要性を知る


普段の⽣活でもUXを意識してみる
UXを意識した制作の進め⽅
Goal 本⽇のゴール/⽬的
https://twitter.com/motcho_tw/status/870589211832795136
分からないことは聞いてください
普段の業務
受託案件のWebアプリケーション/モバイルアプリ UX/UIデザイン担当
クライアント
何ができる機能?
何で必要なの?
機能が追加されることで
何が変わるの?
既存機能への影響は?
開発コストは?
ユーザーフローの確認
条件分岐の確認
(ユーザーがAだった場合、
ユーザーがBだった場合の
フローの違いなど)
動作の⼀貫性
画⾯構成
コンポーネント管理
(ボタン/フォーム/アイコン)
カラー、フォント
スタイルガイド作成
提案する
要件定義 UIデザインUXデザイン
こんな
機能が欲しい!
.ユーザーにとって
分かりやすい、使いやすい
プロダクトってどんなもの?
使い慣れたアプリから
UXを捉える
LINE Facebook
メッセンジャー
WhatsApp
2019.05記事
LINEのUI変更でレビュー⼤荒れ機能
多すぎ?「元に戻して」の声も
https://www.itmedia.co.jp/news/
articles/1905/10/news073.html
2017.06〜
メニュータブ カスタマイズできるって知ってる👀 ?
「設定」で⾃分の好きな機能
を表⽰するように、変更する
ことができる
海外で使⽤する場合は、
「ニュース」「ウォレット」
機能はなし。
「オープンチャット」も⽇本
国内ユーザーのみ。
メニュータブ メニューの数が減ってる👀
メニュータブ 他のアプリと全然違う👀
既読機能 既読をつけずに読む⽅法👀 ⁉
トークルームを⻑押し、表⽰される
モーダルウィンドウ内でメッセージ
を確認する。
画⾯をタップするとトーク⼀覧画⾯
に戻る。
LINEで既読をつけずに読む⽅法全まとめ2020
https://appllio.com/seven-ways-to-read-line-
message-without-kidoku
既読機能 既読って表⽰やめようよ👀
オフライン状態 既読を「未読」に
戻す⽅法がある
チャットルームを
右にスライドして
を選択
送信中
送信済み
送信済み
既読
既読


ログイン状態
既読機能 ルールはメッセンジャーと似てる👀
さらに詳しいログイン状態
既読
送信中
相⼿が受信、未読
既読





チャットルールを
⻑押しすると、
モーダルウィンド
ウが表⽰される
LINEとは違って、
未読のまま読むの
ではなく、既読を
未読にすることが
できる
Workshopを
しよう!
前回のおさらい
価値仮説シートを使ったワークショップのある仮説を使⽤
*2020.04.30サービス停⽌
DoggyBag-ドギーバッグ
外⾷した際の「⾷べ残し」を持ち帰る容器
ドギーバッグ普及委員会
活動に参加してくれるメンバー/飲⾷店を
募集しています
ドギーバッグを
普及させる
サービス作り
問題定義
・持ち帰りたいけど、加盟店が⾒当たらない
・⾃⼰責任カードを忘れた
・持ち帰り⽤ボックスを忘れた
・どうやって会員になるのか分からない
・衛⽣⾯が⼼配でメンバー/加盟店になれない
・持ち帰りに対する法律はどうなってるの?
・お店側の責任がどうなるのか分からない
・ビュッフェ形式の飲⾷店はどうなるの?
・持ち帰りしてる⼈が少なくて、⾔い出しにくい
・そもそもドギーバッグを知らない
Workshopの内容
・ドギーバッグを促進するWebサービス-モバイルアプリ
・Figmaを使⽤して、グレースケールで画⾯作成を⾏う
・サービス全体を考えるのではなく、機能に重点をおいて考える
・問題に対してどんなUXを提供したいのか
・時間があればプロトタイプ作成してもOK
・プレゼンは各チーム3分
・どんなふうにUXを考えて画⾯構成を
 したのか、まとめて発表する
プレゼン発表
UXの重要性を知る


普段の⽣活でもUXを意識してみる
UXを意識した制作の進め⽅
Goal 本⽇のゴール/⽬的
ご参加ありがとうございました

More Related Content

PPTX
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
PDF
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
PDF
ギリギリUXD
PPTX
デザイナーが複業でデザイナーしてる話
PDF
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
PDF
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
PDF
UXデザインをゆるく学ぶ意味
PPTX
BtoB新規事業を舵取りするためのユーザー調査
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
ギリギリUXD
デザイナーが複業でデザイナーしてる話
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
UXデザインをゆるく学ぶ意味
BtoB新規事業を舵取りするためのユーザー調査

What's hot (20)

PDF
クックパッドデザイナーが実践するユーザーファースト
PDF
デザイナーからみた仕事をしやすいディレクター
PDF
サービスにおけるビジュアルデザインの役割
PDF
風呂場で考えるUIデザイナーの未来
PPTX
Uxデザイナーがpoとして開発チームと”握る”ためにやっていること 170927
PDF
UXグラフとUXグラフツールのススメ - UX評価について -
PDF
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
PDF
How to achieve the Goals of Designing?
PDF
SketchがAndroidのUIデザインに向いているワケ
PDF
第6回.NET中心会議パネルディスカッション 0923
PDF
インターフェイスという名の付く会社が考えるUX
PDF
UIデザイナー最終防衛マニュアル
PPTX
InVision勉強会資料
PPTX
グローバルを目指すサイボウズ式UXリサーチ_UT事例発表170607
PPTX
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
PPTX
新規アプリ開発×Ucd
PDF
Webアクセシビリティが無視されすぎで気にくわない。
PDF
Framework for Designing the Goals 「モノづくりのゴールを実現するフレームワーク」
PDF
Prototype in Service Design
PDF
デザインのためのデザイン
クックパッドデザイナーが実践するユーザーファースト
デザイナーからみた仕事をしやすいディレクター
サービスにおけるビジュアルデザインの役割
風呂場で考えるUIデザイナーの未来
Uxデザイナーがpoとして開発チームと”握る”ためにやっていること 170927
UXグラフとUXグラフツールのススメ - UX評価について -
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
How to achieve the Goals of Designing?
SketchがAndroidのUIデザインに向いているワケ
第6回.NET中心会議パネルディスカッション 0923
インターフェイスという名の付く会社が考えるUX
UIデザイナー最終防衛マニュアル
InVision勉強会資料
グローバルを目指すサイボウズ式UXリサーチ_UT事例発表170607
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
新規アプリ開発×Ucd
Webアクセシビリティが無視されすぎで気にくわない。
Framework for Designing the Goals 「モノづくりのゴールを実現するフレームワーク」
Prototype in Service Design
デザインのためのデザイン
Ad

Similar to CCC Design Session (20)

PDF
体験をデザインするとは何か
PPTX
UIデザインの基本
PPTX
UIデザインの基本
PDF
UX研修「UXからサイトを考える!」2013新卒向け
PPTX
0から始めるUXデザイン(UXデザインを知る)
PDF
明日からデキるUXデザイン#1講義編
PDF
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
PPTX
DevLOVEkosien2014_itow_ponde
PPTX
SchooUX授業1/2_松本_mercari
PDF
[UX]は投げ捨てろ!
PDF
UI/UXなUXのお話
PDF
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
PDF
UXってウチのサイトに関係あるの?
PDF
はじめてのUXとUIの話
PDF
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
PDF
アプリデザインのお勉強 UI/UXのお話
PDF
Designing UX Development
PPTX
webサービスでのUXデザイン 発表スライド
PDF
赤点を減らすためのウェブサイトUI設計
PDF
UX / UIデザインって何?
体験をデザインするとは何か
UIデザインの基本
UIデザインの基本
UX研修「UXからサイトを考える!」2013新卒向け
0から始めるUXデザイン(UXデザインを知る)
明日からデキるUXデザイン#1講義編
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
DevLOVEkosien2014_itow_ponde
SchooUX授業1/2_松本_mercari
[UX]は投げ捨てろ!
UI/UXなUXのお話
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UXってウチのサイトに関係あるの?
はじめてのUXとUIの話
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
アプリデザインのお勉強 UI/UXのお話
Designing UX Development
webサービスでのUXデザイン 発表スライド
赤点を減らすためのウェブサイトUI設計
UX / UIデザインって何?
Ad

CCC Design Session