ポートフォリオ

Page 1

PORTFOLIO KYOSUKE MURAKAMI

PERSONALITY

色々なヒト・コトと出会って 広い視野でデザインに取り組んできました

「気になったらまずはやってみる!」をモットーに、今まで様々なことを経験してきた中で当たり前だと思っていたこと にもハッとさせられることが多々ありました。多くの分野を渡り歩き、色々な角度から物事を見つめる。そんな自分の 強みを生かせるデザイナーになりたいと思っています。

UI/UX / Interective / Speculative メール表現を自動で 添削してくれるサイト

UI/UX / Web / Solution

Service / Infrastructure

立体音響を用いた

音楽探索アプリ

違法駐車を抑止する 駐車場プロジェクター

WORKS

Product / Solution

Other Works

陣形を解説するWebサイト えちぜん鉄道路線図のリデザイン 誰もやったことのない旅行企画
ad bnmshmtdc--スポーツバイク店のための ハンディー掃除機
Sn

学部4年 2020.4-2021.3

UI/UX / Interective / Speculative

立体音響を用いた音楽探索アプリ

音楽の森の中を彷徨うような、立体音響を用いた新しい音楽との遭遇体験の できる音楽探索アプリを製作しました。近い将来に立体音響がより身近な存 在になると考察し、立体音響の強みを活かすUI/UXを探り、複数のプロト タイプを経てUnityで実装しました。

THEME

聴覚を使った新しいUI/UXを考える

01
事前調査 未来洞察 アイディア展開 仮説検証 UI検討 プロトタイプ 最終製作 実装
個人ワーク(卒業研究)
https://bit.ly/3iDYnIj

BACKGROUND

リサーチと近未来予測

立体音響がより身近な存在に

ヒアラブルデバイスの普及

立体音響の技術革新 音声コンテンツの台頭

立体音響を使ったらUIはどう変わる?

現在スマートフォンのUIは視覚に頼ったものであるが、立体音響を用い、聴覚情報をインタフェースに組み込むことで、 今までに無い新しいユーザー体験を創出できると考えた。

HYPOTHESIS 3D

今までポッドキャストを 聞いたことがある 月間でポッドキャストを 聞いている 2006 0% 20% 40% 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021
? ×
UI 立体音響
2D

IDEATION

立体音響の強みを探る 立体音響の強みを 具体案に落とし込む

のアイディア 110

のプロトタイプを作成 13

画面への没入感

複数音源の

音だけで道案内 音に質量を与える

観光MAP×音声案内

環境音の位置を操作する

etc...

天気図の上を歩く

オーケストラ の部分鑑賞

DIRECTION

お気に入りの音楽を見つける 新しい出会い方を創出する

♪ ♫ ♬
同時取得

CONCEPT

立体音響を用いることで、森の中を彷徨うように偶然知らない音楽と出会

うような今までになかった音楽との遭遇体験を創出できると考えた。

既存の音楽サービス

検索して音楽と出会う

新しく提案する音楽サービス

思いがけず音楽と出会う

♪ ♩

EVALUATE

人流に関する資料の閲読と普段の行動に関するリサーチを行った。結果、ここでは 「彷徨う」体験を散策と直行の二つのフェーズに分類し、評価項目として定義した。

PROTOTYPE

25 5×5

「自分の位置」の表現方法と、「操作方法」の2つの観点からそれぞれ5つのアイディ アを出し、Unityで実装して検証を行い、最適な組み合わせを探った。

♪ ♩ ♪ ! 散策 直行
「彷徨う」を要素分解して評価項目を定義 のインタフェースを検証
UI 入力方法

FINAL PROPOSAL 無限に音楽が存在するサブスク世界

頭を傾けて音楽世界を探索する 音楽のモヤの中を『彷徨う』新しい音楽探索の形
https://bit.ly/3iDYnIj 体験動画

1 . 探索する

聴覚を頼りに、気になる音楽の方へフラフラ歩いてみよう。お気

に入りの音楽を見つけて立ち止まるも良し、歩き続けるも良し。

どんな探索の仕方もあなたの自由だ。

道を進むにつれて

2 . 軌跡を振り返る

