お客様の声・実績コード生成用
メディア掲載の一覧
新聞・テレビ・雑誌などの掲載実績を、日付順に。
用途・説明
メディアで紹介された実績を、日付・媒体名・内容の一覧で見せるセクションを作成します。新しい順に並べ、記事が公開されているものにはリンクを付けます。会社案内や、サービスの信頼性を伝えるページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[掲載のリスト]- 日付・媒体名・内容・記事のURL（あれば）を5件程度
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「メディア掲載の一覧」を実装してください。 ## 表示内容 - 見出し：メディア掲載 [掲載のリスト] - 最後に「すべての掲載実績を見る」のリンク ## レイアウト - 最大幅 800px、中央配置 - 各行：左から 日付 → 媒体名 → 内容。PCでは横1行、スマホでは「日付と媒体名」「内容」の2段 - 行の間隔 8px ## デザイン - 行：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px、padding 14px 20px - 日付：13px、色 #5F6D84、等幅の数字 - 媒体名：15px、font-weight 700、色 #1B2A44 - 内容：15px、色 #47566E、PCでは1行で省略 - 記事へのリンクがある行は、右端に外部リンクのアイコン（16px、色 #1463F0）を表示し、hover で枠線を #1463F0 にする - リンクがない行は、hover しても変化させない ## アクセシビリティ - ul / li でマークアップ。日付は time 要素（datetime 属性つき） - 外部リンクは target="_blank"、rel="noopener noreferrer"。「新しいタブで開く」ことを読み上げで伝える - リンクがある行だけ、行全体を a 要素にする ## 注意点 - 媒体のロゴを使う場合は、各社の利用規定を確認する必要があることをコメントで補足する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。