厳選・オープン・無料

Minymon

ウェブサイトのエンゲージメントを高めるために、かわいいインタラクティブなマスコットキャラクターを提供する遊び心のあるサービスです。

01

デザイン DNA

ウェブサイトのためのデジタルペットショップ

02

カラー

温かく親しみやすい、高コントラストでフレンドリーなカラーパレットです。

03

タイポグラフィ

humanist-sans

• display56px · 700
• h136px · 700
• body18px · 400
• nav13px · 500

ナビゲーションリンクは大文字で広いトラッキングを使用します。 · ヒーローテキストはタイトなネガティブレタースペーシングを使用します。 · 本文テキストには遊び心のあるトーンを出すために、絵文字をインラインで使用します。

04

余白

主要なコンテンツブロック間に、ゆったりとした垂直パディングを設けています。

05

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

ハードオフセットのドロップシャドウを伴う、ソリッドなプライマリブルーのボーダーです。

4px 4px 0px 0px rgba(21, 76, 126, 1)

06

レイアウト

最大幅を指定したコンテナで中央揃えの単一カラムレイアウトと、目立つフローティングマスコットを採用しています。

07

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

インタラクティブ要素への滑らかなトランジション。

インタラクティブ要素にカーソルが当たるとポインタに変化します。 · 標準的なボタンの押下動作です。

08

コンポーネント

• button ハードオフセットのドロップシャドウ付きのソリッドボーダーで、遊び心のある丸みのある角を持ちます。
• card 明確には定義されていません。キャラクターはシンプルなフローティング行で提示されます。
• chip 明確には定義されていません。
• input 明確には定義されていません。
• hero 大きな装飾的なウェーブ区切り線を持つ、中央揃えのテキストヒーローです。

09

文体と禁止事項

• トーン フレンドリーで、親しみやすく、少し気まぐれな雰囲気です。
• 見出し 直接的で会話的、絵文字を使用します。
• CTA アクション导向で、励ますような表現です。

• 無機質な白の背景を使わないでください — スクリーンショットでは温かみのあるクリーミーなベージュ（#F9F2EA）が使われています。
• 尖った機械的なドロップシャドウを使わないでください — スクリーンショットでは遊び心のあるハードオフセットシャドウが使われています。
• ハイテクでダークなUIを使わないでください — スクリーンショットではライトでパステル調の、親しみやすいパレットが使われています。
• 複雑なマルチカラムグリッドを使わないでください — スクリーンショットではシンプルで中央揃えの単一カラムレイアウトが示されています。
• 攻撃的なネオン色のアクセントを使わないでください — スクリーンショットでは柔らかく温かみのあるコーラル/サーモンのアクセント（#F16849）が使われています。
• 厳格にプロフェッショナルでセリフ風のタイポグラフィを使わないでください — スクリーンショットでは丸みのあるヒューマニストサンス serifフォントが使われています。
• 避ける: 企業用語
• 避ける: 複雑な技術用語
• 避ける: 攻撃的なセールス言葉
• 避ける: フォーマルまたは硬いトーン

10

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

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

11

System Prompt

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