Airtable はデータベースの構造化能力をスプレッドシート体験に収めたローコードプラットフォームで、親しみやすくカラフルな UI が特徴です。デザイン面では白いキャンバスに濃紺の本文（#181d26）を置き、Airtable Blue（#1b61c9）が主要操作とリンクを担います。Haas の 2 書体ファミリーにわずかな正のトラッキングを組み合わせ、ボタンは 12px、カードは 16〜32px の角丸です。データ協業、プロジェクト管理、ノーコードツール系の UI に適しています。
Airtableデザインとクリエイティブ
プロンプトテンプレート
基本テンプレート
Design a Airtable-inspired interface. - White canvas with deep navy text (#181d26); - Airtable Blue (#1b61c9) as primary CTA and link color; - Haas + Haas Groot Disp dual font system; - Positive letter-spacing on body text (0.08px–0.28px); - 12px radius buttons, 16px–32px for cards. Colors: #181d26, #1b61c9, #ffffff, #006400 with #181d26 accent. Typography: Haas.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Airtable aesthetics. Use Airtable color identity with #181d26 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Airtable style. Use Airtable color identity with #181d26 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Airtable design language. Use Airtable color identity with #181d26 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Airtable visual identity. Use Airtable color identity with #181d26 accents. Compelling, conversion-focused.
使用例
Airtable アプリ
WebBuild a web app with Airtable design language and #181d26 color system.
Airtable ダッシュボード
ダッシュボードCreate a dashboard using Airtable style with data visualization and Haas typography.
✅ 適した用途
- デザイン協業
- 構造化データ協業ツールの UI
- テーブルとカンバンを組み合わせたプロダクトページ
❌ 適さない用途
- 厳格な金融取引ターミナル
- ミニマルで芸術性を追求するハイエンドブランドページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。