DESIGNED
BY
K .K A ZUMASA
P O R T- F O L I O 2013-2018
PROFILE/
お手に取っていただきありがとうございます。高専の 情報系の学部から千葉大のデザインに編入という経歴 を持ち、よく考えることを自分の強みにしています。 ． ちょっぴり優柔不断だからこそ、はっきりすっきり したデザインを心がける。そんな自分の作品に興味を 持っていただけたら光栄です。
KIYAMA KAZUMASA 木山 順正 千葉大学大学院 / 融合理工学府 / 創生工学専攻 / デザインコース
HISTORY 1994
静岡県三島市 出生
2010 - 2015
沼津高等専門学校制御情報工学科 入学
2015 - 2018
千葉大学工学部デザイン学科 編入
2018 -
千葉大学大学院デザインコース 入学
SKILL DESIGN
TECHNOLOGY
Adobe After Effect
Autodesk Fusion 360
Adobe Photoshop
MAXON Cinema 4D
Adobe Illustrator
Rhinoceros 3D
Adobe Premire
Processing
Adobe Muse
Program
Adobe XD
Java -
Sketch
C-
CONTENTS/
UI/UX_EDITORIAL_BRANDING 本ポートフォリオでは、4 年間デザインを学んできた中で 主に後半の授業やインターンシップで取り掛からせていただいた UIUX デザイン , エディトリアルデザイン、ブランディングデザイン ３分野のデザインについてを抜粋した上でまとめさせていただいています。
Please have a look.
12
PITYHA
18
naviw
28
SWOPON
40
Solor Decathloln
48
千葉大学環境報告書 2017
58
racca racca
72
意匠展
10
// Chap. | 01
// Genre | UIUX
Chap. 01
PYTHA naviw SWOPON
 
