ファーストビューコード生成用
斜めに切り分けたファーストビュー
色の面と写真を斜めの線で分け、動きのある画面に。
用途・説明
画面を斜めの線で左右に分け、左の色の面に見出し、右に写真を置くファーストビューを作成します。まっすぐな分割よりも動きと勢いが出るので、スポーツ、フィットネス、採用、イベントなど、前向きな印象を伝えたいサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：昨日の自分を、超えていく。
[補足文]- 見出しを補う1文
[ボタン文言]- 例：体験レッスンを予約
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「斜めに切り分けたファーストビュー」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足文：[補足文] - ボタン：[ボタン文言] - 右側の写真（仮の画像を置く） ## レイアウト - セクション全体に写真を敷き、その上に、左から 58% を覆う色の面を重ねる - 色の面の右端を斜めに切る（clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%)） - テキストは色の面のなか、左から 8% の位置に上下中央で置く。最大幅 480px - セクションの高さ 600px ## デザイン - 色の面：背景 #1463F0 - 見出し：PC 48px / スマホ 30px、font-weight 800、line-height 1.3、色 #FFFFFF - 補足文：16px、line-height 1.8、色 rgba(255, 255, 255, 0.88) - ボタン：高さ 56px、左右padding 32px、角丸 4px、背景 #FFFFFF、文字 #1463F0・16px・font-weight 700 ## レスポンシブ - 768px 未満：斜めの分割をやめ、写真を上（高さ 240px）、色の面を下に縦に並べる。色の面の上端だけを斜めに切る（上に 24px の傾き） ## アクセシビリティ - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - 見出しは h1。写真が装飾なら alt を空にする - clip-path に対応していないブラウザでは、まっすぐな分割で表示されるようにする ## 出力形式 - [使用技術]のコードを1つ出力 - 斜めの角度をCSS変数で調整できるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。