ファーストビューコード生成用
写真を組み合わせたファーストビュー
大きさの違う3枚の写真を重ねて、雰囲気を多面的に伝える。
用途・説明
大きさと縦横比の違う写真を3枚、少しずつずらして並べるファーストビューを作成します。1枚では伝えきれない、空間・料理・人のような複数の魅力を一度に見せられます。カフェ、宿、サロン、ウェディング、工房などのサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：森のなかの、ちいさな宿。
[補足文]- 見出しを補う1〜2文
[ボタン文言]- 例：ご予約はこちら
[写真の内容]- 3枚ぶん。例：外観、客室、朝食
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「写真を組み合わせたファーストビュー」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足文：[補足文] - ボタン：[ボタン文言] - 写真3枚：[写真の内容]（仮の画像を置く） ## レイアウト - PC：左にテキスト（幅 40%）、右に写真の領域（幅 60%、高さ 520px） - 写真の配置（CSS Grid、または position: absolute）： - 1枚目：縦長（3:4）、領域の左上、大きめ - 2枚目：横長（4:3）、右上、やや小さめ。1枚目より 40px 下げる - 3枚目：正方形、右下、いちばん小さい。1枚目の下端に少し重ねる - スマホ：テキストを上、写真を下に。写真は1枚目を全幅、2・3枚目をその下に横並び ## デザイン - 背景 #F7F9FC - 写真：角丸 16px、object-fit: cover。重なる写真には白い枠（6px）を付ける - 写真の領域の後ろに、#1463F0 の15%の淡い色の四角（角丸 24px）を斜めにずらして敷く - 見出し：PC 40px / スマホ 28px、font-weight 500、line-height 1.5、セリフ体、色 #1B2A44 - 補足文：15px、line-height 2、色 #5F6D84 - ボタン：高さ 52px、角丸 999px、背景 #1463F0、文字 #FFFFFF・font-weight 700 ## アクセシビリティ - それぞれの写真の alt に内容を書く - 見出しは h1 - 1枚目の写真は fetchpriority="high"、ほかは loading="lazy" にしない（最初の画面に入るため） - 写真に width と height を指定して、レイアウトのずれを防ぐ ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。