厳選・オープン・無料

Miro

Miroは、チームとAIエージェントが共に考え、計画し、構築するコラボレーションレイヤーです。

01

デザイン DNA

チームのアイデア出しとAIエージェントのコラボレーションを担う、デジタルホワイトボード。

02

カラー

クリーンなホワイトキャンバスに、高いコントラストのダークテキストを配置して可読性を確保。主要なアクションには鮮やかなブルーを1色使い、構造には柔らかいグレーを採用します。

03

タイポグラフィ

humanist-sans · monospace

• display56px · 500
• h148px · 500
• h224px · 600
• body16px · 400
• small12px · 400

親しみやすくプロフェッショナルな印象を保つため、見出しにはフォントウェイト500を使用します。 · 大きな見出しにはネガティブな文字間隔（トラッキング）を適用し、ビジュアルリズムを締めます。 · 本文テキストは中立的なウェイト400を維持し、十分なline-heightで可読性を確保します。

04

余白

内部パディングやコンポーネント間隔には、一貫した8pxと16pxの間隔を持つ、ベース4グリッドを採用。

05

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

入力フィールドやカードには、控えめな1pxボーダーを慎重に使用します。

0px 1px 3px rgba(0,0,0,0.1) · 0px 10px 10px -3.75px rgba(0,0,0,0.06) · 0px 2.28px 2.28px -2.5px rgba(0,0,0,0.16)

06

レイアウト

中央にメインコンテナを配置した、標準的な12カラムグリッド。

07

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

ボタンやインタラクティブ要素の、スムーズなhoverトランジション。 · インタラクティブ状態の、背景色とトランスフォームのアニメーション。

控えめな背景色の変化や、ボーダーカラーの変更。 · スケールやトランスフォームのマイクロアニメーション。

08

コンポーネント

• button 「無料で始める」や「詳しく見る」は、ピルまたは角丸長方形の形状を持つソリッドブラックボタン。ヒーロー内の主要な「無料で始める」はブルー。
• card 角丸のライトグレーベックグラウンドカード。見出し、アイコン、説明テキストを内包。
• chip ユーザーカーソルやラベル用の、小さなピル形状の要素。
• input 控えめなボーダーを持つ、シンプルな角丸長方形の入力フィールド。
• hero 目立つ入力フィールドとCTAボタンを備えた、中央揃えテキストベースのヒーローセクション。

09

文体と禁止事項

• トーン 力強く、プロフェッショナルで、未来志向。
• 見出し コラボレーションとAIに関する、短くインパクトがあり、利益を示すステートメント。
• CTA 直接的で行動を促すもの（例：「無料で始める」「ダッシュボードへ移動」）。

• セリフフォントを使用しない — スクリーンショットではクリーンなヒューマニストサンセリフが使われています。
• ダークモードテーマを使用しない — スクリーンショットでは主に白/ライトグレーの背景が使われています。
• 重厚な装飾的なシャドウを使用しない — スクリーンショットでは控えめでソフトなシャドウが使われています。
• 混沌とした複数カラーパレットを使用しない — スクリーンショットでは白、黒、グレー、単一のブルーアクセントの抑制されたパレットが使われています。
• あらゆる場所に硬く鋭い角を使用しない — スクリーンショットでは角丸長方形（12px、20px）とピル形状が混在しています。
• 見出しに密集した小さなテキストを使用しない — スクリーンショットでは大きく息の通った、 Tightな文字間隔の見出しが使われています。
• 避ける: ヒーローにおける過度に技術的な専門用語や、密度の高い段落。
• 避ける: 攻撃的または営業的な言葉遣い。
• 避ける: コアメッセージから注意をそらす、雑然としたレイアウト。

10

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

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

11

System Prompt

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