厳選・オープン・無料

Onroadmap

チームのアライメントと優先度の可視化のためのミニマリストなロードマップツール。

01

デザイン DNA

チームの優先事項を整理するクリーンなホワイトボード

02

カラー

ロードマップトラックを表す、鮮やかな多色アクセントを配したニュートラルなキャンバス。

03

タイポグラフィ

geometric-sans · humanist-sans

• display40px · 700
• h232px · 700
• h321px · 500
• body16px · 400
• caption14px · 400

見出しには tighten された字間隔で太字ウェイトを使用 · 本文は可読性のため、適度な行間を維持 · 補助テキストには落ち着いたインクカラーを使用

04

余白

セクション間には適度な垂直リズムを設け、カードやボタン内部には適切なパディングを設定。

05

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

アクティブ状態には微細な2px solidボーダーを設定。それ以外はボーダーレス、またはbox-shadowで奥行きを表現。

0 8px 16px rgba(0, 0, 0, 0.16) · 0 4px 16px rgba(0, 0, 0, 0.32) · 0 0 0 3px rgb(243, 243, 243)

06

レイアウト

単一カラムの垂直フローで、コンテンツブロックを中央揃え。

07

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

ボタンやカードに微細なhover状態 · インタラクティブ要素のfocusトランジション

ボタンは少し暗くなる可能性、カードは影を持って浮き上がる可能性。 · 即座のフィードバック。わずかなスケールや透明度の変化の可能性。

08

コンポーネント

• button 白地に黒文字のハイコントラストで、丸みのあるピル形状。
• card 白またはソフトグレーの背景に、微細なボーダーやbox-shadowでエレベーションを表現。
• chip カラフルなラベル（緑、ピンク、紫）で、ピル形状とカラフルなbox-shadowを採用。
• input 完全には確認できませんが、最小限のデザインで微細なボーダーを想定。
• hero 大きなグラデーション球体ロゴ、太字のデュアルトーン見出し、プライマリCTAを配置した中央揃えレイアウト。

09

文体と禁止事項

• トーン 直接的で明確、かつプロフェッショナル。
• 見出し 短く断定的な文で、太字サンセリフフォントを使用。
• CTA シンプルでアクション指向、矢印記号付き。

• 装飾的またはセリフフォントを使用しない — スクリーンショットではクリーンな幾何学的サンセリフの見出しが使われている。
• 複雑なドロップシャドウを追加しない — スクリーンショットでは微細で柔らかいbox-shadowが使われている。
• 賑やかまたは暗い背景を使用しない — スクリーンショットでは主に白いキャンバスが使われている。
• ヒーローセクションを雑踏させない — スクリーンショットでは中央要素の周囲に十分な余白がある。
• バッジに角丸の四角形を使用しない — スクリーンショットではピル形状のラベルが使われている。
• カードに重厚なボーダーを使用しない — スクリーンショットでは微細なシャドウや背景の変化でカードが区切られている。
• 避ける: 専門用語の多用
• 避ける: 複雑な文構造
• 避ける: 視覚的な杂音や騒がしい背景

10

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

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

11

System Prompt

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