カードコード生成用
記事の著者紹介ボックス
記事の最後に置く、書いた人のプロフィール枠。
用途・説明
ブログやコラムの記事の最後に置く、著者の紹介ボックスを作成します。顔写真、名前、肩書き、短いプロフィール、SNSや著者ページへのリンクをまとめます。誰が書いたかを示すことで、記事の信頼感が高まります。監修者の紹介にも使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[著者名]- 例：山田 花子
[肩書き]- 例：Webデザイナー
[プロフィール]- 80〜120文字ほどの紹介文
[リンク]- 例：X、著者の記事一覧
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「記事の著者紹介ボックス」を実装してください。 ## 表示内容 - ラベル：「この記事を書いた人」 - 顔写真、著者名：[著者名]、肩書き：[肩書き] - プロフィール：[プロフィール] - リンク：[リンク] ## レイアウト - 左に顔写真、右に ラベル → 名前と肩書き → プロフィール → リンク - スマホ：写真と名前を横に並べ、プロフィールとリンクはその下に全幅で ## デザイン - ボックス：背景 #F7F9FC、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - 顔写真：直径 72px の円形（スマホ 56px） - ラベル：11px、font-weight 700、letter-spacing 0.1em、色 #1463F0 - 名前：16px、font-weight 700、色 #1B2A44。肩書きは 12px・色 #5F6D84 で名前の横に - プロフィール：14px、line-height 1.8、色 #47566E - リンク：13px、font-weight 700、色 #1463F0。項目の間隔 16px ## アクセシビリティ - aside 要素（aria-label="著者紹介"）でマークアップする - 顔写真の alt は著者名にする - SNSのリンクは新しいタブで開き、そのことが分かるようにする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - 著者情報の構造化データ（Person）を JSON-LD で出力する例をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。