Seline Analytics
温かい紙の上に静かに置かれた分析表
Selineは、温かみのある石色の背景（#fafaf9）に鮮やかな青のアクセントを1色だけ配し、その他の色はすべてニュートラルで、Tailwindの石色カラーパレットから選ばれています。見出しは、カスタムデザインの幾何学的なサンセリフフォント（roobert）で、ウェイトは400、文字間隔は狭めに設定されており、テキストにゆったりとした、ささやき声のような自信を与え、典型的なSaaSスタイルの力強さとは対照的です。UIサーフェスは、温かみのある背景の上に浮かぶフラットな白いカードで、16pxのソフトなぼかしが1つだけ適用されています。境界線は、1pxの細い石色の線で作成され、重厚な区切り線やパネルの代わりに、主要な構造要素としてふんだんに使用されています。レイアウトはゆったりとしており、幅いっぱいのコンテンツがゆったりとした垂直リズムの中央に配置され、ピル型のインタラクティブコントロール、個性を表すマスコットのイラスト、製品の証明としてダッシュボードのスクリーンショットが配置されています。全体的な印象は、編集的な分析です。落ち着いていて、モノクロで、自信に満ちており、他のすべてが意図的に抑制されているため、青いコールトゥアクションがページ上で最も印象的な要素となっています。
ページは最大幅で、中央に約1200ピクセルのスペースがあり、垂直方向には十分な余白があります。ヒーローセクションは、左揃えの2行のテキストブロックで、青色で強調表示されたフレーズ（「シンプルで効果的」）が1つあります。続いて、2つのコールトゥアクション（青いピルとゴーストピル）の行、グレースケールのパートナーロゴの行、信頼度評価の行、そして次のセクションとわずかに重なる全幅のフローティングダッシュボードプレビューが続きます。スクロールしないと見えない下には、1列のグリッドで交互に並んだお客様の声の行があり、続いて全幅のセクションに機能の説明、左揃えのテキスト、中央揃えの製品画像が表示されます。ナビゲーションはミニマルなトップバーで、左側にロゴ、中央にナビゲーションリンク、右側にログインと青色のコールトゥアクションがあり、ナビゲーションの中央には本人確認用のフローティングアバター群があります。セクション間のスペースは広く（96ピクセル）、情報が密集したごちゃごちゃした印象ではなく、編集のリズムを生み出しています。
ビジュアル言語は、製品のユーザーインターフェースのスクリーンショットが中心となっている。ダッシュボードのプレビューは、グレースケール（1）（0.94）のコントラストフィルターでレンダリングされた写真で、データの色をモノクロームの色調に抑えている。唯一の人物像は、輪郭線のみで描かれたSVGスタイルの線画マスコットステッカー（フードをかぶったキャラクター）で、分析コンテンツとの遊び心のある対比として各セクションに1つずつ配置され、ステッカーのような奥行き感を出すために柔らかな影が付けられている。ブランドロゴとグリフは、小さな黒い火花/炎である。写真は一切なく、ライフスタイル写真、チーム写真、環境画像もない。オブジェクト（ダッシュボード）が主役である。すべての装飾アイコンは、#0c0a09または#3ba6f1のいずれかの1pxのアウトラインスタイルで、塗りつぶしはされていない。
パレット
ブランド
- Cyan Signal
#3ba6f1— ページ上の主要な行動喚起、アクティブリンク、およびブランドアイコンのアウトラインのみが色のアクセントとして使用され、行動を促すために控えめに用いられています。 - Cyan Edge
#3398e1— 青色は、アクションの概要、リンクラベル、インタラクティブ要素を強調表示するために使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Ink Black
#0c0a09— 主要な見出し、強調表示された本文、そして表現力豊かなアイコンは、温かみのある、ほぼ黒に近い色で表現されている。 - Stone Canvas
#fafaf9— ページの背景は、画面の白というよりは紙のような、温かみのあるクリーム色の色合いです。 - Pure White
#ffffff— マップの表面、突出したパネル、および入力フィールドの塗りつぶしは、デフォルトでは平坦で影がありません。 - Stone Border
#e8e6e5— カード、ナビゲーション、入力フィールドの細い境界線は、区切り線ではなく、主要な構造要素です。 - Stone Muted
#d6d3d1— 追加の額縁、微妙な背景色、装飾的な仕切り。 - Ash Gray
#a8a29e— ヘルプテキスト、アイコンのアウトライン、無効化状態 - 読み取れるが非アクティブ。
タイポグラフィ
10～52ピクセル・5段階
- Roobert — 交換： Inter Tight or Satoshi · 概要 400, 500 · 見出しと本文レイアウトに使用されているフォントは、文字間隔を最小限に抑えた（32pxで-0.025em、52pxで-0.021em）独特な幾何学的サンセリフ体です。400×52pxというサイズは、このフォントの特徴を表しています。型破りでありながらも繊細で、それでいて威厳があり、控えめな印象を与えます。見出しは、押し付けがましくなく、その存在感を際立たせます。
- Inter — 交換： Inter · 概要 400, 500, 600 · 本文、ナビゲーション、UI、見出しの主要フォントは、画面外テキストすべてに共通する中立的なフォントです。本文の主要サイズは14px、ウェイト400、行間1.64で、使用頻度は1174です。小さなサイズでも文字間隔を0.004emにすることで、密集したUIの可読性を確保しています。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 8px |
| ボタンの半径 | 9999px |
| カード半径 | 10px |
| 影 | 柔らかな影 |
| セクション間 | 96px |
| ページ幅 | 1200px |
AI がSeline Analyticsスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Dub — リンクのマットな和紙製コントロールパネル
- Notion — 真昼の太陽の下、温かい紙のノート
- Anthropic — 温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。
- Calendly — 冷たい大理石に濃い青色のインク
- Augen Pro — Appleの白いプレゼンテーションでは、モノクロームの空間に、臨床的で軽やかなエレクトリックブルーが唯一のアクセントとして用いられている。
- Antimetal — クリーム色の紙に書かれた編集記事――科学雑誌の静かな朝。そこでは、抑制された表現が自信を伝え、セリフ体が重要な役割を担っている。
- Perk — 温めたパーチメント紙に電気石灰を塗る
- Ditto — 陽光が差し込む工房で、野の花のサンプルが作られている。温かみのあるクリーム色の表面、鮮やかな黄色のベースカラー、深い紺色のインク、作品の背後で咲き誇る有機的な色彩。
- Officevibe — 温かみのあるクリーム色の紙に印刷された編集雑誌。人事管理に関する思慮深いエッセイが、まるで商品のように提示される様子を想像してみてください。モダンな青いインターフェースを通して、筆記体のセリフ体フォントがささやくように流れるのです。