歩き疲れたら今までの軌跡を振り返ろう。どんな道を辿って、ど んな音楽と出会ったのかMAPで確認してみよう。きっとあなた の好みが現れているはず。

彷徨った旅路がMAPに

type type type type type type
FLOW
モヤが濃いほど音楽が ハッキリ聞こえる
好みの音楽に
気になっていた 音楽が時系列で表示

1 2 3

画面上に、曲名やサムネイルといった音楽情報を表示

せずモヤとして表現することで聴覚に意識が向き、結 果として体験の満足度が向上した。

視覚情報をあえて制限する 身体の動きとUIをリンクする

スマホの入力方式ではなく、身体の動きで画面上にい る自分の位置を動かすことで音響空間への没入感をよ り向上させることができた。

音楽が重なった状況を楽しむ

複数の音楽が干渉しあった音響空間を作成すること でユーザーがより自由に動き回れるようになり、音 楽とのタッチポイントを増やすことができた。

『偶然の出会い』

を創出するUIの形

3つのポイントを取り入れることで、UI上での偶然の 出会いを演出することができた。音楽探索以外に、立体 音響を用いてフェスやショッピングの偶発的な出会いを 創出するなど、様々なUIへの応用が可能だと感が和える。

VALUE

SUMMARIZE

検索 探索

音楽を → へ

気になった音の方へフラッと行ってみる

そんなラフで新しい音楽探索。

FEEDBACK

卒業制作展にて展示

「現実では出来ない体験を上手く現実的なサービスに落としていると感じた」

「聴覚主体のUIに新しさと可能性を感じた」

「探索体験とストリーミングサービスとの相性が良さそう」

体験動画 (イヤホンを装着してください)

https://bit.ly/3iDYnIj

忙しい社会人に向けた秒速言い回し添削サイト

メール添削先生

学部4年 2020.3-2021.5

UI/UX / Web / Solution

メール表現を自動で添削してくれるサイト

敬語に不慣れな新社会人をターゲットに、文字を打ち込むとビジネスシーン に適した敬語表現に自動で添削してくれるツールを製作しました。

ビジネスパーソンからのフィードバックを繰り返し反映し、実際に使える webツールの開発を目指し日々改善を重ねています。

THEME

実用的なWebサービスを開発する

https://bit.ly/34pCQuv

02
個人ワーク 現状整理 問題定義 プロトタイプ 実装 アンケート 要件定義 再製作 実装

BACKGROUND

新社会人にとって、 ビジネスメールは完全に独学

新人研修では、業務全体の把握が最優先目的であるため、ビジネスメー ルに関する研修時間は十分に設けられていない企業が多い。

そのため、新社会人は独学でメールの作法を習得して行くのが現状で ある。

USERVOICE

2021年度卒業の新社会人41人にアンケート調査を実施したとこころ、 適した言い回しを逐一webで調べている人が大多数で、そのうちの 約半数が現状のサイトに満足していなかった。

敬語表現をWebで調べる

82.9% 同期・上司に聞く...10% 本で調べる...4.8% その他...2.3%

現状のwebサイトに ストレスを感じる

48.4% Yes No

51.6%

現状のWebサイトでは新社会人のニーズを満たせない

挿絵や前置きが長く ボリューミー

新社会人が望むwebサイト 現状のwebサイト 要点がまとまっていて すぐ確認できる

従来のWebサイトではその語句の成り立ち・使い分け方・例文など多くの情報を得ることができ、 様々なシーンに対応できる。一方で、新社会人の真のニーズである「自分の言葉遣いが適しているのか」を

スピーディーに確認することが目的の場合は情報過多な印象を受ける。

PROBLEM DIRECTION

今知りたい敬語知識だけ素早く確認できるwebサイトを作る

メール添削先生

適切なビジネスシーンに応じて文章を改変

お疲れ様です。

山下商事の村上です。

プロジェクトに関してですが、 大体 問題ないかと 思います 。

金谷さんに当面の間 手伝ってもらう ので、お送りする資料を 見てみてく ださい 。

よろしくお願いします。

お疲れ様です。

山下商事の村上です。

