Figma
色彩の混沌のためのモノクロシャーシ
このインターフェースは、厳格で高コントラストな構造コンテナとして機能し、ユーザー生成コンテンツに完全な視覚的優位性を与えます。ベースラインは#000000から#ffffffまでの厳密なパレットで、微妙なグレーの濃淡を排除し、主要な境界線とテキストに絶対的な最大コントラストを採用しています。タイポグラフィの階層は、色の変化ではなく、ほぼ完全にサイズと積極的な負の文字間隔に基づいており、長いテキスト行を密度の高いグラフィックブロックに変換します。境界線半径のロジックは、明確な二分法を生み出します。グローバルナビゲーション要素の50pxの外側の「釘」は、コンテンツコンテナの0pxの角と意図的に対照的です。
構成は、ビューポートの中央に配置された最大幅1440ピクセルの境界線を基本とし、十分なマクロスペース（セクション間に96～120ピクセルの余白）で区切られた高密度のコンテンツ群で構成されています。「ヒーロー」アーキタイプでは、フローティングで完全に中央に配置されたUIブロックの下に動的に固定された、非対称の画像ギャラリーがよく使用されます。スクロールしないと見えない部分では、情報が余白のない厳密な4列グリッドに即座に準拠し、カードの繰り返しクラスターを囲むことで、フレームから余白を排除しつつオブジェクトの密度を最大化します。
ビジュアルデザインは、ユーザー中心の成果に基づいています。画像は、フレームのない平らな正方形、または物理的な物体を思わせる、重なり合う断片として、簡素で何もない背景に表示されています。ウェブサイト上の色は画像のみで構成されています。ライフスタイル写真や一般的な企業イラストは一切使用されていません。各グラフィック要素は、デジタルキャンバス上の正確かつ文字通りのスナップショットであり、製品の証明と主要な美的要素として同時に機能します。
パレット
ブランド
- Context Action Violet
#4d49fc— サブパネル内の主要な行動喚起要素を局所的に配置 ― 単一の目立つ色が焦点を明確にする。
中性
- Absolute Canvas
#ffffff— ページ背景、フローティングツールバー、隆起パネルベース。 - Structural Ink
#000000— 基本的なフォント、単色のボタン背景、ボタンのアウトライン。 - Graphite Metadata
#595959— 二次的な著者テキスト、ローカライズされたサブテキスト、プレースホルダー値 - Boundary Frame
#e2e2e2— 微妙な区切り線と非アクティブな入力フィールド境界。 - Angular Teal
#33dfdf— 装飾効果、読み込みインジケーター、アクティブカーソルの視覚化。
タイポグラフィ
12～72ピクセル・6段階
- figmaSans — 交換： Inter · 概要 320, 330, 340, 400, 450, 480, 520, 700 · 表示タイトルからナビゲーションラベルまで、あらゆるものを管理できる多機能ツール。光学ネガティブトラッキングを調整することで、独自のルックを作り出します。
- figmaMono — 交換： JetBrains Mono · 概要 400 · マイクロタグ、座標追跡、そして技術的なニュアンスなど、コンテンツというよりはユーザーインターフェース要素として機能するもの。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 24px |
| ボタンの半径 | 8px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 96-120px |
| ページ幅 | 1440px |
AI がFigmaスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Caldera — 温かい石灰岩の上で鍛造する炎。キャンバスは生の温かい漆喰で、オレンジ色の各要素は、表面に押し込まれたくすぶる燃えさしのように見える。
- Vercel — 白い紙に印刷された端末
- Dylanbrouwer — 夕暮れ時のブルータリズム建築の鋳造所
- Headspace — 温かみのある紙に描かれた、陽光あふれるウェルネスコーナー
- WHOOP — 真夜中のパフォーマンスラボ ― 黒い劇場空間の下に白い臨床検査台、紫色の電気パルスが一つだけ
- (dot)connect — 木炭一枚で描かれたスイスのエンジニアリング図面
- Together AI — 氷河紙の研究コンソール
- Vivid+Co — 黒曜石を透過するプリズム光
- Sequel — 夜になると行われるプライベート上映は、それ以外は真っ暗な映画館の中で、唯一の温かい光となる。
- v0 by Vercel — 旋盤加工による製図。精度と機能性が最優先され、各要素は明確な目的を果たし、技術的に完璧な表面上に配置されています。
- ThoughtLab — 黒曜石の記念碑に深紅の信号が灯る。黒い虚無のキャンバスの中に、大聖堂の中で唯一鮮やかな赤色を帯びた物体が、大きな白い文字で印刷された、たった一つの色彩豊かな人物像として存在する。
- Dovetail — 黒い月の下の設計図――かろうじて見えるグラフ線、白い文字、紫色の火花が一つ