厳選・オープン・無料

Kevin Tw

物理的なノートを模した、遊び心のある手描きパーソナル・ポートフォリオサイト。

01

デザイン DNA

パーソナルリンク集ページとして使用される、手描きのインタラクティブな紙のノート。

02

カラー

ハイコントラストなモノクロームのスケッチ・スタイルに、最小限で意図的なカラーアクセント。

03

タイポグラフィ

humanist-sans

• display50px · 700
• body20px · 600

テキストには標準システムフォントを使用するが、太いマーカーのストロークを模すため、ヘビーなトラッキングとウェイトでスタイル設定。

04

余白

レイアウトは、等間隔に配置されたリンク要素の厳密な垂直スタックで構成。

05

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

2pxの黒線で、やや不規則な手描きスタイル。

0px 2px 9px 0px rgba(82, 79, 79, 0.15) · 15px 15px 33px 0px rgba(27, 27, 27, 0.1)

06

レイアウト

罫紙のような背景上に配置された、インタラクティブ要素の単一の中央揃え縦カラム。

07

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

インタラクティブなリンクボタンにhoverした際のスムーズなトランジション。

手描きのリンクボタンに、視覚的なフィードバック（軽微な色の変化やトランスレーションなど）。 · 標準的なリンクナビゲーションの動作。

08

コンポーネント

• button 太い黒いボーダーと白/ライトグレーの塗りつぶしを持つ手描きの長方形アウトライン。左寄せのスケッチ風アイコンと中央揃えのテキストを配置。
• card ノート全体が、繊細な紙の影効果を持つ大きなカードとして機能。
• chip なし。
• input なし。
• hero 円形の手描きアバターと、大きく太い手書きの名前を含むシンプルなレイアウト。

09

文体と禁止事項

• トーン 遊び心があり、パーソナルで親しみやすい。
• 見出し 太く、手書きで表現力豊か。
• CTA カジュアルで会話的、シンプルなリンクとして提示。

• 完全に直線的な幾何学的ラインを使用しない — スクリーンショットでは、少し揺らいだ手描きのボーダーが見られます。
• 企業的で洗練されたタイポグラフィを使用しない — スクリーンショットでは、太く手書きスタイルの見出しが見られます。
• 複雑なカラーパレットを使用しない — スクリーンショットは、最小限の赤/青のアクセントを伴うモノクロームが主体です。
• 重厚でリアルなドロップシャドウを使用しない — スクリーンショットでは、繊細な紙が浮き上がる効果が見られます。
• 標準的で均一なアイコンを使用しない — スクリーンショットには、カスタムでスケッチ風の手描きアイコンが採用されています。
• 標準的な角丸のUIコンポーネントを使用しない — スクリーンショットでは、不規則でスケッチされた長方形が見られます。
• 避ける: フォーマルな企業言語
• 避ける: 過度に複雑なUIパターン
• 避ける: 厳密なグリッドレイアウト

10

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

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

11

System Prompt

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