← UI catalog·Before/After·Cover preview

LLM cover

モダンLLMアプリ的な書影の置き方。枠の太さではなく、面・影・空気感で比較。 ラボ採用は L6a Soft well · r2。仮適用は Cover preview

L1Whisper floatClaude
デザインのデザイン

硬い線なし。多層の弱い影だけで、紙の床に浮かせる。

L2Soft radiusChatGPT
デザインのデザイン

角を少し丸め、クールな床に柔らかい円形影。

L3Document slotClaude Projects

Reading · annotation

デザインのデザイン

『デザインのデザイン』

紙面の外ではなく、会話のドキュメント面の中に置く想定。

ドキュメント面の中に置く。書影は線ではなく段差で区切る。

L4Atmosphere washLLM landing
デザインのデザイン

背景に薄い大気グラデ。影より光の差で存在させる。

L5Frosted shelfglass UI
デザインのデザイン

半透明の棚の上に載せる。枠は透明度だけ。

L6Soft wellinput well
デザインのデザイン

凹んだウェルの中から少しだけ持ち上げる。ウェルも書影も 8px。

L6aSoft well · r2ラボ採用
デザインのデザイン

ウェルは残し、書影の角は最大 2px。紙の直角をほぼ保つ。(ラボ採用・本番未適用)

L7Layered planesClaude × desk
デザインのデザイン

面を二層重ね、書影は最上段にだけ影を許す。

L8Spotlight stagehero LLM
デザインのデザイン

放射状のソフトライト。バッジや枠は載せない。