Slack/Notionっぽい共同作業ツールの雰囲気
10個のコンポーネント
@を入力するとユーザー候補が出るテキスト入力
SlackやNotionで見るやつ。コラボレーション機能の象徴。
ユーザーの顔写真やイニシャルを丸く表示
アバターがあるとユーザー存在感が出る。SNS的な親しみやすさを演出。
ベルアイコン等に付く未読件数の赤い丸
リアルタイム性のあるアプリ感が出る。通知がある = 動いてるサービス。
画面の端に出る詳しい通知。タイトル + 説明 + アクション付き
トーストより詳細な情報を伝えられる。リアルタイム系アプリの必須パーツ。
ホバーで出るリッチな情報カード（プロフィール概要等）
GitHubやTwitterで見るあれ。これがあると『このレベルのUI作れるの？』と驚かれる。
クリックで出る情報パネル。ツールチップより大きい
ページ遷移なしで詳細を見せる。動線のスムーズさが格段に上がる。
テキスト入力で絞り込みながら選択できるUI
選択肢が多い時にセレクトより圧倒的に使いやすい。ユーザー思いの設計。
カテゴリやステータスを小さいラベルで表示
タグで情報を分類できると一気にプロっぽくなる。色分けで効果倍増。
月表示のカレンダーUI。予定や予約の表示・選択に使う
カレンダーUIがあると『業務アプリレベル』の印象になる。個人開発の域を超える。
出来事を時系列で縦に並べるUI
履歴表示がタイムラインだと『UXわかってる人だ』感が出る。リスト表示とは格が違う。