Page 1

PORT FOLIO CHIAKI HATAZAKI PRODUCT DESIGN


contents UI/UX Design cyclecharge I-motion LINE 改善

Survice Design Human Flow Project 一期一絵


HELLO !! はたざき ちあき

2015 / 03  淑徳巣鴨高等学校 卒業   Education

S ki l l

2015 / 04  芝浦工業大学デザイン工学部デザイン工学科 プロダクトデザイン領域 入学 1997/03/10

Ai

Ps

iMovie

Excel

Sketch

SOLID

Works

Birthday

海外をバックパッカーで周ること Hobby

ピンバッチ集め

考えるよりまず行動! 何事もやってみなくちゃ!


I TRIP America Cuba Garmany Poland Belgium France Thailand Koria Taiwan Malaysia


UI/UX Design cyclecharge I-motion LINE 改善


  / UX       

Cyclecharge     +        

            ~2018,1 運動しながら気軽にチャリティ出来るレンタサイクル型チャリティイベント 地球環境問題を身近に感じながらも具体的には何したらいいか分からない人へ そもそもチャリティに興味なんてない? そしたら普段のレンタサイクルを「cyclecharge」に変えてみて! 自らの運動不足も解消できながら地球の未来をあなたが守る


  / UX       

P

rocess

テ ー マ 4 つ から

ブレスト

1 つ選ぶ

1

テーマ解釈

市場 調 査

問題再定義

2

テーマ 4 つから 1 つ選ぶ 4 Topics

choice

ペルソナ、シナリオ

デザイン作成

ブレスト

テーマ解釈 What iF there was a Panda-themed brand to support a good cause? パンダというものが環境保護を想起させるもの。 より多くの人に協力していただくために、

チャリティ

ドローン

空間デザイン

家電製品

より身近なものを通して環境を保護するための資金を 提供してもらうためのプロダクトやサービスを提案。

街中に置かれた募金箱

クレジットカードを切る

お金の掲示板

ケチャップを開ける事で

お金を入れるごとにモチーフ

ことで、貧しい人にパンが

必要な人はそこから取り

地雷の被害を知る

が起き上がってくる

一切れ分け与えられる

寄付したい人は貼り付ける

裏面に募金内容記載


U I/U X De s i g n

市場調査

無宗教の国の割合

チャ リ テ ィ に 対 す るイメージ 悪い奴もいる!

ネガティブ

中国を始めとし、

自己満足じゃない?

この5カ国が無宗教割合 の高い国と言える

何に使われるのかわからない

無宗教

ポジティブ 宗教あり

64 %

自治会のお付き合いだからやってるだけ

世界全体では

キリスト教信者が多い

寄付金の用途や意図が不透明

チャリティやボランティアには前向き

チェコ

76

寄付をたくさんした人は支払う税金の一部を免除

じわじわと普及し始めて いるシェア自転車

圧倒的な台数を誇る のは中国である

日本

%

中国

300,000 中国

問題再定義

募金したお金の流れが不透明 無宗教だから人助けが身近に感じない どこから募金すればいいのか分からない

募金したお金の流れ がわかる

人助けを身近に感じ る、プラスに捉える

55

オランダ

エストニア

中国のレンタサイクル台数

「お金を持っている人は、貧しい人に与えるべき」 というキリスト教の教えが身についている

%

93

52

普段の生活サイクル の中で募金が出来る


U I/U X D e s i gn

5

Customer Journey Map

ペルソナ、シナリオ作成

ペルソナ

運動したい社会人 年齢 25 歳 無宗教の中国人男性  仕事は営業で外回りをすることが多く、近場なので自転車で移動することがしばしば

自転車を借りる

フェーズ

タッチポイント 行動

レンタサイクルの 駐輪場へ行く

漕ぐ、蓄電する

してロックを解除

漕いだ分だけ電力

ハンドルのメモリー

蓄電して自転車を

アプリで生産電力

蓄電した電力をお

換金したお金を環

が生み出される

で蓄電量をチェック

返す

をチェック

金に換金する