// Chap. | 01
// Genre | UIUX
11
UIUX/
視覚的楽しさはもとより“ユーザーの代弁者であること”を念頭に置 いた UI/UX を意識。具体的なユーザーの意見をから、ユーザーの抱 える問題の根本原因を見つけ、それを解決するためのデザインを提案。
パズル × ピタゴラ装置
制作期間：5 日間 制作時期：2018/8 制作人数：1 人
14
// Chap. | 01
// Genre | UIUX
// Chap. | 01
// Genre | UIUX
15
16
// Chap. | 01
// Genre | UIUX
// Chap. | 01
// Genre | UIUX
17
18
// Chap. | 01
// Genre | UIUX
// Chap. | 01
// Genre | UIUX
19
制作期間：1 週間 制作時期：2018/7 制作人数：1 人
20
// Chap. | 01
// Genre | UIUX
// Chap. | 01
// Genre | UIUX
バイク乗りの為の気象情報アプリ 気象条件を受けやすいが故、気象情報に機敏であるライダーたちは多い。 また、移動をし続けることで、一定の場所に留まることのないライダー には各場所のその時の気象条件の把握しなければならないこともある。 そんなライダーたちに向けた気象情報アプリを提案した。
21
22
// Chap. | 01
// Genre | UIUX
Pe r fect for you!!
Co n ce pt その場、その時、あなただけのための気象情報を
Target
Use S ce n e
細かい気候の変化が気になる長距離ライダー
屋外利用・マウントステーでのタッチ操作
// Chap. | 01
// Genre | UIUX
Fe at u re
気象情報アプリ
ロードマップアプリ
Po n i n t
指先１本で操作
大きなボタン
シンプルな UI
23
24
// Chap. | 01
// Genre | UIUX
Test i mo n i al s
ツーリング最中は，
手袋しながらでも
長い時間画面は見られない
使えるように 細かいボタンは あまりない方がいい
機能がたくさんあっても 使わない
特に必要なのは 日射量と風向きと気温
運転ルートと天気が 紐付けされたら便利 運転中は前から あまり目を離せない
先々での気象情報を 乗ってる時は 片手の親指と人差し指
まとめて知れたらな ...
2 本の指しか使えない
ごちやごちゃ しないように 少ない配色で
運転してテンションが上がる おしゃれな UI がいいよね
// Chap. | 01
// Genre | UIUX
Q u e st i o n n ai re
気にしない
とても気になる
ツーリング時 気象情報を 気にする？
そんなに気にしない
気になる
Bot t on
T i me t o re l e ase t h e eye
16.6 M
56dp
36dp
本アプリでの
Goodle の
時速 60 KM で
最小サイズ
推奨サイズ
１秒間に進む距離
25
26
// Chap. | 01
// Genre | UIUX
In t e r face
気象情報表示
マップ表示
// Chap. | 01
出発・目的地表示
// Genre | UIUX
マップ拡大
27
28
// Chap. | 01
// Genre | UIUX
// Chap. | 01
// Genre | UIUX
29
制作期間：1 週間 制作時期：2018/6 制作人数：1 人
30
// Chap. | 01
// Genre | UIUX
お気に入りを " 共有 " して お得にお店を利用しよう。 今日の SNS が普及した世の中では SNS は多くの人の目にとまり、 著名なユーザーともなると宣伝効果は絶大である。 これをユーザーに向けて利益還元することによって ユーザー発信広告が積極的になり充実し、 ショップ側・ユーザー側の双方に利益がでると考えた。
// Chap. | 01
// Genre | UIUX
31
32
// Chap. | 01
// Genre | UIUX
WHAT'S SWOPON SWOPON って何？
SWOPON は SNS を通じて ユーザーがお店を紹介することで， クーポンが得られるグルメアプリ ！ 導入先のお店と利用客だけでなく， 紹介したユーザーにもメリットがある 新しいサービスです．
CONCEPT
TARGET
コンセプト
ターゲットユーザー
紹介して嬉しい !! 紹介されて嬉しい !!
10~20 代のおしゃれなモノ好き
共有したくなるグルメアプリ
な SNS 入れ込み系女子
LISTEN 聴き取り
投稿ついでにクーポンを
知り合いのレビューだから
自分のレビューを見てくれた
もらえるなんて２度お得感
なんとなく安心
数が視覚でわかるのはいいかも
// Chap. | 01
// Genre | UIUX
33
FEATURE 特徴
出来高制クーポン
情報の信頼性
高い拡散性
SNSに埋め込まれたリンクからの アクセス数に応じてクーポン発行により 店舗・ユーザー双方にメリット
ビューの書き込みがSNSアカウントとの 連携により行われるので， 情報に親密さから生まれる信頼性
レビューが目にとまる頻度が高いので， 自身のアプリ内よりもより 高い宣伝効果が期待できる
BUSINESS MODEL 事業の流れ
ユーザー間の 繋がりをやりとり
掲載料を払う
クーポンを提供
利用客が増える
見返りのサービスを
お店を SNS を通して
考える
紹介する
34
// Chap. | 01
// Genre | UIUX
HOW TO USE どうやって使う ?
COUPON
サラダ
EW
N
With Green
桜屋
ヘルシー / サラダ
デザート / プリン 渋谷
800∼
使う
3.5 34
with GREEN
# カフェ # ランチ # サラダ # 野菜 # ジャー
ヘルシー / ジャーサラダ
¥250
引き
あと 9 クリック !!
800 ∼ 4.5 76 東京都渋谷区緑町 123-4 # カフェ # ランチ # スイーツ # ケーキ # チョコレート
Cosme Kitchen
Chocolat Chocolat デザート / ケーキ
ヘルシー / サラダ
渋谷 1200∼
写真
4.0
使う
12
10%
# カフェ # ランチ # 無農薬野菜 # ビュッフェ # サラダ
クリスプ ヘルシー / サラダ
OFF
あと 3 クリック !!
with GREEN
評価して共有
ヘルシー / ジャーサラダ 渋谷
700∼
使う
3.5 90
¥200
# カフェ # ランチ # 珍野菜 # ジャー # 新鮮
検索する
引き
共有する
受け取る
場所や店名などの情報から
本アプリを通して
リンクのクリック数に応じて
訪れたお店やスポットを検索
SNS でレビューを公開
クーポン発行
// Chap. | 01
// Genre | UIUX
ADVANTAGE 今までとの違い
with GREEN ヘルシー / ジャーサラダ 800 ∼ 4.5 76 東京都渋谷区緑町 123-4 # カフェ # ランチ # スイーツ # ケーキ # チョコレート
写真
評価して共有
すぐに共有できる
検索の手間
すぐに見つかる
不明な情報
35
36
// Chap. | 01
// Genre | UIUX
INTERFACE インターフェース
ホーム
検索
// Chap. | 01
情報
// Genre | UIUX
クーポン
37
38
// Chap. | 02
// Genre | EDITORIAL
Chap. 02
ソーラーデカスロン 環境報告書 2018
// Chap. | 02
// Genre | EDITORIAL
39
EDITORIAL/
クライントの意向を汲み取りながらデザインの方向性をすり合わせる という方法をとっている。自分の考えやイメージをわかりやすく相手 に伝えることを念頭に置き、読者にとって読みやすい誌面とは何か？ というような客観的な目線を意識したデザインを心がける。
40
// Chap. | 02
// Genre | EDITORIAL
Solor Decathlon Project's 5years Records 2002 年にアメリカで始まった太陽光住宅の国際コ ンペティションである「ソーラー・デカスロン」。次 世代の太陽光住宅を学生が自ら設計、建設し、エネ ルギー効率や革新性など 10 部門の総合得点を競い 合う学生主体のプロジェクトである。それに則り、 記録に関しても千葉大学の学生で行いたいという依 頼を受けて、５年間の記録を 300 ページ弱の冊子と して制作した。
Chiba Univ., Graduete School of Science and Engineering
// Chap. | 02
// Genre | EDITORIAL
41
制作期間：6 ヶ月間 制作時期：2018/8 制作人数：4 人
42
// Chap. | 02
// Genre | EDITORIAL
// Chap. | 02
// Genre | EDITORIAL
43
44
// Chap. | 02
// Genre | EDITORIAL
// Chap. | 02
// Genre | EDITORIAL
45
46
// Chap. | 02
// Genre | EDITORIAL
// Chap. | 02
// Genre | EDITORIAL
47
48
// Chap. | 02
// Genre | EDITORIAL
Ka
Chiba Ma
tsu
do
University Environmental Report C af
é
shi
wa
noh
a
// Chap. | 02
// Genre | EDITORIAL
49 制作期間：5 ヶ月間 制作時期：2017/7 制作人数：5 人
a
han
Ino
iba
Ni
ch shi
En
Ch
vir
iba Un onm iver sit ent y al Re por t
国立大学法人千葉大学
National University Corporation Chiba University
50
// Chap. | 02
Q. A.
// Genre | EDITORIAL
地域の人にも手に取ってもらいやすいようなポップさもありつつ、 報告書という定は維持したカジュアルになりすぎないデザインとは？
// Chap. | 02
// Genre | EDITORIAL
51
52
// Chap. | 02
// Genre | EDITORIAL
// Chap. | 02
// Genre | EDITORIAL
「千葉大学環境報告書 2017」では人と自然が調和した空 想の千葉大学 をテーマに表紙を作成した。 千葉大学 4 キャ ンパスと周辺地域をベースに様々な建物や人を描いたので実際 の千葉大学と比べながら見 ていただければと思う。表紙だけでなく中身のほうも千葉大学周辺の地域の方に見てもらうことを目標に、 親しみを持って読んでもらえるようなデザインを目指した。
53
54
// Chap. | 02
// Genre | EDITORIAL
P OI N T 1 若い人からご老人まで幅広い層の地域の人に読んでもらうことを目標にお いていた為、情報の優劣や読みやすさを意識し、文字の大きさやカラーリ ングを特に気をつけた。また、読むのに抵抗が大きい堅い印象のある文章 よりもできる限り図やグラフでの情報の整理を心がけた。それでおいて、 ポップやカジュアルな雰囲気に寄りすぎない、報告書の枠を外れないくら いの形式的な冊子を意識して制作した。
P OI N T 2 グラフによる「結果」はデータの「核」となるものである。そのため、結 果を示した図表が見にくかったり、カッコ悪かったりすると、「結果」に説 得力がなくなってしまう。結果の示し方は、グラフや表、写真など、分野 や手法によって様々ではある。そこで、各図表において余計な線を省き、 十分なゆとりを取った上で、結果をより正確に伝える縮尺を用いて、見栄 えのよい図表や写真を制作することを意識においた。
// Chap. | 02
POINT 3 「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置すること、 関係性の強いもの同士は、近くに配置したり、関連のある項目同士を相対 的に近づけることなど「グループ化」を意識したレイアウトを行なっている。 全体の構成やロジックが理解しやすくする為の単調すぎないような配置を 心がけた。関連の強い文章と写真同士を近くに配置し、関連の弱いものは 少し離して配置している。
POINT 4 距離ではなく「色により関連づける」という方「グループ化」も行なっている。 テキストの色と図中の各部位の色を統一させることで、テキストと図の対 応が容易にしている。引出し線なども用いているが、できる限り色によっ て関連付けすることを意識しているまた、章分けにもカラーリングを用い ており、その際の配色は彩度が低めで十分に色相の別れた６色を用いてい る。カラフルでありながら落ち着いた印象のある冊子になっていると思う。
// Genre | EDITORIAL
55
56
// Chap. | 03
// Genre | BRANDING
Chap. 03
racca racca 意匠展
// Chap. | 03
// Genre | BRANDING
57
BRANDING/
" モノの価値を高めるには " という模索を続けながら、作りたいもの、 売りたいものを持ち寄ることで成り立つことを価値として意識してい る。持って見てというような嬉しい価値を創出している。
58
// Chap. | 03
// Genre | BRANDING
// Chap. | 03
// Genre | BRANDING
59
制作期間：3 年間 制作時期：2018/10 制作人数：6 人
60
// Chap. | 03
千葉大学デザイン学科7人の グループでの活動のひとつで り，グループの起点でもある ジュエリー，雑貨ブランド "racca racca"．千葉大学祭か ら始まり，デザインフェスタ やデザインギャラリーへの出 展をし，Webでの販売も展開 中である．今後も活動を広げ ていく予定である．
// Genre | BRANDING
// Chap. | 03
// Genre | BRANDING
61
62
// Chap. | 03
// Genre | BRANDING
// Chap. | 03
// Genre | BRANDING
CONCEPT
繊細ナチュラル
BRAND IMAGE
千葉県の特産品である落花生の軽やかな響きから名付け た.アクセサリーと雑貨のブランドアイデンティティー をより強めることに取り組んでいる．各メンバーが作り たいもの，売りたいものを持ち寄ることで成り立つこと をブランドのイメージとし，個人の個性を打ち出した作 品を売り出している．
63
64
// Chap. | 03
// Genre | BRANDING
PRIMARY LOGO
SUB LOGOS
// Chap. | 03
// Genre | BRANDING
COROR PALETTE
FONTS
Hello
こんにちは
ABCDEFGHIJKLMNOPQRSTUVWXYZ
あいうえおかきくけこさしすせそたちつてと
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ナニヌネノハヒフヘホマミムメモヤユヨ
65
// Genre | BRANDING
No.2
// Chap. | 03
No.1
66
PENDULUM Reuleaux Heptagon Super Elliptical
KATACHI maru sankaku sikaku drop
// Chap. | 03
// Genre | BRANDING
toki ajisai kaede
CORE PRODUCT
ityo kotoba konnichiha sayonara gomenne
No.4
No.3
arigato
67
68
// Chap. | 03
// Genre | BRANDING
WEB
ネット媒体を使い，SNSを通して活動の報告を行ったり， 通販サイトを使った販売も行っている．また自身のWEB サイトも制作・公開し，制作物の紹介や認知度向上のた めの広告作業も行なっている．
// Chap. | 03
// Genre | BRANDING
69
70
// Chap. | 03
// Genre | BRANDING
GALARY
// Chap. | 03
大学祭の出店から始まり，現在はギャラリーや展示会， デザインフェスなどにも活動の幅を広げている．今後は 実店舗に限らず，本格的にネットなども含めた場で広い 視野で活躍できたらと考えている．
// Genre | BRANDING
71
72
// Chap. | 03
// Genre | BRANDING
きて、みて、とって
毎日の中で、自分の感情や何か物事に出会う きっかけである " とって " をテーマに デザイン学科の生徒が生んだデザインから いろんな感情や経験を掴み取ってきたものを披露する展示会として " 意匠展 " を作り上げた．
// Chap. | 03
// Genre | BRANDING
73
制作期間：7 ヶ月 制作時期：2018/2 制作人数：15 人
website < smartphone, tablet, laptop, desktop
ページから扉ページ、そのほかのページの作成を行った。またそれに当たって個人の写真撮影を行った。
へと繋げた . また、ここで決まった柔らかな雰囲気であるメインビジュアルを冊子に落とし込み、個人
テーマである " とって " から VI の制作を行った。この提案をポスターやダイレクトメールのデザイン
Paper
74
// Chap. | 03
// Genre | BRANDING
75
76
// Chap. | 03
// Genre | BRANDING
77
Media メインビジュアルを WEB サイト用に展開し、制作を行った。PC、スマホの対応はもちろん、様々なデ バイスに対応させるためのレスポンシブなデザインを製作した。本サイトに訪れた方に展示会に興味を 持って来てもらうように本サイトだけでは展示会のテーマの全ては分かりきらない情報量を心がけた。 website < smartphone, tablet, laptop, desktop
78
Exibition デザイン学科の生徒が４年間で生んだデザインからいろんな感情や経験を掴み取ってきたものを披露す る展示会となった。五反田の東京デザインセンターで開催したこの展示会には、多くの人の来場があり、 目的のひとつであったお客さんにとって自発的な出会いの場所を提供することが達成できた。 Exhibition stand, Presentation board
// Chap. | 03
// Genre | BRANDING
79
TO CLOSE/ appreciative words. 最後までお目通しいただきありがとうございます。 本ポートフォリオでは、UIUX, エディトリアル、ブランディングの３点をまとめさせ ていただきましが、プロダクトや CG のデザインにも経験があります。 ここに掲載したものに止まらず、様々なことをこなせる幅の広いデザイナーを目指し ています。こんな自分に興味を持っていただけたら光栄です。 またお会いできる機会を楽しみにしております。
T H ANK
YOU.