厳選・オープン・無料
Headspace
フレンドリーなイラストと親しみやすいタイポグラフィで、瞑想、睡眠、セラジーを組み合わせた、温かく遊び心のある消費者向けウェルネスプラットフォーム。
CalmFriendlyConsumerPlayfulMobile UI
01
デザイン DNA
メンタルヘルス瞑想セラピーウェルネスアクセシブル
温かく魅力的なデザインで、メンタルヘルスをより身近で、より多くの人にとってaccessibilityの高いものにする、フレンドリーで親しみやすいウェルネスパートナー。
02
カラー
#FFCE00Accent
#2D2C2BInk
#4B4C4DInk soft
#F9F4F2BG
#44433FMuted
rgba(75,76,77,0.3)Line
最大限の可読性と温かみのために、高彩度の黄色とオレンジのアクセントを備えた、温かみのあるオフホワイトベースと、深いcharcoalのテキストを組み合わせます。
03
タイポグラフィ
humanist-sans · geometric-mono
- display
56px · 700 - h1
48px · 700 - h2
32px · 700 - body
16px · 400 - caption
12px · 400
見出しには tightenした行間（1.0-1.2）を使用し、現代的でコンパクトな感覚を維持します · 大きなテキストには負の文字間隔を使用し、より緊密なタイポグラフィの存在感を実現します · 本文テキストは標準の16pxをベースとし、デフォルトよりわずかに tightenしたリーディングを採用します
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
一貫した4pxのベースグリッドに、寛げのセクション間隔（48-64px）と快適な内部パディング（24-32px）を組み合わせ、息のできるレイアウトを実現します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 8px
md · 16px
lg · 32px
pill · 999px
最小限のボーダー。カードは代わりに微細なシャドウを使用します。必要に応じて、2px solidのミュートされたcharcoalトーンのボーダーを使用します。
0px 1px 8px 0px rgba(20,19,19,0.2) · 0px 2px 0px 0px rgba(65,61,69,0.2)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
大きなタイポグラフィによる中央揃えのシングルカラムヒーロー、次に2カラムカードレイアウト、そしてフルワイドのスクロールバナーとグリッドセクション。
07
モーションとインタラクション
150msmicro
300mssmall
400msmedium
cubic-bezier(0.32, 0.94, 0.6, 1)easing
インタラクティブ要素の色と背景のトランジション · ホバー状態のtransformトランジション · コンテンツ表示の不透明度フェード
背景色と色の微妙な変化を、0.15s easeタイミングで実現 · transformと色の変化による即座の視覚フィードバック
08
コンポーネント
- button パッドがゆったりとした（16-24px）ピル型ボタン。プライマリ：明るい青（#0061EF）に白文字。セカンダリ：ダークcharcoal（#2D2C2B）に白文字。高いborder-radius（32px以上）。
- card ソフトなオフホワイト背景、微細なシャドウを備えた、大きな丸みのあるカード（16-32px radius）。イラスト、写真、UIモックアップなどのミックスメディアを、遊び心のある構成で収容します。
- chip 丸みのあるボーダー、明るい背景、小さな絵文字アイコンを持つ、ピル型フィルターチップ。アクティブ状態はより濃い塗りつぶしを使用します。
- input フォーム入力は、全体の抑制された美学に沿った、クリーンでミニマルなスタイリングで表現されます。
- hero 過剰なディスプレイタイプ（56px以上）を備えたフルワイド中央レイアウト。チェックマークリストをサポートし、その下に大きなイラスト/カードショーを配置します。
09
文体と禁止事項
- トーン 臨床的あるいは説教じみた印象にならず、温かく励ますような、親しみやすいトーン
- 見出し フレンドリーな大型タイプによる、会話的でメリット重視の記述
- CTA 「無料で試す」、「補償の確認」、「0ドルで試す」など、参入障壁の低さを強調する直接的な行動フレーズ
- シャープで角張った形状を使わない — スクリーンショットでは、すべてのカードとボタンに丸みのある角（16-32px radius）が示されています
- 冷たいブルーグレーの背景を使わない — スクリーンショットでは、温かみのあるオフホワイト（#F9F4F2）がプライマリ背景として使用されています
- セリフ体あるいは装飾的なフォントを使わない — スクリーンショットでは、一貫してクリーンなヒューマンサンセリフが使用されています
- 密集した、窮屈なレイアウトを作らない — スクリーンショットでは、セクション間に寛げのホワイトスペース（48-64pxのギャップ）が示されています
- 激しく彩度の高いアクセントカラーを至る所で使わない — スクリーンショットでは、高彩度カラーを特定のCTAとイラストに限定しています
- 見出しに細く微細なフォントウェイトを使わない — スクリーンショットでは、すべての見出しに一貫して太字（700）のウェイトが使用されています
- イラストを避ける — スクリーンショットでは、遊び心のあるキャラクターや抽象的な形状が主要なビジュアル要素として示されています
- 避ける: 臨床的または医療用語
- 避ける: アグレッシブな営業言語
- 避ける: 複雑な専門用語
- 避ける: ダークあるいは重苦しいメッセージ
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
Headspaceは、フレンドリーでaccessibilityの高いウェルネスパートナーとしてポジショニングされた消費者向けメンタルヘルスアプリです。デザインは、charcoalのテキスト（#2D2C2B）と明るい黄色（#FFCE00）および青（#0061EF）のアクセントを備えた、温かみのあるオフホワイト背景（#F9F4F2）を使用します。タイポグラフィはヒューマンサンセリフで、太くtightに設定された見出しと寛げの本文テキスト。レイアウトは中央揃えで、大きなディスプレイタイプと遊び心のあるイラスト構成。重要な禁止事項：決して寒いグレーまたはブルーを背景として使用せず、臨床的/医療的なビジュアル言語を避け、窮屈あるいは密集したレイアウトを作らず、見出しに細いフォントウェイトを避け、プレーンUIのためにイラストをスキップせず、決してアグレッシブまたはダークなカラースキームを使用しない。全体的な印象は、温かく、魅力的で、心理的に安全なものでなければなりません。
en · zh-CN · zh-TW · ja · ko