アイソメトリック倉庫の在庫ダッシュボード

等角投影は、遠近をつけずに3方向の軸を同じ縮尺で描く製図法です。19世紀の機械図面から1980年代のシミュレーションゲーム、そして近年のSaaSのイラストまで、繰り返し採用されてきました。理由は単純で、奥行きがあるのに寸法が読める——空間を説明する図としては最も効率がよいからです。

表では「どこ」が分からない

倉庫の在庫管理は、長らく行と列の表で扱われてきました。ゾーンごとの充填率は数値で正確に読めます。しかし現場の人間が本当に知りたいのはどこが詰まっていて、どこに逃がせるかであり、それは位置関係の問題です。B-01が97%だと表で読んでも、隣のC-02が空いていることは頭の中で地図に変換しないと分かりません。フロアマップに立体を与えると、この変換が不要になります。高さで量、色で状態を同時に符号化すれば、視線を走らせるだけで移送計画の候補が浮かびます。

立体と数値を併置する理由

一方で、立体表示には明確な弱点があります。人間は3次元の体積を正確には比較できません。97%と91%の差を高さだけで判定するのは不可能です。だからこの設計では、左に立体マップ、右に数値リストを並べます。立体は「どこ」を、数値は「どれだけ」を担当する——役割を分けることで、どちらの弱点も相手が補います。色だけで状態を示さないのも同じ配慮で、色覚特性の違いに関わらず、高さと数値の二重符号化で情報が届きます。

仕上げの判断軸

実装は CSS だけで完結します。親に rotateX(56deg) rotateZ(-45deg) と preserve-3d を当て、箱は上面と2枚の壁で作る——3Dライブラリを持ち込む必要はありません。100ラック程度なら要素数300でブラウザは平然と描きます。

凡例は必ず添えてください。色と高さが何を意味するかは作った本人にしか自明ではありません。空間が分析軸にならない業務では、この表現はただの装飾になります。