無料であらゆるUIを黄金比で生成するオープンソースフレームワーク「LiftKit」

ウェブデザインやUI構築で悩んだ際に、人間が最も美しいと感じると言われている「黄金比」を数学的に計算して生成してくれるUIフレームワーク「LiftKit」を使うと、無料かつオープンソースで細部までこだわったビジュアル設計が可能です。

LiftKit: The UI Framework for Perfectionists by Chainlift.io
https://www.chainlift.io/liftkit

LiftKitはウェブサイトやソフトウェア制作に使えるボタンや入力欄などのインターフェースに使うことができる基本的なUIコンポーネントを提供するフレームワークです。「完璧主義者のためのUIフレームワーク」と題されており、黄金比に基づくプロポーションや細部の調整を自動化する仕組みを特徴としています。

以下は、サイトで示されている「黄金比に基づくUI」の例。左が既存のフレームワークから取得したボタンアイコンで、右がLiftKitにより修正したもの。LiftKitはフォントサイズに基づいて「最も美しい間隔」を計算します。

以下はサイトに使われるカードで、左が既存のフレームワーク、右がLiftKitによるもの。ボタンと同様に、すべての空白を計算して間隔が均等になるよう調整できます。

また、検索などの入力欄でも、余白からフォントサイズ、境界線の半径に至るまですべてが黄金比に基づいて設計されています。LiftKitは「すべてが完璧な比率でレンダリングされ、他では得られない独特の調和感を生み出します」と述べています。

そのほか、ウェブサイトやアプリ全体のカラースキームを簡単かつ直感的に管理できる「Dynamic Color」という機能も搭載しています。Dynamic Colorを使うと、従来のテーマビルダーのように複雑に設定ファイルを書き換える必要はなく、モジュール式のコントロールパネルをプロジェクト内の任意のファイルに追加するだけで、色の変更をリアルタイムにプレビューしながら調整できます。

LiftKitはNode.js、npm、Gitがインストールされているマシンにインストールし、Next.jsなどのフロントエンドプロジェクトに組み込んで、ボタンやカード、テキストなどのUIに「LiftKitスタイル」を適用することで使用できます。詳しいインストール手順は以下から確認できます。

Install | LiftKit
https://www.chainlift.io/liftkit/install

LiftKitはオープンソースプロジェクトで、詳細はGitHubで公開されています。

GitHub - Chainlift/liftkit: Components from design to production
https://github.com/Chainlift/liftkit