境保護団体に募金

できる

蓄電自転車か選ぶ

・ちょっとの苦労をとるか、 楽をするかどっち?

・アプリですぐ借りられるの はいいね ・自転車置き場までわざわざ 行くのが面倒だ

感情

募金する

バーコードをかざ

電動自転車か

思考

発電量チェック

・運動ついでに蓄電できる ・自転車が重たい ・メモリグラフで見れるからモ チベーションが上がる

する

・毎日のヘルスケアと一緒に記 録できる

・自分の頑張りが目に見える

・苦労がお金に変わる喜び ・気軽に募金できる ・お金の行方が明瞭


U I/U X De s i g n

6

App Design

デザイン作成

ヘルスケアとチャリティを組み合わせて馴染みのあるデザインにした 発電量はパーセンテージで表記することで誰でもわかりやすくし、自分の募金が何に使われているのかはっきり提示した

自転車を乗った時の発

自転車の管理はバー

今まで募金した額とそ

寄付するボタンを実際

続けてもらう工夫とし

電量を後からでも確認

コードを当てるだけ

れによって助かった森

に押すことで自分が

て募金額に応じて自分

林が視覚化出来る

行ったという感覚を得

の植物が育つゲーム要

られる

できる

Ride - Check - Help - Charity - Grow


U I/U X D e s i g n

Bike Design 自転車のハンドル部分につける UI のデザインをした 運転しながらでもすぐにわかるようにパーセント表示と色、図を用いて表現した

P O W E R

C H A R G E

P O W E R

C H A R G E

L A S T

K m


U I/U X D e s i g n

I-motion introduction App

6 人チームで行いました。ア

イデア出しや発言の少ないメ ンバーへの声かけ、全体のス

インタフェ4 9weeks,6member

ケジュールなどリーダー的役 割を担いました。画面デザイ ンも行いました。

2017,6~2017,7

自己紹介をするのが苦手な人、形式張ったあの時間は本当に必要なのか? そんな心の奥に思う疑問を取り上げ、自己紹介をもっと自由に楽しいものへと変 えて行くアプリを考えた。 自分の動きを真似してみんなでわいわい記憶にも残る自分らしさも出す事ができ る仕組みが施されているのだ。 これからの自己紹介はみんなで I-motion を使って行おう!!


U I/U X D e s i g n

P

rocess

市場調査

ブ レ スト

1

ブレスト

問題再定義

タスク分解

2

テーマ すっきりと整える

9コマシナリオ作成

機能設計、デザイン作成

市場調査

「整理」や「管理」「人間関係」をテーマにした アプリやサービスの調査

すっきりと整えたいものは何か? スケジュール

見た目 PC/ スマホ

人間関係

名 刺 管 理 ・ 連 絡 先 整 理 ・ 愚 痴 ア プ リ ・ S NS

無機質なものが多かった

文具 (カバンの中)

健康

学校

家の中

・文具(カバンの中) ・家の中 ・見た目 ・PC/ スマホ ・人間関係 ・健康 ・学校 ・スケジュール etc...

コミュニケーションを促すアプリ 人と人を繋げるアプリ


U I/U X De s i g n

3

4

タスク分解

大学入 学 か ら サ ー ク ル 決 め ま で

問題再定義

自己紹介タイムの

問題

+形式張った自己紹介に意味を感じない

サークル決定

+誰がどんなことを話していたのか覚えていない +緊張した空間が苦手だ

自己紹介タイムの

原因

一人だと心細い

サークルを決定した時の行動にもっとも多くの課題がある 大 学 入 学 か ら 授 業 に 慣れる、大学生活へ馴染む事、サークル決め な ど 精 神 的 負 担 が 多 い時期 中 で も サ ー ク ル を 決 定した時後にもっとも多くタスクがあること が わ か っ た 。 特 に ど んな場でも行われる「自己紹介タイム」 人 前 に 立 つ こ と や 形 式張ったやり方に苦手意識を持っている人も 多い

自己紹介タイムに問題が多い

話す人がいない

目を見れない

思えてもらえない

