厳選・オープン・無料

Rog Ie

Figmaのプロダクトデザイナーのための洗練された個人ポートフォリオ。表現力豊かなビジュアルツールを展示。

01

デザイン DNA

プロフェッショナルな技術と個人的な特徴を融合したデジタルスケッチブック

02

カラー

意図的な高彩度の感情アクセントを加えたニュートラルキャンバス

03

タイポグラフィ

transitional-serif · humanist-sans

• display24px · 500
• body14px · 400
• caption11px · 400

「HORROR」などの強調キーワードには大文字を使用 · 本文コピーには非常に読みやすい14pxのベースラインを維持 · セクション見出しには严格执行にセリフフォントを使用

04

余白

明確なコンテンツセクションを定義する、ゆったりとした垂直パディング（64px）

05

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

主にプロジェクトリスト区切りに使用される、薄い1pxの実線ボーダー

浮遊要素には 0px 3px 3px -2px rgba(0,0,0,0.2) · 繊細な境界線には Inset 0px 0px 0px 1px rgba(0,0,0,0.05)

06

レイアウト

メインコンテンツエリアの中央揃え単一カラムレイアウト

07

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

プロジェクトリスト項目のホバー時のスムーズなトランジション · インタラクティブ要素のトランスフォームに対するcubic-bezierイージング

カーソルがポインタに変化し、繊細なテキストカラーの変化またはトランスフォーム · プロジェクト詳細への即時ナビゲーション

08

コンポーネント

• button 重いボタンコンテナを備えない、タイポグラフィ中心のミニマルリンク
• card 映画ポスターのような、画像を多用した積み重ね要素
• chip カテゴリのためのシンプルなインラインタグ
• input 提供されたビューには可視の入力フィールドなし
• hero アバター、名前、簡単な自己紹介を備えた左揃えのイントロダクション

09

文体と禁止事項

• トーン カジュアルで、パーソナルでありながら非常にプロフェッショナル
• 見出し セクションをアンカーとする、直接的でセリフベースの見出し
• CTA 特定のカラー強調を備えた、繊細なインラインリンク

• 純粋な白の背景を使用しない — スクリーンショットは柔らかなニュートラルの#EDEDEDを示しています。
• 背景に重いグラデーションを使用しない — スクリーンショットはフラットな単色サーフェスを示しています。
• すべての見出しにサンセリフを使用しない — スクリーンショットはセクションタイトルにトランジショナルセリフを使用しています。
• 複数の競合するアクセントカラーを使用しない — スクリーンショットは強調に高彩度の赤を単一で使用しています。
• 太いボーダーや重いカードコンテナを使用しない — スクリーンショットは薄い1pxの線と繊細なシャドウを使用しています。
• 幅広い、両端揃えのテキストレイアウトを使用しない — スクリーンショットは tight で中央揃えの単一カラムレイアウトを示しています。
• 避ける: 攻撃的なマーケティング言語
• 避ける: 密度の高い複数カラムのテキストブロック
• 避ける: 過度に形式的な企業用語

10

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

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

11

System Prompt

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