フッターコード生成用
アプリのダウンロード案内つきフッター
リンクの横に、アプリの入手先とQRコードを置く。
用途・説明
フッターの右側に、アプリのダウンロードを案内するエリアを置いたフッターを作成します。ストアへのボタンとQRコードを並べるので、スマホでもパソコンでもアプリを入手できます。Webとアプリの両方で提供しているサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンクのカラム]- 見出しとリンクを2カラムぶん
[アプリの案内文]- 例：アプリなら、予約の確認がもっとかんたんに。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「アプリのダウンロード案内つきフッター」を実装してください。 ## 表示内容 - 左：ロゴ（テキスト「[サービス名]」で代用） - 中央：リンクのカラム [リンクのカラム] - 右：アプリの案内（見出し「アプリをダウンロード」、[アプリの案内文]、ストアへのボタン2つ、QRコード） - 最下段：コピーライト ## レイアウト - PC：ロゴ（幅 20%）、リンクのカラム（幅 40%）、アプリの案内（幅 40%） - アプリの案内：左にボタンを縦に2つ、右にQRコード - スマホ：アプリの案内を最初に表示し、QRコードは表示しない ## デザイン - 背景 #1B2A44、文字 rgba(255, 255, 255, 0.78) - アプリの案内のエリア：背景 rgba(255, 255, 255, 0.06)、角丸 12px、padding 20px - 見出し：14px、font-weight 700、色 #FFFFFF - 案内文：13px、line-height 1.7 - ストアへのボタン：高さ 44px、幅 150px、背景 #FFFFFF、文字 #1B2A44・13px・font-weight 700、角丸 8px - QRコード：96×96px、白い背景に 8px の余白、角丸 8px - リンク：14px、行の間隔 12px。カラムの見出しは 13px・font-weight 700・色 #FFFFFF - ロゴマークと、リンクの hover の色：#7FA9F7 の55%の明るい色 ## 表示の決まり - アプリストアの公式のバッジ画像を使う場合は、各ストアのガイドライン（サイズ、余白、文言）に従う。公開前に確認する旨を出力の最後に書く - ここでは仮のボタン（「iPhone版」「Android版」）で置き、差し替える場所をコメントで示す ## 動作 - 端末を判定して、iPhoneでは iPhone版、Androidでは Android版のボタンだけを表示する例を併記する ## アクセシビリティ - ストアへのボタンは a 要素。新しいタブで開くことが分かるようにする - QRコードの alt は「アプリのダウンロード用QRコード」にする - footer 要素を使う ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。