テーマ解釈 伝 え る 情 報 を 整 え て 初 対 面 の 円 滑 な コ ミ ュ ニ ケ ーションを図る

デザイン要件

ア イ ス ブ レ イ ク と し て 全 身 の 動 き を 加 え て 和 や かに楽しく自己 紹介ができること

ゴールイメージ イ ン パ ク ト が あ り 、 覚 え て も ら え る 自 己 紹 介 ア プリ


U I/U X D e s i g n

5

Customer Journey Map

シナリオ作成

ペルソナ

文系大学生 (18) 今年から大学生になる アクティブだけどちょっとシャイ / 流行に敏感 / 友達を作りたいと思っている / 地元から離れて大学へ通う

アプリをダウンロード

フェーズ

サークル決め

自己紹介タイム

華の大学生活

I

タッチポイント 行動

新しい環境で友達

ダウンロードして

を作りたいと意気

みる

込む 色々なサークルを見

面白そうだと思った

アプリを使って自

30 秒の自己紹介で

情報を知っている

友達が増えて楽し

学する

サークルに加入

己紹介をする

は知れないディー

から二度目に会っ

い大学生活が始め

プな情報ゲット

てもすぐ思い出せ

られる

SNS を通じてアプ

リの存在を知る

・新しい大学生活、楽しみだ けど友達できるか不安だ

思考

・SNS をよく見て乗り遅れな いように情報を集めたい ・流行りのアプリがあるから 入れておこう

・様々なサークルにワクワク ・周りもまだ一人の人が多いか ら寂しさはない ・サークルのみんなと仲良くな れるか不安だ

・恒例の自己紹介タイムにドキ ドキ

・次に会う時にもよく思い出せる から安心

・流行りのアプリで乗り越えた い

・相手からも覚えてもらえている ので嬉しい

・楽しんで自己紹介ができた

・スタートダッシュがきれた喜び

・みんなのことも分かって不安 が取り除かれる

感情


U I/U X De s i g n

76

App Design

機能設計

好きなチームを気軽に見れるようにメイン画像をバックに持ってくるデザインを採用 スマホを持って動きを取り入れるという部分がこのアプリの特徴である

I

は じ め の登 録 で SN S 連 携 ができるようになって い る 。 その た め 、 相 手 に 送 るプロフィール詳細

画 像 は 普段 の S N S へ の 投 稿を元にランダムに自 身 の 人 柄を 表 し た 図 を 自 動 作成

自己紹介を始める前にそれを聞くメンバーを集め たグループが作成される。そのグループ内でメン バーの確認とプロフィール情報交換のための動作 ができるようになっている

スマートフォンを持ちながら体を動かし、友達が同 じ動きをすることで情報を伝達する。あの動きをし ていた人だ!と記憶にも残りやすい


U I/U X D e s i g n

活動風景

最終プレゼン。実際に大学に入学してからアプリを利用して自己紹介 を行うまでの流れを体現した。

最終プレゼンの私 市場調査やタスク分解を行なっている

行き詰まることが多かったが何気ない会話

プロトタイプを作成し、実際にユーザー

をしながら進めていけた

に何も言わずに利用させてみる。その際 どのような反応を示すのか観察・調査

全6チームある中学内で優秀賞をとりました

「インターフェイス × カフェ」UI 設計の手法や進め方などを学ぶこ とができた。学内で先輩が企画し行い始めた活動である。


UI /U X D es i gn

LINE の keep 機能の改善

Keep LINE 株式会社 選考課題 6Days

2018,4,5

2018,4,10

様々なサービス展開をしている LINE しかしその背景には新サービスについていけず既存の使い慣れたサービスのみ を使い続けているユーザーがいる。新サービスの中には便利なものやユーザー が喜ぶものが用意されているはずなのに使いこなされていないのが現状だ。そ こで今回は LINE の中にある keep 機能に着目してサービスの改善案を提案する


UI /U X D e si gn

R esearch

LINE の Keep 機能に関するアンケート

知ってる!

使ったことある!

50%

55.6%

