i-Vinci TechBlog
株式会社i-Vinciの技術ブログ

黄金比デザインのLiftkitを触ってみた。

はじめに

こんにちは、最近あまりフロントを触れていない上杉です。
早速ですが、黄金比をベースにしたデザインシステムを特徴とする Liftkit というUIライブラリがあります。
最近 某リスさんのブログ で存在を知り、見出しにつられて興味を持ちました。

2025年7月14日に v1.0.0 がリリースされたばかりでまだ情報が少なく、
9月8日執筆時点では Qiita や Zenn にも記事がありません。

  • Qiitaでの検索結果

    Qiitaでの検索

  • Zennでの検索結果

    Zennでの検索

しかし GitHub ではわずか2か月で 1.8kスターを獲得しており、注目を集める新星です。

今回は、Components API が充実している MUI と比較しながら、使用感やデザインのまとまりを見ていきます。

Liftkitとは？

  • UI要素のサイズ、マージン、角丸、フォントサイズに至るまで、すべてが黄金比に基づいて設計されたUIフレームワーク
  • Tailwind風のユーティリティクラスと組み合わせ可能
  • シンプルなAPIで、直感的に使える
  • デザインの一貫性をほぼ自動で担保してくれる
  • 「細かい余白やサイズ感に悩まず、整ったUIを実現できる」という安心感が強み

Liftkit導入方法

基本的には公式の インストールガイド に従えば簡単に導入できます。
Next.js 向けのガイドしか用意されていないため、Next.js プロジェクトを作成後に npm install を実行してインストールします。

導入後に npm run add all を実行すると、デフォルトで src/components と src/lib ディレクトリが生成され、利用可能になります。

※参考画像

比較方法

フレームワーク同士を比べるとき、「片方はカスタマイズしまくり、片方はデフォルトのまま」というアンフェアな状況になりがちです。
そこで今回は以下のルールを設けました：

  1. componentsの機能として用意されているものだけを使用
    • 例：variant,color,sizeなどのpropsは利用OK
    • 任意のCSSを直書きして見た目を変えるのはNG
  2. marginやpaddingは許容
    • コンポーネントをレイアウトする上で最低限必要なので、指定可能な方法でのみ設定可
  3. Liftkitで用意されているcomponentsを基準に比較
    • まず数の少ないLiftkitのコンポーネントを選び、同等のUIをMUIで実装して比較

👉「Liftkitが公式に提供しているUI部品を、MUIでどれだけ近く再現できるか」という観点で比較します。

実際に触ってみたデモ

今回作ったフォーム

  • Liftkit
    LiftkitのUI画像
  • MUI
    MUIのUI画像

各コード

ボタン(Button) / アイコンボタン(IconButton)

  • Liftkit

    <IconButton key="search" icon="search" variant="fill" />

<Button label="search" startIcon="search" variant="outline" />

  • MUI

    <IconButton color="primary" aria-label="search">
  <SearchIcon />
</IconButton>

<Button variant="outlined" startIcon={<SearchIcon />}>search</Button>

→ 両者ともpropsで完結。Iconの指定方法に差がある。

カード(Card)

  • Liftkit

    <Card variant="outline" material="glass">
  // コンテンツ
</Card>
    • Clickableの指定がpropsに渡せるので容易。
    • materialが指定出来るのが大きな違いだが、自分の環境では特に違いが見当たらなかった。

  • MUI

    <Card variant="outlined">
  <CardContent>
    // コンテンツ
  </CardContent>
</Card>
    • CardHeaderなど細かく設定出来る。variantでfillなどは設定出来ないのでカードの色を変更することが出来ない。

→ MUIは部品が細かく分かれている分、Liftkitよりコード量が増える傾向。

チップ(Sticker/Chip)

  • Liftkit

    <Sticker color="info" bgColor="info">Info Sticker</Sticker>

  • MUI

    <Chip color="info" label="Info Sticker" />

→ どちらも使い勝手は変わらない印象。

インプット(TextInput/TextField)

  • Liftkit

    <TextInput
  type="email"
  labelPosition="on-input"
  helpText="メールアドレスを入力してください"
  placeholder="メールアドレス"
  name="メールアドレス"
  endIcon="mail"
/>
    • ヘルプテキストが上手く機能していなさそう。

  • MUI

    <TextField
  type="email"
  helperText="メールアドレスを入力してください"
  placeholder="メールアドレス"
  label="メールアドレス"
/>

→ Liftkitは「必要十分」、MUIは「痒いところまで手が届く」印象。

スナックバー(Snackbar)

  • Liftkit

    <Snackbar globalColor="errorcontainer">
  <Icon name="badge-info" color="error"/>
  <Text fontClass="body">Snackbar Message</Text>
  <Button label="Action" variant="text" color="error" />
</Snackbar>
    • 背景色やIconなど豊富にデザイン出来る。
    • durationをpropsで簡単指定可能。

  • MUI

    <Snackbar
  anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
  open={true}
  message="デフォルトでは背景色を変更できない"
  action={
    <Button color="inherit" size="small">
      Action
    </Button>
  }
/>
    • 背景色が拡張機能を入れないと変更出来ない。
    • スナックバーの表示位置を簡単に指定出来る。

→ Liftkitは「通知を出すだけならすぐ導入できる」、MUIは「位置やアクション付き通知などを作り込みたい時に強い」。

👉 両者を並べて比較すると、Liftkitは短いコードで整った見た目が作れる一方、MUIはより多彩なpropsで細かく調整できるのが分かる。

まとめ

  • Liftkit
    • デザインの美しさとシンプルさが強み
    • 小中規模アプリやデモ、LPに向いている
  • MUI
    • コンポーネント数と柔軟性が強み
    • 大規模開発や管理画面などに向いている

今回デモとして動かしたコードのリポジトリを公開しているので、気になる方はチェックしてみてください。

Liftkitはまだ発展途上と感じましたが、素のコンポーネントだけでも十分に美しいデザインが作れると感じました。
一方で、hoverやclick時のアニメーションがデフォルトでは付与されていないため、ややリッチさに欠ける印象もあります。
ただし、src/components 配下に生成されたコンポーネントをベースに、自分好みにカスタマイズできる点は大きな魅力だと思います。

最新記事