概要

https://geist-ui.dev/en-us

https://github.com/geist-org/geist-uiReact製のデザインシステム。Next.jsで有名なVercelのデザインシステムに触発されたコミュニティプロジェクト。VercelのUIに似せた作りになっている。

利用イメージ

プログラマ向けツールによくあるコンポーネントが充実。トンマナはミニマル。

• GeistProviderで囲い、CssBaselineタグ以降に、Geistで定義されたコンポーネントでページを記述していく。
• CssBaselineはGeistのCSSを設定するコンポーネント。任意でテーマファイルをカスタムすることができ、themesにテーマオブジェクトを代入すると、カスタムテーマを設定できる。

import React from 'react'
import { GeistProvider, CssBaseline, Text } from '@geist-ui/core'

const Index = ({}) => {
  return (
    <>
      <GeistProvider>
        {/*テーマ設定*/}
        <CssBaseline themes={/*あなたのテーマファイル*/} />
        <>
          {/*ここにGeistコンポーネントを使ってページを記述していく*/}
			    {/*例*/}<Text h1>日本語ダミー記事h1</Text>
        </>
      </GeistProvider>
    </>
  )
}

export default Index

デザイン面

• シンプル。モダン。
• ドロップシャドウは積極的に使われていない。フロート、モーダル、ホバーのときのみ。基本はボーダーでオブジェクトの境界線を区切っていく魅せ方
• カラーは白黒基調で、ボタンや部分パーツにカラーが使われるシンプルな構成 カラーは白黒基調で、ボタンや部分パーツにカラーが使われるシンプルな構成

強み

テーマ切り替えあり

ダークテーマ／ライトテーマ切り替え可。

プログラマ鉄板のコンポーネント

プログラマ向けのサイトによくあるコンポーネントはカバーされている。アバターのアイコン・フォームのパーツ、等。特にCI/CD的ダッシュボードを魅せたいのであれば最適。

カスタムテーマの設定が楽

themeの設定値が少なく、カスタマイズが簡単。

おしゃれな独自アイコン

geistの世界観にあったアイコンが用意されている。

かゆいところに手の届くhooks

かゆいところに手が届く細かいhooksが存在。モーダル出現時等のBodyタグのスクロールロックである

弱み

レイアウトが弱い

レイアウト系コンポーネントに弱み。オブジェクト間のスペーシング等は自分で設定する必要がある。

エレメント内部のpadding等には一定のルールでスタイリングされている反面、この点を手動で組んでいくのはしんどい。

レスポンシブがしんどい

レスポンシブ対応に弱み。個別対応が必要。

読み物系のスタイリングに向かない

読み物ページをスタイリングする際、コストが高い。 アルファベットを前提にしているデザインなので、日本語はやや無骨

H1〜H6タグに与えられているmarginは一律で同じなのでそのまま利用すると、見づらいレイアウトに。適切なマージンを探り当てる必要があり。

自前のコンポーネントを作りWrapすれば使えそうだが、その分コストは上乗せ。

まとめ

• 複雑な表現や複雑な操作がない、シンプルな表現のダッシュボードには良い。特にCI/CD的な画面は強い。社内ツールの設定画面には良さそう。
• プログラマが好みそうなムダのないシンプルなトンマナ。
• 読み物ページをスタイリングする際、コストが高い。
• モバイルを前提にしたアプリケーションを組む場合、工数が跳ね上がるかも。