Creative Giants
クリーム色の紙に印刷された大型編集ポスター
Creative Giantsは、コードでレンダリングされた特大のアートブックの見開きページのように見えます。温かみのあるクリーム色のキャンバス、細い余白、そして見出しというよりポスターのような大きな文字が特徴です。システム全体はネガティブスペースと単一の軽量サイズ（300）で動作し、見出しは太字で目立つのではなく、64～84ピクセルでほとんど聞こえません。文字間隔は文字サイズが大きくなるにつれて急激に減少（-0.04em）するため、文字は剥がれたのではなく彫刻されたように見えます。配色は、鮮やかな紫、濃いターコイズ、ライトブルー、ホットピンク、ミント、ネイビーといった、カードの表面やアクセントとして、背景の塗りつぶしではなく、細かく彩度を上げた筆致で配置されています。インタラクティブな要素は、完全に丸みを帯びた（1440ピクセル）クリーム色の背景に黒い図形として配置され、クロム要素はほとんど見えません。白いスペースには、丸いロゴと「メニュー」ボタンが浮かんでいます。ビジュアルコンセプトは、制作スタジオのコンタクトシートをイメージしたものだ。大きな見出しが1つ、画面いっぱいの写真が1枚、そして簡潔なメタテキストが1行。他のページもすべて、同じように簡潔なスタイルを踏襲する。
フルページレイアウト：最大幅コンテナはなく、コンテンツは左右均等な余白（モバイルでは16～32px、デスクトップでは32px以上）でページ全体の幅を占めます。メインの見出しは、ビューポートの約40%を占める大きな見出し（「CREATIVE GIANTS」、84px）で、その直後に左下隅にメタタグとタイトルオーバーレイが付いたフルページの写真が続きます。セクションのリズムは統一されており、各セクションは少量のすべて大文字のテキストと説明文で始まり、48～64pxの空白で区切られています。ネイビーインクのアクセントカードが1枚反転している以外は、濃淡の交互の帯はありません。コンテンツは左揃えで、メインの見出しを除いて中央揃えのブロックはありません。ニュース/ケーススタディのセクションでは、右側にフローティング矢印ブロックが付いた3列のカードグリッドを使用しています。ナビゲーションは、サイドバーやヘッダー自体以外のアンカー要素なしで、単一のトップヘッダーによって行われます。全体的なレイアウトは広々としており、編集スタイルと一貫している。各セクションはゆったりとしており、余白が主要な構成要素となっている。
デザインの中心は編集写真です。画像はページの全幅を占め、シャープな角度で撮影され、重なりや丸みを帯びたマスクはありません。スタイルはドキュメンタリー風で雰囲気のあるものに傾いており、しわの寄った手、公共のインスタレーション、人々の何気ないショットなどが用いられ、演出された商品写真は一切使用されていません。画像は常に大きなサイズ（全幅ビューポートまたはカード全体）で表示されるため、デザインの単位はユーザーインターフェースではなく写真です。イラスト、3Dモデル、製品モックアップはありません。アイコンは最小限で、小さな円形のロゴ1つ、カルーセルコントロールのアウトラインシェブロン、1ピクセルのアウトラインを持つ軽量なUIアイコンのみです。画像の密度は画像自体によって決まり、テキストは写真の下または上に控えめな注釈レイヤーとして配置されます。
パレット
ブランド
- Magenta Bloom
#8a0467— ピンクは、装飾的なディテールの補助色として、また使用頻度の低い検索クエリを強調するために使用されます。行動喚起のメインカラーとして使用すべきではありません。 - Forest Teal
#03624c— カードフレームや装飾的なアクセントカラーとして使える、深みのあるブランドカラー。マゼンタブルームと組み合わせると、ツートンカラーの仕上がりになります。
中性
- Bone White
#fffef7— ページキャンバス、厚紙の表面、暗いアクセント部分のテキストは、純粋な#ffffffに代わる温かみのあるクリーミーな色合いで、システム全体に紙のような印刷された感触を与えています。 - Ink Black
#000000— 濃い色は、ニュートラルなテキストやアイコンを引き立て、強いコントラストを生み出します。ただし、行動喚起のメインカラーとして使用することは避けてください。 - Graphite
#666666— 二次的な本文、キャプション、メタデータ、および補足テキストは、メインテキストが主役となるように背景に押しやられます。 - Ash
#aaaaaa— 入力フィールドの境界線、非アクティブなリンクの色、三次区切り線 - 必要のないときは消える、柔らかな構造的なグレーの色。 - Charcoal Scale
#4d4c4a— リストの境界線には中間色のニュートラルカラーを使用し、濃いグラデーション部分には微妙なコントラストを持たせる。青みがかったグレーではなく、温かみのあるグレーにする。 - Powder Blue
#a5c8eb— ポストカード風の背景、ぼかした背景、落ち着いた色合いのイラストなど、柔らかな色のアクセントを加えることで、暖色系の背景を落ち着いた印象にすることができ、同時に主張しすぎることもありません。
タイポグラフィ
12～84ピクセル・7段階
- Switzer — 交換： Inter (300 · 概要 300, 400 · 単一フォントシステム：すべての表示要素と見出し（12～84px）には300ウェイト、本文、メタデータ、UIコントロールには400ウェイトを使用します。推奨オプションは、64～84pxのサイズで300ウェイトを使用することです。ほとんどのシステムでは、このサイズで700～800の太字フォントを使用しています。淡いトーンのSwitzerフォントは細い線を維持し、クリーム色のキャンバスにエアブラシで描かれた文字のような印象を与えます。サイズが大きくなるにつれて文字間隔を狭くする（84pxで-0.04em、14pxで-0.018em）ことで、内部のスペースを広く保ちつつ、疎な印象を与えないようにしています。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 8px |
| ボタンの半径 | 1440px |
| カード半径 | 0px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64px |
AI がCreative Giantsスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- monopo saigon — 編集部の沈黙の背後にある、液体のような虹色の輝き――溶けた光の上に浮かぶモノクロの編集ギャラリー
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Dub — リンクのマットな和紙製コントロールパネル
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Notion — 真昼の太陽の下、温かい紙のノート
- Hyer Aviation — 夕暮れ時のコックピット、羊皮紙の上。淡い夜明けの空が機体サイズのセリフ体ロゴと出会い、温かみのある粘土色のアクセントが単色の抑制を打ち破る。
- Anthropic — 温かみのある羊皮紙に印刷された科学分野の専門誌――落ち着いた象牙色の表面、セリフ体の編集見出し、そして行動が必要な時だけ現れる、たった一つの粘土色のアクセント。
- Calendly — 冷たい大理石に濃い青色のインク
- Augen Pro — Appleの白いプレゼンテーションでは、モノクロームの空間に、臨床的で軽やかなエレクトリックブルーが唯一のアクセントとして用いられている。
- OFF+BRAND. — 温かい羊皮紙の上に虹色に輝く球体