厳選・オープン・無料
Readwise Reader
読書ハイライトを振り返り、学びを得るための、クリーンでタイポグラフィ重視のプラットフォーム。
productreading
01
デザイン DNA
読書知識記憶間隔反復ハイライト
あなたが読んだ最高の内容を思い出させてくれる、個人的なライブラリアン。
02
カラー
#478CD0Accent
#1F1F1FInk
#FFFFFFBG
#F5F5F5BG soft
#808080Muted
rgba(0,0,0,0.1)Line
ハイコントラストのモノクロームをベースとし、アクションやリンクには単一の機能的なブルーを使用。
03
タイポグラフィ
transitional-serif · humanist-sans · monospace
- display
50px · 800 - h2
28px · 700 - body
16px · 400
見出しにはトランジショナルセリフ体を用い、文学的かつ教育的な印象を与えます。 · 本文にはヒューマニストサンセリフ体を用い、高い可読性とモダンな美学を維持します。 · 長文コンテンツを快適に読むための、適切な行の高さ。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一貫した4pxのベースグリッド。コンテンツブロックには24px〜35pxの豊かなpaddingを適用。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 10px
pill · 999px
ナビゲーションの下線やインプットの状態表示に主に使用する、繊細な1pxボーダー。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
画像とテキストセクションを交互に配置した、中央揃えのシングルカラムレイアウト。
07
モーションとインタラクション
200msmicro
400mssmall
800msmedium
cubic-bezier(1, 0.3, 0.54, 1.39)easing
ホバー時のシンプルなbackground-colorおよびcolorのトランジション。 · インタラクティブ要素の、滑らかなopacityとtransformのトランジション。
0.2秒のトランジションで、background-colorまたはcolorを変更。 · 状態変更による即時フィードバック。
08
コンポーネント
- button 角丸のある、ブルーの塗りつぶし背景にホワイトテキスト、またはダークボーダー付きのアウトラインスタイル。
- card 主にプロダクトスクリーンショット内で、ネストされたインタフェース要素を表示するために使用。
- chip 分類用の、明確な背景色を持つ小さな角丸タグ。
- input 繊細なボーダーと明確なフォーカス状態を持つ、標準フォームフィールド。
- hero 大きな中央揃えの見出し、補足テキスト、およびプライマリCTAボタン。
09
文体と禁止事項
- トーン 教育的で、励ますような、個人の成長に焦点を当てたトーン。
- 見出し 大きなセリフフォントを用いた、明確でメリットを訴求するステートメント。
- CTA 「無料で始める」のように、直接的で行動を促す表現。
- メインインタフェースにダーク背景を使用しない — スクリーンショットは主にホワイト背景を示しています。
- 本文に等幅フォントを使用しない — スクリーンショットは可読性のためにヒューマニストサンセリフ体を示しています。
- ネオン色や過度に明るいアクセントカラーを使用しない — スクリーンショットは機能的で控えめなブルー(#478CD0)を示しています。
- プライマリボタンに複雑なグラデーションを使用しない — スクリーンショットは塗りつぶしの単色を示しています。
- カードにハイコントラストのドロップシャドウを使用しない — スクリーンショットはクリーンでボーダーベースまたはフラットなUIを示しています。
- 見出しにコンデンスされたまたは装飾的なフォントを使用しない — スクリーンショットは明確なトランジショナルセリフ体を使用しています。
- 避ける: 専門用語が多すぎる言葉遣い
- 避ける: 企業感が強すぎるトーン
- 避ける: 攻撃的な営業テクニック
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Readwiseは、読者のための生産性ツールであり、間隔反復を通じた記憶と知識の定着に焦点を当てています。デザインDNAは、可読性を優先するクリーンでミニマルな美学です。コアカラーパレットはモノクロームで、ホワイト背景(#FFFFFF)にニアブラックのインク(#1F1F1F)、アクセントとして機能的なブルー(#478CD0)を用います。タイポグラフィは、見出しにトランジショナルセリフ体(文学的イメージを喚起)、本文にヒューマニストサンセリフ体(可読性確保)を用いた、洗練されたミックスです。重要なデザイン制約:ダークモードやダーク背景を使用せず、ネオン色や高クロマのアクセントカラーを使用せず、複雑なグラデーションや煩雑な背景パターンを使用しないこと。レイアウトは余裕があり、中央揃えで、ユーザーの注意をコンテンツとその読書ハイライトの価値に集中させます。
en · zh-CN · zh-TW · ja · ko