デザイナー目線のChakra UI

はじめに

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay15の記事です！
昨日は「話題のノーコードツールを使ってみた」でした。

話題のノーコードツールを使ってみた

今回は、Chakra UIについてご紹介いたします。

Chakra UIとは、UIコンポーネントフレームワークの一つです。Reactのライブラリなので、エンジニアの方にとっては馴染み深い名前かもしれません。

スピード重視で0からデザインを作成する必要がある時に役立つと思います！一緒に学んでいきましょう！

Chakra UIの概要

Chakra UIは、コンポーネントの一貫性を保つ原理に基づいて作られたものであり、シンプルで実際に起こるUIデザインの問題に貢献する構成可能なコンポーネントを目指すものです。

"Chakra UI is established on principles that keep its components fairly consistent."
"Our goal is to design simple, composable components that cater to real-life UI design problems."

引用：公式ドキュメントより

Utility first(すでにスタイルが定義されたclassがあるので、CSSを書く必要が少ない)であり、Tailwind CSSと共に名前が出てくることが多いです。

Tailwind CSSと同様に、ダークモードやレスポンシブに対応したclassがあるので、とても便利です！それぞれを比較すると、Chakra UIには最小のコンポーネントが用意されているのでデザインシステムを作るコストが低い、Tailwind CSSに比べるとデザインの自由度は下がるなどの点が挙げられます。

React以外の開発でどちらを使うか迷った際は、オリジナルのデザインを多用したければTailwind CSS、情報の整理を最優先として素早くデザインを作成したければChakra UIという基準で選んでみても良いかもしれません。

公式ドキュメントには、Material designやant designとの比較もまとめられているので気になる方はそちらも読んでみてください！

Figmaを見てみる

FigmaのCommunityにはChakra UIのファイルが公開されています！（以下添付画像はこちらのファイルより使用しています。）

タイポグラフィやシャドウだけでなく、丸みまで定義されています。

色も以下のようにある程度網羅されているので、作りたいもののコンセプトが決まっていたらすぐにデザインに取り掛かることができます。

ブレイクポイントごとのフレームは5段階、コンテイナーも4段階それぞれ用意されています。

コンポーネントもフォームやテーブルから、バッジやアバターなどの小さなものまであります。モーダルもあるので特殊でない画面であればコンポーネントだけを組み合わせてデザインができそうです！

デザインしてみる

実際にChakra UIのコンポーネントを使って、何かを購入する画面を作ってみます！
用意されたコンポーネントだけでここまで作成できます。便利です！

さらにここから文字や色を修正すると画面の完成です！

variantsで簡単にエラー時のスタイルにすることができます。
アラートも何種類かあるのでデザインしたい雰囲気に合わせたものを選ぶことができます。

まとめ

Chakra UIを使用すると、コンポーネントを組み合わせて素早くデザインを作成することができます。

シンプルで無駄のないデザインになるので、幅広いプロダクトに使えそうです！
Chakra UIを使って素早くデザインを作成してみてください！