プロジェクトに関してですが、 概ね 問題ないかと 存じます 。

金谷さんに当面の間 お力添えいただく ので、お送りする資料を お目通し

願います 。

よろしくお願いします。

Ve r.2.0

USER FLOW

シーン選択

メールを送る相手を選択する。

シーンを選択することで、メールのテン プレの挿入も可能。

文章入力

1 2 3

文章を打ち込むと自動で適切な語句に置 換される。

Step.2

忙しい社会人に向けた秒速言い回し添削サイト

メール添削先生

Step.1

メールを送る相手を選択する

文章を入力する

ご苦労様です。

村上です。

プロジェクトに関してですが、ほとんど問題 ないかと思います。

金谷さんに当面の間手伝ってもらうので、ご 留意ください。

よろしくお願いします。

正しい表現を確認

置換された語句は詳細ボタンを押すこと で解説を確認できる。

Step.3

添削結果を確認する

採用 不採用 左右にスワイプ

不採用

関してですが 関して 文を省略する

採用

ご苦労様です お疲れ様です 丁寧語→尊敬語に変換する

メールを添削する

採用

ほとんど 概ね より畏まった表現に変換する

手伝ってもらう お力添えいただく

丁寧語→尊敬語に変換する

謝罪のメール 直属の上司 ? テンプレートを挿入
ください くださいませ

ページ遷移を無くし、縦の流れを意識したUI設計

1 2

シーン選択 文章入力

ビジネスの場でも使える

シーン選択画面

いつも大変お世話になっております。 【自分の所属】です。

本日、△△様のご協力のおかげで無事全ての発注元に 納品することができました。

誠にありがとうございます。

またお願いをする機会もあるかと存じますが。変わ らぬお引き立てのほど、よろしくお願い申し上げま す。

UI FLOW
青色基調
△△様
フリック テンプレ挿入 株式会社◯◯

振り分けに応じて自動で 置換される

レコメンドされた表現へ

適応スワイプで振り分ける

お疲れ様 です。 村上です。 プロジェクトに関してですが、 概ね 問題ない かと存じます。 金谷さんに当面の間 お力添えいただく ので、 ご留意ください 。 よろしくお願いします。

言い回し選択 語句の解説
3 正しい表現を確認する
スクロールすると 振り分けのログが見える
実際に動くプロトタイプ
お願いをする場合、「ませ」を追記する より畏まった表現に変換する 採用 不採用 ほとんど 概ね
2:00
PM

03

学部2年 2018.9(5days)

Service / Infrastructure

韓国都市の違法駐車を抑止する交通システム

韓国× 台湾× 日本の国際ワークショップでの制作物をブラッシュアップし たものです。

違法駐車によって引き起こされる様々な韓国の社会問題の解決を目的とし、 プロジェクターを用いて道路の一部を夜間限定で駐車場化するシステムを提 案しました。ワークショップでは主にアイディア出しとレンダリングを担当 しました。

THEME

Daegu(大邱)が抱える社会問題の解決

グループワーク 現状整理 リサーチ アイディア展開 UI検討 プロトタイプ 展望 PM 6:00

BACKGROUND

違法路上駐車が多くの社会問題の引き金に

韓国第3の都市Daeguでは急速な都市成長の裏で、様々な社会インフラの機能不全が目立つ。

その社会問題の多くが違法駐車に起因しているとリサーチの中で得られた。

路上で 駐車場で

PROBLEM

道路幅の減少
見通しの悪化
詐欺の横行 &*
消防・救急機関の麻痺
接触事故の増加 二重駐車の横行 &* &* 民間トラブルの引き金 個人情報の流出

韓国の交通事情の特徴

フィールドリサーチを軸に幅広く違法駐車問題の背景を考察し、3つのキーワードを抽出した。

1 圧倒的な駐車場不足

急激な都市成長の続く Daeguでは慢性的な土

地不足に悩まされてい

る。都心部でも駐車場 数は少なく、二重駐車 が横行している。

2 主要道路が広い

韓国の都市計画の指針 から、主要道路の道幅 がとても広く設定され

ている。反対に住宅地 付近の一般道では狭い 道が多い。

3 家に車庫がない

