
Ventriloc
温かみのある紙にデータを蓄積した編集上の観測所――単色の精緻さを際立たせるオレンジ色の燃えさし一つ
Ventrilocは、静かで編集者的な語り口で語りかけます。温かみのある、くっきりとした白いキャンバス、等幅の高精度データカード、そして印刷されたレポートの蛍光ペンのようにモノクロームにアクセントを加えるオレンジチャコール。このシステムは、見出しにカスタムデザインされたネオグロテスク書体(PolySans)と400ポイントのウェイトを組み合わせています。これは、ボリュームによる権威を犠牲にして精度による権威を追求するという、珍しい抑制です。本文とインターフェース要素にはInterが使用されています。表面は、冷たいテックブルーではなく、温かみのあるグレーとクリーム色で、カードの角は非対称に丸みを帯びています(右上隅は鋭く、それ以外は丸みを帯びています)。インタラクティブ要素は、鋭角のテキストスタイルのボタンとピル型のナビゲーションコンテナという2つの異なる方言に分かれています。色は控えめに使用されています。ページの95%は無彩色スタイルでデザインされるべきであり、オレンジはハイライト、リンクの下線、データの装飾的なアクセントとしてのみ使用されます。
最大幅のコンテナは1200pxで中央揃え、セクション間には80pxのゆったりとしたガターが設けられています。メイン要素は2列に分かれており、左側には見出し、サブテキスト、および2つのコールトゥアクションボタンが配置されています。右側には、白いキャンバス上に浮かぶ3つのデータカード(財務チャート、収益統計、収益性リング)が重なり合って配置されています。メイン要素の下には、白い背景に幅いっぱいのパートナーロゴのストライプがあります。以降のセクションでは、アッシュ(#efefef)と白のストライプが交互に表示されます。ナビゲーションは、ヘッダーの中央に配置されたピル型のフローティングコンテナで、ブランドロゴは左揃え、ダークカラーの「お問い合わせ」ボタンは右揃えとなっています。全体的なリズムはゆったりとしていて編集的で、広い余白、背の高いセクション、そしてデータカードがタイポグラフィ以外の唯一の視覚的なアクセントとなっています。
ビジュアルデザインはほぼ完全にデータ駆動型です。チャートウィジェット(折れ線グラフ、円形プログレスバー、統計カード)は、白い厚紙の表面に細いオレンジと真鍮の線で描かれた、フラットでミニマルなスタイルでデザインされています。ホームページにはライフスタイル写真、ストック画像、イラストは一切ありません。唯一の写真コンテンツは、モノクロのグラファイトで表示されるパートナー/クライアントのロゴのみです。ビジュアル言語は、一般的なSaaSウェブサイトというよりは、印刷された年次報告書に近いもので、チャート自体が画像です。アイコンは細く、単線で、グラファイト色で、ナビゲーションバーとカードヘッダーに控えめに表示されます。
パレット
ブランド
- Ember Orange
#ff682c— オレンジ色は、リンク、タグ、短いフレーズを強調表示するために使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Graphite
#202020— 本文、見出し、ナビゲーションリンク、アイコンのアウトライン――これらは、あらゆるインターフェース要素のタイポグラフィの基礎となる要素です。 - Canvas White
#ffffff— ページ背景、カードの高さ、アイコンの塗りつぶし――システム内で最も明るい表面。 - Ash
#efefef— カードとセクションのメイン背景、ナビゲーションバーのコンテナは、主に温かみのあるグレーの表面です。 - Fog
#f5f5f5— 入れ子構造の表面や二次的な容器のための、さりげない背景色。 - Ivory
#ebe6dd— メインブロックの背景は、温かみのあるアクセントカラーで、紙のような質感に仕上げています。 - Steel
#4d4d4d— 二次的な主要テキスト、長い段落テキスト
タイポグラフィ
14~66ピクセル・5段階
- PolySans — 交換: Inter Tight or Space Grotesk at weight 400 · 概要 400 · 見出しと装飾テキスト - 特注デザインのネオグロテスク書体を、400のウェイトと-0.02emの文字間隔で使用することで、太字の見出しでは決して再現できない、さりげない編集上の権威を生み出します。
- Inter — 交換: system-ui or Roboto · 概要 400, 500, 600 · 本文、UI要素のラベル、ボタンのテキスト、見出し、メタデータなど、見出し以外のすべてのものに使用できる汎用的なサンセリフフォント。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 20px |
| ボタンの半径 | 0px |
| カード半径 | 8px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80px |
| ページ幅 | 1200px |
AI がVentrilocスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact ( Next.js )上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Ui — マット紙に印刷された臨床計画
- Geniestudio — 柔らかな日光の下で使うノート――広い余白と太いペンの一筆書きが特徴的なノート。
- xAI — 温かいクリームラボと黒い錠剤
- Cal — モノクロームの実用性と、人間味あふれるアプローチ。厳格な白黒の配色を通して明瞭さと機能性を最優先しながらも、親しみやすいタイポグラフィと丸みを帯びた形状で柔らかな印象を与えるシステム。
- Scale — 高品質な美術館レベルの写真ラボと技術プロジェクトの組み合わせ
- Contractbook — ウルトラマリンブルーの空の下のクリーム色の紙の契約
- AutoSend — 紫色の照明が一つ灯る、居心地の良い石造りのスタジオ。そこでは、セリフ体の見出しと鮮やかな藍色の行動喚起が、静かでほぼ真っ白な空間の中で共存している。
- Air — 彫刻作品「ガラス越しの真夜中の空」
- SpatialChat — 白い羊皮紙の上に紫色の豆
- Squarespace — 映画のようなモノクロギャラリー
- Giga — 霜の降りた黒曜石の上に広がる真夜中の地平線
- Supabase — 真夜中のコードエディタに、燐光を発する緑色の点が一つだけ浮かび上がる――石炭の粉塵の海に浮かぶ、たった一つの色のパルス。