Dala
黒いベルベットの上に浮かぶ星座
Dalaは、黒い空間に鮮やかな紫色のアクセントが一つだけ現れ、琥珀色のきらめきが散りばめられた、暗い空間を提示します。タイポグラフィはモノリシックで軽やかです。400ウェイトのPPNeueMontrealが、各見出しを特大サイズ（78～113ピクセル）で支配し、大胆なネガティブスペースによって、見出しは情報提供というより彫刻的な印象を与えます。視覚的な中心は、小さな多色の三角形の粒子が集まって有機的な脳の形を形成し、ブランドの象徴的なジェスチャーとして機能します。知識は階層的なデータではなく、分散型インテリジェンスとして視覚化されています。レイアウトは広々とした2列のリズムに従い、特大の左揃えの見出しと広々とした本文が、パネル、フレーム、カードのないクリーンな黒い背景に浮かんでいます。コンポーネントは、紫色のピルボタン1つ、隠されたテキストリンク、大きなテキストブロックなど、最も基本的な形に意図的に縮小されています。
全幅セクションは真っ黒なキャンバス上にレイアウトされ、コンテンツの最大幅は約1280ピクセルで中央揃えになっています。メインセクションは非対称の2列レイアウトを採用しており、左半分には大きな左揃えの見出し（113ピクセル）とメインテキスト、コールトゥアクションが配置され、右半分には巨大な「粒子脳」のビジュアライゼーションが配置されています。以降のセクションでは、2列（左がビジュアル、右がテキスト、次に左がテキスト、右がビジュアル）が交互に配置され、ジグザグの読み心地を生み出しています。セクション間の余白は広く（垂直方向に60～120ピクセル）、カードグリッド、価格表、複数列の機能説明などはなく、コンテンツは広々とした2列のテキストとビジュアルのブロックで構成されています。ナビゲーションは、サイドバーやメガメニューのない、ミニマルな透明なトップバーです。要素の密度は非常に高く、ビューポートごとに1つか2つの要素しか表示されず、情報過多になることはありません。
ビジュアルデザインは完全にプロシージャルかつ抽象的で、チームポートレート以外に写真は一切使用されていません。ブランドのビジュアルアイデンティティは、何千もの小さな輪郭線付きの三角形の粒子が密集した雲で、鮮やかなスペクトル（紫、琥珀色、ターコイズ、紫、青）でレンダリングされ、有機的な脳/ニューロンの形を形成しています。この粒子フィールドはアニメーション化されており、メインイメージとブランドアイデンティティ要素の両方の役割を果たしています。周囲の粒子は密度が低く、ページの背景を横切って移動します。三角形には輪郭線があり、線幅は1～2ピクセル、エッジはシャープで、豊かな色彩が用いられており、グレースケールは一切使用されていません。チームポートレートは、境界線や重なりのない、大きな角丸長方形（半径124ピクセル）として表示されます。製品のスクリーンショット、ライフスタイル写真、3Dレンダリングは一切使用されていません。粒子システムそのものがビジュアルブランドなのです。
パレット
ブランド
- Electric Iris
#8052ff— メインの操作ボタン、ロゴ、ブランドアクセントはすべて単一の濃い紫色で統一されており、黒い背景に対してインタラクティブ性とブランドアイデンティティを際立たせている。
中性
- Void
#000000— ページ全体、セクションの背景、ネガティブスペース――支配的な表面は濃い灰色ではなく純粋な黒であり、それによって色彩のアクセントが自由に浮かび上がる余白が生まれている。 - Bone White
#ffffff— 見出し、本文、アイコンの塗りつぶし、アクティブなナビゲーション状態など、黒の背景上で最大限の階層構造を表現できる唯一のタイポグラフィカラー。 - Ash Gray
#9a9a9a— 控えめなナビゲーションテキスト、半透明のリンクカラー、および追加のラベルは、メインテキストの背後に隠れますが、完全に見えなくなるわけではありません。 - Silver Mist
#bdbdbd— 補足テキスト、キャプションレベルの情報 ― 最も静かで読みやすいグレーの色を使用し、文脈を補足します。 - Saffron Spark
#ffb829— テキストを強調したり、リンクを際立たせたり、句読点で注目を集めたりする――紫色の背景に温かみのある黄色を組み合わせることで、ブランドに色彩的な緊張感を与えることができる。 - Deep Verdant
#15846e— 二次的な表面着色、つまりグラデーションロゴの停止部分は、ブランドグラデーションのより暗いエッジとして、またほとんど目立たないアクセントの移行という形で現れます。
タイポグラフィ
12～113ピクセル・10ステップ
- PPNeueMontreal — 交換： Inter · 概要 200, 400, 600, 700 · すべてのUIコンテキストで一貫したフォントが使用されています。表示サイズ（78～113px）の見出しには、本文と同じウェイトである400、文字間隔-0.04emが使用されていますが、スケールが大きいため階層構造が生まれます。18pxの本文には、ウェイト200（超軽量フォント）が使用されています。これはブランド独自の決定です。ほとんどのAI/SaaSサイトでは本文に400を使用していますが、Dalaでは段落を軽やかで攻撃的でないものにするためにウェイトを下げています。ナビゲーションと小さな見出しには、ウェイト600、文字間隔14px、文字間隔0.025em、すべて大文字が使用されています。113pxの見出しと15pxの本文の両方に400を使用しているのは珍しいことです。これは、ブランドが階層構造を作るためにウェイトではなくスケールに依存していることを示唆しています。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 6-18px |
| ボタンの半径 | 24px |
| カード半径 | 24px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 60-120px |
| ページ幅 | 1280px |
AI がDalaスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Linear — ミッドナイト・プレシジョン・インスツルメント
- Resend — 紫のネオンカラーの黒いベルベット
- Ciridae — くすぶる残り火の脈動が感じられるがらんとした部屋――ほとんど真っ黒な大聖堂で、唯一温かい音が聞こえるのは錆びた細い線だけで、あらゆる表面は影ではなく細い線によって形作られている。
- Dovetail — 黒い月の下の設計図――かろうじて見えるグラフ線、白い文字、紫色の火花が一つ
- Neon — 夜のサーバー室。完全な暗闇の中、唯一の光源はデータとユーザーの操作だけだ。
- Discord — ゲームの世界はポップアップチャットウィンドウの裏に隠されており、各セクションは独自の照明とキャラクターセットを備えた独立した環境となっている。
- Aaru — 真夜中の粒子場観測所
- Atlas Card — 真夜中の金庫室は、一本のサファイア色の光線が差し込む、漆黒の空間であり、そこで唯一重要なのは、深みのあるエレクトリックブルーだけだ。
- Midjourney — 深海に浮かぶ生物発光端末。知能がASCIIストリームで視覚的に自己生成し、操作系がかすかに光るパターンとして現れる深海世界。
- Checkly — 深宇宙ミッション管制センター
- Krea — 真夜中のギャラリー・ノワール
- Wope — Wopeは紫色の地平線インターフェースです。暗い天文台のテーブルから、ガラスの下から紫色の光が差し込んでいる様子を想像してみてください。