橋本 Hashimoto   Baku

橋本 Hashimoto   Baku

Glisp UI (Scratchpad)

This page is a personal scratchpad.

https://github.com/baku89/glisp-ui

「ぼくの考えたさいきょうのデザインツールUIコンポーネント」を作る。

  • スキームをカスタマイズできるようにする(とりとめのない自由
    • ターミナルやコードエディタのためのカラースキームの統一規格であるBase16をベースにする
      • プレビューサイト
      • あくまで文字ベースのツール向けなので、枠線の色などGUIツールには不向き
        • ローコントラストになりがち
  • Principles
    • 入力の並列化
    • プログレッシブな詳細度
      • Tooltipを用いる
    • 「見た目の簡潔さより、見分けがつくこと」
      • 「アクション」と「インプット」の区別
        • Runwayは、数値入力、レイヤーの揃えを実行するボタンとが見た目状区別できない
        • Figmaはフラットデザイン以降のイディオムに頼りすぎな印象
- 立体感はダサいが役に立つ  
- 可変である領域とそうでない領域の区別  
- 値の組は一つのボックスに収める(最大3つまで)  
  - 例)タプル  
  - Rectはどうする?  
  • 絶対量/相対量の両方を設定できるようにする
    • ドロップダウンを上下ドラッグでトゥイーク
    • チェックボックスの代わりにスイッチ(中央を押すとトグル、両端をクリックで絶対値の設定)
  • 最小の操作距離
  • 不可欠なアクションは省略しない
  • スライダーは極力解像度を高めるために横幅を最大にとる

調査

Framer, Runway, Figmaについて、UIコンポーネントで使われているスタイルを調査する。

フォントは?

  • Runway, Figma: 11px. Inter
  • Framer: 12px, Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol