Superhuman
ゴールデンアワー編集委員会
Superhumanは、編集写真とソフトウェアUIの交差点に位置する。温かみのある羊皮紙のようなキャンバス（純白ではない）が、マルーンのブランド要素と鮮やかな紫のアクセントを縁取る。460フォントで設定された見出しは、叫ぶのではなくささやくように、ページ全体を使った映画のような写真が重要な役割を担い、半透明の製品UIカードは、画像の上にガラスのように浮かぶ。パレットはほとんどの場合、穏やかで編集的な印象を保つ。クリーム色の表面、チャコールグレーのテキスト、控えめな温かみのあるグレーの境界線、要素間の十分な間隔があり、色は意図的なブランドの句読点としてのみ使用される。マルーンのコールトゥアクション、紫のリンク、淡いライラックのアドオンボタンなど。このシステムは、UI表面上の強い影やグラデーションを意図的に避けている。奥行きは、重ね合わせ効果ではなく、レイヤード写真とタイトルの微妙な背景ぼかしによって実現されている。
メイン要素は、中央に見出し（48～64ピクセル/460ピクセル）とワインの画像が配置された全幅の写真で、左右の端には半透明の製品UIカードが重ねて表示されています。メイン要素の下には、白いストライプのロゴストリップ（1行あたり6セル、最大幅は制限あり）があり、その下に羊皮紙キャンバス上に白いカード面が配置されたタブセクションがあります。ページの約3分の2の地点で、全幅のダークターコイズストライプ（左に画像、右にテキスト）がリズムを崩し、スクロール時に唯一の色調のコントラストを生み出します。続いて、グラデーションのかかった雰囲気のあるストライプが続きます。セクション間の垂直方向の間隔は64～96ピクセルです。最大コンテンツ幅は約1200ピクセルで中央に配置され、メイン要素とダークストライプはビューポートの全幅に広がります。ナビゲーションは、背景がぼやけた固定ヘッダー1つで、サイドバーやメガメニューはありません。フッターは、リンクが複数列に配置された、幅いっぱいのバーガンディ色のページです。全体の構成は、メインフレーム → 落ち着いた白/クリーム色のコンテンツ → メイン画像のある濃い色のストライプ → 雰囲気のあるグラデーション → バーガンディ色のフッター、明るいストライプと暗いストライプを交互に配置することで、編集的なテンポを生み出しています。
主要な視覚要素は映画のような写真です。広々とした空を背景にした全幅のポートレートが焦点となり、ページの下部には2つ目の雰囲気のあるストライプが配置されています。画像は暖色系のトーンで、控えめに抑えられ、ゴールデンアワーを思わせる横顔で撮影されており、企業的な雰囲気よりも編集的な雰囲気を醸し出しています。半透明の幾何学的な長方形と手書きの文字が入った暗いストライプが、物思いにふける男性の写真の上に重ねられています。これは単一の画像ではなく、表面のコラージュです。ユーザーインターフェースは、個別のスクリーンショットではなく、写真に直接重ねられた浮遊するガラスカードとして表示されます。グラデーションの雰囲気のあるストライプを除いて、ストックイラスト、3Dレンダリング、抽象的な装飾形式はありません。アイコンはミニマルなモノクロの線アイコンで、幅は約16～20ピクセル、460ポイントのテキストウェイトに対応する単一の幅です。
パレット
ブランド
- Midnight Wine
#421d24— メインのアクションボタン、広告バナー、フッターには、温かみのある、ほぼ黒に近いバーガンディ色が使われており、赤というよりインクのような色合いで、主張しすぎることなく全体のカラーパレットを支えている。 - Royal Violet
#714cb6— 紫色は、リンク、タグ、短いフレーズを強調表示するために使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Lilac Mist
#d4c7ff— 二次的な表面塗りつぶし、ライトアイコン、ゴーストボタンの背景はすべて、ブランドのスタイルをさりげなく示唆しつつも、過度に注目を集めない、落ち着いた紫色を特徴としています。 - Deep Lagoon
#0c4243— 物語の主要な要素として用いられているこの漫画の暗い背景は、システム内で唯一の暗い表面であり、その上に幾何学模様が重ねられている。 - Warm Parchment
#f2f0eb— ページの作業面が主役となる要素であり、ベースカラーとして白の代わりに温かみのあるクリーム色が採用され、システム全体に編集的な温かみを与えている。 - Soft Mist
#e3e3e2— 細い縁取り、カードの輪郭、区切り線――羊皮紙に溶け込むような温かみのある淡いグレーでありながら、輪郭をはっきりと際立たせている。 - Ink Charcoal
#292827— 本文、見出し、アイコンのアウトライン - 温かみのある、ほぼ黒に近い色で、紙にインクで書いたような感じの茶色が少し入っており、決して冷たい印象はありません #000 - Stone Gray
#666666— 補助的な本文、補足説明、控えめな記述には、単一のミディアムグレーを使用し、本文と競合しないように控えめに使用する。
タイポグラフィ
12～64ピクセル・8段階
- Super Sans VF — 交換： Inter (closest open equivalent for variable weight range) · 概要 460, 500, 540, 600, 700 · システム全体で単一のフォントを使用します。軸変数は、460（すべての大きな見出しテキストに使用される、特徴的なやや切り詰められたフォント）から540（強調された本文テキスト）、700（小さく太字のキャプション）までの範囲にわたります。特別に設計されたVFにより、460ウェイトの見出しは、無造作ではなく、より意図的な印象を与えます。48～64ピクセルで文字間隔を狭くすると、「やや切り詰められた」効果が、細いというより自信に満ちた印象を与えます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8px |
| ボタンの半径 | 16px |
| カード半径 | 16px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64-96px |
| ページ幅 | 1200px |
AI がSuperhumanスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- AI for Business — 温かみのあるグレーの色調で統一された、ブルータリズム建築の編集ショールーム
- Jeton — 温かい大理石に書かれたフィンテックに関する社説
- Airtable — 章ごとに色分けされた、居心地の良いセミナー
- Osmo — 灰色のコンクリートに建てられた開発者博物館
- Linktr — 社説ポスターはまるでキャンディーのように積み重ねられている。ウェブサイトはカラーブロックでデザインされており、鮮やかな緑色の見出しがコバルトブルーの壁面に映え、白い錠剤型のナビゲーション要素がワインレッドの背景の上に浮かんでいる。
- Outsource Consultants — 骨紙に印刷された大判の建築用シート。モノグラフィックな美学が特徴で、温かみのある、タイポグラフィをふんだんに用いたグリッドの中に、鮮やかなインディゴの斑点が一つだけ散りばめられている。
- Streamtime — 触覚的なクリエイティブムードボード - デザイナーズスクラップブッキングテーブル
- Switch-Lit — クリーム色の紙にインクで印刷された編集グリッド
- HubSpot — 温かみのあるクリーム色の紙に、オレンジのアクセントが一つだけ効いている。HubSpotは、厚手の紙に印刷されたデザイナーズ雑誌を彷彿とさせる。セリフ体の見出し、温かみのあるクリーム色のページ、そして最も重要なポイントだけを際立たせる鮮やかなオレンジのアクセント。
- Granola — 温かみのある羊皮紙に書かれたフィールドノート――『グラノーラ』は、日当たりの良い机の上で開かれた使い込まれたモレスキンノートを思わせる。セリフ体の見出しはしっかりとした印象を与え、植物由来のインクのようなオーガニックな緑色のアクセント、そして手書きのメモを思わせるカードの余白の細い線。
- Secure — 柔らかな自然光が差し込むヨーロッパのカフェでの会話は、ビデオ通話を温かくスタイリッシュに表現したものであり、セリフ体の見出しは、テクノロジー製品のページというよりは、思慮深い雑誌記事のように読める。
- Mockups made easy — ホワイトペーパー上のエディトリアルデザインスタジオ