Slide 1

Slide 1 text

spectrum tokyo festival 2024 コンポーネント図鑑を通じて 目指す、 初めてのUIデザインを 楽しむキッカケつくり

Slide 2

Slide 2 text

本日の流れ 1.僕について 2.コンポーネント図鑑を作ろうと思った背景 3.コンポーネント図鑑について

Slide 3

Slide 3 text

僕について 1.

Slide 4

Slide 4 text

My history 伊藤 寛人 Designer 24歳 2000/02/18 Profile 2018-2021 2022 2023 2024 2025 d 静岡文化芸術大学
 デザイン学部入学 d グラフィックを学ぶ
 よくタイポグラフィ などを作成 d サイバーエージェント  DXデザイン室へ入社 d このあたりで
 本格的にUIデザイン
 に取りくみ始める d デザインガイドライ ンの策定やfigmaで コンポーネント作成 を行う d 視伝研 設立 d 新卒で
 株式会社ゆめみへ
 入社 d 主に組織に関わる
 グラフィックを
 作成

Slide 5

Slide 5 text

member デザインを楽しく研究するチーム。 テーマを決め、研究し発表する 発表はnoteを通じアウトプットしていく 視伝研とは? this is me 1.僕について

Slide 6

Slide 6 text

これまでの僕の研究テーマ(一部抜粋) 「ちぎるUI」 について考えてみる ゲームポケモンスロットUIデザイン の歴史を探る 架空のUIデザイン作ろうとしたら めっちゃ迷走した。 Thema UIデザインの歴史を紐解く Thema 架空の世界のUIをデザインする Thema アナログの要素を持ち込むことに よるアイディアの転換

Slide 7

Slide 7 text

仕事としての デザイン ソト ウチ 楽しむための デザイン 7 自分から求めるスキ3 7 売り上げ関係なく考える 7 社会から求められるスキ3 7 利益の追求する この2つを重ねたものを作り続ける 1.僕について 現在の僕のデザインの取り組み方

Slide 8

Slide 8 text

コンポーネント図鑑を 作ろうと思った背景 2.

Slide 9

Slide 9 text

新卒2年目の僕 2.コンポーネント図鑑を作ろうと思った背景 なんだか な。。 複雑でムズカシイ みんなが 「参考にしよう!」 って言ってる ガイドライン(HIG/M3)のコンポーネント

Slide 10

Slide 10 text

実務で使う時の シーンが想像しづらい 機能的な説明が主で、 座学を頭に詰め込んで いる感覚になる (しかも英語だ。。) 情報量が多い。。 読むハードル高い。。 2.コンポーネント図鑑を作ろうと思った背景 苦手意識を感じた所

Slide 11

Slide 11 text

実務で使う時の シーンが想像しづらい 機能的な説明が主で、 座学を頭に詰め込んで いる感覚になる (しかも英語だ。。) 情報量が多い。。 読むハードル高い。。 2.コンポーネント図鑑を作ろうと思った背景 苦手意識を感じた所 仕事だから調べるけど とても好んで見ているわけではない。 。

Slide 12

Slide 12 text

これ..コンポーネントが ポケモン図鑑のように見ることができたら 楽しく眺められるのでは?? そんな中、感じたこと 2.コンポーネント図鑑を作ろうと思った背景

Slide 13

Slide 13 text

ポケモンたちと8年ぶりの再会 遊んだり、 webで調べる中で図鑑の魅力を探る 引用:https://zukan.pokemon.co.jp/ 2.コンポーネント図鑑を作ろうと思った背景

Slide 14

Slide 14 text

魅力その1 No./タイプ/高さ重さの説明 様々な角度からの観察 地域によって姿や生態の変化 ※ゲーム画面は伊藤撮影 2.コンポーネント図鑑を作ろうと思った背景 生態の説明や地域ごとの姿で感じるリアルな生態

Slide 15

Slide 15 text

