「コンポーネント図鑑」を通じて目指す 初めてのUIデザインを楽しむキッカケつくり / Inspiring Beginners to Enjoy UI Design with "Component Encyclopedia"

Session by :
伊藤 寛人 (Hiroto Ito) / Institute of Visual Communication Design
Spectrum Tokyo Festival 2024 Day 1 (2024/12/7)

Transcript

1. spectrum tokyo festival 2024 コンポーネント図鑑を通じて 目指す、 初めてのUIデザインを 楽しむキッカケつくり
2. 本日の流れ 1.僕について 2.コンポーネント図鑑を作ろうと思った背景 3.コンポーネント図鑑について
3. 僕について 1.
4. 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 主に組織に関わる
 グラフィックを
 作成
5. member デザインを楽しく研究するチーム。 テーマを決め、研究し発表する 発表はnoteを通じアウトプットしていく 視伝研とは？ this is me 1.僕について
6. これまでの僕の研究テーマ(一部抜粋) 「ちぎるUI」 について考えてみる ゲームポケモンスロットUIデザイン の歴史を探る 架空のUIデザイン作ろうとしたら めっちゃ迷走した。 Thema UIデザインの歴史を紐解く Thema 架空の世界のUIをデザインする Thema アナログの要素を持ち込むことに よるアイディアの転換
7. 仕事としての デザイン ソト ウチ 楽しむための デザイン 7 自分から求めるスキ3 7 売り上げ関係なく考える 7 社会から求められるスキ3 7 利益の追求する この2つを重ねたものを作り続ける 1.僕について 現在の僕のデザインの取り組み方
8. コンポーネント図鑑を 作ろうと思った背景 2.
9. 新卒2年目の僕 2.コンポーネント図鑑を作ろうと思った背景 なんだか な。。 複雑でムズカシイ みんなが 「参考にしよう！」 って言ってる ガイドライン(HIG/M3)のコンポーネント
10. 実務で使う時の シーンが想像しづらい 機能的な説明が主で、 座学を頭に詰め込んで いる感覚になる (しかも英語だ。。) 情報量が多い。。 読むハードル高い。。 2.コンポーネント図鑑を作ろうと思った背景 苦手意識を感じた所
11. 実務で使う時の シーンが想像しづらい 機能的な説明が主で、 座学を頭に詰め込んで いる感覚になる (しかも英語だ。。) 情報量が多い。。 読むハードル高い。。 2.コンポーネント図鑑を作ろうと思った背景 苦手意識を感じた所 仕事だから調べるけど とても好んで見ているわけではない。 。
12. これ..コンポーネントが ポケモン図鑑のように見ることができたら 楽しく眺められるのでは？？ そんな中、感じたこと 2.コンポーネント図鑑を作ろうと思った背景
13. ポケモンたちと8年ぶりの再会 遊んだり、 webで調べる中で図鑑の魅力を探る 引用：https://zukan.pokemon.co.jp/ 2.コンポーネント図鑑を作ろうと思った背景
14. 魅力その1 No./タイプ/高さ重さの説明 様々な角度からの観察 地域によって姿や生態の変化 ※ゲーム画面は伊藤撮影 2.コンポーネント図鑑を作ろうと思った背景 生態の説明や地域ごとの姿で感じるリアルな生態
15. 2.コンポーネント図鑑を作ろうと思った背景 その生態を を踏まえた個性ある説明 いち研究員の視点 ポケモンサン/ムーン 力は　弱く　頼りないのに 繁殖力だけ　物凄い。 飽きるほど　みかけるぞ。 ポケモン X/Y 力も　スピードも　ほとんど　ダメ。 世界で　一番　弱くて　 情けない ポケモンだ。 ※ゲーム画面は伊藤撮影 魅力その2
16. ガイドラインやデザインルールに沿った 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.コンポーネント図鑑を作ろうと思った背景 コンポーネントもそうだと考えたら面白くない？？ だったら..
17. ガイドラインやデザインルールに沿った 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.コンポーネント図鑑を作ろうと思った背景 じゃあ、 そうだと考えたら面白くない？？？ コンポーネントも 今回行ったこと ポケモン図鑑とコンポーネントの を見つけ そのエッセンスを「コンポーネント図鑑」 としてまとめてみる 近しいと感じる特徴
18. 2.コンポーネント図鑑を作ろうと思った背景 コンポーネント図鑑のQRコード
19. コンポーネント図鑑に ついて 3.
22. 2 1 格コンポーネントの詳細画面 コンポーネントの すがたや動きを で観察できる アニメーション タイプとして 一般的な 把握ができる 主目的の機能が
 1 2 3.コンポーネント図鑑について 1.コンポーネントの一般的な 図鑑 動き・役割を一目で把握できる
23. チェックボックス チェックマークを　 入れたり　 外したり。 たまに利用規約を　 ちゃんと読んだか 聞いてくる。 カード 第一印象が　 勝負。 コレクトビューに　 並ぶ様子は 色とりどりの お弁当のよう。 研究員はUIデザイナーとしても活動をしているメンバーたち。
 格OSでは記載されない を知ることができる。 現場視点でコンポーネントに日々感じていること 3.コンポーネント図鑑について 2.コンポーネントの機能を で解説 生態のように捉え、 研究員の視点
24. 地方によって姿を変えて生息 コンポーネント図鑑 格OSの違いの見た目や概要文を紹介し、 するように作成 そこから公式ドキュメントへ遷移 ポケモン図鑑 3.コンポーネント図鑑について 3.格OSの違いを、 実際の しながら紹介 すがたを比較
25. M3やHIGを
 が 好意的に調べる回数 一 回でも増えること 機械的で無機質に見えがち なコンポーネントを 身近に感じてもらうこと 特徴 1.コンポーネントの一般 的な 図鑑 動き・役割を一目で 把握できる 2.コンポーネントの機能 を で解説 生態のように捉え、研 究員の視点 3.格OSの違いを、実際の しながら紹 介 すがたを比較 3.コンポーネント図鑑について このコンポーネント図鑑を通じて
26. そして.. コンポーネント図鑑を通じて UIデザインを楽しむキッカケつくりに ほんの少しでも繋がる そんな図鑑になってくれると嬉しいです 3.コンポーネント図鑑について
27. 最後に お問い合わせ先 もし を持ったら 是非、 お話ししたいです！ 興味 UI/UX問わず、 と出会いたい 色んな分野の方 ご清聴ありがとうございました！