概要
https://github.com/geist-org/geist-uiReact製のデザインシステム。Next.jsで有名なVercelのデザインシステムに触発されたコミュニティプロジェクト。VercelのUIに似せた作りになっている。
利用イメージ
プログラマ向けツールによくあるコンポーネントが充実。トンマナはミニマル。
- GeistProviderで囲い、CssBaselineタグ以降に、Geistで定義されたコンポーネントでページを記述していく。
- CssBaselineはGeistのCSSを設定するコンポーネント。任意でテーマファイルをカスタムすることができ、themesにテーマオブジェクトを代入すると、カスタムテーマを設定できる。
typescript
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的な画面は強い。社内ツールの設定画面には良さそう。
- プログラマが好みそうなムダのないシンプルなトンマナ。
- 読み物ページをスタイリングする際、コストが高い。
- モバイルを前提にしたアプリケーションを組む場合、工数が跳ね上がるかも。
