厳選・オープン・無料

Reboot Studio

ソフトウェアスタートアップのマーケティングサイトを構築するための、プレミアムなエージェンシーポートフォリオ。

01

デザイン DNA

ソフトウェア創業者向けのハイエンドオーダーメイドスタジオ。

02

カラー

強力なタイポグラフィコントラストを持つ厳密なモノクロームパレット。

03

タイポグラフィ

humanist-sans

• display40px · 500
• body16px · 500
• caption14px · 500

Interまたは同様のヒューマニストサンセリフを使用 · 大きなディスプレイサイズに対して、タイトなネガティブ文字間隔を適用 · プライマリテキスト要素に対して、厳密にフォントウェイト500を維持

04

余白

豊かな垂直方向の間隔と大きなパディングブロック（上部パディングが128px観察される）。

05

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

rgba(0, 0, 0, 0.1)またはrgb(229, 231, 235)を使用した、1pxの実線ボーダー。

0px 1px 1px -0.5px rgba(0,0,0,0.06) · 0px 10px 15px -3px rgba(0,0,0,0.1) · 0px 0px 0px 1px rgba(0,0,0,0.05)

06

レイアウト

最大幅を持つ中央配置コンテンツブロック、広大な余白に囲まれる。

07

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

テキストブロックに対する滑らかなフェードインとトランジション · インタラクティブ要素に対する繊細なスケーリングやカラーシフト

インタラクティブ要素に対する、繊細な不透明度または色の変化。 · 滑らかなトランジションを伴う即座のビジュアルレスポンス。

08

コンポーネント

• button ダーク背景（#232323）または繊細なボーダー付きの透明な、ピル型ボタン。
• card 提供されたビューでは目立って使用されていません。
• chip 1pxのボーダーと角丸を持つ小さなピル型タグ（例：'Hiring · Web Designer'）。
• input 提供されたビューでは目立って使用されていません。
• hero 白い背景に中央配置された、ダークとミュートグレーテキストを混合した大型タイポグラフィレイアウト。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルで率直。
• 見出し 直接的で宣言的なステートメント。
• CTA シンプルで行動を促す（例：'See work'）。

• アクセントカラーを複数使用しない — スクリーンショットは厳密な黒、白、グレーパレットを示しています。
• 装飾的なセリフフォントを使用しない — スクリーンショットはヒューマニストサンセリフの一貫した使用を示しています。
• 雑然としたレイアウトを作成しない — スクリーンショットは広大な余白と中央配置のコンテンツカラムを示しています。
• 重い背景テクスチャを使用しない — スクリーンショットはフラットで実色の白い背景を示しています。
• すべての要素に複雑なドロップシャドウを使用しない — スクリーンショットは最小限で繊細なシャドウを示しています。
• 本文にすべて大文字を使用しない — スクリーンショットは標準的な文のケースと小文字を示しています。
• 避ける: 過度に複雑な専門用語
• 避ける: 攻撃的なセールスコピー
• 避ける: 不装飾的な余分な要素

10

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

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

11

System Prompt

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