ファーストビューコード生成用
自己紹介のファーストビュー
顔写真と肩書き、ひとことで「何をする人か」を伝える。
用途・説明
個人のポートフォリオやフリーランスのサイトの最初の画面を作成します。顔写真、名前、肩書き、できることを短くまとめ、実績と連絡先へのボタンを置きます。デザイナー、エンジニア、ライター、カメラマン、講師など、個人で活動する人のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[名前]- 例：山田 花子
[肩書き]- 例：Webデザイナー／イラストレーター
[ひとこと]- 例：小さなお店の「らしさ」を、Webでかたちにします。
[ボタン文言]- 2つ。例：制作実績を見る、お仕事の相談
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「自己紹介のファーストビュー」を実装してください。 ## 表示内容 - 顔写真（仮の画像を置く） - あいさつ：「こんにちは、[名前]です。」 - 見出し：[ひとこと] - 肩書き：[肩書き] - ボタン：[ボタン文言] - 「現在、お仕事を受付中です」の状態表示 ## レイアウト - PC：左にテキスト（幅 60%）、右に顔写真（幅 40%） - スマホ：顔写真を上（小さめ）、テキストを下に。すべて左揃え - コンテンツの最大幅 960px、上下 padding 96px（スマホ 56px） ## デザイン - 背景 #FFFFFF - 顔写真：直径 280px（スマホ 120px）の円形。後ろに、#1463F0 の15%の淡い色の円を右下に 16px ずらして重ねる - あいさつ：16px、font-weight 700、色 #1463F0 - 見出し：PC 40px / スマホ 26px、font-weight 700、line-height 1.5、色 #1B2A44 - 肩書き：14px、色 #5F6D84 - 状態表示：13px、緑の丸（8px、#2E9E6B）と文字。背景 #F1F5FC、padding 6px 14px、角丸 999px - 1つ目のボタン：背景 #1463F0、文字 #FFFFFF。2つ目：枠線 1px solid #1463F0、文字 #1463F0。どちらも高さ 52px、角丸 999px、font-weight 700 ## アクセシビリティ - 見出しは h1。あいさつは見出しの前の段落にする - 顔写真の alt は名前にする - 状態表示は色の丸だけでなく、文字で伝える。丸は aria-hidden="true" - ボタンのタップ領域は 44×44px 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 受付状況（受付中・満席）を1か所で切り替えられるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。