厳選・オープン・無料

Readwise Reader

読書ハイライトを振り返り、学びを得るための、クリーンでタイポグラフィ重視のプラットフォーム。

01

デザイン DNA

あなたが読んだ最高の内容を思い出させてくれる、個人的なライブラリアン。

02

カラー

ハイコントラストのモノクロームをベースとし、アクションやリンクには単一の機能的なブルーを使用。

03

タイポグラフィ

transitional-serif · humanist-sans · monospace

• display50px · 800
• h228px · 700
• body16px · 400

見出しにはトランジショナルセリフ体を用い、文学的かつ教育的な印象を与えます。 · 本文にはヒューマニストサンセリフ体を用い、高い可読性とモダンな美学を維持します。 · 長文コンテンツを快適に読むための、適切な行の高さ。

04

余白

一貫した4pxのベースグリッド。コンテンツブロックには24px〜35pxの豊かなpaddingを適用。

05

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

ナビゲーションの下線やインプットの状態表示に主に使用する、繊細な1pxボーダー。

06

レイアウト

画像とテキストセクションを交互に配置した、中央揃えのシングルカラムレイアウト。

07

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

ホバー時のシンプルなbackground-colorおよびcolorのトランジション。 · インタラクティブ要素の、滑らかなopacityとtransformのトランジション。

0.2秒のトランジションで、background-colorまたはcolorを変更。 · 状態変更による即時フィードバック。

08

コンポーネント

• button 角丸のある、ブルーの塗りつぶし背景にホワイトテキスト、またはダークボーダー付きのアウトラインスタイル。
• card 主にプロダクトスクリーンショット内で、ネストされたインタフェース要素を表示するために使用。
• chip 分類用の、明確な背景色を持つ小さな角丸タグ。
• input 繊細なボーダーと明確なフォーカス状態を持つ、標準フォームフィールド。
• hero 大きな中央揃えの見出し、補足テキスト、およびプライマリCTAボタン。

09

文体と禁止事項

• トーン 教育的で、励ますような、個人の成長に焦点を当てたトーン。
• 見出し 大きなセリフフォントを用いた、明確でメリットを訴求するステートメント。
• CTA 「無料で始める」のように、直接的で行動を促す表現。

• メインインタフェースにダーク背景を使用しない — スクリーンショットは主にホワイト背景を示しています。
• 本文に等幅フォントを使用しない — スクリーンショットは可読性のためにヒューマニストサンセリフ体を示しています。
• ネオン色や過度に明るいアクセントカラーを使用しない — スクリーンショットは機能的で控えめなブルー（#478CD0）を示しています。
• プライマリボタンに複雑なグラデーションを使用しない — スクリーンショットは塗りつぶしの単色を示しています。
• カードにハイコントラストのドロップシャドウを使用しない — スクリーンショットはクリーンでボーダーベースまたはフラットなUIを示しています。
• 見出しにコンデンスされたまたは装飾的なフォントを使用しない — スクリーンショットは明確なトランジショナルセリフ体を使用しています。
• 避ける: 専門用語が多すぎる言葉遣い
• 避ける: 企業感が強すぎるトーン
• 避ける: 攻撃的な営業テクニック

10

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

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

11

System Prompt

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