韓国の多くの家は車庫 を持たない代わりに 月額の駐車場を無料で 利用できる。 そのため夜、最も駐車 場の需要が高まる。

DIRECTION

主要道路の一部を有効活用する

RESEARCH

OUTPUT ー 時には道路、時には駐車場として姿を変える ー

必要なときだけ現れる路上駐車場

SPEC

総重量 2.0kg

全体幅 30cm

CMF

Color:

Material:ポリカーボネイト

Finish:マット、アルマイト加工

合法的に路駐できる環境を作る BREAKTHROUGH

路地の違法駐車が最も多い 主要道路の一部を駐車場に

主要道路から一本外れると、道路脇に合法的に路駐が可 能なエリアが多々ある。そのエリアからはみ出して道を 塞いでいる違法駐車のケースが最も多い。

駐車需要の高い時間帯に限り道幅の広い主要道路の一部 を駐車場化することで、駐車場の絶対数を増やす。

臨時駐車場

需要の高い夜間だけ道路を駐車場化する 駐車場出現 道路に変わる

違法駐車を知らせる

周囲の駐車場混雑情報をリアルタイ ムで取得し、交通状況を把握する。

プロジェクターでマークを一定時間 投影し、路肩の一部を駐車場化する。

駐車場の需要が下がる朝になると、 パーキングマークが消える。

時間外の駐車にはライトの色を変え ることで、違法駐車を抑止する。

FLOW 駐車場数 駐車場需要数
交通状況を把握
PM 2:00 AM 9:00 PM 6:00 AM 7:00
臨時駐車場

PROSPECT

交通標識や広告への応用

デジタル情報を映し出せることができることに加え、多くの人の目に止まるという特徴から都市 インフラとしての役割にも期待できると考えた。

Case.1

Case.2

渋滞による迂回を促す 店舗駐車場に広告を表示する

4方向へのアプローチ

この駐車場プロジェクターを導入し交通インフラを整備することで、コスト面・社会面で4方向 のターゲットにバリューを創出できると考えた。

常に変化し、成長する社会に 適応するための交通インフラの形

建設業者 整備コスト削減 取り外し可能 駐車場獲得 駐車場利用者 渋滞の緩和 接触トラブル回避 道路利用者 駐車場コスト削減 集客効果 店舗
柔軟に変わる交通インフラ VALUE FUTURE
PM 2:00 PM 6:00

PRESENTATION

文化と思考の違いを肌で感じたワークショップ

初の海外ワークショップでしたが、課題解決の視点が日本・韓国・台湾それぞれで異なることに 衝撃を受けました。

「文化の違いによる思考が違う面白さ」を肌で感じ、以降様々な海外ワークショップに参加するター ニングポイントとなった思い出深いワークショップです。

04

学部2年 2018.10-2019.5

Product / Solution

スポーツバイク店専用のハンディ掃除機

学部2年で取り組んだ本格的な問題解決型のプロダクトデザインの授業に製 作したものです。

市販の掃除機の機構規定に従ったプロトタイプを複数作成し実際に使える掃 除機の形を提案しました。

THEME

プロフェッショナルのための掃除機

個人ワーク 現状調査 要件定義 アイディア展開 スケッチ プロトタイプ フィードバック 最終製作

TARGET

スポーツバイク店の作業場

近所にある個人経営のスポーツバイク専門店に取材を行ったところ、他には 無い4つのユニークな清掃環境のポイントが挙げられた。

RESEARCH

狭くて小さい作業場

個人経営のスポーツバイク店では 自転車が所狭しと並べられてい

る。そのため、自転車の修理など を行う作業場はとても狭い。

散らかったスペース

自転車の修理では、多くの工具を 迅速に使い分けていく必要があ る。そのため、床には常に工具が 散乱している。

ゴミは修理中に出る

作業場で出るゴミのほとんどは細 かい金属片やタイヤゴムといった

もので、かき集めにくい小さなゴ ミが多い。

自転車がすぐそばに

修理する自転車は数十万円ほどの 高級スポーツバイクばかりであ る。そのため、作業場には常に緊 張感が漂う。

デザインポイントの抽出

