ElevenLabs
温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
ElevenLabsは、温かみのある白を基調としたミニマルなスタイルを採用しています。卵の殻のような色のキャンバス（#fdfcfc）に黒の文字、そして温かみのあるトープ色の表面（#f5f3f1）を一層重ねています。ブランドアイデンティティは静かで自信に満ちており、ほとんど判別できないWaldenburg 300フォントが極めて明瞭に（-0.02em）見出しを際立たせ、Inter 400/500フォントがその他の要素に落ち着いた中立性を与えています。鮮やかな紫（#0447ff）と鮮やかなオレンジ（#ff4704）の2つのアクセントカラーは、製品のビジュアル要素（オーディオスフィア、製品アイコン）内でのみ目立ち、UIではクロームのように目立つことはありません。コンポーネントは、薄い1pxの境界線、カードの広い20pxの半径、そして完全に塗りつぶされた9999pxのボタンによって、フラットまたはわずかに隆起した状態を保っています。このシステムは、クリーム色の紙に描かれたバウハウスのスタジオを彷彿とさせます。抑制され、編集的で、技術的に正確です。
全幅セクションは、1280pxの外側ガターを持つ単一の最大幅の中央カラムに垂直に配置されます。メインセクションは非対称です。見出しは48pxのWaldenburgレベルで左揃え、説明文は右揃えで、見出しの下に2つのピル型のボタンがあります。メインセクションの下には、コンテンツの幅全体に広がる大きなタブ付きナビゲーションバーがあります。セクションは、96～125pxの垂直ガターを持つ卵殻色とトープ色の背景が交互に表示されます。フッターはコンパクトな単一のストリップです。ナビゲーションはミニマルなトップバーで、固定動作やメガメニューはありません。コンテンツのリズムは編集スタイルと一致しており、十分な余白があり、セクションごとに1つの主要な視覚要素があり、「信頼」セクションの下にカードグリッドはありません。
ビジュアルデザインはカラースキームが中心で、柔らかなオーディオスフィア（紫からオレンジ、ピンクへと放射状に変化する200ピクセル以上の円）の大きなグラデーションが主要なグラフィック要素として用いられています。「信頼」セクションのロゴは、マットなキャンバスの背景に低コントラストのグレースケールで表示されています。写真は最小限に抑えられており、ライフスタイル写真や製品写真は一切使用されていません。アイコンは少なく、モノクロ（黒い輪郭線または塗りつぶしのアイコンのみで、色付きのアイコンはありません）です。ビジュアルシステムは製品カタログというよりデザイン誌を彷彿とさせ、マーケティング効果よりも編集上の抑制が重視されています。
パレット
ブランド
- Violet Spark
#0447ff— 製品の視覚的強調 - オーディオ球体のイラストと装飾的な製品アイコン内でのみ表示され、インターフェース要素には使用されません。
中性
- Eggshell
#fdfcfc— ページキャンバス、ボタンの表面、カードの表面は、デジタルの反射を避け、紙のような落ち着いた雰囲気を出すために、真っ白ではなく、温かみのある、ややクリーム色に仕上げています。 - Warm Taupe
#f5f3f1— 仕切りストリップ、装飾カード、そしてマットな表面よりも一段深い追加の表面層が、静かで境界のない空間を作り出します。 - Stone
#ebe8e4— 細い枠線、区切り線、アイコンの背景は、トープとミディアムグレーの中間の温かみのあるグレーで、冷たい印象を与えません。 - Ink
#000000— 本文、塗りつぶされたボタン、ナビゲーション、リンクなど、あらゆる要素において、純粋な黒は温かみのあるカラーパレットの基盤となり、システム内で唯一の鮮やかなコントラストを生み出します。 - Graphite
#44403b— 本文、セクション見出しには、黒のような強烈さではなく、インパクトのあるテキストに適した、温かみのあるダークグレーを使用します。 - Smoke
#777169— 本文、控えめな説明、キャプションは、やや温かみのあるグレーで統一されています。カードやテーマに関する文章は、読みやすく、それでいて落ち着いた雰囲気のスタイルで統一されています。
タイポグラフィ
10～48ピクセル・8段階
- Waldenburg — 交換： Inter (300) or Söhne Light · 概要 300 · 見出しやデザイン要素のみに使用してください。フォントウェイト300で48/36/32pxのフォーマットで使用します。超軽量フォントは一般的ではありません。ほとんどのウェブサイトでは600～700を使用しています。この控えめなフォントは、抑制された表現で権威を伝えます。文字間隔は-0.02emと狭く、大きなサイズでも文字間の間隔が狭くなります。代替フォントとして、300ウェイトの「Inter」、またはプレミアムフォントとして軽量ウェイトの「Söhne」があります。
- Inter — 交換： Inter or system-ui · 概要 400, 500 · 画面外にあるすべての要素：本文、ナビゲーション、ボタン、リンク、ラベル、入力フィールド、カード。デフォルトのフォントサイズは400、500はボタンと強調表示されたリンク用に予約されています。サイズは10から10までで、行間は狭め（1.47～1.6）にすることで、段落にゆとりを持たせています。14から3までのサイズでは、文字間隔を+1（2）にすることで、小さなサイズでの読みやすさを向上させています。
- Geist Mono — 交換： JetBrains Mono or IBM Plex Mono · 概要 400 · コードや技術文書の横に配置されるマイクロテキスト。13pxの位置に配置され、技術的なラベルやメタデータに使用されることはまれ（使用頻度 = 28）。単一レイヤー、行の高さは1.69。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8-16px |
| ボタンの半径 | 9999px |
| カード半径 | 20px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 96-125px |
| ページ幅 | 1280px |
AI がElevenLabsスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Dub — リンクのマットな和紙製コントロールパネル
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Notion — 真昼の太陽の下、温かい紙のノート
- Anthropic — 温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。
- Calendly — 冷たい大理石に濃い青色のインク
- Augen Pro — Appleの白いプレゼンテーションでは、モノクロームの空間に、臨床的で軽やかなエレクトリックブルーが唯一のアクセントとして用いられている。
- Antimetal — クリーム色の紙に書かれた編集記事――科学雑誌の静かな朝。そこでは、抑制された表現が自信を伝え、セリフ体が重要な役割を担っている。
- Perk — 温めたパーチメント紙に電気石灰を塗る
- Ditto — 陽光が差し込む工房で、野の花のサンプルが作られている。温かみのあるクリーム色の表面、鮮やかな黄色のベースカラー、深い紺色のインク、作品の背後で咲き誇る有機的な色彩。
- Officevibe — 温かみのあるクリーム色の紙に印刷された編集雑誌。人事管理に関する思慮深いエッセイが、まるで商品のように提示される様子を想像してみてください。モダンな青いインターフェースを通して、筆記体のセリフ体フォントがささやくように流れるのです。