厳選・オープン・無料

Prismic

コンバージョンを実現するためのヘッドレスCMSおよびランディングページビルダー。

01

デザイン DNA

開発者やマーケティングチームが高パフォーマンスなウェブサイトを構築するための、クリーンでプロフェッショナルなワークスペース。

02

カラー

明確さのためにハイコントラストの白と黒を採用し、重要なアクションや強調には単一のグリーンアクセントカラーを使用。

03

タイポグラフィ

geometric-sans · humanist-sans

• display56px · 700
• heading40px · 500
• body18px · 500
• small14px · 500

見出しにはモダンで技術的な印象を伝えるgeometric-sansを使用。 · 本文には読みやすさを確保するためにhumanist-sansを使用。 · 装飾的または過度に複雑なフォントは避ける。

04

余白

一貫した4pxグリッドに、標準的な16pxおよび32pxのpadding/marginインクリメント。

05

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

1px solid rgba(238,238,238,1)

0px 1px 6px 0px rgba(0,0,0,0.06) · 0px 2px 32px 0px rgba(0,0,0,0.16)

06

レイアウト

最大幅のコンテナで中央揃えのコンテンツ。セクション間には十分な縦方向の余白。

07

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

hoverやfocus状態に対するcolor、background-color、opacityの標準的なトランジション。

ボタンやリンクなどのインタラクティブな要素で、控えめなcolorまたはbackground-colorの変化。 · 状態の変化を通じて即座に視覚的なフィードバックを提供。

08

コンポーネント

• button プライマリアクションには黒の塗りつぶしボタン、セカンダリアクションには白のアウトラインボタン。どちらも角丸で十分なpadding付き。
• card ケーススタディや証言を含む、白背景で控えめなボーダーや柔らかいシャドウを持つカード。
• chip 統計データを表示するために使用（例：「ページ読み込み速度 50%高速化」）。明るい背景と角丸付き。
• input 1pxボーダーと8pxボーダー半径を持つ標準的なテキスト入力。
• hero 大きな中央揃えの見出しにアクセントカラーを配し、その下にサブヘッドラインと2つのメインCTAボタンを配置。

09

文体と禁止事項

• トーン プロフェッショナルで、信頼感があり、支援的。
• 見出し 直接的で、便益を重視し、強調するための太字アクセント語を使用。
• CTA 明確でアクション重視（例：「今すぐ始める」「デモをリクエスト」）。

• マルチカラーパレットは使用しない — スクリーンショットは単色ベースに単一のグリーンアクセントを示しています。
• セリフフォントは使用しない — タイポグラフィは見出しと本文の両方で厳密にsans-serifです。
• 重いドロップシャドウは使用しない — UIは控えめなボックスシャドウやシンプルなボーダーで奥行きを表現しています。
• 密集した、ごちゃごちゃしたレイアウトは使用しない — デザインは余白と明確な視覚的階層を重視しています。
• 複雑なグラデーションは使用しない — 背景は単色です。
• 低コントラストのテキストは使用しない — 黒-on-白のカラースキームで高い可読性を確保しています。
• 避ける: 曖昧な言葉
• 避ける: 過度に技術的な専門用語
• 避ける: 強引なセールストーン

10

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

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

11

System Prompt

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