厳選・オープン・無料

Lusion

Lusionは、ブランドが際立つための3Dビジュアルストーリーテリングとインタラクティブなウェブエクスペリエンスを創造します。

01

デザイン DNA

没入型の3Dナラティブを創造するデジタル鍛造所。

02

カラー

モノクロームのフォームに対して、1つのエレクトリックブルーのアクセントを配したハイコントラストなキャンバス。

03

タイポグラフィ

geometric-sans · monospace

• display144px · 500
• heading143px · 400
• body16px · 400
• caption14px · 400

大きなディスプレイテキストには tighten したネガティブレタースペーシングを使用する · すべてのタイポグラフィでクリーンで幾何学的な美学を維持する · 長文コンテンツの可読性のために、左揃えテキストを優先する

04

余白

垂直および水平のリズムのために、一貫した8pxの基本刻み。

05

サーフェス (角丸 / 影 / 罫線)

カードの精妙なbox-shadows以外に、目に見えるボーダーは使用しない。

0px 2px 4px rgba(0, 0, 0, 0.04) · 0px 6px 10px rgba(0, 0, 0, 0.04)

06

レイアウト

大きな3Dビジュアルヒーローセクションが支配的な、流動的でレスポンシブなレイアウト。

07

モーションとインタラクション

hover時のスムーズなtransformアニメーション · UI要素の精妙なopacity遷移 · ヒーローセクション内の連続的な3Dオブジェクトの動き

インタラクティブな要素におけるスケールとカラーの遷移。 · 精妙なtransformシフトによる即座の視覚フィードバック。

08

コンポーネント

• button 暗い背景と明るいテキストを持つ、丸みを帯びた角のピル型ボタン。
• card 3Dプロジェクトのサムネイルを披露するための、大きな角丸コンテナ。
• chip ナビゲーションやカテゴリ用の、シンプルな大文字テキストラベル。
• input 丸みを帯びた角と精妙なボーダーを持つミニマリストな入力フィールド。
• hero 3Dビジュアルとスケールの大きいタイポグラフィが支配的な、全幅セクション。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルで革新的。
• 見出し ビジュアルインパクトとストーリーテリングを強調する、大胆で簡潔なステートメント。
• CTA 直接的でアクション导向で、しばしば大文字テキストを使用。

• 複数のアクセントカラーを使用しない — スクリーンショットでは1つのエレクトリックブルーのアクセント（#1A2FFB）が支配的です。
• 装飾的またはセリフフォントを使用しない — スクリーンショットではクリーンで幾何学的なサンセリフ書体（Aeonik）が使用されています。
• 忙しい背景や複雑なパターンを使用しない — スクリーンショットでは単色の明るいオフホワイト背景（#F0F1FA）が使用されています。
• 角丸でない角を使用しない — スクリーンショットではすべてのコンテナとボタンに角丸（15px-100px）が使用されています。
• 細く繊細なタイポグラフィを使用しない — スクリーンショットでは見出しに太く幾何学的なフォントウェイトが使用されています。
• 明るく彩度の高い背景を使用しない — スクリーンショットでは、単一のポップカラーを持つ、控えめで低彩度のパレットが使用されています。
• 避ける: 専門用語の多い説明
• 避ける: 受動態
• 避ける: ごちゃごちゃしたレイアウト

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko