ハクソク

世界を動かす技術を、日本語で。

LiftKit – 「すべてが黄金比から派生する」UI

105日前原文(chainlift.io)

概要

  • LiftKit は、UIの 対称性問題 を解決するオープンソースフレームワーク
  • 1つのグローバルスケールで サブピクセル精度 のプロポーション生成
  • 色やタイポグラフィ など、細部まで調整可能なリアルタイムプレビュー
  • コンポーネントごとの 柔軟な設定 と高いカスタマイズ性
  • MVP段階でも 洗練された見た目 を実現

LiftKitとは

  • LiftKit は、UIデザインにおける 対称性の問題 を解決するためのオープンソースフレームワーク
  • 他にも多様な機能を持つが、最大の特徴は 一貫したプロポーション の提供
  • グローバルスケールファクター で全体のバランスを制御し、サブピクセル単位の精度を実現
  • ユーティリティクラス の利用で、直感的かつ"oddly-satisfying"なコンポーネント作成が可能

色とテーマのコントロール

  • ダイナミックカラー を簡単に使えるモジュール式コントロールパネルを搭載
  • 作業中に リアルタイムプレビュー しながら色の調整が可能
  • 繊細な色合いから大胆なカラーフラッディングまで、 無限のカスタマイズ性
  • コントロールパネル未対応の機能も CSS から直接調整可能

タイポグラフィとマテリアル

  • フォントファミリー だけでなく、グローバルなタイポグラフィ設定も詳細にコントロール
  • ガラス、フラット、ラバーなどの マテリアルプリセット から独自の"-morphism"も作成可能

スケーリングと個別設定

  • テキストだけでなく スペーシングや全体のスケール も一括調整
  • 各コンポーネントごとに 個別設定 が可能で、LK変数の付け外しも柔軟
  • 細部までこだわった ビジュアルディテール を標準装備

MVPでも洗練されたUI

  • MVP段階でも 高い完成度 と洗練された見た目を実現
  • ユーザーが「説明できないけど、なんか心地いい」と感じる 細やかな工夫 が随所に組み込まれている

Hackerたちの意見

価格を調べようとしたんだけど、最初の「営業に問い合わせ」ってのは全然ダメだね。初めからハードル高すぎ！ いくらか教えてくれればいいのに！？ フッターには価格計算機があったけど… 10個のトップレベルページと5個のサブレベルページの価格を聞いたら、なんと$16,500（そう、16,000ドルだよ）。いらないわ。

└

これはカスタムデザインサービス向けみたいだね。法律の専門家じゃないけど、ライブラリやデザイン言語はオープンソースで無料で使えるみたい。

└

ハハハ、「FUCK_YOU@DUMB.COM」ってメールアドレスでフォームを送ったのは君？その計算機は代理店サービス用だよ。LiftKit自体は無料なんだから。

これ、デザインサイトのパロディかと思ったけど、実際にあるんだね。残念ながら、デザインは私には合わないな。なんか中心がずれてるし、全体の「重み」も変な感じ。

└

同意。スケールベースのデザインにかなりの時間を費やしてきたけど、1.618っていつも大きすぎる間隔に感じる。

└

もう批判が出てるからあまり言いたくないけど、同意するよ。デザイナーが数学的に一貫したデザインだけに頼らない理由の良い例だと思う。物を「見た目が良く」するためには、ピクセルをちょっとずつずらすことが多いから、数学的には少しずれてるけど、目には優しく感じるんだよね。

└

100%同意！「確かにこっちの方が良さそう」と思ったけど、実はどの例でも「ビフォー」の方を言ってたことに気づいた。

└

同じこと思った！全体的にちょっとおかしい感じがするよね。

すべてのコンポーネントが実際のUIフレームワークのインスタンスじゃなくて画像で表示されてるUIフレームワークは信頼できないな…

└

ドロップダウンをクリックしたんだけど、実装するのが結構複雑なものだと思ったから。写真すらないし。

└

うん、私も読み始めたときにそう感じた。UIがしっかりと表示されてなくて、ちょっとがっかりした。JavaScriptやNext.js、Reactを使わなきゃいけないフレームワークは信頼できないな…でも、UIキットとして売り込んでるフレームワークは、基本的にブラウザのプラグインじゃない方がいいと思ってる。

└

それもあるけど、専門家を雇って手伝ってもらえる印象があるね。

└

Firefoxでスクロールするとフレームが落ちるやつだよ。

