厳選・オープン・無料

Superlist

AIと音声を活用した、タスク、ノート、計画のための統合アプリ。

01

デザイン DNA

散らばったリストを一つのエレガントなインターフェースに統合する、洗練されたデジタルコマンドセンター。

02

カラー

ダークモードを第一とし、主要なアクションや強調には鮮やかなオレンジのアクセントを使用。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display70px · 600
• heading48px · 500
• body16px · 400

大きなディスプレイ見出しには、 tight な負の文字間隔を使用。 · 強調には太字、本文には細めのウェイトをミックス。 · すべての重要なテキストに、高いコントラスト（ダーク背景に白）を確保。

04

余白

4pxグリッドを一貫して使用し、ヒーローセクションには十分なpaddingを確保。

05

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

rgba(255,255,255,0.08)を使用した、控えめな1pxのボーダーで区切りを表現。

0px 10px 15px 0px rgba(0, 0, 0, 0.08) · 0px 1px 1px 0px rgba(0, 0, 0, 0.1) · inset 0px 0.5px 0px 0px rgba(255, 255, 255, 0.45)

06

レイアウト

フルワイドのダークヒーローと縦に積み重なる機能セクションを備えた、中心に配置されたコンテンツ。

07

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

hover時の色の遷移 · 滑らかなフェードイン

色の変化と控えめな不透明度の変化。 · 即座の視覚フィードバック。

08

コンポーネント

• button 太字テキストを持つピル型ボタンで、主に鮮やかなオレンジのアクセントを使用。
• card 控えめなボーダーと柔らかいシャドウを持つダークカードで、角丸（20px）を採用。
• chip スクリーンショットでは目立って使用されていません。
• input ダーク背景を持つ、クリーンでミニマルな入力フィールド。
• hero ダーク背景に中心配置された巨大なタイポグラフィと、その下に配置された大きな製品プレビュー。

09

文体と禁止事項

• トーン 自信があり、現代的で、非常に高い生産性を感じさせる。
• 見出し 統合を強調する、短く力強くインパクトのあるフレーズ。
• CTA 「無料でサインアップ」のような、直接的でアクション重視の表現。

• ライト背景を使用しない — スクリーンショットはダークで没入感のあるインターフェースを示している。
• 角丸のセリフフォントを使用しない — スクリーンショットは見出しにジオメトリックsans-serifを使用している。
• ページ全体を単一カラムのレイアウトにしない — スクリーンショットは変化に富んだレイアウトを示している。
• 控えめでコントラストの低いボタンを使用しない — スクリーンショットは鮮やかで彩度の高いアクセントボタンを示している。
• 過度なドロップシャドウを使用しない — スクリーンショットは柔らかく控えめな浮遊感を示している。
• 狭く窮屈なスペーシングを使用しない — スクリーンショットは十分なpaddingとmarginを示している。
• 避ける: 散らかったレイアウト
• 避ける: 控えめまたはパステルのカラーパレット
• 避ける: 複雑で多層的なナビゲーション

10

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

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

11

System Prompt

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