厳選・オープン・無料

Replit

ReplitはブラウザベースのコラボレーティブIDEで、ローカル環境のセットアップなしで、ソフトウェアの構築、デプロイ、共有が可能です。

01

デザイン DNA

開発者がアイデアを描き、それを現実にコンパイルする、開放的で空気感のあるワークショップ。

02

カラー

暖かみのあるオフホワイト系のニュートラルをベースに、アクション用に高エネルギーのオレンジを1色使用。

03

タイポグラフィ

geometric-sans · monospace

• display56px · 500
• headline40px · 500
• body16px · 400
• caption14px · 400

見出しにはタイトなネガティブトラッキングを適用し、コンパクトでパンチのある印象に。 · 本文テキストも含め、相対的にタイトな行間を維持し、情報密度を確保。 · 太字700ではなく、ウェイト500をディスプレイ／見出しの強調に使用。

04

余白

4pxベースライングリッドを採用。要素間には均一でタイトな余白を、カードにはたっぷりとしたパディングを提供。

05

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

1px solid rgba(137,140,148,0.3)

rgba(0,0,0,0.08) 0px 2px 8px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

レイアウト

目立つ入力フィールドを備えた中央揃えのシングルカラムヒーローを配置し、その下に料金体系や機能説明を示すマルチカラムカードレイアウトを配置。

07

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

インタラクティブ要素上的、滑らかなフェードと背景色トランジション。 · ボタンやカードのホバー時に、微細なスケールや不透明度の変化を適用。

アウトラインボタンの背景色フィル、およびカードの微細な浮遊感の変化。 · ボタンに微細な縮小効果を適用。次の状態またはページへ遷移。

08

コンポーネント

• button プライマリアクションにはピル型アウトラインボタンを、セカンダリや特定のトリガーには塗りつぶしの角丸ボタンを使用。
• card 柔らかいオフホワイトやライトグレーのカード。大きなボーダー radiusと繊細なドロップシャドウを採用。
• chip カテゴリ分けやクイックアクション用の、ライトグレーの角丸タグやサジェストチップ。
• input 角丸の大きなテキストエリアまたはテキスト入力。右側に塗りつぶしアクションボタンを埋め込み。
• hero 全幅で垂直中央揃えのセクション。大きな見出し、簡潔なサブテキスト、および支配的なインタラクティブ入力エリアを配置。

09

文体と禁止事項

• トーン 直接的で力強く、少し遊び心がある。ユーザーの創造を促すトーン。
• 見出し 『何を作りますか？』や『小さく始め、素早くスケール。』のような、短くパンチのある質問や宣言。
• CTA 『アカウント作成』や『サインアップ』のように、明確で行動を促すテキスト。

• starkな純黒の背景は使用しない — デザインでは#F7F6F4のような暖かいオフホワイトを採用。
• 装飾的すぎるフォントやセリフ体フォントは使用しない — タイポグラフィは一貫してクリーンなジオメトリックsans-serif。
• everywhereでシャープな四角い角を使用しない — 要素は8pxのような大きなボーダー radiusやピル型を採用。
• UIをオレンジアクセントで埋め尽くさない — これは高優先度のCTAに厳密に限定。
• 重いドロップシャドウやハイコントラストのボーダーは使用しない — 浮遊感は非常に柔らかく繊細なシャドウで表現。
• 見出しに広く緩い行間を使用しない — テキストはタイトでコンパクトを維持。
• 避ける: 専門用語を多用した技術的な説明
• 避ける: 攻撃的なセールス言語
• 避ける: 受動的または不確かな表現

10

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

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

11

System Prompt

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