厳選・オープン・無料
Simonrogers Info
動的テキストレイアウトを持つ実験的タイポグラフィポートフォリオ
PortfolioTypographyEditorialCleanExperimental
01
デザイン DNA
タイポグラフィエディトリアル実験的パーソナル
レイアウトとテキスト配置を実験するタイポグラフィポートフォリオ
02
カラー
#3366FFInk
#FFFFFFBG
rgba(51,102,255,1)Line
実験的なテキスト配置による、白地上的単色の青
03
タイポグラフィ
transitional-serif
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
テキスト要素を回転させ重ねることで生まれる動的な間隔
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
目立つ境界線なし
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
テキストを various な角度で回転させた実験的なセンタリングレイアウト
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
テキスト回転アニメーション · カーソル pointer インタラクション
1秒間の色遷移 · インタラクティブ要素に対する pointer カーソル
08
コンポーネント
- button 目立つボタンなし
- card 目立つカードなし
- chip 目立つチップなし
- input 目立つ入力フォームなし
- hero 回転したテキストによるタイポグラフィヒーロー
09
文体と禁止事項
- トーン 実験的かつ芸術的
- 見出し 重なり合う回転セリフタイポグラフィ
- CTA 目立つ CTA なし
- 標準的なグリッドレイアウトを使用しない — スクリーンショットでは代わりに回転し重なるテキストが表示されている
- 複数の色を使用しない — スクリーンショットでは代わりに単色の青パレットが表示されている
- サンセリフタイポグラフィを使用しない — スクリーンショットでは代わりにトランジショナル・セリフフォントが表示されている
- 明確な視覚的階層を作成しない — スクリーンショットでは代わりに実験的なテキスト配置が表示されている
- 装飾要素を追加しない — スクリーンショットでは代わりにミニマルなテキストのみのデザインが表示されている
- 従来の間隔を使用しない — スクリーンショットでは代わりに動的で重なるレイアウトが表示されている
- 避ける: 標準的なグリッドレイアウト
- 避ける: 従来のタイポグラフィ
- 避ける: 複数の色
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはSimon Rogersのための実験的タイポグラフィポートフォリオウェブサイトです。デザインは白色（#FFFFFF）の上に単色の青（#3366FF）のカラースキームを使用し、トランジショナル・セリフタイポグラフィ（Wazlon, Caslon Ionic）を採用しています。レイアウトは various な角度で回転したテキストを特徴とし、実験的で芸術的な印象を与えます。主要な特徴には、センタリングされた構成、重なるテキスト要素、hover時の1秒間の色遷移、インタラクティブ要素に対する pointer カーソルが含まれます。重要な禁止事項：標準的なグリッドレイアウトを使用しない、複数の色を使用しない、サンセリフフォントを使用しない、明確な視覚的階層を作成しない、装飾要素を追加しない、従来の間隔を使用しないこと。このサイトは、ポートフォリオプレゼンテーションに対する実験的でエディトリアルなアプローチを体現しています。
en · zh-CN · zh-TW · ja · ko