アイソメトリック投影の機能紹介セクション

アイソメトリック投影は、もともと機械製図やテクニカルイラストの技法です。遠近法と違い、奥行きによって物の大きさが変わらない——だから図面として「正確に測れる」。その後、初期のビデオゲームがこの投影を採用し、近年は Stripe や Linear をはじめとするモダンSaaSがプロダクト紹介の定番表現として定着させました。

遠近法を捨てると何が得か

通常の遠近法（パースペクティブ）は、奥にあるものを小さく歪めます。機能紹介でこれをやると、奥のUIカードが読めなくなる。アイソメトリック投影は、すべての要素を同じ縮尺で30度傾けるため、奥行きを表現しながら情報の可読性を一切犠牲にしません。複数の機能カードを立体的に積み重ねても、どのカードも等しくくっきり見える——「奥行き」と「情報密度」を両立できる、これがこの投影の核心的な利点です。

「デジタル製品」であることの宣言

平らに並べた機能カードは、文書のように見えます。アイソメトリックに浮かせたUIカードは、操作できるオブジェクトのように見える。この差は小さくありません。訪問者は無意識に「これは触れるもの、動くものだ」と受け取り、プロダクトへの期待値が上がります。フラットなSaaSサイトが氾濫する中で、立体感は記憶のフックとしても機能します。

仕上げの判断軸

傾き角度（典型的には rotateX/rotateZ の組み合わせ）はページ全体で統一すること。カードごとに角度がぶれると、立体感ではなく「崩れ」に見えます。3Dライブラリは不要で、CSS transform だけで軽量に実装可能。要素が多いと視覚的に渋滞するため、1画面のアイソメ要素は5〜7個までに抑え、モバイルでは傾きを浅くするか平置きに切り替えます。