2.コンポーネント図鑑を作ろうと思った背景 その生態を を踏まえた個性ある説明 いち研究員の視点 ポケモンサン/ムーン 力は 弱く 頼りないのに 繁殖力だけ 物凄い。 飽きるほど みかけるぞ。 ポケモン X/Y 力も スピードも ほとんど ダメ。 世界で 一番 弱くて  情けない ポケモンだ。 ※ゲーム画面は伊藤撮影 魅力その2

Slide 16

Slide 16 text

ガイドラインやデザインルールに沿った Figmaで描かれた幾何学的なパーツ Label Description Label Label Label Label Label Label Description Title Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. Button Label Label Label Button Button 私たちの身近にいる 何か生き物のような存在 この がデザイン初学者の方にとっても すごく面白い気づきになるのでは?? 視点の変化 ‼ ️ 2.コンポーネント図鑑を作ろうと思った背景 コンポーネントもそうだと考えたら面白くない?? だったら..

Slide 17

Slide 17 text

ガイドラインやデザインルールに沿った Figmaで描かれた幾何学的なパーツ Label Description Label Label Label Label Label Label Description Title Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. Button Label Label Label Button Button 私たちの身近にいる 何か生き物のような存在 この がデザイン初学者の方にとっても すごく面白い気づきになるのでは?? 視点の変化 ‼ ️ 2.コンポーネント図鑑を作ろうと思った背景 じゃあ、 そうだと考えたら面白くない??? コンポーネントも 今回行ったこと ポケモン図鑑とコンポーネントの を見つけ そのエッセンスを「コンポーネント図鑑」 としてまとめてみる 近しいと感じる特徴

Slide 18

Slide 18 text

2.コンポーネント図鑑を作ろうと思った背景 コンポーネント図鑑のQRコード

Slide 19

Slide 19 text

コンポーネント図鑑に ついて 3.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

2 1 格コンポーネントの詳細画面 コンポーネントの すがたや動きを で観察できる アニメーション タイプとして 一般的な 把握ができる 主目的の機能が
 1 2 3.コンポーネント図鑑について 1.コンポーネントの一般的な 図鑑 動き・役割を一目で把握できる

Slide 23

Slide 23 text

チェックボックス チェックマークを  入れたり  外したり。 たまに利用規約を  ちゃんと読んだか 聞いてくる。 カード 第一印象が  勝負。 コレクトビューに  並ぶ様子は 色とりどりの お弁当のよう。 研究員はUIデザイナーとしても活動をしているメンバーたち。
 格OSでは記載されない を知ることができる。 現場視点でコンポーネントに日々感じていること 3.コンポーネント図鑑について 2.コンポーネントの機能を で解説 生態のように捉え、 研究員の視点

Slide 24

Slide 24 text

地方によって姿を変えて生息 コンポーネント図鑑 格OSの違いの見た目や概要文を紹介し、 するように作成 そこから公式ドキュメントへ遷移 ポケモン図鑑 3.コンポーネント図鑑について 3.格OSの違いを、 実際の しながら紹介 すがたを比較

Slide 25

Slide 25 text

M3やHIGを
 が 好意的に調べる回数 一 回でも増えること 機械的で無機質に見えがち なコンポーネントを 身近に感じてもらうこと 特徴 1.コンポーネントの一般 的な 図鑑 動き・役割を一目で 把握できる 2.コンポーネントの機能 を で解説 生態のように捉え、研 究員の視点 3.格OSの違いを、実際の しながら紹 介 すがたを比較 3.コンポーネント図鑑について このコンポーネント図鑑を通じて

Slide 26

Slide 26 text

そして.. コンポーネント図鑑を通じて UIデザインを楽しむキッカケつくりに ほんの少しでも繋がる そんな図鑑になってくれると嬉しいです 3.コンポーネント図鑑について

Slide 27

Slide 27 text

最後に お問い合わせ先 もし を持ったら 是非、 お話ししたいです! 興味 UI/UX問わず、 と出会いたい 色んな分野の方 ご清聴ありがとうございました!