数日間店主に密着し、ジャーニーマップを作成した。そこからハンディークリーナーの製作にあたり、3つのポイントを抽出した。

修理中に出たゴミを放置すると、自転車を パンクさせてしまうことがある。そのため、 できるだけゴミが出るたび掃除したい。

修理中に手についた油の汚れを拭かないと、 手が滑って掃除できない。こまめな掃除を 実現するには、油問題の解決が必須。

お客様の自転車に傷をつけるのを避けるため ホウキで掃除をしているが、ホウキだと 細かいゴミを完全に取りきれないのが悩み。

USER VOICE
DESIGNDIRECTION
自転車を傷つけたくない 手が油で汚れる 自転車修理中に掃除したい
すぐに使える手軽さ
×
操作性が高い

スケッチとモックアップによる検証

スケッチを元にモックアップを製作、フィードバックを繰り返いただき、 形状・機構を決定した。

1 Point.

2 Point.

3 Point.

4Point.

IDEATION 手が油で汚れていても、そのまま使える持ち手の検討

モックアップvol.1

試運転し、フィードバックを貰う

フィードバックで得た改善点

車輪を大きく ノズルを優しく 汚れない形状に

モックアップvol.2

再度フィードバックを貰う

再度使用感を試して貰い、最終的な 形状・機能を決定した。

PRODUCT SPEC

総重量 2.0kg

全体幅 35cm

CMF

Color:

Material:ポリカーボネイト

Finish:マット加工

フォルム

円と直線を基調とした

スポーツバイクを

意識したフォルム

持ち手

どこからでも掴みやすい

排気が手にかからない

自然な位置に

バッテリー

重心を下げ、操作性を

排気口
透明なゴミ箱 パーツを誤吸引しても
カタチに
すぐに掃除できる形に
向上させた

伸縮するノズル機構

勝手に自立するボディ

持ち手とゴミ箱が一緒に

掃除機への安心感

取る、置いておくの 動きをスピーディーに 油で汚れた部分を 一気に水洗い 操作性の向上

1 2 3 DESIGNPOINTS

ユーザーフローの比較

後でまとめて掃除する さっと拭いてすぐ修理に戻る

自転車パンクさせないかな

いちいち手を拭くのが面倒臭い

ホウキだとゴミを取りきれない

ホウキ取り出し ホウキ使用場面 床のゴミ 気になったら さっと掃除して 作業に戻る
USER FLOW BEFORE AFTER

OVERALL SUMMARY

パンクするリスクを防ぎ、作業の効率化を図る

今までは修理後にまとめて掃除していたが、修理中でも使えるハンディークリーナーを使用することで修理と掃除の同時進行を 実現できる。それにより、お客様の自転車をパンクさせるリスクを軽減できことに加え、作業の効率化も図れる。

BEFORE AFTER

FEEDBACK

最終的に作成したモックアップを店主に試していただき、フィードバックを いただいた。Vol.1のモックアップから得たフィードバックを反映し、より高

いユーザビリティを創出することができた。

“ 修理 掃除 Flow 修理 掃除 Flow 修理中に出る ゴミの量
『ストレスなく掃除できるので作業に集中 できる。この掃除機なら実際使いたい。』
https://bit.ly/2R407zg Web Design 学部4年 2021.3(5days)

戦国 × サイバー

戦国時代の陣形を近未来的な雰囲気で表したら新鮮で親しみを持ってもらえるのでは? という仮説からサイバーチックなWebサイトを制作した。 陣形の知識が無くても陣の雰囲気やなんとなくの特徴が伝わるようなレイアウトを 目指した。

戦国時代に実際に使われていた陣形を3Dモデルで表し、様々な視点から陣形を見る ことで、それぞれの陣の特徴を感覚的に理解できると考えた。

陣形を3Dモデル化す上で、3つのポイントを意識した。

陣形のアイコン化

戦闘力を等高線で表示 タイプを色で表現

0 50 100
“陣形を多視点から見る”
攻撃的 防御的 1 2 3
陣形詳細画面(偃月の陣) 陣形詳細画面2(鶴翼の陣)

学部3年 2019.3-2019.11

Infographics