└

実際のCSSを見せたら、みんなそれをコピーしちゃうから、秘密の黄金比コードでお金を取れなくなっちゃうよね（笑）。

このトピックに関する素晴らしい研究論文があるよ。 https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=T...

ちょっとしたアドバイスだけど、ビフォー・アフターのスクリーンショットを使うときは、線をドラッグして切り替えるようなことはしない方がいいよ。フェードやスライドトランジションもなしで、ただ一つ表示させて、もう一つを表示させるボタンをクリックするだけにした方がいい。ボタンをもう一度クリックすると、最初の画像に戻る感じで。クリック、クリック、クリックで、目が勝手に働いてくれるからね。（関連するかもだけど、Andrei Herasimchukの回答がここにあるよ: https://www.quora.com/Why-does-Adobe-Photoshop-differentiate...) それと、どの画像がどれだか分からないんだよね。最初の画像を例にすると、左がMATERIAL-STYLEで右がLIFTKITなんだけど、左は何？線を右にドラッグして左の画像が見えるとき、MATERIAL-STYLEを見てるってこと？それとも、左にドラッグするとMATERIAL-STYLEが見えるの？（これは無駄なこだわりに思えるかもしれないけど、これが完璧主義者のためのUIフレームワークって名乗ってるから。）

└

自分もそれが気になってた。説明を見ると、完全に左にドラッグするとliftkitになるみたいだけど、最初は右に完全にドラッグすると思ってた。

└

同意する、x軸のラベルは役に立たないよね！ありがたいことに、最初の例は「アイコンの間隔を修正したボタン」で、右の画像は左のよりずっと良く見える（他の二つの例よりも質の違いが大きい）から、スライダーが左にあるときにそれが分かる。開発者への提案だけど、左下に「material-style」、右下に「liftkit」とラベルを付けて、スライダーが動くときにそれを適切に隠すと、現在の画像（またはその一部）がどのフレームワークに属しているかがはっきりすると思う。

└

ねえトム、私が作ったんだ。実際、君が言ってるよりももっとひどいよ。タッチスクリーンだと、ハンドルを左右に動かそうとすると上下にスライドしちゃうんだ。最悪だよね？いつか直すつもりだけど、正直言って、君がこのフィードバックをくれたのが初めてなんだ。感謝してるよ！

└

このUIパターンはちょっと変だと思ってた。Aの左側とBの右側を比べる場面って、そんなに多くないからね。写真ではよく見かけるけど、処理前後を見せるために使うことが多い。でも、比較したいのは同じ部分の画像で、処理が適用されているかいないかなんだ。私が作ってる写真ツールの一つはLUTビューワー/コンバーターなんだけど、最初はスライダーがなかったんだ。今では標準的な機能になって、みんなが求めてきたから追加したよ。でも、私が追加した二つの機能がもっと便利だと思う： - 左右の上隅にラベルを付けて、どのバージョンの画像を見ているかすぐに分かるようにした - 画像をクリックしてホールドすると、フルの未処理バージョンをプレビューできて、離すと元のビューに戻る。これで同じ場所の二つのバージョンをすぐに比較できるよ。（君の提案に似てるけど、ラッチしないやつね）ここで動作している動画があるよ：https://lutlab.com/#viewer-photo

みんな、こんにちは！LiftKitのクリエイターです。このプロジェクトは非常に初期段階で、みんなが指摘しているように、まだ製品として使える状態じゃないです。これは自分の自由時間に取り組んでいるソロプロジェクトです。独学なので、見た目が変な選択肢が多いのは、こういうものを作ったことがない人の決定によるものです。LIFTKITは無料でオープンソースです。ウェブサイトはちょっと古いです。https://github.com/Chainlift/liftkit ここでのフィードバックの多くは、6ヶ月前にRedditで提起されたもので、現在も積極的に取り組んでいます。こちらで確認できますよ: https://www.reddit.com/r/webdev/comments/1m41arx/i_spent_18_... 知られている問題点には、- ドキュメントがひどい、スクリーンショットが実際のコンポーネントではなくて馬鹿げている - コンポーネントがアクセスできないスパゲッティ 現在の優先事項: - radixプリミティブで再構築中 - ドキュメントの改善 詳しく知りたい方は、- このYouTube動画でシステムの概要を説明しています（ただし、少し古いです） https://www.youtube.com/watch?v=r1DANFZYJDw できる限りみんなに返信するつもりです。

