厳選・オープン・無料
Granola
次々と会議をこなす人々のためのAIノートパッド。
aiproductivity
01
デザイン DNA
会議メモAIノートパッド生産性手間なく
穏やかで知的なアシスタントが、あなたの一日を静かに整理します。
02
カラー
#B2C248Accent
#0E0F0CInk
#536471Ink soft
#FBFBF6BG
#EAEDE5BG soft
#F7F7F2BG quiet
#D5D5D2Muted
rgba(227, 227, 227, 1)Line
アーシーでオーガニックなニュートラルに、特徴的なミュートなオリーブグリーンのアクセントを添えた配色です。
03
タイポグラフィ
transitional-serif · geometric-sans
- display
56px · 400 - h2
36px · 400 - body
16px · 400
ディスプレイフォントにはトランジショナルセリフを使用し、落ち着いたエディトリアルな雰囲気を演出します。 · 本文フォントにはクリーンなジオメトリックサンセリフを使用し、可読性を高めます。 · 見出しにはタイトなトラッキングを適用し、モダンで自信に満ちた外観にします。 · フォントウェイトは控えめにし、主に400を使用します。
04
余白
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
4pxを基調とした明確な垂直リズムに基づく、豊かなホワイトスペースです。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(227, 227, 227, 1)
rgba(0, 0, 0, 0.03) 0px 0px 2px 0px inset · rgba(0, 0, 0, 0.03) 0px 0px 36px 0px · rgba(0, 0, 0, 0.15) 0px 8px 48px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃え、シングルカラムのコンテンツフローで、十分なパディングを設けています。
07
モーションとインタラクション
150msmicro
300mssmall
0msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素の滑らかなカラー変化。 · hover時の背景色とカラーの変化。 · focus状態のボックスシャドウ変化。
ボタンやリンクの微細な色のシフト。 · 押下状態への滑らかな変化。
08
コンポーネント
- button 高コントラストのピル型プライマリボタンです。
- card 柔らかく角が丸められ、微細なシャドウと薄いボーダーを持つカードです。
- chip 機能やラベル用のピル型タグです。
- input クリーンでミニマルな入力フィールドです。
- hero 明確なCTAを1つ持つ、大きく中央揃えのセリフ見出しです。
09
文体と禁止事項
- トーン 親切で率直、そして少し遊び心のあるトーンです。
- 見出し 大きなセリフタイポグラフィを使用し、直接的でメリットを重視したスタイルです。
- CTA 行動を促し、明確で高コントラストなスタイルです。
- 高彩度のネオンカラーを使用しない — スクリーンショットはミュートなアーシーグリーンと温みのあるグレーを示しています。
- 太く重いディスプレイフォントを使用しない — スクリーンショットはエレガントで軽量～通常ウェイトのセリフ見出しを示しています。
- 雑然とした密集したレイアウトを作成しない — スクリーンショットは豊かなホワイトスペースとクリーンな中央揃えフローを示しています。
- シャープで角張った角を使用しない — スクリーンショットは柔らかく丸みのある角（8px、12px、ピル型）を示しています。
- ダークモードや濃い暗い背景を使用しない — スクリーンショットは明るく温みのあるオフホワイト（#FBFBF6）のテーマを示しています。
- 複雑でノイジーなグラデーションを使用しない — スクリーンショットはクリーンな単色フィールドと微細なシャドウを示しています。
- 避ける: 過度に技術的な専門用語の使用。
- 避ける: 強引またはアグレッシブな姿勢。
- 避ける: 複数行にわたる複雑な見出しの使用。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、会議メモ用のクリーンでプロフェッショナルなAI生産性ツールのランディングページです。デザインDNAは、温みのあるオフホワイト（#FBFBF6）と特徴的なミュートなオリーブグリーン（#B2C248）を中心とした穏やかなアーシーパレットに基づいています。タイポグラフィは、ディスプレイ見出し用のエレガントなトランジショナルセリフと、本文用のクリーンなジオメトリックサンセリフを組み合わせています。レイアウトは中央揃えでホワイトスペースが豊かで、可読性を優先しています。主要な16進数カラーは、#FBFBF6（背景）、#0E0F0C（インク）、#B2C248（アクセント）、および#EAEDE5（bgSoft）です。重要な注意点：1) 高彩度のネオンカラーを使用しない — パレットは意図的にミュートです。2) 太く重いディスプレイフォントを使用しない — 見出しは洗練され軽量です。3) 雑然とした密集したレイアウトを作成しない — デザインは豊かなスペースと集中を促すシングルカラムフローに依存しています。
en · zh-CN · zh-TW · ja · ko