Keep 機能知ってる?

(Keep を知っている人の中で)

使ったことある?

(18 歳∼55 歳の 54 名にアンケート )

不便だと思う!

知らなかった!

便利だと思う?

Keep 機能の中でタグ付け

40%

100%

できることを知ってた?

よく Keep 機能を使う人の使い方

共有 の目的で使われていない

Keep 機能を十分に知られていない 本来の使い方をされていない 使い勝手が便利でない


UI /U X D e si g n

CJM 22 歳 女子大学生

ペルソナ

LINE が主だが就活やバイトのためメールも頻繁に使う。大切な内容を保存できるメールのスター機能などをよく使い、LINE でもその機能が欲しいと思っている 普段から新しいものには鈍感なため使い慣れたツールをよく利用している

大事なコメント

フェーズ

・コメントが流れていってほ しくない

・どうしたらいいのだろう

感情

容を保存で

てきた

きたい。

内容把握

ライドで内

ントが流れ

・大事なコメントを覚えてお

改めて確認したい

長押しとス

大事なコメ

タッチポイント 行動

思考

保存しておく

きる

・とりあえずタップしてみよう ・大事なコメントが保存できて 嬉しい

・トークを消しても大丈夫

メインのタブから保存し

3D タッチで前後のトー

た内容を確認できる

ク内容が確認できる

・大事なコメントを改めて見れ る安心感

・メインから飛べるのでわかり やすい

・前後の内容から話を思い出せる ・メールのように取っておけるか ら安心だ


UI /U X D es i gn

I dea

Keep を行う際の ユーザーインターフェイス

Keep

Keep という言葉の意味

3Dtouch 下にスライド 「お気に入り」や

長押しして出てくる

「アーカイブ」など

コンテンツから選ぶの

の馴染みのあるもの

ではなく、保存したい

への変更

ものをスライドで、

直感的に使いやすく

Keep 機能の内容

トーク相手表示 時間や曜日より、 「どこで」の会話だった のかが重要である

前後の会話文表示

フォルダ分け

保存したものを3Dtouch

どんな内容ごとなのか

するとその前後の内容が

を大きく分類すること

見える

ができる


Survice Design Human Flow Project 一期一絵


S e r v ic e De s i g n

Human Flow Project Shinjuku station + smart mobility

3年後期授業課題 8weeks

2017,10

2017,12

日本で一番利用者が多いといわれる新宿駅。 中でも古くからの歴史を持つ地下のコンコースは様々な情報が入り組んでいて スムーズに移動することが難しい。特に、いろんな方向に行き交う人々の中で 人の「流れ」に乗ることが難しいのではないかと考えた。 そこで、床とディスプレイデザインを用いて、人の「流れ」をコントロールし、 よりスマートに新宿駅を作り替える。


S er vic e De s i g n

P

rocess

ブレスト

駅への市場調査

テ ー マ 解釈

1

新宿駅の 問 題 提 示

2

ブ レ ス ト 、 テ ー マ解 釈 テーマ スマートモビリティ

スマートモビリティとは

最新機器の移動

車での移動

お金の流れ

感情の伝達

デザイン要件決定

人の移動

通信の移動

情報の伝達

ペルソナ、シナリオ

駅への市場調査

9 時から 10 時

Time

通勤のピークを超えた

Place

小田急、JR、京王線の連絡通路

Point

古くからある、特に人が多い

デザイン作成


S e r v ic e D e s i g n

3

新宿駅の問題提示

350 万人 2

1

3

番号 と 色

利用者数ナンバーワン

を見て乗り換え

新宿駅の一日の利用者数は約350 万人。世界一の利用者数である。 日本人だけでなく世界中の人が集ま るビッグターミナル駅である

次は何番線かな? 何色の電車?

人の波に乗れない

旅行客

電車を乗り換える際の目印は

人が多くても怖くない。苦手

色と番号である。文字が読め

意識を持たせない。優しい東

なくても共通認識できる重要

京を提供することまた日本人

な手段

と外国人両方で理解しやすい ものを提案する

