Superlist
夜のワークスペースには、サンゴの燃えさしが灯っている。静かなナス色のアプリ画面では、温かいオレンジ色の火花が一つだけ、あらゆる動作を知らせる。
Superlistは、ミッドナイトパープルのトーンで生産性を高める言語を使用しています。濃いナス色、温かみのあるコーラルを唯一のメインカラーとし、全体の雰囲気を捉えた大きなサンセリフの見出しが特徴です。インターフェースは、深夜の集中作業の感覚を呼び起こします。静かで、レイヤー化され、自信に満ちており、色は行動喚起、アクティブな状態、重要なポイントの機能的な句読点としてのみ使用されます。表面は、紫のアンダートーン（#181824 → #26253b）を持つ微妙なダークトーンでレイヤー化されており、純粋な黒を避けることで、深みが無機質ではなく温かみを感じさせます。コンポーネントは、ゆったりとした丸みを帯びた形状（20pxのカード、ピルボタン）、柔らかな影、そしてタイトなグリッドではなく快適な10～16pxの間隔で「呼吸」します。見出しのトーンがすべてです。600ポイントの太さで70～88px、文字間隔は-0.02emとタイトにすることで、テキストはUIではなくタイポグラフィとして扱われ、SaaSというよりは編集コピーに近いものとなっています。
ダークセクションはページ全体の幅に広がり、中央に最大幅のコンテンツコンテナが配置されています。メインセクションは垂直方向に中央揃えされ、見出し、サブテキスト、コールトゥアクション（CTA）が含まれています。その後、次のセクションに重なる大きな製品スクリーンショットが続きます。以降のセクションでは、中央揃えのテキストブロックとカードグリッドが交互に配置されます。レビューセクションでは、レビューカードと16個のガターを備えた3列グリッドが使用されています。ナビゲーションは、左側にロゴ、中央揃えのリンク、右側にログインアクションが配置された単一のトップバーで、固定サイドバーやメガメニューはありません。セクション間のガターは広く（16個）、密集した製品グリッドではなく、ゆったりとした編集的なリズムを生み出しています。
ビジュアル空間は製品のスクリーンショットが中心で、角が丸みを帯びた大きなフレームに実際のアプリのインターフェースが表示され、メインセクションとサブセクションを埋め尽くしています。写真は最小限に抑えられ、ユーザーのアバターやアプリ内メディアのプレビュー（例えば、製品モックアップの右パネルにあるコンサート画像）としてのみ使用されています。信頼バーのロゴは、フラットで落ち着いた白色のテキストシンボルです。装飾的なイラスト、抽象的なグラフィック、3Dレンダリングは一切使用されていません。ビジュアル戦略は、製品を実物大で表示し、タイポグラフィで感情的な訴求を行い、コーラルを唯一のアクセントカラーとして使用することです。
パレット
ブランド
- Coral Ember
#ff4a36— オレンジ色は、装飾的なディテールや、時折現れる重要なポイントを強調するための補助的なアクセントカラーとして使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Aubergine Canvas
#181824— ページの背景、つまりメインのキャンバスは、純粋な黒ではなく、温かみのある暗い色合いになっており、ユーザーインターフェースが平坦ではなく、レイヤー状に見えるようになっている。 - Elevated Plum
#26253b— カードの表面、入力フィールド、ナビゲーションコンテナなど、キャンバスよりも簡単に、視覚的な境界なしに奥行きを表現できます。 - Pure White
#ffffff— メインの見出し、ボタンのテキスト、アイコンの輪郭線は、暗い背景色に対して最大限のコントラストを発揮します。 - Fog Text
#696f81— 本文、副見出し、そして控えめな枠線はすべて、ナス色の背景に対して快適な読書体験を提供するため、7:1のコントラスト比を採用しています。 - Ash Text
#8e8da0— 補助的なUI要素、区切り線、および控えめなラベルには、ニュートラルカラーがサポートされています。ただし、行動喚起のメインカラーとして使用しないでください。 - Mist Highlight
#a3a3a7— 控えめな境界線、区切り線、そして非アクティブなナビゲーション要素が、キャンバス上で際立つ、さりげないニュートラルなトーンを生み出している。
タイポグラフィ
12～88ピクセル・9段階
- sans-serif — 交換： Inter · 概要 400 · sans-serif - 抽出されたデータには含まれているが、AIによって説明されていない。
- Haffer XH SemiBold — 交換： Inter Tight · 概要 400, 600 · 表示および見出しの主要フォント。ヒーロー見出しには、70～88pxのサイズ、文字間隔-0.02em、ウェイト600で使用されます。狭い文字間隔と大きな文字高により、見出しに編集的な重厚感が生まれ、ダークなインターフェースがダッシュボードというより雑誌の表紙のように見えます。Inter TightまたはGeneral Sansの太字ウェイトに置き換えてください。
- Jersey 10 — 交換： Anybody · 概要 400 · 数字や強調表示に用いる、大きくて装飾的なフォント。活字のアクセントとして、非常に大きなサイズで控えめに使用されます。AnybodyまたはCabinet Groteskで代用できます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 10-16px |
| ボタンの半径 | 100px |
| カード半径 | 20px |
| 影 | 柔らかな影 |
| セクション間 | 80px |
| ページ幅 | 1200px |
AI がSuperlistスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- DNA — 粒子レンズを通して見たミッドナイト・オブザーバトリー
- Abetterlou — サドルレザーに散りばめられたスパークス ― 深みのあるコーヒーブラックの背景に、温かみのあるクリーミーなフォントが輝き、琥珀色の金色のボタンは、まるで熱い金属がページに押し込まれたような感触です。
- Galileo-ft — 鮮やかな青色の信号が発せられる深宇宙の司令デッキ
- Decide AI — 真夜中の天文台 - ミント信号
- Redis Agency — 営業時間外に開かれる編集工房は、真っ暗な場所で、ブランディング作業はすべてセリフ体フォントと一本の赤い大根だけで行われている。
- Spellbook — 珊瑚色のインクで照らされた真夜中の法廷――暗い編集画面の中で聞こえるのは、温かみのあるオレンジ色のペンのストロークだけ。
- Linear — ミッドナイト・プレシジョン・インスツルメント
- Origin Financial — 静謐な豪華さを湛えた真夜中のギャラリー。静かで、ほとんど薄暗い部屋の中で、大きなセリフ体フォントと数枚の照明付きカラーパネルが、金融が丹念に作り上げられた芸術作品であるかのような感覚を生み出す。
- Hyperstudio — デザインは黒曜石に刻まれている。文字と細い線が真っ黒な白い空間を縁取り、時折金色の羅針盤の印が道を示している。
- Air — 彫刻作品「ガラス越しの真夜中の空」
- Raycast — ミッドナイト・コマンドセンター、コーラルネオン
- dope.security — 紫色のビーコンを備えた真夜中のターミナル