カードコード生成用
募集職種のカード
職種名・雇用形態・勤務地を、応募につながる形で並べる。
用途・説明
採用ページの「募集職種」を、1職種1枚のカードで並べて作成します。職種名、雇用形態や勤務地のタグ、仕事内容の要約を載せ、カード全体が募集要項ページへのリンクになります。募集が多いときも、タグで違いを見比べやすくなります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[募集職種]- 職種名・雇用形態・勤務地・仕事内容の要約を件数分
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「募集職種のカード」を実装してください。 ## 表示内容 [募集職種] （各カード：職種名、雇用形態・勤務地などのタグ、仕事内容の要約、右端の矢印） ## レイアウト - 1列で縦に並べる。カードの間隔 12px - カード内：左に 職種名 → タグ → 要約、右端に矢印（上下中央） - スマホでも同じ並び。タグは折り返す ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px 24px - 職種名：18px、font-weight 700、色 #1B2A44 - タグ：12px、padding 2px 10px、角丸 6px、背景 #F1F5FC、文字 #47566E。タグの間隔 6px - 要約：14px、line-height 1.7、色 #5F6D84、最大2行 - 矢印：20px、色 #1463F0 - hover：枠線を #1463F0 にし、矢印を右に 4px 動かす - 募集を終了した職種：全体の不透明度を下げず、「募集終了」のタグを付けてリンクを外す ## アクセシビリティ - 一覧は ul / li、職種名は h3 のなかの a 要素にし、カード全体をクリックできるようにする - タグは「雇用形態：正社員」のように、読み上げで項目名が分かるようにする（項目名は視覚的に隠してよい） - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - 職種を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。