Anthropic
温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。
Anthropicのインターフェースは、温かみのある羊皮紙に丁寧に印刷された科学論文のような風格を漂わせています。アイボリーやオートミールといったニュートラルな色調が、テクノロジー系デザインによく見られるクールなグレーのパレットに取って代わり、あらゆる表面に紙のような質感を与えています。これは、本文と見出しの両方に前例のない規模で使用されているカスタムセリフ書体と見事に調和しています。粘土色のアクセントは、動作時のみに現れ、それ以外はすべて穏やかで簡素な印象です。コンポーネントはフラットで、ドロップシャドウの代わりに細い境界線と選択的な下隅の丸みがデザイン言語として用いられ、インターフェース要素はサンセリフ書体で、表現力はセリフ書体で表現されています。
デザインは、ヴィンテージの科学イラストが中心となっている。ホームページには、蝶や蛾をモチーフにした植物学・動物学的なコラージュがふんだんに用いられており、19世紀の野外図鑑を彷彿とさせる古典的な自然主義的イラストのスタイルで描かれている。イラストは、羊皮紙の背景に溶け込むように温かみのある色調で彩られており、背景に違和感なく溶け込んでいる。写真や製品のスクリーンショット、抽象的なグラデーションは一切使用されていない。アイコンは最小限に抑えられており、ドロップダウンメニューには小さなシェブロン、その他はまばらな線状のインジケーターが用いられ、テキストと同じ温かみのあるニュートラルな色調で統一されている。視覚的な密度は低く、大きなテキストブロックと余白が大部分を占め、画像はホームページの範囲内にのみ表示される。
パレット
ブランド
- Clay
#d97757— 塗りつぶされたコールトゥアクションボタン（例：「Cookieの同意を受け入れる」）は、システム内で唯一のアクセントカラーであり、一般的なUIの青ではなく、アースカラー系の温かみのあるテラコッタ色です。 - Clay Deep
#c6613f— Clayのコールトゥアクションボタンのホバー/プレス状態と、発音記号付きの正規トークンは、基本的な発音記号のより詳細なバージョンです。
中性
- Slate Dark
#141413— 本文、見出し、フッターの背景、細い枠線は、わずかに温かみのあるほぼ黒で、純粋な黒ではない。 - Ivory Medium
#f0eee6— ページ全体と広い面を埋め尽くす部分は羊皮紙のような背景で、温かみのあるトーンを醸し出している。 - Ivory Light
#faf9f5— 段ボールの表面、隆起したパネル、クリック式のボタンは、キャンバスよりも一段階明るく、重ね合わせたような影のない効果を生み出します。 - Cloud Medium
#b0aea5— 控えめな補助テキスト、非アクティブなナビゲーション要素、追加のラベルなど、背景に溶け込みながらも存在感を失わないニュートラルなスタイル。 - Cloud Dark
#87867f— 輪郭線付きのボタンフレーム、中程度のコントラストの仕切り - Stone
#cccbc8— 各セクション間の境界線や区切りは微妙に表現されているが、決して露骨すぎることはない。
タイポグラフィ
12～68ピクセル・6段階
- Anthropic Serif — 交換： Georgia · 概要 400, 600 · 編集スタイル – 68pxの見出し、20pxの本文、カードタイトル、および補足段落に使用されます。セリフ体フォントはテキストに個性を与え、本文中に使用されていること（技術系ウェブサイトでは珍しい）は、それが研究論文であることを示しています。フォントウェイトは400がデフォルト、600は強調表示用です。
- Anthropic Sans — 交換： Inter · 概要 400, 500, 600, 700 · ユーザーインターフェースとサンセリフフォントの表示には、ナビゲーションリンク、ボタン、フッター、アイコン、そして61px 700の太字サンセリフ見出しが含まれています。61pxのサンセリフフォントは68pxのセリフフォントの隣に配置されており、意図的に二重構造を作り出しています。サンセリフフォントは断定的な表現を、セリフフォントは論説文のような印象を与えます。
- Anthropic Mono — 交換： JetBrains Mono · 概要 400 · コードまたは技術的な断片でのみ使用される - まれ。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8px |
| ボタンの半径 | 8px (bottom-only on filled variants), 12px (outlined) |
| カード半径 | 24px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80-120px |
| ページ幅 | 1280px |
AI がAnthropicスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Dub — リンクのマットな和紙製コントロールパネル
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Notion — 真昼の太陽の下、温かい紙のノート
- Calendly — 冷たい大理石に濃い青色のインク
- Augen Pro — Appleの白いプレゼンテーションでは、モノクロームの空間に、臨床的で軽やかなエレクトリックブルーが唯一のアクセントとして用いられている。
- Antimetal — クリーム色の紙に書かれた編集記事――科学雑誌の静かな朝。そこでは、抑制された表現が自信を伝え、セリフ体が重要な役割を担っている。
- Perk — 温めたパーチメント紙に電気石灰を塗る
- Ditto — 陽光が差し込む工房で、野の花のサンプルが作られている。温かみのあるクリーム色の表面、鮮やかな黄色のベースカラー、深い紺色のインク、作品の背後で咲き誇る有機的な色彩。
- Officevibe — 温かみのあるクリーム色の紙に印刷された編集雑誌。人事管理に関する思慮深いエッセイが、まるで商品のように提示される様子を想像してみてください。モダンな青いインターフェースを通して、筆記体のセリフ体フォントがささやくように流れるのです。