Dub
リンクのマットな和紙製コントロールパネル
Dubのビジュアルシステムは、控えめで、まるで編集的なSaaSのような美学を備えています。突き出た要素ではなく、細い境界線でまとめられたほぼ白色のキャンバスに、密度の高いモノクロのタイポグラフィが構造的なサポートを提供し、鮮やかな青色（#2563eb）がアクセントとして使われています。表面は一見フラットでフレームレスに見えますが、各コンテナには1pxの#e5e5e5の余白があり、印刷された文書のような印象を与えます。個性は、ニュートラルなパレットの上に浮かぶ小さな色の「ピル」アクセント（オレンジ、緑、紫）と、派手さはないものの自信に満ちたモダンな印象を与えるヘッダーによって表現されています。コンポーネントはコンパクトで密度が高く、8pxのガター、12pxのカード半径、9999pxのピル型のラベル、そして重く塗りつぶされたボタンの代わりに目に見えないコントロールが使用されています。
このページは、最大幅が約 1200 ピクセルの中央揃えレイアウトで構築されています。メイン要素は中央揃えのテキストブロックで、その上に大きな商品レイアウトがあり、その上に 3 つのフローティング要素 (アフィリエイト プログラム、コンバージョン アナリティクス、ショート リンク) が水平に配置されています。セクションは垂直に配置され、64 ピクセルのガターが一定で、白のキャンバスと #f5f5f5 の紙の霞が交互に使用され、トーンの分離が図られています。下部のセクションは Z 字型のレイアウトを使用しており、編集テキストは中央の 3 分の 1 に配置され、フローティング UI カードは左右の余白に固定され、雑誌のような非対称のリズムを作り出しています。ロゴ クラウドは、ページの中央に配置されたシンプルな 5x2 グリッドです。ナビゲーションは、固定メニューやメガ メニューのない、ミニマルなトップ バーです。左側にロゴ、中央にナビゲーション、右側に 2 つのボタン (ゴーストの「ログイン」ボタンと塗りつぶされた「登録」ボタン) のグループがあります。メインウィンドウのダッシュボードレイアウトは、古典的な2カラムのアプリレイアウトを採用しています。固定サイドバー（240pxに類似）と、スクロールを開始する前に訪問者に製品情報を表示する密度を定義するコンテンツエリアで構成されています。
ビジュアルはライフスタイルではなく、製品に焦点を当てています。メイン画面の中央には、サイドバーナビゲーション、データテーブル、フローティングUI要素を備えた実際の製品モックアップを表す大きなダッシュボードのスクリーンショットが配置され、白いキャンバス上にフラットパネルとしてレイアウトされています。クライアントのロゴ（beehiv、superpower、Chatbaseなど）は、ソーシャルメディアでのパフォーマンスを示すために彩度を落としたグレースケールのグリッドで表示され、ページ全体のアクセントカラーである青色が際立つように色は排除されています。フローティングパートナーカード（収益/支払いデータを含む小さなプロフィールとタイル）は、下部の編集テキストのブロックの周りを動き回り、テキスト自体に影を使わずに奥行き感を生み出しています。ドットグリッドの背景パターンは特徴的な要素です。非常に低い透明度の小さなドットの細い列がテクスチャとデザインシステム/描画サーフェスの雰囲気を作り出し、「最新のリンクアトリビューションプラットフォーム」としてのサイトの位置付けを強調しています。アイコンは最小限に抑えられており、輪郭線と塗りつぶしのみで構成されています。また、機能タグにはアクセントカラーパレット（タンジェリンオレンジ、ラベンダーパープル、ミントグリーン）が使用されています。写真、イラスト、3Dモデルは一切使用されておらず、製品のユーザーインターフェース自体が視覚的な言語となっています。
パレット
ブランド
- Electric Blue
#2563eb— ロゴ、リンク、主要業績評価指標、アクティブ状態、アイコンのアクセントなど、主要なブランドカラーが使用されています。白い背景に鮮やかな青色が、システム唯一の視覚的な魅力を生み出しています。 - Deep Sapphire
#1e40af— アクションボタンのメインの背景色と、アクションを促すメッセージの太字部分（アクションを示す唯一の色）は、注目を集めるために控えめに使用されている。
中性
- Canvas White
#ffffff— ページ背景、カード表面、ポップアップパネルは、あらゆる画面の絶対的な基盤となる要素です。 - Paper Mist
#f5f5f5— 入れ子になったカード、追加パネル、塗りつぶし部分のマウスオーバー時の微妙な色の変化。 - Ash
#e5e5e5— カード、入力コネクタ、仕切り板の細い縁は、システム全体をまとめる構造的なラインとなっている。 - Smoke
#d4d4d4— 一部のコンテナの境界線をよりシャープにし、ボタンの輪郭を追加しました。 - Pebble
#c8c8c8— 境界線、コントロールライン、構造区切り線には、中程度のコントラストを使用します。この色は、行動喚起のメインカラーとして使用しないでください。 - Midnight Ink
#0a0a0a— ボタンのメインテキスト、強調表示されたボタン、およびナビゲーションテキストは、コントラストを最大限に高めるため、ほぼ黒色になっています。
タイポグラフィ
11ピクセルから48ピクセルまで · 9段階
- Satoshi — 交換： Inter (weight 500 · 概要 500 · 見出し表示 – 見出しとセクションタイトルにのみ、36～48pxの行で使用します。フォントの太さ – 500（中太、太字ではありません）：見出しは自信に満ちたモダンな印象を与えますが、決して威圧的ではありません。サトシの幾何学的な比率により、この書体はInterの本文では再現できない、やや編集的でモダンな雰囲気を醸し出しています。
- Inter — 交換： Inter (native) · 概要 400, 500, 600 · 本文、UIラベル、ナビゲーション、小見出し、およびマイナー見出し。Interは主要なワークホースであり、11pxのマイクロラベルから30pxのセカンダリ見出しまで、すべてを処理します。ウェイトは、本文のデフォルトが400、強調表示された要素とボタンラベルが500、重要なUIラベルが600です。16pxで行の高さが1.5が最も頻繁に出現する単一ステップサイズ（1220回）であり、16pxが標準的な本文サイズであることを裏付けています。
- Geist Mono — 交換： JetBrains Mono or IBM Plex Mono · 概要 400, 500 · コードブロックでは12～14ピクセル、大きなコード表示要素では24ピクセルで、コードスニペット、技術メタデータ、埋め込み等幅トークンが使用されます。これにより、開発者ツールの信頼性が確保され、Dubの製品ポジショニングと整合性が保たれます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 8px |
| ボタンの半径 | 8px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64px |
| ページ幅 | 1200px |
AI がDubスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Mollie — カシミヤのカウンター、濃い色の帳簿。黒いテキストの周りには編集デザインのための十分な余白を残し、温かみのあるクリーム色やエスプレッソブラウン、実際の支払い方法の触覚的な写真を使って、製品関連のポイントを強調する。
- Kagi — 独立した読書室。大胆な鉛筆の文字を中心に、広々とした白い空間を作り出し、さりげない紫のアクセントと温かみのあるパステルカラーの表面を用いることで、静寂に変化をつける。
- Milanote — Milanoteは、クリエイティブな活動に特化したスタジオです。フローティングビジュアルボード（ダークフレームの壁、白い表示スペース、柔らかな奥行き感のある実物のように見えるスクリーンショットなど）を使用して、エディトリアルギャラリースタイルのページを作成できます。
- Co2 — 冬の光の中で描かれた気候図。まるで航空写真のようなページ構成で、セリフ体の見出し、カテゴリ別にコード化されたデータ、そして氷に覆われた画像が、広い白い余白を際立たせます。
- GitButler — テキストの末尾にターコイズブルーを使用。コントラストの高いセリフ体の見出しに、繊細なテクニカルグリッド、温かみのあるグラファイト調の表面、そして控えめなターコイズブルーのアクセントを組み合わせたデザイン。
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Notion — 真昼の太陽の下、温かい紙のノート
- Anthropic — 温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。
- Calendly — 冷たい大理石に濃い青色のインク