└

こんにちは、ギャレット。プロジェクトが大好きだよ！このスレッドの批評には賛成だけど、すごく質の高いプロフェッショナルなフィードバックだと思う。これは大きな褒め言葉として受け取ってほしい。フロントエンドの開発者やデザイナーなら、誰もがこのアイデアを夢見るけど、実際にやっちゃったのは君だけだよ。みんなの赤ちゃんを実装したみたいで、心が温かくなる ;) 素晴らしいから、これからも頑張って！(+）本当に一貫したデザインシステムがちゃんと機能してる。GEBを見て、なぜそうじゃないかを知ってるけど :(

└

UIの比較について、shadcn/materialuiの要素を暗くしたり低コントラストにするのはかなり不誠実だと思う。競合の悪い色合いと低コントラストのバージョンと比べるんじゃなくて、ちゃんとしたもの同士で比べてほしい。

└

あなたのデザインアイデアは基本的に好きだけど、7ヶ月前のredditスレッドで「ランディングページ自体を除いて、まだです。それが次の優先事項です」と言ってたよね。今はそれを優先事項として言わなくなってるのが気になる。自分たちのドキュメントでUIコンポーネントをレンダリングできないのは、UIフレームワークにとってかなり大きな赤信号だよ。

└

Radixプリミティブで再構築するなら、Base UI（またはReact Aria）をチェックしてみて。

└

これは素晴らしいアイデアだし、ホームページを表現するのに「満足感」という言葉がぴったりだね。プロセスについて何か書いたことある？ iOSアプリで黄金比を使おうと頑張ってるけど、何かヒントがあれば助かるな。

Chromeをデザインしたとき、ミニマリズムがテーマで、画面が小さかったから、縦のスペースにすごく時間をかけたんだ。薄いタイトルバー、ちょっと大きめのタブストリップ、大きなツールバー。たくさんの議論があって、たくさんの質問があったよ。高さの比率が黄金比に従ってるって言うのは、無駄な議論を省いて「なるほど、いいね」って言わせる便利な方法だった。実際は全然黄金比に従ってなくて、黄金比はバランスや平和に導く魔法の数字じゃないからね。光、丸み、色、視覚的な強さがそれを圧倒的に上回るんだ。

└

ああ、何も正当化していないのに正当化として扱われる説明。ウェブサイトのレイアウトにおける「縦のリズム」。全くのナンセンスだよ。印刷レイアウトでは価値があるけど（隣接するカラムや両面印刷の紙に対して）、デジタルでは完全に無駄だよ（見出しや画像が混ざった横並びのカラムがない限り、でも印刷以外ではあまり見かけない）。フォントサイズを選ぶときの「モジュラー・スケール」。通常は全くのナンセンスよりも悪い。見出しのレベルは独特であるべきなのに、モジュラー・スケールは下位の見出しレベルを小さくしすぎてしまう。すべてのアプリアイコンを丸い四角やスクエア、円に押し込めるのは、一貫性のためだって？いや！そうすると何も見つけられなくなるよ。Androidはそのナンセンスが始まる前の方がずっと良かった。モノクロのアイコンが意図的に同じにデザインされてる。今は全然記憶に残らない。色は有用なシグナルだったのに。（このコメントは一般的なもので、LiftKitについて賛成でも反対でも言ってるわけじゃないよ。）

└

もしかしたら、黄金比は道中で出会った友達だったのかもね。

光学的補正の「なし/トップ」の件だけど、これは大文字の高さを手動で測って正しくスペースを取るのか、それともフォントの高さを正しく尊重しているのか？ フォントの内部に関わったことがあるけど、結構な数が数字を適当に作っていて、実際にはそれを尊重していないことが多いんだ。例えば、「Checklist」のhの部分は大文字の上に伸びているけど、グリフはその数字に従う必要がない。フォントを見栄え良くするけど、扱いにくくなるんだよね。

LiftKitでは、すべてが黄金比から派生していて、マージンからフォントサイズ、ボーダー半径まで、すべてが完璧な比率でレンダリングされる。これにより、他では得られない独特の調和感が生まれる。これが皮肉なのかどうかはわからないけど。

└

よくわからないけど、ページを開いた瞬間、ボタンに何か異常に満足感を感じた（shadcnの時に気になってたことなんだけど）、だから何かしらの方法があるのかもしれないね。

いいプロジェクトっぽいけど、next.js使ってるのは残念だね。