厳選・オープン・無料

Matter

集中した読書と成長のための、モダンで受賞歴のある読書予約アプリ。

01

デザイン DNA

プレミアムなデジタル読書コンパニオン

02

カラー

可読性と視覚的な休息のための、暗くハイコントラストのキャンバス。

03

タイポグラフィ

geometric-sans · monospace

• display56px · 500
• h240px · 700
• h332px · 700
• body16px · 400
• small14px · 400
• micro12px · 400

すべての見出しとUI要素にジオメトリック・サンズを使用。 · 大きなディスプレイテキストにはタイトなネガティブトラッキングを維持。 · 可読性のためにインクと背景の間に高いコントラストを確保。

04

余白

コンテンツを強調するための、豊かなホワイトスペースを持った一貫した4pxベースグリッド。

05

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

1px solid rgba(150, 150, 152, 0.1)

0px 4px 12px rgba(0, 0, 0, 0.3)

06

レイアウト

長文読書と体験談用の、中央揃えコンテンツとシングルカラムレイアウト。

07

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

インタラクティブ要素の控えめなホバートランジション。 · 滑らかなスクロールとページトランジション。

インタラクティブ要素の控えめな背景や不透明度の変化。 · 軽微なスケールやカラーのシフトによる即座のフィードバック。

08

コンポーネント

• button 塗りつぶしのアクセントカラーとハイコントラストテキストを持つ、ピル-shapedボタン。
• card 体験談やアプリスクリーンショット用の、控えめなボーダーを持つ暗く角丸のコンテナ。
• chip 低コントラストの背景とテキストを持つ、小さく角丸のタグ。
• input クリーンなボーダーと装飾要素のない、ミニマリストなテキスト入力。
• hero 簡単な説明とソーシャルプルーフのロゴを持つ、大きく中央揃えのヘッドライン。

09

文体と禁止事項

• トーン プロフェッショナルで自信に満ち、ユーザー価値に焦点を当てたもの。
• 見出し 直接的でアクション重視、ベネフィット主導。
• CTA シンプルで明確、そして励ますようなもの。

• 明るい背景を使用しない — スクリーンショットはダークテーマを示している。
• 本文テキストにセリフフォントを使用しない — スクリーンショットはサンセリフ体を使用している。
• 雑然とした、あるいは混沌としたレイアウトを使用しない — スクリーンショットはクリーンで中央揃えのコンテンツを示している。
• 幅広い色の範囲を使用しない — スクリーンショットは限定されたパレットに依存している。
• 小さく窮屈なボタンを使用しない — スクリーンショットは十分なパディングとピル形状を使用している。
• 低コントラストのテキストを使用しない — スクリーンショットは可読性のために高いコントラストを維持している。
• 避ける: 過度にカジュアルな言葉遣いやスラングの多用を避ける。
• 避ける: 雑然とした、あるいは忙しないレイアウトを避ける。
• 避ける: 集中を散らすようなアニメーションやエフェクトを避ける。

10

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

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

11

System Prompt

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