厳選・オープン・無料

Buzzusborne

複雑な問題をシンプルで愛着の湧く製品に変える、パーソナルメーカーのポートフォリオ。

01

デザイン DNA

親しみやすい近所のメーカーが、自身のデジタル作品を紹介しているようなイメージ。

02

カラー

ダークネイビーのタイポグラフィによる高コントラストと可読性を備えた、クリーンなホワイトキャンバス。

03

タイポグラフィ

humanist-sans · geometric-sans

• display46px · 500
• body15px · 400

本文にはRoboto、太字の見出しにはPoetsen Oneを使用します。 · 可読性のため、本文の行間は豊かに設定します（1.6）。 · 大型の見出しにtightな文字間隔を使用せず、親しみやすさを維持します。

04

余白

デスクトップでコンテンツを中央に集中させるため、サイドに150pxのパディングを持つ豊富なホワイトスペース。

05

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

控えめなUI要素用に、ダークネイビーの2px solidボーダー。

0 4px 20px rgba(42, 57, 78, 0.05)

06

レイアウト

セクション間に豊かな垂直スペースを確保した、中央揃えの単一カラムレイアウト。

07

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

ビューポートにエントリーする要素に対する、滑らかなフェードインとトランジション。

インタラクティブな要素に対する、控えめな透明度や色のシフト。 · 軽微なスケールや色の変化による、即座の視覚フィードバック。

08

コンポーネント

• button ダーク背景に白文字の、角丸のピル型ボタン。
• card プロジェクトのスクリーンショットを紹介する、ソフトなベージュ背景の角丸コンテナ。
• hero 遊び心のある絵文字付きの大型中央揃えヘッドライン、その後にプロジェクト紹介カードを配置。

09

文体と禁止事項

• トーン 親しみやすく、親しみがやすく、自信に満ちたもの。
• 見出し 一人称の会話的なフレーズに、遊び心のある絵文字を添えたもの。
• CTA ダーク背景のボタンに配置する、明確でアクションを促すテキスト。

• 冰冷で寒々しいカラーパレットは使用しない — スクリーンショットでは、親しみやすいダークネイビーのテキストを持つ暖かいホワイトが示されています。
• カードに鋭角的な角は使用しない — スクリーンショットでは、大きな20pxの角丸が示されています。
• 小さく穷屈なタイポグラフィは使用しない — スクリーンショットでは、46pxの大型で可読性の高いディスプレイフォントが示されています。
• 複雑なマルチカラムレイアウトは使用しない — スクリーンショットでは、クリーンで中央揃えの単一カラムデザインが示されています。
• テキストで密集したセクションは使用しない — スクリーンショットでは、豊富なホワイトスペースと余裕が示されています。
• 攻撃的でコーポレートな言語は使用しない — スクリーンショットでは、親しみやすく一人称の会話的なトーンが示されています。
• 避ける: 過度に専門的な用語
• 避ける: 攻撃的なセールスコピー
• 避ける: 複雑で長いCTA
• 避ける: 冷たくコーポレートなトーン
• 避ける: すべて大文字での強調

10

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

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

11

System Prompt

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