厳選・オープン・無料

Tomorrow Happens Studio

静的な単語「Tomorrow」をアンカーに、連続的にフェードイン・フェードアウトする詩的なスクロールを使用する、ミニマルデザインスタジオのランディングページ。

01

デザイン DNA

一語のアンカーを持つ静かな詩集

02

カラー

視覚的な階層構築のために、異なる不透明度を使用した厳格なモノクロームパレットによる高コントラストのミニマリズム。

03

タイポグラフィ

transitional-serif

• display39px · 200
• body12px · 500

04

余白

メインのディスプレイテキストには、 tightな行間と広めの余白を採用。

05

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

繊細で正確なナビゲーション区切りには、1px solid black。

06

レイアウト

サイドバーナビゲーションと、垂直にスクロールするテキストブロックに焦点を当てたメインコンテンツ。

07

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

個々の行に不透明度のフェードアウトを加えた連続的な垂直スクロール

ナビゲーションアイテムの不透明度フェード。 · サイドバーおよびフッターのナビゲーションリンクでトリガー。

08

コンポーネント

• button '+' suffixを付けたテキストのみのナビゲーションリンク。
• hero 固定された静的アンカーワードを持つ、全画面の連続テキストスクロール。

09

文体と禁止事項

• トーン 詩的、内省的、哲学的
• 見出し 小文字、文頭のみ大文字、断片的なステートメントを連続的にスクロール
• CTA '+' suffixを付けたミニマルなテキストリンク

• 明るいアクセントカラーを使用しないこと — スクリーンショットは厳格なモノクロームの白黒パレットを示しています。
• ディスプレイテキストに太いフォントウェイトを使用しないこと — スクリーンショットは非常に細く、エレガントなセリフフォントを示しています。
• ドロップシャドウや複雑な3D効果を使用しないこと — スクリーンショットは完全にフラットで二次元の要素を示しています。
• ボタンやカードに角丸を使用しないこと — スクリーンショットは鋭く幾何学的でボーダーレスのレイアウトを示しています。
• 忙しい背景パターンやイメージを使用しないこと — スクリーンショットはクリーンで純白の背景を示しています。
• 複雑で複数レベルのナビゲーションメニューを使用しないこと — スクリーンショットはシンプルでフラットなテキストリンクのみを示しています。
• 避ける: 大文字のヘッダー
• 避ける: 明るいアクセントカラー
• 避ける: 密集した段落

10

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

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

11

System Prompt

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