【生産性爆上がり！】ゼロ・ワン・インフィニティを意識して仕様漏れとおさらばする思考法！

どうも〜！no plan株式会社 CEOのおかむーです。(web開発の会社です！)

最近、デザイナーさんに教えてもらったのですが
「ゼロ・ワン・インフィニティ」の思考法という考え方がありこれを使うと、仕様漏れのリスクを大幅に減少させることがわかった ＆ ググってもあんまり出てこなかったので、その知見を共有したいと思います！

# まずは結論
- 「ゼロ・ワン・インフィニティ」の思考法を活用すると、一定の仕様漏れをカバーでき、さらにより良いUI/UXで品質の高いプロダクトを開発することができます！

# まずゼロ・ワン・インフィニティとは
- 簡単に言うと、画面の要素の個数を「0のとき」「1のとき」「無限のとき」のそれぞれの場合で考える思考法です

# 仕様漏れって怖い
webアプリケーションの開発プロセスにおいて、仕様漏れはプロジェクトの遅延や品質の低下を引き起こす主な要因の一つです。。。。
この考慮をミスってしまった暁には

- 「作り直し！」
- 「仕様再検討！」
- 「追加工数発生！」
- 「開発遅延！」
- 「メンバーの士気低下！！」

あちゃああああ〜〜〜ごめんなさいいいいい〜〜〜〜っとなってしまいます

# 0（ゼロ）表示の場合

### 投稿が0の場合
意外とこれ忘れがちじゃありませんか？

![images (3).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/019dd6ee-98fe-6e42-9b2c-b98b99a9d69b.jpeg)

大体のアプリなどは投稿を促したり、ありません表示をやってる印象です。
![Screenshots_row1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/7d325031-df4f-3632-43d5-a4e3944285eb.png)


https://github.com/dzenbot/DZNEmptyDataSet

意外と初期のUserってどう動いたらいいか分からないことが多いので
「投稿をしてみましょう」などの案内を出したりするのはいいかと思います

ぜひ「０(ゼロ)」を考える習慣をつけましょう

### イベントの場合(開始前、終了後、完売時)

これも意外とこれ忘れがちじゃありませんか？
一つの0(ゼロ)ケースだと思います

かみんぐすーん(まだ始まってないよのゼロ)
![EkvvrWkW0AEdyU3.jpg_large.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/b0722cd9-4bf1-60df-2d92-f2c032587534.jpeg)

売り切れたぜ〜(終わったよのゼロ)
![books-sale.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/b15b468e-64da-5c77-539f-11473d066271.jpeg)



イベントが開始前、終了後、または完売時の表示をどうするかの場合の0(ゼロ)も考えれるといいでしょう

よくやるのは、
- イベントがまだ開始していない場合は「開始までお待ちください」
- 終了後は「このイベントは終了しました」
- 完売時は「チケットは完売しました」

といったメッセージを適切に表示することで、早めに購入できないようにするとか、完売したら購入できないようにする対応など意外とやることが見えてくるはずです。

# 1(ワン)コンテンツが1つしかない場合の表示

![Screenshot 2024-03-05 at 7.57.00 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/2381c68f-0946-51aa-cd48-13f6b40a92f0.png)

まあ、これは大体デザインで考慮して上がってくるような形かと思います。

画面の下が空白でいいのか？下にスクロールしたらどうなるのか？上にスクロールしたらどうなるのか？なども考慮できるといいかもしれません。

# ♾️(インフィニティー)無限個あった場合の表示
無限に近い数のコンテンツになった場合どうするか考えておきましょう
Userが増えた時に、全部を表示するとレンダリングに時間がかかる場合もあります
ページネーションやインフィニティスクロールなど通常は考慮するかと思います

これにより、Userはオーバーロードされることなく、コンテンツにサクセクとアクセスできますね!

![Screenshot 2024-03-05 at 8.09.04 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/aaf3d98d-1d87-b330-6d54-159fc2867e59.png)

### 長い文字列へのインフィニティーの考慮

コンテンツだけではなく、文字の長さのインフィニティーもよくあるデザイン崩れの原因ですかね〜

![Screenshot 2024-03-05 at 8.14.36 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/7f65ec4c-3421-b811-0b7e-ccb2921d1fa9.png)
![Screenshot 2024-03-05 at 8.14.41 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/6cc9cce0-b16b-0d52-60c0-3e924d8669d9.png)

参考記事
https://zenn.dev/funteractiveinc/articles/designer_defensivecss

この辺も初期でちゃんと♾️（インフィニティー）無限の考慮ができてるといいですね！


# まとめ

- 「ゼロワンインフィニティ」の思考をデザインと開発に取り入れることで、あらゆるユーザーケースをカバーし、使用時のフラストレーションを最小限に抑えることができます
- 後々の拡張性やメンテナンス性やUI/UXなども向上するのでとてもおすすめです！

# さあみんなでもう一度

 \ \ ゼロ・ワン・インフィニティ〜〜〜〜 / /

# no plan株式会社について

- no plan株式会社は **「テクノロジーの力でZEROから未来を創造する、精鋭クリエイター集団」** です。
- ブロックチェーン/AI技術をはじめとした、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援なども行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- [no plan株式会社について](https://noplan-inc.com)
- [no plan株式会社 | web3実績](https://noplan-inc.com/web3)
- [no plan株式会社 | ブログ一覧](https://noplan-inc.com/blog)
エンジニアの採用も積極的に行なっていますので、興味がある方は是非ご連絡ください！
- [CTOのDMはこちら](https://twitter.com/_serinuntius)

https://noplan-inc.com