厳選・オープン・無料
Matter
集中した読書と成長のための、モダンで受賞歴のある読書予約アプリ。
productivityreading
01
デザイン DNA
読書予約シンプルモダン受賞歴あり丁寧に作られた
プレミアムなデジタル読書コンパニオン
02
カラー
#6D7EECAccent
#FFFFFFInk
#969698Ink soft
#0D0D0DBG
#1E1F22BG soft
rgba(150, 150, 152, 1)Line
可読性と視覚的な休息のための、暗くハイコントラストのキャンバス。
03
タイポグラフィ
geometric-sans · monospace
- display
56px · 500 - h2
40px · 700 - h3
32px · 700 - body
16px · 400 - small
14px · 400 - micro
12px · 400
すべての見出しとUI要素にジオメトリック・サンズを使用。 · 大きなディスプレイテキストにはタイトなネガティブトラッキングを維持。 · 可読性のためにインクと背景の間に高いコントラストを確保。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
コンテンツを強調するための、豊かなホワイトスペースを持った一貫した4pxベースグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 30px
1px solid rgba(150, 150, 152, 0.1)
0px 4px 12px rgba(0, 0, 0, 0.3)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
長文読書と体験談用の、中央揃えコンテンツとシングルカラムレイアウト。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素の控えめなホバートランジション。 · 滑らかなスクロールとページトランジション。
インタラクティブ要素の控えめな背景や不透明度の変化。 · 軽微なスケールやカラーのシフトによる即座のフィードバック。
08
コンポーネント
- button 塗りつぶしのアクセントカラーとハイコントラストテキストを持つ、ピル-shapedボタン。
- card 体験談やアプリスクリーンショット用の、控えめなボーダーを持つ暗く角丸のコンテナ。
- chip 低コントラストの背景とテキストを持つ、小さく角丸のタグ。
- input クリーンなボーダーと装飾要素のない、ミニマリストなテキスト入力。
- hero 簡単な説明とソーシャルプルーフのロゴを持つ、大きく中央揃えのヘッドライン。
09
文体と禁止事項
- トーン プロフェッショナルで自信に満ち、ユーザー価値に焦点を当てたもの。
- 見出し 直接的でアクション重視、ベネフィット主導。
- CTA シンプルで明確、そして励ますようなもの。
- 明るい背景を使用しない — スクリーンショットはダークテーマを示している。
- 本文テキストにセリフフォントを使用しない — スクリーンショットはサンセリフ体を使用している。
- 雑然とした、あるいは混沌としたレイアウトを使用しない — スクリーンショットはクリーンで中央揃えのコンテンツを示している。
- 幅広い色の範囲を使用しない — スクリーンショットは限定されたパレットに依存している。
- 小さく窮屈なボタンを使用しない — スクリーンショットは十分なパディングとピル形状を使用している。
- 低コントラストのテキストを使用しない — スクリーンショットは可読性のために高いコントラストを維持している。
- 避ける: 過度にカジュアルな言葉遣いやスラングの多用を避ける。
- 避ける: 雑然とした、あるいは忙しないレイアウトを避ける。
- 避ける: 集中を散らすようなアニメーションやエフェクトを避ける。
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
集中した読書と成長のための、モダンで受賞歴のある読書予約アプリ。デザインは、プライマリアクセントとして#6D7EEC、インクとして#FFFFFF、背景として#0D0D0Dを持つ、暗くハイコントラストのキャンバスを使用。タイポグラフィはジオメトリック・サンズで、見出しにはタイトなトラッキング、可読性のために豊かなホワイトスペースを採用。重要な注意点: 明るい背景、本文テキストのセリフフォント、雑然としたレイアウト、幅広い色範囲、小さなボタン、低コントラストのテキストを避ける。全体的な雰囲気は穏やかで、洗練されており、コンテンツに集中している。
en · zh-CN · zh-TW · ja · ko