UIコンポーネントカタログが好きなので語りたい

この記事はUIコンポーネントカタログが好きすぎるフロントエンドエンジニアによる熱烈なLOVEコールです

フロントエンドエンジニアの茶木です。
今日は「UIコンポーネントカタログのここが好きだ!」という話をします。UIデザイナーの方もぜひ読んでいただけたらうれしいです。

以降、情熱をこめて「だ、である」文体になります。なるのだ!

UIコンポーネントカタログとは?

label のテキストを書き換えたり、実際にチェックしてみたりして挙動を確認できる。

UIコンポーネントカタログは、Web開発で使用している「コンポーネント」を一覧にするツールである。

各コンポーネントは、たとえば、ラベルのコンポーネントであればラベルの色やラベルのテキストを変更して確認ができる。さらには見た目に留まらず、button や input 関係のコンポーネントであれば、操作してみてインタラクションを確認することもできる。

百聞は一見にしかず、UIコンポーネントカタログの大手 Storybook のサンプル を実際に触ってみるのをおすすめする。

UIコンポーネントカタログのここが好き!

新メンバーに優しい!

最初はコード読むのも大変!

まずフロントエンドエンジニアサイドのメリット。

開発チームに新しく入ったメンバーは既存機能を理解する必要がある「コードを読め!」とは言うものの、勘所を掴むのは大変だ。

そこでUIコンポーネントカタログの登場なのだ!

こういったケースではコンポーネントから理解を進めていくのは悪くない切り口と言えるし、コンポーネントの修正や作成から徐々に慣れていくのも良い。

そもそも目的のコンポーネントの表示を見つけるのは大変!

最初は目的のコンポーネントをページの中で探すのも一苦労だったりするし、特殊なエラーパターンや普通のアクションでは目にしないコンポーネントもある。

そんな煩わしさから開放されて、コンポーネントを一覧でざっと見れるUIコンポーネントカタログはまさに救世主と言えよう。ありがたすぎて足を向けて寝られない。

開発に疲れたらどんなコンポーネントがあるのか眺めるのも息抜きになるし

「よしなに」対応の穴に気がつく!

こちらはUIデザイナーサイドにも利のある話。

バッジコンポーネントを例に話をする。number に注目して以降を見て欲しい。

number 1は想定通りの表示

これは基本的な挙動の確認。

number が二桁になったとき下地はカプセル状に変わる

当たり前のようだけど、横幅が変わらず真円のまま2桁になるデザインもあるので、そのチェックがサクッとすんでいる。

number が0のときは表示しない

これもよくある挙動だけど、実装落としたりしがち。

number がすごく大きいときは?

これら全部をデザイナーがデザインに起こすのは大変だと思う。

デザインにないものをエンジニアが「よしなに」判断して作成するケースもあって、こんなときは、できたコンポーネントの挙動をエンジニアとUIデザイナーがUIコンポーネントカタログの props を触って見ることで、早い段階で齟齬に気がつける。

なるほど!こっちのが素敵!

また、デザイン時にはわからなかったことも、コンポーネントを触ってみて、よりよいフィードバックが得られることもある。

他にもいっぱい素敵なところがある

他にも素敵なところはいっぱいあるけど、UIコンポーネントカタログの魅力は次のメンバーにも語ってもらうつもりなのでバトンタッチ!

そしてなによりUIコンポーネントカタログは眺めて触って楽しいから・・・

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Chaki Hironori

webライターもやってるフロントエンドエンジニアです。Reactは自信があります。またデザイン畑の出身で、気持ちのいいアニメーションやインタラクティブな表現は丁寧に手掛けます。好きなものは中南米の遺跡で、スペイン語が少しできます。