- 対称性と比率の問題を解決するオープンソースのUIフレームワークで、すべての要素が黄金比から派生する構造
- ボタン、カード、入力欄などで視覚的なバランスと空間感を自動補正し、自然な比率を維持
- グローバルスケールファクターに基づいてサブピクセル単位の精密な比率計算を行い、一貫した調和を実現
- モジュール式カラーコントロールパネルにより、リアルタイムのカラープレビューとテーマ調整が可能で、タイポグラフィ・マテリアル・スケーリングなどの詳細設定をサポート
- MVP段階でも完成度の高い視覚品質を提供し、初期デザインの完成度を高めるツールとして注目
LiftKit 概要
- LiftKitは対称性の問題を解決するオープンソースUIフレームワーク
- 主な目的は、UIコンポーネント間の視覚的バランスを自動で整えること
- 「Extremely Early Access」段階の、初期の実験的バージョン
- フレームワークのすべての比率は**黄金比(golden ratio)**から派生しており、マージン・フォントサイズ・角丸半径などあらゆる要素が調和してレンダリングされる
- 単一の**グローバルスケールファクター(global scale factor)**を使用して、サブピクセル単位の精度で比率を計算する
主なコンポーネントと機能
- ボタンコンポーネントは、アイコンを含む際に発生する視覚的なパディングの不均衡を自動補正
- フォントサイズに応じてパディングを動的に調整し、左右のバランスを維持
- カードコンポーネントは
opticalCorrectionプロパティを提供し、コンテンツの行間(line-height)によって生じる余白の不均衡を補正
- **入力フィールド(Input)**は、黄金比ベースの間隔設計により「呼吸する余白がある」形で表現される
比率と視覚的満足感
- LiftKitは**「oddly-satisfying」な比率**を実現するために、単一のスケールファクターから派生した比率体系を使用
- すべてのコンポーネントは**サブピクセル精度(subpixel accuracy)**で計算され、わずかな視覚的不均衡を最小化
- このアプローチにより、ユーザーに説明しにくい**「自然で調和の取れた感じ」**を提供
色とテーマの制御
- LiftKitは**モジュール式カラーコントロールパネル(modular control panel)**を提供
- 作業中のファイルに追加してリアルタイムのカラープレビューが可能
- 微細な色調の変化から強いカラーフラッディングまで、幅広い調整をサポート
- 色以外にも、以下の項目をCSSから直接調整可能
- Typography: フォントファミリーを超えた細かなグローバルタイポグラフィ制御
- Custom Materials: glass, flat, rubber などのプリセットをベースにした新しいマテリアルの生成
- Scaling: テキストだけでなく、間隔など全体の要素が一緒にスケーリング
- Component-specific configs: 個別コンポーネントの外観を独立して調整可能
細部へのこだわりとデザイン品質
- LiftKitはMVP段階でも完成度の高い視覚品質を実現するよう設計されている
- 「Make MVP’s that don’t look like MVP’s」
- 基本的に**知覚的に正確な間隔(perceptually accurate spacing)**を提供し、ユーザーが感じるバランス感を最大化
- こうした細かなディテールが、「説明しにくいが、より良く見える」結果を生み出す
3件のコメント
ランディングページに前後比較がありますが、どちらも良く見えますね..
普通、黄金比よりメジャーセカンド（1.125）を使うことが多くないですか……？
Hacker Newsのコメント
Chromeを設計していたとき、ミニマリズムが中核だった
画面が小さい時代だったので、縦方向のスペースを減らすことに多くの時間を使った
タブストリップ、ツールバー、タイトルバーの比率を黄金比だと説明すると議論は減ったが、実際にはまったく黄金比ではなかった
光、色、角丸、視覚的な強さのような要素のほうがはるかに重要だった
実際、少し調整すれば何でも黄金比に合わせられる。こういうのは「スピリチュアル」な感性が好きな人に特によく効く
今でも画面が大きくなったからといってスペースを無駄にしたくはない
結局は好みの問題なのだと思う
印刷物では有用だが、デジタルではむしろ可読性を損なう
アイコンを無理やり同じ形にそろえたり色をなくしたりするのも、識別性を下げる
私はLiftKitの作者だ
このプロジェクトはまだ非常に初期段階で、一人で趣味として作っている
オープンソースで無料 → GitHubリンク
フィードバックの大半はすでにRedditスレッドで議論されている
現在はRadix primitivesで再構築し、ドキュメント改善を優先している
概要はYouTube動画でも見られる
ほとんどのフロントエンド開発者が夢見る「完全に一貫したデザインシステム」を実際に実装したのは見事だ
自前のドキュメントでコンポーネントをレンダリングできないUIフレームワークは信頼しにくい
iOSアプリで黄金比を適用しようとしたことがあるので、制作過程を共有してほしい
ビフォーアフターの比較スクリーンショットを見せるなら、ドラッグスライダーではなくボタンで即座に切り替えられるようにしたほうがいい
クリックするたびに目が直接差異を認識できる
関連参考: Andrei HerasimchukのQuora回答
左右に動かそうとすると上下に滑ってしまう。フィードバックありがとう、必ず直すつもりだ
参考動画: LUTLab Viewer
最初はこのサイトがパロディだと思った
本物だと知って驚いたし、構成要素の中心がずれて見え、視覚的な重みも不均衡に感じられた
実際には数ピクセルずつ調整してこそ目に自然になる
「optical correction none/top」について、実際に大文字の高さを測って合わせているのか、それともフォントメトリクスをそのまま使っているのか気になる
フォント内部の数値は信頼しにくく、実際のグリフはその数値に従っていない
こういう点がフォント作業の悪夢になる
すべてのコンポーネントを画像だけで見せるUIフレームワークは信頼しにくい
価格を探したが、「Contact Sales」しかなく、すぐに見積もり計算機を使うことになった
上位ページ10個 + 下位ページ5個で計算したら**$16,500**になって驚いた
誰かが「FUCK_YOU@DUMB.COM」でフォームを送ったが、もしかしてあなたか？
多くのUIライブラリが見落としている点がある
角丸ボックスが入れ子になるとき、border-radiusは間隔分だけ足してやる必要がある
そうしないと視覚的にずれた感じが残る
例: Snackbarコンポーネント, Chromeタブレイアウトのスクリーンショット
関連する研究論文もある → PMC論文リンク)
LiftKitの説明に「すべての要素が黄金比から導かれ、完璧な調和を成す」という文言があったが、皮肉なのか本気なのかわからない
何か理論以上の感覚的な調和があるようだ