ファーストビューコード生成用
写真を左に置いたファーストビュー
大きな写真を左に、言葉を右に。視線を写真から言葉へ。
用途・説明
左に大きな写真、右に見出しとボタンを置くファーストビューを作成します。写真を先に見せてから言葉を読ませたい、商品やお店、人物が主役のサイトに向いています。写真は画面の左端まで広げ、のびやかな印象にします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：毎日つかう器を、ていねいに。
[補足文]- 見出しを補う1〜2文
[ボタン文言]- 例：商品を見る
[写真の内容]- 例：木のテーブルに並んだ器
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「写真を左に置いたファーストビュー」を実装してください。 ## 表示内容 - 写真：[写真の内容] - 小さなラベル（英字） - 見出し：[見出し] - 補足文：[補足文] - ボタン：[ボタン文言] ## レイアウト - PC：左に写真（幅 55%）、右にテキスト（幅 45%） - 写真は画面の左端・上端まで広げる（余白なし）。右下の角だけ 120px の大きな角丸にする - テキストは上下中央、左に 64px の余白 - セクションの高さ 640px - スマホ：写真を上（縦横比 4:3、角丸は右下 48px）、テキストを下に ## デザイン - 背景 #FFFFFF - ラベル：12px、font-weight 700、letter-spacing 0.2em、色 #1463F0 - 見出し：PC 40px / スマホ 28px、font-weight 500、line-height 1.5、セリフ体、色 #1B2A44 - 補足文：15px、line-height 2、色 #5F6D84 - ボタン：文字 15px・font-weight 700・色 #1463F0、下に 1px の線、右に矢印。hover で矢印が 4px 右へ ## レスポンシブ・アクセシビリティ - 写真は object-fit: cover。見せたい部分が切れないよう object-position を指定できるようにする - 写真の alt に内容を書く - 見出しは h1 - 写真は最初に表示されるので、loading="lazy" を付けず、fetchpriority="high" にする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。