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 — 珊瑚色のインクで照らされた真夜中の法廷――暗い編集画面の中で聞こえるのは、温かみのあるオレンジ色のペンのストロークだけ。
- AWE — 真夜中のロボット観測所。黒いギャラリーのような画面を作り出し、そこに淡い色の編集用テキストがAIで撮影された画像と小さなダッシュボードテキストの上に浮かぶように配置します。
- Graphite — 発光エンドグリッド。正確な白い文字のマーキングと、時折現れるスペクトル光の閃光によって、暗い縁取りのある製品表面を作り出します。
- Featurebase — 紫色の光に照らされたコンソール。各ページを暗く静かな舞台と想像してみてください。下端からは、製品のための光り輝く作業スペースが現れます。
- BAM Photographers — 真夜中過ぎのギャラリーのプロジェクション映像。黒いキャンバス、拡大された白い文字、そして映画のような対になった画像が、このウェブサイトを典型的な編集グリッドというよりは、プロジェクションポートフォリオのような印象にしている。
- Nuxt — 深宇宙における端末の光。青黒い表面に対して緑色が電源信号として現れる、暗く閉じたインターフェース面を作成する。
- Linear — ミッドナイト・プレシジョン・インスツルメント