コンポーネント図鑑を通じて目指す 初めてのUIデザインを楽しむキッカケつくり
こんにちはー。視伝研のいとーです。
この記事は、2024年12月7日(土)で僕が登壇した
Spectrum Tokyo Festival 2024というイベントで話した内容の再掲です。
このイベントでは、
UIデザイナーなら誰しも触ったことがあるであろう、コンポーネントについてお話しをしました。そして、12/7に公開した「コンポーネント図鑑」の
作成に至った背景なんかもお話ししています。
コツコツ作ってきました
— いとーひろと (@ih_creative12) December 7, 2024
コンポーネント図鑑をwebで公開しましたー！https://t.co/6EJWTf6HCY
「OSのガイドラインで紹介されているコンポーネント複雑で難しいな。。」
UIデザイン始めた頃に感じていた経験をもとに、
コンポーネントが少しでも好きになれるような
コンテンツを揃えています… pic.twitter.com/GvlSkdChMa
以下の内容で記事をまとめてるので気軽に読んでいただけると嬉しいです。
1.僕について
まず、簡単な自己紹介をさせていただきます。
プロフィール
デザイナー 伊藤寛人
2022年 静岡文化芸術大学 デザイン学部 卒業
2022年 株式会社ゆめみ入社。
同年 視伝研設立。
2024年 サイバーエージェント DXdesign室へ入社。
新卒一年目の頃は主にインターンや社内イベントなど、組織に関わるようなグラフィックを作成していました。
なんでUIデザインを業務として取り組み始めたのは
2023年ごろになります。
その頃は主にデザインガイドラインの策定やコンポーネントをひたすら作成する…そういった業務が多かったです。
(現在も引き続きUIデザイナーとして主に活動をしています。)
そして今回、視伝研という所属で登壇したこともあり、こちらの説明も簡単にさせてください。
視伝研とは？
デザインを楽しく研究するチーム。テーマを決め、研究し発表する。
こういった活動を行なっています。
UIデザイナーとして活動していると、どうしても一定の規約の中でデザインをするということが多いです。そういった規約を取っ払って、興味な分野に取り組みアウトプットしていこうという考えで日々活動しています。
これまでのアウトプットは以下のマガジンで見ることができますので、もしよければ見ていただけると嬉しいです。↓↓↓↓↓↓↓↓↓↓↓↓↓↓
これまでの研究テーマなんかも一部共有させてください。
現在の僕のデザインの取り組み方
デザイナーとしての業務と視伝研の取り組み双方をしていた関係で、
仕事として求められることと、自分が楽しめるか？
この2つが重ねていけたらと2024年現在は感じています。
仕事してるとそれ一辺倒になって、なかなか楽しむ感覚っていうのを忘れがちではあるのですが、できる限り両方いいとこ取りのマインドでいけたら思っています。
2.コンポーネント図鑑を作ろうと思った背景
さあさあ、そういう価値観を持ってUIデザイナーとして活動していたのですが、特にUIデザイン始めたての2023年、僕の中であることを強く感じていました。それが..
みんなが「参考にしよう！」って言っている
ガイドライン(AppleのHIG/GoogleのM3)のコンポーネント
なんだか複雑でムズカシイな..
こう感じていました。
当時の気持ちをそのまま言語化していて恐縮なのですが、
まあ、[苦手意識]みたいなものを強く感じていたんですよね。
なんでそう感じていたのか？当時を振り返って例えば以下のようなことが上げられるんじゃないかなーと思っています。
苦手意識を感じた所
実務で使う時のシーンが想像しづらい
この時はカード/リストどちらを使うのが機能的に正しいの？？
情報量が多い..読むハードルが高い..(しかも英語だ..)
どの部分を今見れば問題は解決するんだ！
機能的な説明が主で、座学を頭に詰め込んでいる感覚になる
勉強！って感じだ！
とまあ、こういう経験が積み重なって
「仕事だから調べるけどとても好んで見ているわけではない。。」
そういった気持ちになりました。
まあ、仕事なんでこういう気持ちになっていいかなーとは思うんですけど
視伝研のような活動をしていたこともあり、もっと楽しく見ることはできないのか？？考えてたんですよね。
で、ふとあることを感じました。
これ..コンポーネントがポケモン図鑑のように見ることができたら楽しく眺められるのでは？？
小さい頃、誰にも頼まれずにポケモン図鑑でポケモンを集めていたあの日々。まあ当時は特に気にせずにゲームしてただけなんですけど、もしかしたらあの日常にコンポーネントを楽しく見るヒントが隠されているんじゃないかなと感じました。
ポケモンたちと8年ぶりの再会
というわけで8年ぶりにポケモンと再会してみることにしました。
押し入れの中から埃かぶっている3DSを見つけ、今残っていたソフトを探し出し…ポケモン図鑑をプレイしてみることに。
そして、webでもポケモン図鑑をみることができるのでそれらを通じて
ポケモン図鑑の魅力を探ることにしました。
[※以下で引用されている画像について]
本記事で取り上げている引用は
主に僕が直接ゲーム画面を撮影したもの、
または公式で出されているポケモン図鑑になります。
探った中で、大きく2点魅力があると感じたのでそれぞれ共有をさせていただきます。
魅力1.生態の説明や地域ごとの姿で感じるリアルな生態
例えばポケモン図鑑で挙げられる特徴としては以下のようなものが挙げれられます。
No./タイプ/高さ重さの説明
ポケモンの概要が一目で理解できるUIになっています。
様々な角度からの観察
僕が調べたポケモンX/サンだと角度の観察だけではなく、鳴き声であったりそのポケモンが行う一般的な動きなんかも見ることができました。
地域によって姿や生態の変化
webのポケモン図鑑ですとそれらが比較できる形で、世界中にポケモンがいることが理解できました。
このように、作り込まれた設定は架空の生き物とは思えない、
本当に日常生活にいるんじゃないのかと感じさせてくれます。
そういったリアルな生態がポケモン図鑑を操作したくなる魅力なんじゃないかなと感じました。
魅力2.その生態をいち研究員の視点を踏まえた個性ある説明
突然なんですが…コイキングの説明を見ていただきたいです。
ポケモンサン/ムーン
力は 弱く 頼りないのに
繁殖力だけ 物凄い。
飽きるほど みかけるぞ。
ポケモン 赤・緑・青・黄
おおむかしは まだ もうすこし
つよかったらしい。しかし いまは
かなしい くらいに よわいのだ。
当時何も考えずにみていたのですが…よくみると…
思った以上に研究員主観強めだ！！！！！！
ですが、それがとてもいい魅力なんじゃないかなと感じました。
なぜならポケモンってまだまだ不思議な生き物でして
まだこれといった正解がないんですよね。
なんで研究員も実態を基づきつつも
本人の視点で「こういった生態なんじゃないか？」と
真剣に考えてるんじゃないかなと感じています。
そして、それがユーザー自身にもポケモンの生態を架空の生き物なんだけど
想像する余地を与えてくれている。
この体験がとても素晴らしい魅力なんじゃないかなと思いました。
じゃあ…コンポーネントもそう考えたら面白くない？？
背景としても、コンポーネントはガイドラインやデザインルールに沿ったFigmaで描かれた幾何学的なパーツとしてみられることが多いです。
しかし、そうではなく「ボタンちゃん」「チェックボックスちゃん」のように私たちの身近にいる何か生き物のような存在としてみてみる…
この視点の変化がデザイン初学者の方にとってもすごく面白い気づきになるのでは？？
そう感じています。
なので今回は
ポケモン図鑑とコンポーネントの近しいと感じる特徴を見つけ
そのエッセンスを「コンポーネント図鑑」としてまとめてみる
そういったことを行なってみました。
さあさあ、ここからが本題です。
今回そのコンポーネント図鑑をwebにて作成していますのでもしよかったら見ていただけると嬉しいです。
3.コンポーネント図鑑について
コンポーネント図鑑とは、webサイトを通じコンポーネントという「いち生物」についてまとめた図鑑です。
ここではボタン/トグルなど、この生物に対し研究員が日々感じている意見や考えを記載しています。
コンポーネント図鑑には特徴が大きく3つあり、それぞれ説明をさせていただきます。
1.コンポーネントの一般的な動き・役割を一目で把握できる図鑑
今回UIデザイナー初心者の方にみてもらいたいという想いがありました。
そのため、OSのガイドラインのように詳細な説明は設けずに
格コンポーネントの概要が把握できるような説明をしています。
その中でも格コンポーネントの姿をあらゆる角度から観察ができたり、
そして2024年12月現在はトグルのみの実装となっているのですが
そのコンポーネントにあったアニメーションをしてくれます。
タップするとON/OFFの切り替えができるのでもしよければ見ていただきたいです。↓↓↓↓↓↓↓↓↓↓
そしてコンポーネント自体役割が一定決まっている部分があるため、
それをタイプという形で一目で一般的な主目的の機能の把握ができるようにしました。
これらを踏まえて、
UIデザイン初心者の方がコンポーネントを理解するハードルが少しでも下げることに繋げたいと感じています。
2.コンポーネントの機能を生態のように捉え、研究員の視点で解説
格コンポーネントの説明を以下のように記載しています。
チェックボックス
チェックマークを 入れたり 外したり。
たまに利用規約を ちゃんと読んだか
聞いてくる。
カード
第一印象が 勝負。
コレクトビューに 並ぶ様子は 色とりどりの
お弁当のよう。
この記載は日々UIデザイナーとしても活動している視伝研のメンバーたち。
日々業務の中で感じている素直な考えを記載していただくことにより格OSでは記載されない視点でコンポーネントを見ることができる。
そして、実態に基づきつつもコンポーネントに対して自分なりの意見や考えを持つキッカケにつながると嬉しいです。
3.格OSの違いを、実際のすがたを比較しながら紹介
まず、webのポケモン図鑑の特徴として、格地方で姿が違うポケモンを比較できるという特徴があります。
僕自身、これがコンポーネントにも引用できる特徴なんじゃないかなと感じました。なぜならHIGやM3それぞれの理解がUIデザイナーとしては強く求められるからです。
そう感じたため、格OSの違いの見た目や概要文を紹介し、そこから公式ドキュメントへ遷移するように作成をしています。
こうすることで、それぞれの姿や名前の違い。
少しでも興味を持ったら詳細を見るというフローを設けることで、
HIGやM3に一回でも触れる機会につながっているんじゃないかなと感じています。
まとめ
このコンポーネント図鑑を通じて、
機械的で無機質に見えがちなコンポーネントを身近に感じてもらうこと
M3やHIGを 好意的に調べる回数が一回でも増えること
そして..
コンポーネント図鑑を通じて
UIデザインを楽しむキッカケつくりに
ほんの少しでも繋がる
これは僕個人の意見ですが、UIデザインは覚えなければいけない要素が比較的多い分野なんじゃないかなと感じています。
そういったハードルを少しでも下げて、UIデザインを楽しめる..
そんな図鑑になってくれると嬉しいです。
最後に
とまあ、視伝研は日々このような活動をしています。
少しでも興味をもちましたら他の記事やwebサイトを見ていただけると嬉しいです！
そして…..コンポーネント図鑑はこれからも随時アップデート予定です！
また何かありましたらnote/Xで共有をさせていただきます
ではまた！！