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 配下に生成されたコンポーネントをベースに、自分好みにカスタマイズできる点は大きな魅力だと思います。

最新記事