厳選・オープン・無料

Airtable

AIを活用したデータ管理でチームのワークフローを接続する統合ワークスペース。

01

デザイン DNA

デジタルスプレッドシートがプロジェクト管理ツールと出会う

02

カラー

クリーンで高コントラストな、白地に黒のデザイン。アクセントカラーの使用は最小限。

03

タイポグラフィ

humanist-sans

• display48px · 500
• heading32px · 500
• body20px · 400

Haas Groot Dispは大きなディスプレイ見出しに使用。 · Haasは本文コピーおよびUI要素に使用。 · フォントサイズが大きくなるにつれて行高は狭くなる。 · 本文テキストの字間はわずかに広め。

04

余白

垂直方向の間隔は、4pxのベースユニットと標準的なインクリメントに従います。

05

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

プライマリインクカラーを使用した、控えめな1pxボーダー。不透明度は低め。

rgba(15, 48, 106, 0.05) 0px 0px 20px 0px · rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset

06

レイアウト

標準的な中央揃えコンテンツ。デスクトップでは幅広のマージン。

07

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

hover時の控えめな色と背景のトランジション。 · スムーズな要素の可視性の変化。

hover時にボタンの色が少し暗くなるか、フィルが変化。 · 控えめなスケールまたはフィードバック。

08

コンポーネント

• button 白字のソリッドブラックプライマリボタン、黒縁の白セカンダリボタン。ピルシェイプおよびレクタングルのバリエーション。
• card 明るいグレーの背景を持つ、控えめな角丸のカード。
• chip スクリーンショットでは該当なし。
• input 控えめなボーダーを持つ標準的なテキスト入力。
• hero 中央揃えの見出しとサブテキスト、デュアルCTAボタン。信頼できる企業のロゴウォールが続く。

09

文体と禁止事項

• トーン プロフェッショナルで明瞭、エンタープライズに焦点を当てた語り口。
• 見出し 接続性と効率性を強調する、簡潔でメリット志向のステートメント。
• CTA 直接的でアクション志向（「無料で始める」「デモを予約」）。

• 明るく彩度の高いアクセントカラーを使用しない — スクリーンショットは、黒と白を基調とした単色のパレットが中心。
• 装飾的またはスクリプトフォントを使用しない — スクリーンショットはクリーンでモダンなサンセリフタイポグラフィ。
• 重く複雑なシャドウを使用しない — スクリーンショットは、最小限の高さ感を持つ控えめでフラットに近いデザイン。
• レイアウトを雑然とさせない — スクリーンショットは、豊富なホワイトスペースと集中したコンテンツ領域。
• ダークモードをデフォルトとしない — スクリーンショットは、クリーンなホワイト背景をプライマリキャンバスとして使用。
• 不規則または過度に遊びのあるborder-radiusを使用しない — スクリーンショットは、一貫性のある、ほぼ長方形または控えめに角が丸いデザイン。
• 避ける: 専門用語
• 避ける: 過度にカジュアルな言葉
• 避ける: 誇張された言葉

10

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

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

11

System Prompt

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