厳選・オープン・無料

Diagram

インターフェースデザインを最も基本的な構成要素まで還元する、超ミニマルで抽象的なビジュアルシステム。

01

デザイン DNA

未レンダリングのプリミティブからなるギャラリー、あるいはソフトウェアの概念的な「内部構造」ビュー。

02

カラー

構造と本質を伝えるため、純黒と純白のみを使用した、絶対的なハイコントラストミニマリズム。

03

タイポグラフィ

transitional-serif

• body16px · 400

すべてのテキストロールに同じトランジショナル・セリフフォントを使用する。 · 16pxの基本サイズと400の標準ウェイトを一貫して維持する。 · すべての要素にトランジションを適用し、微細な状態変化を実現する。

04

余白

視覚的に定義されていない。絶対位置指定またはスペーシング・プリミティブに依存する。

05

サーフェス (角丸 / 影 / 罫線)

構造的な境界線に1px solid rgb(0, 0, 0)を適用。

07

モーションとインタラクション

グローバルな「all」トランジションを介して、すべてに適用される滑らかな状態遷移。

グローバルトランジションプロパティによって実現される微細な状態変化。 · プリミティブ要素に対する標準ポインタインタラクション。

08

コンポーネント

• button 標準コンポーネントとしては未確認。インタラクションはプリミティブな状態変化として処理される。
• card 未確認。レイアウトは独立した枠線付きボックスを使用する。
• chip 未確認。
• input 標準フォーム要素としては未確認。
• hero 白背景上の、基本要素による希薄な抽象構成。

09

文体と禁止事項

• トーン ニュートラル、臨床的、基礎的。
• 見出し 特有の見出しスタイルはなし。テキストは均一で機能的。
• CTA 特有のCTAスタイルはなし。インタラクションは控えめ。

• 複数のフォントファミリーを使用しない — スクリーンショットでは、すべてに単一のトランジショナル・セリフ書体が使用されている。
• カラーアクセントを導入しない — スクリーンショットでは、厳密にモノクロのブラック＆ホワイトパレットが示されている。
• 装飾的なボーダーやシャドウを追加しない — スクリーンショットでは、細く黒い直線の構造線のみが示されている。
• 角丸を使用しない — スクリーンショットでは、すべての要素が鋭い90度の角を示している。
• 複雑なアニメーションを適用しない — スクリーンショットから、状態変化には単純な「all」トランジションが示唆される。
• レイアウトを散らかさない — スクリーンショットでは、広大なホワイトスペースと最小限の独立したコンポーネントが示されている。
• 避ける: 装飾的な装い
• 避ける: ブランド固有のタイポグラフィ
• 避ける: 高彩度のカラーアクセント
• 避ける: シャドウやディープス効果

11

System Prompt

en · zh-CN · zh-TW · ja · ko