厳選・オープン・無料

Honk Me

明るい青の背景とオーバーサイズのタイポグラフィが特徴の、リアルタイムチャットのための大胆で遊び心のあるインターフェース。

01

デザイン DNA

遊び心があり、消費者にフレンドリーな個性を持つ、鮮やかでモダンなメッセージングアプリ。

02

カラー

鮮やかな青が全体を支配し、白と黄色のアクセントが高コントラストとフレンドリーさを生み出す。

03

タイポグラフィ

geometric-sans

• display52px · 700
• body16px · 400
• caption13px · 400

見出しテキストは太字で、トラッキングが詰められている。 · 本文テキストは通常のウェイトで、緩やかな行間が設定されている。

04

余白

4pxを基本ユニットとする、8pxステップスケール。

05

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

ミニマル。カードやインプットには柔らかな角丸を適用。

06

レイアウト

左側にテキスト、右側にフォンモックアップを配置した分割レイアウト。モバイルでは縦にスタック。

07

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

hoverやfocus状態での滑らかなトランジション。

インタラクティブ要素上の、繊細な色の変化やアンダーライン。 · 遅延なしの即座のビジュアルフィードバック。

08

コンポーネント

• button 透明な背景に白いボーダーが付いた、丸いピル型。
• card 柔らかな影を持つ角丸長方形。お知らせを含む。
• input 白い背景に濃色テキストの角丸長方形。
• hero 大胆なタイポグラフィと浮遊するフォンモックアップを含む分割レイアウト。

09

文体と禁止事項

• トーン フレンドリーで、熱意があり、率直。
• 見出し 大きく、太字で、遊び心がある。「本当に」で始まることが多い。
• CTA 矢印アイコン付きのシンプルで行動を促すフレーズ。

• 彩度を落とした色を使わない — スクリーンショットは鮮やかで高彩度の青の背景を示している。
• セリフフォントやモノフォントを使わない — スクリーンショットは全体的に丸みのある幾何学的サンセリフを示している。
• 小さく控えめな見出しを使わない — スクリーンショットはオーバーサイズの太字ディスプレイフォントを示している。
• 鋭く四角い角を使わない — スクリーンショットはすべてのUI要素に高度に丸みのある角を示している。
• ダークモードを使わない — スクリーンショットは明るくカラフルなライトテーマを示している。
• 複雑な複数カラムグリッドを使わない — スクリーンショットはモバイルでのシンプルな単一カラムフローを示している。
• 避ける: フォーマルまたは企業的な言葉遣い。
• 避ける: 密集したテキストの段落。
• 避ける: 複雑または雑然としたレイアウト。

11

System Prompt

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