厳選・オープン・無料

Getcoco

太字のタイポグラフィと鮮やかなアクセントを駆使してソーシャルセリングアプリをマーケティングする、遊び心と実用性に富んだSaaSランディングページ。

01

デザイン DNA

現代のソーシャル起業家のための、活気があり親しみやすいツールキット。

02

カラー

プライマリアクション用に、単一の鮮やかなエレクトリックブルーのアクセントを持つ、高コントラストの中立的なベース。

03

タイポグラフィ

geometric-sans · monospace

• display64px · 700
• h232px · 700
• body14px · 500

テキスト全体にGeometric Sans（GT America）を使用。 · 見出しには太字ウェイト（700）、本文には中程度のウェイト（500）を使用。

04

余白

コンテンツブロックの区切りに、24px、40px、48pxの均一なpaddingを使用しています。

05

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

インプットなどのインタラクティブ要素には、1px solid rgba(0,0,0,0.1)を使用。

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 0px 0px 1px rgba(0, 0, 0, 0.1)

06

レイアウト

十分な縦方向の余白を持つ、標準的なセンタリングコンテナレイアウト。

07

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

ボタンにhoverした際のスムーズな背景色の遷移。

ボタンやインタラクティブ要素は、背景色を滑らかに変化させます。 · インタラクティブ要素のカーソルポインターによる即座のビジュアルフィードバック。

08

コンポーネント

• button プライマリCTAは、鮮やかな青い背景と白いテキストを持つピル形状のボタン。セカンダリはプレーンテキストリンクです。
• card カードには非常に大きな角丸（24px-32px）と最小限のボーダーを使用。
• chip アプリUIのステータスインジケーターには、鮮やかな色のピル形状の背景を使用。
• input インプットには、微細なインセットシャドウと角丸が特徴です。
• hero 太字のセンタリング見出し、それに続く大きな動画/メディアコンテナ、そして説明文を配置。

09

文体と禁止事項

• トーン 自信に満ち、力強く、やや遊び心のあるトーン。
• 見出し 短く、力強く、便益志向の見出しを、大きく太字のGeometricフォントで。
• CTA 直接的でアクション志向の、明るい色で注意を引くCTA。

• 小さく詰まったフォントを使用しない — スクリーンショットでは大きく太字のGeometricタイポが使用されている。
• くすんだ、アースカラーのパレットを使用しない — スクリーンショットでは明るく高コントラストで鮮やかなアクセントがあるパレットが使用されている。
• 角が鋭い形状を使用しない — スクリーンショットでは非常に丸みを帯びた、ピルのような形状が使用されている。
• 細く軽いウェイトを使用しない — スクリーンショットでは明瞭さのために中程度から太字のウェイトが使用されている。
• ダークモードを使用しない — スクリーンショットでは白を基調とした背景にダークなテキストが使用されている。
• 複雑で雑然としたレイアウトを使用しない — スクリーンショットではクリーンで広々とした単一カラムレイアウトが使用されている。
• 避ける: 過度にフォーマルまたは企業的なお約束の言葉。
• 避ける: 受動的な言葉遣い。
• 避ける: 複雑な文章構造。

10

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

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

11

System Prompt

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