Flying Papers
土曜朝のアニメでの告白
Flying Papersは、厚手のリソグラフ紙に印刷された土曜朝の漫画のような作品だ。平坦で落ち着いた紫色の風景に、鮮やかな紙吹雪のような色が散りばめられ、文字は画面いっぱいに広がる。ブランディングは大胆で妥協がなく、注目を集めようとするのではなく、自然と目を引く。各画面は、一枚の力強いポスターのように感じられるよう設計されている。目立つ見出しが一つ、キャラクターのイラストが一つ、テキスト内のアクションが一つ、そして十分な余白がある。フレームが影の代わりに大部分の役割を果たし、色はデータではなく絵の具のように使われている。画面は平坦で、エッジは6ピクセルでシャープに保たれており、システムの中で唯一柔らかいのは、終了ボタンの100ピクセルのピルだけだ。
最大幅制限のないフルスクリーンポスターレイアウト。各画面はビューポートサイズの単一の構成で、中央または左揃えの巨大なObviouslyVariableタイトル、テキストに重なる単一のマスコットイラスト、およびその下の小さなインラインアクションで構成されています。セクションは明るい色と暗い色が交互に使用されることはなく、ページ全体がトワイライトパープルのキャンバス上にレイアウトされ、その上に単色のカードが配置されています。ナビゲーションは中央に配置された単一のロゴで、メニューバーはありません。カードはゆったりとした2～3列のレイアウトで配置され、余白は広く、カードのサイズは均一ではなくコンテンツによって決定されます。密度は極めて高く、1画面につき1つのアイデアが紫色の余白に囲まれています。
イラストのみを使用し、写真、3Dレンダリング、抽象的なグラデーションは使用しません。ビジュアル言語は、太い黒の輪郭線（2～3ピクセル）、2～3色のフラットな塗りつぶし、陰影なしの手描きの漫画スタイルです。キャラクターは、書体とインタラクトするマスコット（文字から顔を覗かせたり、寄りかかったり、文字の上に立ったり）です。アイコンは、黒（Pure）または白（Bone）の線で描かれ、線幅は1.5～2ピクセルです。画像は主に装飾的な雰囲気を作り出すことを目的としており、説明は一切ありません。書体がメッセージを伝え、キャラクターが雰囲気を伝えます。
パレット
ブランド
- Dusk Violet
#8584bd— メインのキャンバスとメインの背景は、他のすべての色が現れる舞台である。 - Hi-Vis Yellow
#f4ed36— 黄色は、アクションの概要、リンクラベル、インタラクティブ要素を強調表示するために使用されます。行動喚起のメインカラーとして使用すべきではありません。 - Buttery Yellow
#f9cc73— 画面上の追加テキストと柔らかな境界線は、反射色が過剰になるような状況において、より控えめな反射色表現を提供します。 - Lilac Shadow
#61609a— カードやブロックの背景は、紫色のステージ上の入れ子構造の表面に合わせて、より濃い紫色になっています。
中性
- Bubblegum Pink
#f8c1ba— 装飾的な縁取りと紙吹雪のアクセントには、温かみのあるピンク色が控えめに使われており、鮮やかな彩りを添えている。 - Matcha Cream
#b5c995— 装飾的な縁取りと紙吹雪のアクセントが、カードの脇役たちにくすんだ緑色の色合いを与えている。 - Magenta Punch
#ac4f98— アクセントカード用の追加表面 - ステージよりも大きな音を出すべきエフェクトブロック用に設計されています。 - Firecracker Red
#c94245— 背景、装飾的なストライプ、そしてコンテンツの背後にある柔らかなアクセントを強調するために、赤色で塗りつぶされています。 - Bone White
#f9f5f2— 明るい表面では、細い枠線、区切り線、入力フィールドのアウトライン、カードの縁などにこの色を使用してください。また、行動喚起ボタンのメインカラーとしてこの色を使用することは避けてください。 - Ink Black
#1a1a1a— 本文、主要な枠線、ボタンの輪郭線は、クリーム色の表面に活字を印刷する際に用いられる、ほぼ黒に近い色です。
タイポグラフィ
10～341ピクセル・8段階
- ObviouslyVariable — 交換： Founders Grotesk Condensed · 概要 800, 900 · 見出しや大きな文字に適したこのフォントファミリーは、このシステムで唯一十分な視認性を持つフォントです。サイズは本文用の18ピクセルからポスター表示用の341ピクセルまで幅広く対応しています。行間隔は0.80～1.00と狭めに設定されているため、複数行の見出しも単色のブロックとして表示できます。Calt機能は無効になっているため、幅広の幾何学的形状は装飾なしで表示されます。代替フォントとしては、Founders Grotesk Condensed、Knockout、またはDruk Wideがあります。
- DegularVariable — 交換： Inter · 概要 400 · 極小UIテキスト（ナビゲーション、フッターのマイクロコピー、インラインラベルなど）は10px。本文テキストとシームレスに調和する、汎用性の高いニュートラルなフォント。代替フォント：Inter、IBM Plex Sans。
- bergen_monoregular — 交換： JetBrains Mono · 概要 400, 600 · ナビゲーション、タグ、小さなデータラベルには等幅マイクロフォントが使用され、丸みを帯びた画面上でタイプライターのようなリズムを生み出します。等幅フォントの行間隔0.80は特徴的な要素で、密に配置された等幅フォントはレシートのような印象を与えます。代替フォント：JetBrains Mono、IBM Plex Mono。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 17px |
| ボタンの半径 | 100px |
| カード半径 | 6px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 40px |
AI がFlying Papersスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Navigate — ボードに貼られた大量のステッカー：大きなグロテスクなフォント、すべてタブレットの形をしており、5つの多色アイコンがロゴのように繰り返されている。
- Hatch — 手描きのサミズダート風デザインに、パステルカラーのキャンディボウルがミックスされています。クリーム色の紙のキャンバスには、ミントのアクセント、紙吹雪のドット、そして錠剤型の行動喚起が飾られ、大きくて太字のセリフ体フォントが楽しさを暗示し、青いマスコットが隅でウィンクしています。
- Wonder — ネオンパープルの司令センターは、深いプラム色の闇の中に、たった一つのレーザーのような紫色の光源が突き刺さっている。
- Duolingo — 白い紙に描かれた、遊び心のあるクラスのマスコット
- Family — クリーム色の羊皮紙に描かれたおとぎ話の一場面
- Visitors — 白いエンジニアリング図面
- Say Briefly — クリーム色の紙に描かれたクリエイティブエージェンシーのスケッチブック
- Superpower — 生物発光健康管理センター
- Dopper — 太陽の光が降り注ぐ、クリーミーなラグーンに、鮮やかな青い流れが流れる。温かみのあるベージュ色の広大な水面には、一本の明るい青い水路と、まるでキャンディーのように透明なカードが、水面に降り注ぐ太陽の光のように空間を切り裂いている。
- Dock — サンリットクリームペーパー、コバルトパルス
- Portrait — クリーム色の紙にポラロイド写真で収められた思い出の壁。明るいクリーム色のスクラップブックには、濃い青色のインクが唯一の文字、唯一の構造線、唯一のフレームカラーとして使われている。手描きの虹が「登録」ボタンと斜体で書かれた「永遠に」という単語に一度だけ現れ、二度と現れることはない。
- Quizlet — 教室は白い背景に様々な色で装飾されている。静かな机の後ろには、パステルカラーのカードが4枚飾られており、涼しげなグレーの壁とインディゴ色のマーカーで描かれた1つの印を背景に、唯一の明るいアクセントとなっている。