エンジニアが見て『いいツールだな』と感じるUIにしたい
10個のコンポーネント
⌘K で開く検索+コマンド実行UI
これ入ってるだけで『え、このレベルのUI一人で作ったの?』と驚かれる。最強の差別化パーツ。
ドラッグでパネルの幅や高さを変更できるUI
VS Code的な操作感。開発者ツール感が出て『本格的すぎる』と思われる。
画面を左右/上下に分割し、境界をドラッグで調整できる
IDEやコードエディター風のレイアウト。技術系ツール感が強烈に出る。
デスクトップアプリ風の上部メニュー(ファイル・編集・表示)
完全にデスクトップアプリ。Webで再現すると『技術力やばい』と思われる。
⌘K や Ctrl+S のようなキーボードキー表示
パワーユーザー向け配慮。ショートカットがある = 効率を考えた設計。
フォルダ構造のような階層データをツリー表示
ファイル管理やカテゴリ管理で使う。管理機能の充実度が伝わる。
右クリックで出る操作メニュー
デスクトップアプリレベルの操作感。Webでこれがあると『ネイティブアプリかよ』となる。
検索・ソート・フィルター・ページネーション・行選択・列カスタマイズ付きの高機能テーブル
管理画面の真骨頂。これが使いやすいアプリは『ちゃんとした業務ツールだ』と思われる。
ページ内の見出しに連動する目次ナビゲーション
ドキュメント系サイトの定番。長いページの可読性が段違いに上がる。
@を入力するとユーザー候補が出るテキスト入力
SlackやNotionで見るやつ。コラボレーション機能の象徴。