Substack
編集室の机の上にオレンジ色のインク
Substackは、使い込まれたニュースルームのダッシュボードを彷彿とさせる。白いキャンバスに、温かみのある、ほぼ黒に近いテキスト、そしてコンテンツ作成の各段階を示す鮮やかなオレンジ色のアクセントが一つだけ配置されている。視覚的な階層構造は、装飾よりも密度に基づいて構築されている。フィード要素は細い灰色の線で区切られ、アバターは小さく、メタデータは控えめに表示され、読者の視線はオレンジ色のコールトゥアクション、オレンジ色のロゴ、オレンジ色の「購読」リンク、そしてオレンジ色の「作成」ボタンに集中するように仕向けられている。表面はフラットで制約がなく、カードの影やクロームパネル要素はなく、タイポグラフィ（コンパクトなクロームシステムUI要素とカスタムセリフの見出しフォントの組み合わせ）が編集内容の大部分を担っている。特徴的なスタイルは、控えめなクローム要素と鮮やかな単色のアクセントであり、まるで出版ツールのような読書アプリと言えるだろう。
3列のデスクトップレイアウト：固定左サイドバー（約200px、アイコンとラベル付きナビゲーション、固定）、中央フィード（最大幅約600px、投稿の縦スクロールリスト）、固定右サイドバー（約300px、検索＋おすすめ＋登録）。中央フィードは編集の中核であり、カードはなく、投稿が細い区切り線とセクション間の32pxの間隔で積み重ねられています。メインバナーはフィードの上部に全幅のカードとして配置されています。左サイドバーには、ブランドロゴ（重ね線付きのオレンジ色のサイン）、6つのナビゲーション項目、下部に全幅のオレンジ色の「作成」ボタンがあります。右サイドバーには、検索フィールド、登録カード、および閲覧用の「次に読む」リストがあります。ナビゲーションは最小限で、上部のバーもパンくずリストもなく、サイドバー自体がナビゲーションです。コンテンツ密度は高く、投稿は12～13pxのメタデータと15～19pxの本文テキストを使用しており、マーケットプレイスのカードグリッドのような印象ではなく、新聞のようなリズムを生み出しています。
写真はユーザー生成コンテンツ（著者アバター、投稿サムネイル、投稿画像）であり、Substack は独自の装飾写真を提供していません。メインカードは、ターコイズからグリーンへのグラデーションと抽象的なイラスト要素（幾何学的形状、ペンやメモなどの様式化されたオブジェクト）を背景に使用しています。右サイドバーの投稿サムネイルは小さく（64px）、半径 8px で囲まれており、読書リストのプレビューとして機能します。全体的なビジュアル言語はテキストベースです。インターフェースは読書のキャンバスであり、画像は雰囲気作りのためではなく、小さな視覚的なアンカーとして機能します。
パレット
ブランド
- Signal Orange
#ff6719— オレンジ色は、装飾的なディテールや、時折現れる重要なポイントを強調するための補助的なアクセントカラーとして使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Ink
#363737— 本文（メインテキスト、見出し、投稿タイトル、タイムスタンプ、著者名など）は、読みやすさを考慮して、純粋な#000ではなく、温かみのあるほぼ黒に近い色を使用します。 - Paper
#ffffff— ページキャンバス、カード表面、入力フィールド、ナビゲーション背景は、インターフェースの大部分を占める主要な表面です。 - Charcoal
#232525— ホバー状態は、選択レベルの高い追加テキストやリンクを表示し、コードブロックや選択ブロックの場合はインクモードよりも深い選択レベルになります。 - Stone
#777777— 補助的なUI要素、区切り線、および控えめなラベルには、ニュートラルカラーがサポートされています。ただし、行動喚起のメインカラーとして使用しないでください。 - Ash
#b6b6b6— 細い境界線、ボタンの輪郭、アイコンの輪郭、無効化されたコントロールの境界線。 - Mist
#c8c8c8— 区切り線、アイコンのための目立たない背景、空のセルを骨格の形に埋める。
タイポグラフィ
12～32ピクセル・5段階
- system-ui — 交換： -apple-system · 概要 400, 500, 600 · ユーザーインターフェースと本文の主要フォントは、ナビゲーションラベル、ボタン、メッセージテキスト、メタデータ、入力フィールド、およびすべてのインターフェース要素に使用されます。メタデータには12～13ピクセル、本文には15～19ピクセルのコンパクトなサイズを使用することで、情報量の多いニュースフィードのような印象を与えます。フォントの太さは、本文が400、ナビゲーション要素とボタンラベルが500、強調表示されるメッセージタイトルとセクション見出しが600です。
- Cahuenga — 交換： Charter · 概要 500 · 商品レベルの見出し（サイドバーの見出し、登録カードの見出し、本文）に使用できる、特徴的な装飾セリフ体フォントです。中程度の太さとわずかな行間により、重厚感を与えることなく、洗練された印象を与えます。オレンジ色以外で、Substackのアイデンティティを示す唯一のフォントです。
- Spectral — 交換： Charter · 概要 400 · 長文投稿に適したセリフ体フォント。閲覧室やニュースフィードコンテンツで使用され、編集記事の読みやすさを向上させます。行間をやや狭め（1.20）にすることで、ニュースルーム特有のコンパクトさを保ちつつ、段落を快適に読むことができます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8px |
| ボタンの半径 | 9999px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 32px |
| ページ幅 | 1200px |
AI がSubstackスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Mollie — カシミヤのカウンター、濃い色の帳簿。黒いテキストの周りには編集デザインのための十分な余白を残し、温かみのあるクリーム色やエスプレッソブラウン、実際の支払い方法の触覚的な写真を使って、製品関連のポイントを強調する。
- Kagi — 独立した読書室。大胆な鉛筆の文字を中心に、広々とした白い空間を作り出し、さりげない紫のアクセントと温かみのあるパステルカラーの表面を用いることで、静寂に変化をつける。
- Milanote — Milanoteは、クリエイティブな活動に特化したスタジオです。フローティングビジュアルボード（ダークフレームの壁、白い表示スペース、柔らかな奥行き感のある実物のように見えるスクリーンショットなど）を使用して、エディトリアルギャラリースタイルのページを作成できます。
- Co2 — 冬の光の中で描かれた気候図。まるで航空写真のようなページ構成で、セリフ体の見出し、カテゴリ別にコード化されたデータ、そして氷に覆われた画像が、広い白い余白を際立たせます。
- GitButler — テキストの末尾にターコイズブルーを使用。コントラストの高いセリフ体の見出しに、繊細なテクニカルグリッド、温かみのあるグラファイト調の表面、そして控えめなターコイズブルーのアクセントを組み合わせたデザイン。
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Dub — リンクのマットな和紙製コントロールパネル
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Notion — 真昼の太陽の下、温かい紙のノート
- Anthropic — 温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。