4

デザイン要件決定

Target Spot

Design Requirements 自分の力で歩く 広い新宿駅で自分が今全体のどの位置にいるのかわかるように 駅員を介さずに目的の場所へ案内する

情報の引き継ぎ 既存のサイネージの最低限の情報は必ず載せること。 既存のサイズに合わせることで、JR 側への導入しやすさを促す。

歩く人が心地よく 自然に生まれる人の流れに乗せられるのではなく、乗ってしまう。

Where 新宿駅の京王線と小田急線への地下通路

無意識のうちに人の流れに合わせて歩けるようにすること。


S e r v i ce De s i g n

5

Customer Journey Map

ペルソナ、シナリオ作成

ペルソナ

東京に来るのが初めての外国人旅行客 新宿駅の人の多さに感動するがうまく歩くことが出来ない

新宿駅に着く

フェーズ

タッチポイント 行動

ケータイを片手に立ち往生する

・広い新宿駅でまずどっちの 方面に歩くのか迷う

・人の多さで立ち往生してし

思考

まう

・自分が今どの場所にいるの かわからない

感情

乗り換えに行く

人の流れに乗る

他の電車に乗る

足元の凹 凸を利用 して人の流

サイネージ を見ながら行きたい

方向を確認する。現在地を把握する。

・サイネージにより現在地を把 握することができる ・行きたい方向に何があるのか 距離感を掴みながら理解できる ・英語表記が大きく見やすい

れに乗りな がら歩く

・人の流れを見つけ歩きやすい ・トランクを持ちながら凹凸を 横断するのは歩きずらい

一人ですんなりと他 の電車のホームへた どり着く

・自分の力で乗り換えできた達成感 ・すんなりと駅のホームへ向かうこと が出来た ・新宿駅が怖く無くなる


S e r v ic e D e s i g n

6

床面のスロープ誘導

デザイン作成

駅コンコース断面図 4m

約4mほどかけて 10cm の緩やかな

2m

スロープを付けることで、

無意識に、けどどこか流れに乗れる ようにデザイン

・東方面に歩く人の流れ、西口方面の流れ をあらかじめ作っておき、これに合わせて 人を誘導する ・ディスプレイをレールに合わせて配置 することで、視覚的にも自分が歩くべき レールがわかるようなデザイン ・床面のスロープには十分なゆとりがある ので 4 人程度並んで歩くことが可能 東口方面 西口方面


S e r v ic e De s i g n

案内板ディスプレイデザイン 新しい案内板

従来の案内板

・ホームの方向はわかるが、距離感がつ かめない

・情報が統一されていない ・英語表記が小さく、わかりずらい

5s

JY JB ・奥行き感をもたせ、ホームまでの距離感がつかめる ・ホーム番号と色による表記にすることで一目で乗りた い路線がわかる

・完全ディスプレイにより、日本語と英語の両方に対応 ・約 3 分おきに電車がくるので、コンコース内ではあえ

て時刻の表記を無くし、次の電車どれくらいで到着する のか感覚でつかめるようなデザイン


S e r v ic e D e s i g n

一期一絵 街を育てるシェアリング MAP

一般財団法人

国際ユニヴァーサルデザイン協議会

デザイナーの方と障がい

48 時間デザインマラソン 3Days

2017,08,31 障がいを持つユーザー

09,02

企業のデザイナーさん

ユーザーを含めた9人

チームで行いました。私 はアイデア出しやストー

リ作成を主に行いました。

学生スタッフ

両国や清澄白河などのいわゆる「下町」 そこにはひっそりと古くからの名所が連なる。初めての人には気づいてもら えないような名所を駅前のサイネージを用いてみんなに発信していこう あなたがいいと思ったスポット、その時その瞬間に街の地図が作り上がる みんなで作ろうシェアリングマップ 初めて新しい土地にきた観光客でもその街のホットな芸術スポットが一目で わかる観光支援サービス


S e r v ic e D e s i g n

P

rocess

ユ ー ザ ー についての理解

1

フィールドワーク

リサーチ、アイデア出し

