厳選・オープン・無料
Things
明確さと使いやすさを重視した、プレミアムでミニマリストなパーソナルタスクマネージャー。
productivityapp
01
デザイン DNA
ミニマリスト機能的明確プレミアム
落ち着いた、整然としたワークスペース。
02
カラー
#4F91FBAccent
#303336Ink
#F2F5F7BG
#55606EMuted
rgba(0, 15, 36, 0.46)Line
柔らかいニュートラル背景に高コントラストのテキストを配置し、単一の機能的なブルーアクセントを用いる。
03
タイポグラフィ
humanist-sans
- display
56px · 800 - heading
32px · 700 - body-lg
20px · 400 - body
16px · 400 - caption
14px · 400
ディスプレイ見出しにはウェイト800とタイトなトラッキングを使用。 · 本文には最大限の可読性を確保するため、ウェイト400を使用。 · リンクにはアンダーラインなしのブルーアクセントカラーを使用。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
80px
落ち着いた、息の通ったレイアウトを生み出す余裕のあるホワイトスペース
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0, 15, 36, 0.1)
0 4px 12px rgba(0, 15, 36, 0.08)
06
レイアウト
1200container
12columns
24pxgutter
768 / 1024breakpoints
広いマージンを持つ中央揃えの単一カラムレイアウト
07
モーションとインタラクション
200msmicro
300mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
スムーズなフェードイン · 微細なホバー状態トランジション
微細なカラー変化や不透明度の変更 · 即座の視覚フィードバック
08
コンポーネント
- button ソフトな角丸のピル型ボタン、ソリッドなブルー背景
- card 微妙なボーダーと角丸を持つホワイト背景
- chip ミニマルな角丸タグ
- input 微妙なボーダーを持つクリーンでミニマルな入力フィールド
- hero 中央揃えのアイコン、大きく太字のタイトル、説明的なサブタイトル、単一のCTA
09
文体と禁止事項
- トーン 専門的で、有益かつ控えめ
- 見出し 直接的で記述的
- CTA 明確で行動を促す
- ダークモードを使用しない — スクリーンショットは代わりにライトグレーの背景（#F2F5F7）を示している。
- 装飾的なセリフフォントを使用しない — スクリーンショットは代わりに全テキストにhumanist-sansを使用している。
- 複数の明るいアクセントカラーを使用しない — スクリーンショットは代わりに単一の機能的なアクセントとしてブルー（#4F91FB）のみを使用している。
- 狭く詰まった余白を使用しない — スクリーンショットは代わりに広い垂直および水平マージンを示している。
- 重いドロップシャドウを使用しない — スクリーンショットは代わりにソフトで微細なシャドウを示している。
- 攻撃的で角張ったボーダーラジウスを使用しない — スクリーンショットは代わりにソフトな角丸（最大18px）を示している。
- 避ける: 過度な句読点
- 避ける: 全て大文字での強調
- 避ける: 過度にカジュアルなスラング
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
Thingsのウェブサイトは、柔らかいライトグレーの背景（#F2F5F7）と濃いチャコールのテキスト（#303336）を中心とした落ち着いたミニマリストデザインを採用しています。リンクやインタラクティブ要素には単一の機能的なブルーアクセント（#4F91FB）が使用されます。タイポグラフィはhumanist-sans-serifフォントで構成され、メインディスプレイ見出しにはウェイト800の太字、本文には標準的なウェイト400が使用されます。レイアウトは単一カラムで非常に息が通っており、余裕のあるホワイトスペースを活用して明確さと焦点を強調しています。重要な制約事項：ダークモードを使用しない；セリフタイポグラフィを導入しない；複数の明るいカラーを追加しない；狭いレイアウトを避ける；攻撃的なシャドウを避ける；鋭角的なボーダーを避ける。
en · zh-CN · zh-TW · ja · ko