React製デザインシステム「GeistUI 」を調査してみた

概要

利用イメージ

• 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タグのスクロールロックである

弱み

レイアウトが弱い

レスポンシブがしんどい

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

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

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

まとめ

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