厳選・オープン・無料

ToyFight

レトロゲーム風の美学を持つ、遊び心がありながらもプレミアムなクリエイティブエージェンシーのウェブサイト。

01

デザイン DNA

8ビットゲームのノスタルジーとハイエンドなクリエイティブサービスを融合するデザインスタジオ。

02

カラー

温かみのある柔らかいニュートラル背景と、高コントラストのダークインクの対比。

03

タイポグラフィ

monospaced · condensed-sans

• display56px · 400
• heading46px · 400
• body18px · 400
• caption14px · 500
• micro10px · 500

レトロなテクノロジー感を強調するため、主要見出しにmonospacedフォントを使用します。 · 本文およびUIテキストにはcondensed sans-serifを使用します。 · 幅広いtrackingのuppercase small labelsを使用します。

04

余白

太字のタイポグラフィや3D要素が息をつくための、豊かな余白。

05

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

1px solid #0D0D0E

0 4px 12px rgba(0,0,0,0.05)

06

レイアウト

オーバーラップする要素と豊かなpaddingを持つ、非対称で散りばめられたレイアウト。

07

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

色や背景の変更にsmooth transitionを適用。 · 3Dオブジェクトにはcomplex transformアニメーションを適用。 · scrollでトリガーされるentranceアニメーション。

インタラクティブ要素上の微妙な色の変化とtransform。 · active状態による即座の視覚的フィードバック。

08

コンポーネント

• button 明るい背景とダークなborderを持つ、ピルシェイプまたは角丸長方形のボタン。
• card ポートフォリオ作品を紹介するダーク背景カード。
• chip タグやカテゴリ用の小型ピルシェイプラベル。
• input 下部border付きのクリーンなテキスト入力欄。
• hero 散りばめられた太字のタイポグラフィブロックと組み合わされた、大型の3Dインタラクティブオブジェクト。

09

文体と禁止事項

• トーン 自信に満ち、遊び心があり、やや不敵なトーン。
• 見出し 強烈な個性を持つ、太字の断片的なステートメント。
• CTA 直接的で遊び心があり、しばしば非伝統的なラベルを使用。

• ディスプレイテキストに一般的なsans-serifフォントを使用しない — スクリーンショットはmonospacedおよびcondensedな書体を示しています。
• 厳格で対称的なレイアウトを適用しない — スクリーンショットは散りばめられた、オーバーラップする要素を示しています。
• 冷たく臨床的なカラーパレットを使用しない — スクリーンショットは#F1E7E7のような温かみのある柔らかいニュートラルを示しています。
• 3D要素や遊び心のある要素を避けない — スクリーンショットは3Dゲーム機を前面に押し出しています。
• 細く繊細なborderを使用しない — スクリーンショットはsolidで自信に満ちた1px borderを示しています。
• タイポグラフィを均一なサイズにしない — スクリーンショットは10pxから56pxまでの極端な変動を示しています。
• 避ける: 退屈な企業的表現
• 避ける: 過度にフォーマルな言葉遣い
• 避ける: 一般的なデザイン専門用語

10

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

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

11

System Prompt

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