えちぜん鉄道路線図のリデザイン

作成した路線図はえちぜん鉄道本社に提案させていただき、 現在社外文書やポスターなどに使用していただいています。

インフォグラフィックスを用いた課題解決

駅ナンバーを外に出しローマ字

を上に重ねることで、背景の色 かぶりを極力無くし視認性を高 めた。また、文字の角度を並行 に近づけ可読性を高めた。

浅水Asozu 泰澄の里 Taichonosato F

現在の路線図

作成した路線図

Nishinagata Yuri no sato

Nishiharue Heartpia

西春江ハートピア

Taromaru Angelland

Washizuka Haribara

Nakatsuno

Nittazuka

Yatsushima

Nikkakagaku Mae

Fukudaimae Nishifukui

Tawaramachi

EchizenKaihotsuEchizenSinboOiwakeguchiHigashiFujisima

NishibetuinMatsumotoMachiya

Fukui Guchi

Shin Fukui

Fukui

感を持たせた。

現在の路線図 作成した路線図

路線図作成後、えちぜん鉄道本社に路線図の提案を行 いました。先方の指導のもと、路線図を一部改定し完 成品を納品しました。

作成した路線図は 、 現在論文や社外文書に使用してい ただいています。

Eiheiji Guchi

元の路線図

E44 九頭竜川 Kuzuryuu River 5min 福井鉄道 福武線 えちぜん鉄道 三国芦原線 えちぜん鉄道 勝山永平寺線 JR 北陸線 JR Hokuriku Line Echizen Railway Katsuyama Eiheiji Line Fukui Railway Fukubu Line Echizen Railway Mikuni Awara Line えちぜん鉄道 福井鉄道路線図 Route Map Echizen Railway/Fukui Railway 神明 水落 西山公園 西鯖江サンドーム西 家久 スポーツ公園 北府越前武生 越前島橋 越前開発越前新保追分口東藤島 三国港 三国 三国神社水居 あわら湯のまち 番田 本荘 大関 下兵庫こうふく 西長田ゆりの里 足羽山公園口 商工会議所前 赤十字前 花堂 ベル前 江端 清明 ハーモニーモール 浅水 泰澄の里 三十八社 鳥羽中 勝山 比島 発坂 保田 小舟渡 越前竹原 山王 越前野中 轟 光明寺 下志比 永平寺口 志比堺 松岡 観音町 太郎丸エンゼルランド 田原町 西別院まつもと町屋 鷲塚針原 中角 新田塚 八ツ島 日華化学前 福大前西福井 仁愛女子高校 福井城址大名町 福井口 福井 福井駅 武生 新福井
ShimohyogoKofuku Ozeki Honjo BandenAwaraYunomachi MizuiMikuniJinjya MikuniMikuniMinato
Echizen Shimabashi Kannonmachi Matsuoka Shiizakai
Shimoshii Komyoji Domeki Echizen Nonaka Sanno Echizen Takehara Kobunato Hota Hossaka Hishima Katsuyama
IehisaSportsKoen
NishiyamaKoen Mizuochi Shinmei Tobanaka Sanjyuhasha Taichonosato Asozu Harmonyhall Seimei Ebata Berumae Hanando Sekijujimae Shokokaigishomae Asuwayama Koenguchi Fukui Castle Ruins daimyomachi Jin-ai Girls' High School Fukuieki E4 E5 E6 E7 E8 E9 E10 E11 E12 E13 E14 E15 E16 E17 E18 E19 E20 E21 E22 E23 E25 E24 E35 E34 E33 E32 E31 E30 E29 E28 E27 E26 E36 E38 E37 E39 E41 E40 E42 E43 F0 F1 F3 F2 F4 F6 F5 E3 E2 E1 F20 F19 F18 F17 F16 F15 F14 F13 F12 F11 F10 F9 F8 F7 F22 F21 F23 F24
KitagoEchizenTakefu
NishisabaeSundomeNishi
直線を多用して路線をシンプルな形に 実際の位置関係を順守しなが ら、直線を多用し大きくZの形 をとることで路線図全体に統一
駅の表記方法を変更して可読性を高める
F
F 10
12
11

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.