商品開発プロセスを改善する Storybook のベストプラクティス

UXPinと Storybook を統合することにより、インタラクティブコンポーネントを持つUIライブラリを使って、これまで以上にデジタル製品を簡単に構築することができます。これによって、ワークフローが改善され、より効果的な製品開発につながります。しかし、単に2つのツールを統合しただけでは、すべてのメリットが得られるわけではありません。ここで紹介する Storybook のベストプラクティスをご活用いただき、製品開発プロセスをさらに効果的なものにしましょう。

まだUXPinのアカウントを持っていない場合は、まずは14日間の無料トライアルをお試しください。Mergeを希望の方はオンラインデモにてご案内します。

誰でも探しやすいコンポーネントの命名規則にする

Storybook には検索機能があり、新しいプロジェクトに追加したいストーリーやコンポーネントを見つけるのに役立ちます。しかし、この検索機能は調べたいものの名前を完璧に覚えている必要はありませんがだいたい覚えておいた方が良いでしょう。覚えていない場合だと、どうしても必要なアセットにたどり着くまで、延々とファイルを見続けることになってしまいます。

商品開発プロセスを改善する Storybook のベストプラクティス - 命名規則

このような問題をなくすために、命名規則をしてください。現実的には、どのような命名規則を選んでも問題ありません。[ComponentName].stories.[js|jsx|tsx]は、多くのチームでうまく機能していますが、かならずしも全ての場所でうまくいくとは限りません。

最も重要なことは、一つの命名規則を選び、全員がそれを使うことを義務付けることです。デザインシステムの隅々にまで不正なコンポーネントが存在しないようにするためです。

Storybook のCSFフォーマットにこだわる

Storybookからコンポーネントをエクスポートする際、ファイルはデフォルトでCSFフォーマットになっています。デザイナーや開発者の中には、自分の編集ソフトに合わせてフォーマットを変更したくなる人がいます。しかし、それは決して良いことではありません。CSFフォーマットは、ファイルを他の環境に移動させても、メタデータが確実に残るようになっています。

商品開発プロセスを改善する Storybook のベストプラクティス - CSFフォーマット

その上、Merge ユーザーはファイル拡張子を変更する理由がありません。ツールを統合し、UI コンポーネントライブラリを UXPin の編集およびプロトタイピング環境に追加するだけです。

私たちは、誰もが理解できるように、これらのStorybookのベストプラクティスをできるだけシンプルで実用的なものにしています。CSFの使い方についてもっと知りたい方は、このトピックに関するStorybookのチュートリアルをご覧ください。

注意：ほとんどの内容はデザイナーよりも開発者の方が理解しやすいでしょう。このチュートリアルが無意味なものに見えても心配しないでください。StorybookとMergeは、ドラッグ＆ドロップのデザイン環境を提供しており、すぐに習得することができます。

１回に１つストーリーを作成する

クライアントはすぐに結果を求めます。それがデジタル製品を作るということの本質です。鳴り止まないメールに対して、マルチタスクで対応する人もいます。するとどうでしょう。問題を解決したり、プロジェクト間で生じた混乱を整理したりするのに多くの時間を費やすことになります。

そのためには、1つのストーリーに集中して取り組むことが大切です。そうすれば、プロジェクトのあらゆる側面を整理することができ、より良い結果が得られ、より早くマイルストーンに到達することができるでしょう。

ストーリーに着手したら、区切りのよいところまで整理してコンポーネントの追加とテストを続けます。そうすることで、すべてのコンポーネントが適切なストーリーに配置され、プロジェクトの進捗状況を正確に把握することができます。

もちろん、1つのプロジェクトを完成させるまで、1つの作業しかできないというわけではありません。ただ、一度に一つだけのストーリーに集中するように、一日のスケジュールを組む必要があります。

順序立てて進める。StorybookとMergeはコードベースのデザインアプローチを採用しているので、チームの時間を大幅に節約できるツールがすでに用意されています。急ぐ必要はありません。

カスタムドキュメントが必要性について開発チームと相談する

Storybookにデフォルトで搭載されているDocsPageを使うべきなのか、それとも独自のドキュメントを作成するべきなのか。この質問には、普遍的な正解はありません。しかし、あなたのチームが開発する製品の種類に応じて、一つの選択肢があると思います。

あなたがJavaScriptの経験が豊富でない限り、コンポーネントをドキュメント化する最善の方法については、開発チームと話し合う必要があります。どちらの方法がデザインや開発のニーズに合っているかは、専門家の意見を参考にしてください。

Storybookで遊ぶ時間を作る

Storybookには、クリエイティブなリスクを冒しても、ストーリーの他のコンポーネントに影響を与えないためのサンドボックスがあります。これはStorybookの最も優れた点のひとつですから、ぜひ活用してください。

遊ぶことは時間の無駄ではありません。あるツールがどのように機能するのか（機能しないのか）を学ぶ最も効果的な方法のひとつです。今、探索に費やす時間は、将来的にStorybookのより良いユーザーになるためのものです。練習だと思ってやってみてください。でも、楽しみながらやってくださいね！

Storybookのコミュニティに参加する

Storybookにはたくさんのチュートリアルがあり、UIコンポーネントライブラリやデザインシステムを作るための効果的な方法を見つけることができます。しかし、すべての質問にチュートリアルが答えてくれるわけではありません。

そこで、Storybookのコミュニティの出番です。他のオープンソースツールと同様に、Storybookにもユーザーや開発者の活発なコミュニティがあります。コミュニティに参加すれば、他のユーザーと知見やヒントを交換することができます。

また、コミュニティに参加することで、Storybookのアップデート情報や、それがデザインプロセスにどのような影響を与えるかを常に知ることができます。

StorybookとUXPinを始めよう

お気に入りのデザインまたはプロトタイピングツールとStorybookを統合してみなければ、Storybookのベストプラクティスを活用することはできません。この2つを統合して、コードコンポーネントを使ったデザインを始めましょう。

誰にでもできる1分程度の簡単な作業からすべてが始まります。デザインと開発のプロセスがどのように改善されるかご覧ください！