Notion
真昼の太陽の下、温かい紙のノート
Notionのインターフェースは、まるで日中の明るい光の下で愛用している紙のノートのようです。温かみのあるクリーミーなキャンバス（#f6f5f4）は、無機質ではなく触感に訴え、ゆったりとしたサンセリフ体のタイポグラフィが製品コピーに編集上の重みを与え、色は控えめな句読点として使われています。ピーチ色の「ピル」が動詞を強調し、単一の青色が主要なアクションを支え、コーラル、アンバー、スカイ、ミッドナイトといったアクセントカラーがステッカーのようにカードの背景を彩ります。カードは、モレスキンノートの罫線部分のように、薄い境界線と角を持つキャンバス上に配置され、影もクロムもありません。アニメーションは遊び心があり弾むようで、200msの滑らかなトランジションと弾むようなキャラクターアニメーションが、装飾的ではなくインターフェースに生命を吹き込んでいます。
中央揃えの場合、最大幅は約 1440px に制限されます。メイン要素は中央揃えのスタックです。シンボルの行 → 色の付いたピルが埋め込まれた大きな 2 行の見出し → サブ見出し → 2 つのコールトゥアクション ボタンの行 → 大きな製品 UI モックアップ。メイン要素の下には、白いカードのグリッドとフルカラーのアクセント パネルが交互に配置されています。ロゴ ウォールは、グレースケールのパートナー ロゴの中央揃えの 1 行グリッドです。機能ブロックは 2 列レイアウト (左側にテキスト、右側にカラー パネル) を使用し、セクションごとに左右が交互に配置されます。「アシスタントにオンデマンドで質問」セクションでは 2x2 カード グリッドを使用し、一番上のカードが全幅を占め、一番下の行は 2 つの等しい列に分割されます。セクション間のガターは広く (約 80px)、落ち着いた垂直のリズムを作り出しています。ナビゲーションは、中央揃えのナビゲーション要素と右揃えのアクション ボタンを備えた、高さ 64px の固定トップ バーです。
イラストが最重要視されており、写真は一切使用されていません。ビジュアル言語は、フラットなイラストシンボル（2ピクセルのカラー円で角が丸くなっている）、抽象的な装飾要素（手描きの波線、グリッター、矢印、花の形）、および製品のユーザーインターフェースのモックアップで構成されています。シンボルはメインウィンドウに7つのアバターの横一列として表示され、ページ全体に遊び心のある句読点のように散りばめられています。製品のスクリーンショットは唯一の「リアルな」ビジュアル要素です。これらは、実際のNotionインターフェース（カンバンボード、ドキュメントビュー、AIエージェントパネル）を、すべての要素と実際のデータとともに表示します。メインウィンドウの製品モックアップは大きく中央に配置され、キャンバスとの間に1つの影を落としています。ライフスタイル写真、ストック画像、抽象的な3Dレンダリングは一切使用されていません。
パレット
ブランド
- Notion Blue
#0075de— コールトゥアクション（CTA）ボタンを埋める主要な要素、アクティブなナビゲーションのアクセント、塗りつぶされたアクションボタンは、ほぼモノクロのシステムの中で、スイッチとして認識できるほど十分に彩度の高い唯一の配色です。
中性
- Paper Warmth
#f6f5f4— ページキャンバス、メインウィンドウの背景、セクションの背景はすべて、暖かみのあるややベージュがかった色調で、システムに触覚的なアナログ感を与えている。 - Pure White
#ffffff— カードの表面、立体的なパネル、ロゴの背景、暗い色のカードにコントラストの効いたテキスト。 - Ink Black
#000000— メインテキスト、ナビゲーションリンク、見出しは、異なる透明度（100%、95%、90%、60%、40%、20%）を使用して、新しい色を追加することなく階層構造を構築します。 - Charcoal
#111111— 真っ黒だときつすぎるUI領域向けに、ダークテキストオプションを用意しました。 - Stone
#757575— セカンダリナビゲーションテキスト、ミュートされたヘルパーテキスト、無効化されたボタンラベル - インクアルファ60% - Graphite
#615d59— 本文は温かみのある色調、つまり茶色がかった灰色で、温かみのある背景色と調和している。
タイポグラフィ
12～96ピクセル・10段階
- NotionInter — 交換： Inter · 概要 400, 500, 600, 700 · メインのサンセリフフォントは、微妙なニュアンスを持つ幾何学的なヒューマニストフォントで、本文には400、ナビゲーション/ユーザーインターフェースには500、見出しには600～700のサイズで使用されています。フォントスケールは、大きなサイズでは積極的な負の文字間隔（96pxで-4.6px、72pxで-2px）を採用しており、見出しが軽やかではなく、よりコンパクトで自信に満ちた印象を与えます。
- Lyon Text — 交換： Source Serif Pro · 概要 400 · 本文の各セクションとセクションの導入部分にのみ使用される編集用セリフ体は、雑誌のレイアウトにおける引用文のように、書体に文学的な重みを与えるために、控えめに（4回）用いられています。これは、並列的な階層構造ではなく、体系的なアクセントとして機能しています。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 8px |
| ボタンの半径 | 8px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80px |
| ページ幅 | 1440px |
AI がNotionスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Dub — リンクのマットな和紙製コントロールパネル
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Anthropic — 温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。
- Calendly — 冷たい大理石に濃い青色のインク
- Augen Pro — Appleの白いプレゼンテーションでは、モノクロームの空間に、臨床的で軽やかなエレクトリックブルーが唯一のアクセントとして用いられている。
- Antimetal — クリーム色の紙に書かれた編集記事――科学雑誌の静かな朝。そこでは、抑制された表現が自信を伝え、セリフ体が重要な役割を担っている。
- Perk — 温めたパーチメント紙に電気石灰を塗る
- Ditto — 陽光が差し込む工房で、野の花のサンプルが作られている。温かみのあるクリーム色の表面、鮮やかな黄色のベースカラー、深い紺色のインク、作品の背後で咲き誇る有機的な色彩。
- Officevibe — 温かみのあるクリーム色の紙に印刷された編集雑誌。人事管理に関する思慮深いエッセイが、まるで商品のように提示される様子を想像してみてください。モダンな青いインターフェースを通して、筆記体のセリフ体フォントがささやくように流れるのです。