厳選・オープン・無料

PocketBase

クリーンでフレンドリーなUIを通じて、シンプルさとアプローチしやすさを重視する、開発者向けバックエンド。

01

デザイン DNA

複雑なバックエンドインフラを単一のアクセスしやすいファイルに簡素化する、フレンドリーでアプローチしやすいツールキット。

02

カラー

最大限の可読性を実現する、高コントラストでクリーンな機能的パレット。フレンドリーなパステルティールのヒーローと、標準的なダークグレーを使用。

03

タイポグラフィ

humanist-sans · monospace

• display48px · 600
• h228px · 600
• body15px · 400
• code14px · 400

プライマリUIと本文テキストには Source Sans Pro を使用。 · すべてのコードブロックと技術スニペットには Ubuntu Mono を使用。 · 厳密なテキストアラインメントと一貫したラインハイトを維持。

04

余白

標準4pxベースライングリッド。セクションにはゆったりとしたパディングを適用。

05

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

1px solid rgba(37,39,45,0.12)

rgba(0, 0, 0, 0.06) 0px 2px 5px 0px · rgba(0, 0, 0, 0.06) 0px 3px 10px 3px

06

レイアウト

ダッシュボードプレビュー用のワイドコンテナを持つ、中央揃えシングルカラムのランディングページレイアウト。

07

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

ホバー時の滑らかな色と背景トランジション。 · インタラクティブ要素のフィルターおよびボトムポジションのトランジション。

インタラクティブ要素上の微細な背景と色の変化。 · 標準的なポインターフィードバック。

08

コンポーネント

• button クリーンでわずかに角丸（4px）のボタン。明確なダークボーダーと微細なシャドウ。プライマリはダーク背景を使用。
• card 白色背景。微細なドロップシャドウと柔らかい角丸ボーダーラディウス。
• chip 小粒のピル型（999px ラディウス）タグ。機能リストやステータス表示に使用。
• input 明るい背景の角丸ピル型検索バー。
• hero 大胆なテキストと目立つUIスクリーンショットを持つ、大きなパステルティール背景（#b8dbd6）。

09

文体と禁止事項

• トーン 親切で、率直、かつ開発者に焦点を当てたトーン。
• 見出し コンサイスで大胆。中核の価値提案を強調。
• CTA アクション重視で簡潔（例：「ドキュメントを読む」「ライブデモ」）。

• ダークなヒーローセクションを使用しない — スクリーンショットでは明るいパステルティール（#b8dbd6）の背景が使用されている。
• 装飾的、遊び心のある、あるいはスクリプト系のフォントを使用しない — スクリーンショットではクリーンな humanist-sans（Source Sans Pro）とモノスペース（Ubuntu Mono）が使用されている。
• 重厚で発光するグラデーションを使用しない — スクリーンショットではフラットカラー、微細なシャドウ、クリーンなボーダーが使用されている。
• 丸みを帯びた、ふわふわしたボタンを使用しない — スクリーンショットではわずかに角丸（4px）で明確なダークボーダーを持つボタンが使用されている。
• 単一の高クロマアクセントカラーに依存しない — スクリーンショットではグレー、ティール、コードシンタックスカラーのバランスの取れたパレットが使用されている。
• 過度なアニメーションでインタフェースを雑然とさせない — スクリーンショットでは非常に静的で機能的、かつクリーンなUIが示されている。
• 装飾的なアイコンを使用しない — スクリーンショットではシンプルで機能的な Remixicon ラインアイコンが使用されている。
• 避ける: 過度なマーケティング用語や大げさな表現。
• 避ける: アグレッシブなセールストーンや複雑な販売ファネル。
• 避ける: 明確な構造のない、読みにくい技術ドキュメント。

10

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

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

11

System Prompt

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