厳選・オープン・無料

Relume

Relumeは、マーケティングサイトをより速く構築するためのAIを活用したデザイン・開発ツールです。

01

デザイン DNA

AI生成と人間のキュレーションを融合した、Webデザインのためのクリエイティブ・コパイロット。

02

カラー

ニュートラルで温みのあるグレー基調がクリーンなキャンバスを提供し、鮮やかなパープルのアクセントとダークのテキストが視覚的な焦点を牽引します。

03

タイポグラフィ

humanist-sans · monospace

• display80px · 500
• h240px · 500
• body-lg19px · 400
• body16px · 400
• caption14px · 400

大きなディスプレイ見出しには、狭めのトラッキングを設定します。 · 本文には標準の400ウェイトをすべてのコピーに使用します。

04

余白

4pxの倍数による一貫したリズムで、レイアウト全体に構造的で予測可能な間隔を生み出します。

05

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

1px solid rgba(22,22,22,0.1)

rgba(0, 0, 0, 0.04) 0px 1px 2px 0px · rgba(0, 0, 0, 0.08) 0px 1px 3px 0px · rgba(0, 0, 0, 0.08) 0px 8px 10px -4px

06

レイアウト

中心に揃えられたカラムレイアウトで、ヒーローセクションに十分な余白と浮遊するUI要素を配置します。

07

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

hover時に滑らかなopacityとtransformトランジションを適用します。 · 装飾的なUI要素にはフロートアニメーションを設定します。 · ビューポートへの表示時にレイアウトのシフトを加速させます。

カードやボタンに、微細な背景色の変化とわずかな垂直方向の浮き上がりを適用します。 · 背景色の変更やスケールトランスフォームにより、即座に視覚的なフィードバックを提供します。

08

コンポーネント

• button ダークの塗りつぶされたプライマリボタン（白文字）と、パープルのアウトラインを持つゴーストボタンのバリアントです。
• card 柔らかいシャドウと角丸を持つ、白またはライトグレーのカードです。
• chip ソーシャルプルーフやナビゲーションラベルに使用する、丸みのある小さなピルバッジです。
• input グラデーションボーダーと、内部に塗りつぶされたアクションボタンを持つ、大きく目立つ入力フィールドです。
• hero 明るい背景の中央に巨大なタイポグラフィを配置し、両側に浮遊するインタラクティブなUIカードを配置します。

09

文体と禁止事項

• トーン エンパワリングで、プロフェッショナルかつ革新的なトーンです。
• 見出し 太字で直接的、かつメリットを伝えるスタイルです。
• CTA 行動を促す、かつ歓迎するスタイルです。

• 纯白の背景は使用しない — スクリーンショットでは温みのあるオフホワイトが使用されています。
• セリフ体のディスプレイフォントは使用しない — スクリーンショットではジオメトリックまたはヒューマニストサンス-serifが使用されています。
• 明るいネオンのアクセントは使用しない — スクリーンショットでは深みのある、高彩度のパープルが使用されています。
• レイアウトを詰め込まない — スクリーンショットでは十分な余白と中央揃えの配置が使用されています。
• 激しいドロップシャドウは使用しない — スクリーンショットでは柔らかく、拡散したボックスシャドウが使用されています。
• UI要素の角にシャープな角は使用しない — スクリーンショットでは最大16pxの角丸が使用されています。
• 避ける: 受動的な言葉遣い
• 避ける: 説明のない過度に技術的な専門用語
• 避ける: 曖昧な約束

10

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

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

11

System Prompt

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