Style · スタートアップ
スタートアップWebデザインの参考例とAIプロンプト
スタートアップに求められる「勢い」を作るAIプロンプト集。鮮やかなアクセント・大見出し・即決CTAが特徴。
スタートアップについて
勢いを作る設計。鮮やかなアクセント色、大見出し、即決CTA、ロゴウォールなど、短期で結果を出したいプロダクトに必要な要素が詰まっています。コーポレートより攻め、SaaSより荒々しく、個性で勝負する文脈。シードからシリーズAは、機能の量で勝負できません。プロダクトがまだ揃っていないからです。そこで問われるのは、この会社は何を信じているかという姿勢。情報を増やすのではなく、態度を一枚の画面で言い切ることが、この様式の役割になります。
スタートアップの視覚パラメータ
- #0D0D12 地
- #FFFFFF 文字
- #6E56CF アクセント
- #34D399 成功
- 書体
- 見出しは極太、本文は普通のサンセリフ
- 形
- 角丸8〜12px。CTAだけ強い影を持たせる
- 動き
- hoverで持ち上げ、色付きの影を足す
よく使われる場面
- YC系スタートアップのLP
- プレシード・シード期のピッチページ
- クローズドβ募集ページ
- 採用ページ（エンジニア向け）
- ローンチキャンペーン
成功のポイント
- 見出しは「何を変えるか」を1行で宣言
- CTAは早く何度も現れる
- 投資家ロゴ・プレスロゴを信頼補強に
- 創業者の顔と背景ストーリーを入れる
- 配色は鮮やかに、ただし2色まで
このスタイルのデザイン
暖色テラコッタの大判CTAセクション
暖色（テラコッタ・赤・砂色）でまとめた、人肌の温度を持つ大判CTAセクション。飲食・ライフスタイル・小売など、信頼より親しみで選ばれるブランドのコンバージョン直前に効く設計。
鮮やかなメッシュグラデーションのSaaSヒーロー
Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。