ファーストビューコード生成用
イラストを添えたファーストビュー
左に言葉、右にイラスト。やわらかく親しみやすい第一印象に。
用途・説明
左に見出しとボタン、右にイラストを置くファーストビューを作成します。写真よりもやわらかい印象になるので、はじめての人向けのサービス、教室、保険や相談窓口など、安心感を伝えたいサイトに向いています。イラストは後から差し替えられるよう、置き場所だけを用意します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：はじめての確定申告を、いっしょに。
[補足文]- 見出しを補う1〜2文
[ボタン文言]- 例：無料で相談する
[イラストの内容]- 例：ノートPCを開いて相談する2人
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「イラストを添えたファーストビュー」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足文：[補足文] - ボタン：[ボタン文言] - イラスト：[イラストの内容]（画像は後で差し替えるので、仮の画像を置く） ## レイアウト - PC：左にテキスト（幅 50%）、右にイラスト（幅 50%）。上下中央でそろえる - スマホ：イラストを上、テキストを下に縦に並べる。テキストは中央揃え - コンテンツの最大幅 1120px、上下 padding 80px（スマホ 48px） ## デザイン - 背景：#1463F0 の9%の淡い色 - イラストの後ろに、大きな丸（白、直径はイラストの幅の90%）を敷いて、イラストを浮かび上がらせる - 見出し：PC 44px / スマホ 28px、font-weight 700、line-height 1.4、色 #1B2A44 - 補足文：16px、line-height 1.9、色 #5F6D84 - ボタン：高さ 56px、角丸 999px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700 - ボタンの下に「相談は何度でも無料です」のような一言（13px、色 #5F6D84）を添える ## レスポンシブ・アクセシビリティ - イラストは縦横比を保ち、width と height を指定してレイアウトのずれを防ぐ - イラストが内容を伝えるなら alt に説明を書く。装飾なら alt を空にする - 見出しは h1 - ボタンのタップ領域は 44×44px 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - イラストを差し替える場所をコメントで示す
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。