シナリオ作成

デザイン作成

ユーザーについての理解

48 時間デザインマラソンとは? テーマ「芸術」

障がいを持ったユーザーとともにチームを組み、ユニバーサル製品を考える 企業のデザイナーや技術者、そして芝浦の学生を含む 9 人のチームを組んで三 日間ともにフィールドワークを行いアイデア出し、作成まで行う

障がいを持つユーザーさん

ユーザーにとって不便なこと

芹澤 和也さん バイク事故で頸髄損傷 胸から下の感覚がない

趣味 海外旅行

スキューバダイビング 移動・小回りが大変

グーパーが出来ない

目線が低い


S e r v ic e D e s i g n

2

フィールドワーク

Filed work

Find

OK!

両国の観光案内所地図ゲット 1

↓①すみだ北斎美術館 ↓②桐の博物館 6 5

3

↓③折箱博物館

↓④金庫と 3

↓⑤鍼

の博物館

あん摩博物館

↓⑥袋物博物館

新しい美術館は

閉店店舗たくさん

見やすく、使いやすい

期待はずれなこと が多かった

リ サ ー チ 、 ア イ デア 出 し

芸術を共有する

観光客

オフィシャル情報と実際の

大きな施設以外は観光客に

展示体験にギャップがあり、

魅力を伝えられない

がっかり

生の声やリアルタイムな情

観光スポットが一目で分か

子供から大人まで、健常者

報更新があればもっと楽し

る事、街の人にとっても価

から障がい者まで誰もが使

める

値のあるものへ

いやすいデザイン


S e r v ic e D e s i g n

4

Customer Journey Map

ペ ル ソ ナ 、 シ ナ リオ 作 成

東京に住む女子高校生 (18) Instagram で hotspot を探すのが好きで、最近は写ルンですを購入しレトロな街並みを求めている

ペルソナ

両国駅に着く

フェーズ

タッチポイント 行動

あらかじめネット

両国駅で下車

デジタルサイネージ を発見

改札外にあるサイ

サイネージ画面を

ネージを発見する

プリントアウトし て持ち運ぶ

で行く所をチェッ ク

リアルタイム情報で行

町歩き

町情報を投稿

プリントアウトし

スポットごとにあ

ケータイアプリで

駅のサイネージに

た地図を持ちなが

るサブサイネージ

スポットの口コミ

情報が反映される

ら歩く

でスポットの評価

を記入

きたい場所をゲット

・初めて降りる駅にワクワク ・あらかじめ目的の場所をピッ クしてあるがほとんど未定

思考

・町のひとだけが知るコアな

所に行きたい、話を聞きたい

感情

・下町の MAP だからとあまり期 ・幼い頃の地図をみながら歩く 待していない

懐かしさを感じる

・自分もまちづくりの一員になっ

・デジタルにリアルタイムな情

・行く所にハズレがないので嬉

・次に街に行くことが楽しみにな

しい

・ミニサイネージで喜びを共有

・新しい友達ができて嬉しい

報が流れていて驚く

・コアな情報を知ることができ て喜ぶ

できる

ているという使命感 / 喜び


S e r v ic e D e s i g n

5

Product Design

デザイン作成

駅前に設置する大スクリーンの「メインサイネージ」と名所ごとに置かれた「サブサイネージ」メイン サイネージは子供でも大人でもタッチしやすい高さに。サブサイネージは江戸時代のお筆書きをイメー ジした和の雰囲気のものを考えた。

その場で、

訪れた施設の評価が出来る


S e r v ic e D e s i g n

UI/UX Design サイネージには常にリアルタイムのホットスポット情報が流れている。スポットをタップすればおとづ れた人の詳しい感想や評価も見ることができる。旅行者だけでなく街の人もこれを見ることで自身のお 店の評価をあげようという活力にもなる

アプリを通じて評価もできる

リアルタイムに街の ホットスポットが確認できる

多様な人たちの声が、一つの街の地図に集まる


THANK YOU

ポートフォリオ①  
ポートフォリオ①  
Advertisement