ファーストビューコード生成用
大きな文字だけのファーストビュー
画像もボタンも置かず、ひとことの大きさで印象づける。
用途・説明
画面いっぱいの大きな文字だけで構成するファーストビューを作成します。写真やイラストを使わないので、言葉そのものが主役になります。デザイン事務所、ポートフォリオ、ブランドの思想を伝えるページなど、世界観を大切にしたいサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[大きな言葉]- 2〜3語の短い英字、または日本語。例：Make it simple.
[補足文]- 右下に小さく添える1〜2文
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはタイポグラフィに強いWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「大きな文字だけのファーストビュー」を実装してください。 ## 表示内容 - 大きな言葉：[大きな言葉] - 補足文：[補足文] - 左上に小さな番号やラベル（例：(01) Studio）、右下に「Scroll」 ## レイアウト - セクションの高さは画面いっぱい（100svh、最低 520px） - 大きな言葉は左揃えで、下寄りに置く。語ごとに改行して2〜3行にする - 補足文は右下、最大幅 320px - 左右の余白は画面幅の 5% ## デザイン - 背景 #F7F9FC - 大きな言葉：clamp(48px, 13vw, 140px)、font-weight 700、line-height 0.95、letter-spacing -0.03em、色 #1B2A44 - 言葉のうち1語だけ、色を #1463F0 にする - 補足文：14px、line-height 1.9、色 #5F6D84 - ラベルと「Scroll」：12px、letter-spacing 0.1em、色 #5F6D84 ## 動き - 表示されたとき、1行ずつ下からせり上がるように現れる（各行を overflow: hidden の箱に入れ、なかの文字を translateY(100%) から 0 へ。0.7秒、行ごとに 0.1秒ずらす） - prefers-reduced-motion のときは、最初から表示する ## レスポンシブ・アクセシビリティ - 320px 幅でも横スクロールや文字切れが起きないこと - 長い単語が画面からはみ出す場合は、文字サイズの下限を下げる - 大きな言葉は h1。行を分けるための span で単語が途切れて読み上げられないようにする - 日本語を使う場合の、文字間と行間の調整値をコメントで補足する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。