厳選・オープン・無料

Flowen Me

クリエイティブな開発者のための、ハイコントラストでタイポグラフィを重視したポートフォリオ。

01

デザイン DNA

ブラータリストでネオンライトが灯る工業用ダッシュボード。

02

カラー

最大限の可読性とビジュアルインパクトのため、暗く控えめな背景と明るい白のタイポグラフィの極端なコントラスト。

03

タイポグラフィ

geometric-sans · display-serif · monospace

• display100px · 700
• body108px · 700

全てのプライマリテキストは大文字で設定する。 · 見出しは巨大で詰め込まれた幾何学的サンセリフ体を使用する。 · 代替見出しには装飾的なディスプレイセリフ体を使用する。

04

余白

大きなタイポグラフィブロックを分離するため、主要セクション間には広めの垂直パディングを設ける。

05

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

目立つボーダーは無し。タイポグラフィスケールと空間的な分離のみに依存。

06

レイアウト

アシンメトリーでタイポグラフィ主導のレイアウト。テキストがフローを決定する。

07

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

インタラクティブなテキスト要素でカーソルがポインタに変わる。 · 標準的なリンクナビゲーション。

08

コンポーネント

• button アンダーラインまたは矢印を伴うテキストベースのリンク。
• card 無し。イメージはタイポグラフィフローに直接統合される。
• chip 無し。
• input 無し。
• hero 巨大なタイポグラフィスタックの単語とプロジェクトサムネイルの組み合わせ。

09

文体と禁止事項

• トーン 直接的で自信に満ち、やや皮肉めいたトーン。
• 見出し 短くインパクトのある大文字の単語を垂直に積み重ねる。
• CTA 矢印またはアンダーラインを伴う直接的なテキストリンク。

• センタードレイアウトを使用しない — スクリーンショットでは左揃えのアシンメトリーテキストブロックが示されている。
• 微妙な色やグラデーションを使用しない — スクリーンショットでは鮮明なハイコントラストパレットが示されている。
• 小さく標準的なテキストサイズを使用しない — スクリーンショットでは巨大なディスプレイレベルのタイポグラフィが示されている。
• 角丸を使用しない — スクリーンショットでは鋭く矩形のエッジが示されている。
• 複雑なアイコンやボタンを使用しない — スクリーンショットではシンプルなテキストベースのナビゲーションが示されている。
• ライトテーマを使用しない — スクリーンショットでは暗い背景に明るいテキストが示されている。
• 避ける: 丁寧語
• 避ける: 複雑な文章
• 避ける: 柔らかいエッジ
• 避ける: グラデーション背景

10

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

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

11

System Prompt

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