Shinichi kogiso UI/UXデザイナーLT会 #uiuxdesignerslt - 2020/09 TypeScriptではじめるUIデザイン

自己紹介

- 株式会社SmartHRに在籍 - プロダクトデザイングループ所属のカレー担当 - アジャイルとエンジニアリングとデザインが好き - ハンドルネームは@kgsi こぎそしんいち kgsi

罪 傲慢 憤怒 嫉妬 怠惰 強欲 暴食 色欲 SmartHRでのロール プロダクトマネージャー UXデザイナー UXリサーチャー UIデザイナー デザインエンジニア インフォメーションアーキテクト UIデザイナー、マネージャー 強欲 嫉妬 暴食 色欲 憤怒 怠惰 傲慢 メンバー fumiya versionfive oremega nao kgsi uknmr ouji プロダクトデザイングループのチームはそれぞれ「七つの大罪」を（以下略...

今回は小ネタ

UIの情報整理、どうしてます？

UIの情報整理、どうしてます？ WFから情報を起こす

UIの情報整理、どうしてます？ スプレッドシートの 仕様情報から

UIの情報整理、どうしてます？ モデル図から落とし込む...等

UIの情報整理は難しい （こともある）

- 情報は視覚的な表現に囚われやすい - 一次情報だとUIに当てはめた場合に迷いが生じる（ことも） - 現状の画面の値を把握する際に整理がしにくい （ことも） UIの情報整理は難しい

- 設計前に正確な情報を把握しておきたい - エンジニアに意図を共通化して伝えられる情報「も」欲しい UIの情報整理は難しい 理想

UIの情報整理にTypeScriptを使ってみよう

UIの情報整理にTypeScriptを使う TypeScriptの特徴

- 強力な型（interfaceやtype）の表現力が使える - フロントエンドの設計に多用されるので相性が良い - エンジニアと共通言語として利用もできる UIの情報整理にTypeScriptを使う

実際にやってみた （面白そうなので）

思考ケースで紹介 （実画面は出しにくいので）

ケース1: 大まかなワイヤーと仕様が渡されたら

ケース1：大まかなワイヤーと仕様が渡されたら スプレットシートの情報を収集

interface RightFixedNote { NoteItems: 
 memoText?: sumit:
 } interface NoteItem { text?: date?: mail?: 
 edit: } ※interfaceで決められたお作法の上でUIに必要な値を整理する ケース1：大まかなワイヤーと仕様が渡されたら

※それぞれ値に思案をする。値に対して制約・どんな型が必要かを検討 interface RightFixedNote { NoteItems: NoteItem[]
 memoText?: string sumit: () => void
 } interface NoteItem { text?: string date?: Date mail?: string
 edit: () => void } // UIの本体構造 // メモのテキストが必要だよね（最大値は？） // 保存するボタンも必要 // 編集リストが並ぶ（最大いくつだろ） // 編集リストが構造 // 日付（可能ならフォーマットも決めておきたい） // メール（メールのフォーマットも決める？） // 保存・編集するボタンも必要 // 編集リストが並ぶ ケース1：大まかなワイヤーと仕様が渡されたら

interface RightFixedNote { NoteItems: NoteItem[]
 memoText?: string sumit: () => void
 } interface NoteItem { text?: string date?: Date mail?: string
 edit: () => void } ケース1：大まかなワイヤーと仕様が渡されたら

UIとして可視化し、Sketchなどで組み立てる interface RightFixedNote { NoteItems: NoteItem[]
 memoText?: string sumit: () => void
 } interface NoteItem { text?: string date?: Date mail?: string
 edit: () => void } アウトプット ケース1：大まかなワイヤーと仕様が渡されたら

ケース2: TSは も表現可能

※カレーライスを表現する。ちなみに値に日本語を使ってもエラーにならない interface カレーライス { カレールー: カレールー ライス: ライス } interface ライス { 米: 米の品種 水分: 水 | ミルクの種類 ホールスパイス?: ホールスパイス[] } interface カレールー { ホールスパイス?: ホールスパイス[] パウダースパイス?: パウダースパイス[] 野菜?： 野菜の種類[] 肉?： 肉の種類 水分?: 水 | ミルク 塩分?: 塩の種類 　 その他?: その他[] } ケース2： も表現可能

※typeも自由な表現が可能です。書き切れないので割愛 ケース2： も表現可能 type 米の品種 = '日本米'|'ジャスミンライス'|'バスティマライス'|'玄米'|'五穀米' type ホールスパイス = 'コリアンシード'|'シナモン'|'ベイリーフ'|'カルダモン'|'クローブ'|'クミン type パウダースパイス = 'コリアンパウダー'|'チリパウダー'|'パプリカパウダー'|'ターメリック' type 塩の種類 = '食塩'|'岩塩'|'ヒマラヤ岩塩' type 野菜の種類 = 'ズッキーニ'|'トマト'|'ナス'|'ピーマン'|'豆'|'じゃがいも'|'しょうが'|'ナス type 肉の種類 = '鳥肉'|'豚肉'|'マトン'|'水牛' type その他 = 'ヨーグルト'|'タマリンド'|'酢'|'カリフラワー'|'はちみつ' type 牛乳の種類 = '牛乳'|'ココナッツミルク'|'山羊の乳' ...以下略

ケース2： も表現可能 ？

アウトプット ※これはネタです ケース2： も表現可能

この手法の所感 ※個人の感想

- フロントエンドもやってるので割と違和感なく表現できた - 値や必要な要素のチェックを意識できる - 複雑なUIのリバースエンジニアリングなどにも使えそう - エンジニアとして感覚を忘れず設計できる（コードが書ける） この手法の所感

終 UIとコードは仲良しだよ ※弊社はTSも書きたい 好きなプロダクトデザイナーを募集中です