厳選・オープン・無料

Ryanstephen

クリーンな写真グリッドを通じて、デジタル、空間、フリューイッドなインターフェースデザインを紹介するポートフォリオ。

01

デザイン DNA

実験的なインターフェース作品を展示する、クリーンなデジタルギャラリー

02

カラー

プロジェクトの画像が支配的になるよう、厳密にニュートラルなパレット

03

タイポグラフィ

humanist-sans

• body12px · 400
• body-large16px · 400

04

余白

寛裕な余白が自己紹介セクションと画像グリッドを分離します

05

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

なし

06

レイアウト

自己紹介用の固定左カラム、画像グリッド用のスクロール右カラム

07

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

transition: all 0.2s ease

画像とリンクにポインターカーソル · 標準的なリンク動作

08

コンポーネント

• button シンプルなテキストリンク（メール、Twitter、LinkedIn）
• card 密集したグリッド内の丸みのある写真サムネイル
• hero 自己紹介テキストブロック

09

文体と禁止事項

• トーン プロフェッショナルで、率直、控えめ
• 見出し シンプルな自己紹介ステートメント
• CTA プレーンなテキストリンク

• 複雑なレイアウトを使用しない — スクリーンショットはシンプルな固定サイドバー + スクロールグリッドを示している
• 装飾的な影を追加しない — スクリーンショットはドロップシャドウのない画像を示している
• コンテナにドロップシャドウを使用しない — スクリーンショットはフラットな画像カードを示している
• カラフルなアクセントを使用しない — スクリーンショットは純粋にニュートラルな黒/白/グレーパレットを示している
• 装飾的なボーダーを使用しない — スクリーンショットはボーダーレスの要素を示している
• 複雑なタイポグラフィを使用しない — スクリーンショットは2つのサイズのシンプルなサンセリフフォントを示している
• 重い背景色を使用しない — スクリーンショットはソリッドな白（#ffffff）を示している
• 避ける: マーケティング用語
• 避ける: バズワード
• 避ける: 絵文字

10

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

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

11

System Prompt

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