ファーストビューコード生成用
採用サイトのファーストビュー
働く人の写真と強い言葉で、会社の空気を伝える。
用途・説明
採用サイトの最初の画面を作成します。働く人の写真を大きく使い、短く強いメッセージと、募集要項・エントリーへのボタンを置きます。新卒採用、中途採用、アルバイト募集のページで、条件より先に「どんな人と働くのか」を伝えたいときに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メッセージ]- 例：つくる人が、いちばん楽しい会社へ。
[会社名]- 例：株式会社サンプル
[ボタン文言]- 2つ。例：募集要項を見る、エントリーする
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「採用サイトのファーストビュー」を実装してください。 ## 表示内容 - 英字のラベル：RECRUIT と、[会社名] - メッセージ：[メッセージ] - ボタン：[ボタン文言] - 背景の写真（働く人の写真。仮の画像を置く） - 右下に「SCROLL」の文字と、下向きの線 ## レイアウト - 写真をセクション全体に敷く。高さは画面いっぱい（100svh、最低 560px） - テキストは左下寄り（左から 8%、下から 12%） - メッセージは2〜3行で、意味のまとまりで改行する - ボタンは横に2つ並べる。スマホでは縦に並べる ## デザイン - 写真の上に、左下から右上へ薄くなる暗いグラデーション（rgba(17, 28, 48, 0.75) → rgba(17, 28, 48, 0.1)） - ラベル：12px、font-weight 700、letter-spacing 0.3em、色 #FFFFFF - メッセージ：PC 56px / スマホ 32px、font-weight 800、line-height 1.35、色 #FFFFFF - メッセージの一部（1語）に、#1463F0 の下線（太さ 0.15em）を引いて強調する - 1つ目のボタン：背景 #FFFFFF、文字 #1B2A44。2つ目のボタン：背景 #1463F0、文字 #FFFFFF。どちらも高さ 56px、角丸 4px、font-weight 700 ## 動き - 「SCROLL」の線は、上から下へ伸びる動きを2秒ごとに繰り返す - prefers-reduced-motion のときは止める ## アクセシビリティ - メッセージは h1 - 写真が内容を伝えるなら alt に説明を書く - 「SCROLL」は装飾なので aria-hidden="true" - 白い文字のコントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。