---
title: Glisp UI
date: 2022-09-30T02:34:29.000Z
updated: 2026-01-08T14:51:00.651Z
url: https://baku89.com/ja/Glisp_UI
---

# Glisp UI

![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-633655d4f5c46e001fca787e.png)\
<https://github.com/baku89/glisp-ui>

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

- スキームをカスタマイズできるようにする（[とりとめのない自由](/%E3%81%A8%E3%82%8A%E3%81%A8%E3%82%81%E3%81%AE%E3%81%AA%E3%81%84%E8%87%AA%E7%94%B1)）

  - ターミナルやコードエディタのためのカラースキームの統一規格である[Base16](https://github.com/chriskempson/base16)をベースにする

    - [プレビューサイト](https://base16.netlify.app/)
    - あくまで文字ベースのツール向けなので、枠線の色などGUIツールには不向き
      - ローコントラストになりがち

- Principles

  - [入力の並列化](/%E5%85%A5%E5%8A%9B%E3%81%AE%E4%B8%A6%E5%88%97%E5%8C%96)

  - プログレッシブな詳細度
    - Tooltipを用いる

  - 「見た目の簡潔さより、見分けがつくこと」

    - 「アクション」と「インプット」の区別

      - Runwayは、数値入力、レイヤーの揃えを実行するボタンとが見た目状区別できない
        - ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-633656c2d2cdb800202530b4.png)
      - Figmaはフラットデザイン以降のイディオムに頼りすぎな印象
        - ![](https://wp.baku89.com/wp-content/uploads/2026/07/scrapbox-63365a0009d80d001d5984b6.png)

    * 立体感はダサいが役に立つ

    * 可変である領域とそうでない領域の区別

    * 値の組は一つのボックスに収める（最大3つまで）

      - 例）タプル
      - Rectはどうする？

* 絶対量/相対量の両方を設定できるようにする

  - ドロップダウンを上下ドラッグでトゥイーク
  - チェックボックスの代わりにスイッチ（中央を押すとトグル、両端をクリックで絶対値の設定）

* 最小の[操作距離](/%E6%93%8D%E4%BD%9C%E8%B7%9D%E9%9B%A2)で

* 不可欠なアクションは省略しない

* スライダーは極力解像度を高めるために横幅を最大にとる

### 調査

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