cv-resume

CV／履歴書ジェネレーター

ATSに最適化された、見た目が際立ち、目を引く履歴書を、単一の自己完結型HTMLファイルとして作成します。ありきたりな見た目の成果物は失敗です。どの履歴書も、プロのデザイナーが手がけたような、大胆で印象的、かつ独自性のあるデザインにしてください。

---

ステップ1：情報を集める

以下の情報を尋ねる（またはコンテキストから抽出する）：

1. 氏名と連絡先（メール、電話番号、LinkedIn、所在地、ポートフォリオ／GitHub）
2. 希望職種／業界 — ATSキーワードとビジュアルの方向性にとって重要です
3. キャリア目標 — 目標や抱負を述べた文（1～3文。コンテキストから作成してもかまいません）
4. 職務経歴（会社、役職、在籍期間、担当業務、実績）
5. 学歴（教育機関、学位、卒業年、優秀な場合はGPA）
6. スキル（技術スキルとソフトスキル）
7. 任意：資格、プロジェクト、出版物、語学、受賞歴、ボランティア活動

情報がすべてそろうまで作業を止めないでください。提供された情報で作成し、不足している内容は明記します。

---

ステップ2：キャリア目標セクション（必須）

すべての履歴書にキャリア目標セクションを含め、ヘッダーの直後、職務経歴の前に配置してください。

優れたキャリア目標のポイント：

• 希望職種に合わせて個別化した2～4文
• 公式：[自分が何者か] ＋ [中核となる強み／経験] ＋ [職務に提供できる価値] ＋ [達成したいこと]
• 「勤勉」「チームプレーヤー」「情熱的」などの決まり文句は避ける
• 具体的な表現と、業界に関連するキーワードを使う
• 意欲的でありながら、現実に根ざした内容にする

職位レベル別の例：

エントリーレベル：

「UC Berkeleyでコンピューターサイエンスを専攻し、スタートアップ2社でのインターンを通じてフルスタック開発の実務経験を積みました。React、Node.js、PostgreSQLに精通し、システム設計とアジャイルな協働の確かな基礎を備えています。高い成果を上げるエンジニアリングチームの一員として成長しながら、スケーラブルな製品開発に貢献できるジュニアソフトウェアエンジニア職を希望しています。」

中堅：

「B2B SaaS製品の開発を牽引し、測定可能な収益成長を実現してきた経験を7年持つシニアプロダクトマネージャーです。厳密なデータ分析と反復的な実験を通じて、複雑なユーザーニーズを洗練された製品ソリューションに落とし込むことを強みとしています。成長段階にあり、コアプラットフォームを拡大している企業で、戦略的なロードマップ策定のリーダーシップと、ものづくりに取り組む姿勢を発揮したいと考えています。」

キャリアチェンジ：

「中等教育の教員からUXデザイン職への転身を目指しています。学習者の心理を理解し、複雑な概念を明確に伝え、ユーザーニーズを中心にカリキュラムを設計してきた6年の経験があります。Google UX Design Certificateを取得し、エンドツーエンドのケーススタディプロジェクトを4件作成しました。人を第一に考えるデザインアプローチを、意義あるデジタル体験を生み出す企業で活かしたいと考えています。」

ATSに関する注意：キャリア目標は、職種に関連するキーワードを自然な形で盛り込むのに最適なセクションです。

---

ステップ3：ATS最適化ルール

HTML構造（必須）：

• 氏名には<h1>を使用
• 各セクションの見出し（キャリア目標、職務経歴、学歴、スキルなど）には<h2>を使用
• 役職には<h3>を使用
• 箇条書きにはすべて<ul>/<li>を使用
• セクションの順序：キャリア目標 → 職務経歴 → 学歴 → スキル

内容に関するルール：

• 各箇条書きは、力強い動詞で始めます：Led、Built、Designed、Launched、Reduced、Generated、Optimized、Architected、Coached、Negotiatedなど
• 各職務につき、少なくとも1つの実績を数値化します：数値、％、ドル、削減時間など
• 求人情報が提供されている場合は、そこに含まれるキーワードを反映します
• 略語は最初に正式名称を記載します：「Machine Learning（ML）」
• 過去の職務には過去形、現在の職務には現在形を使います

ATSで不利になる要素：避けるべきもの

• レイアウトにHTMLの<table>を使わない（CSSのflexbox／gridを使用）
• 重要なテキストをbackground-image、content:、装飾用SVG内に配置しない
• ATSパーサーによるテキストの読み取り順を乱すような複数列レイアウトを使わない
• スキルは視覚的なバーやチャートだけで示さず、読み取れるテキストとして記載する

---

ステップ 4：ビジュアルデザイン（重要 — ありきたりなデザインは失敗）

これはデザインされた成果物です。視覚的に卓越したものにしてください。Word のテンプレートではなく、デザインポートフォリオの作品を目指しましょう。

必須のビジュアル基準

タイポグラフィ — 意図的で独自性のある組み合わせを選びます。

• 見出し用の候補：Playfair Display、Cormorant Garamond、DM Serif Display、Fraunces、Libre Baskerville、Yeseva One、Abril Fatface
• 本文用の候補：DM Sans、Outfit、Plus Jakarta Sans、Nunito Sans、Lato、Karla、Mulish
• 使用禁止：Arial、Roboto、Inter、Times New Roman、system-ui のような汎用フォント
• 氏名：見出し用フォントで 36～48px。セクション見出し：文字間隔を広げた大文字で 10～12px。本文：13～14px。

色 — 履歴書ごとに統一感のあるパレットを 1 つ選び、生成ごとに変化をつけます。

テーマ	背景	テキスト	アクセント	ヘッダー背景
ミッドナイトネイビー	#F5F7FA	#1A1A2E	#4361EE	#1A1A2E
ウォームバーガンディ	#FDFAF6	#2D1B1B	#8B2635	#2D1B1B
フォレストエグゼクティブ	#F4F6F0	#1C2B1E	#2D6A4F	#1C2B1E
スレート＆カッパー	#F7F8FA	#1E2433	#C87941	#1E2433
ローズエディトリアル	#FFF8F8	#2B1B1B	#C0414F	#2B1B1B
ディープティール	#F2F8F8	#0D2B2B	#0D7377	#0D2B2B
チャコール＆ゴールド	#FAFAF7	#1A1A1A	#C9A84C	#1A1A1A
カスタム	上品で業界にふさわしい配色を考案します

レイアウトパターン — 1 つ選び、大胆に仕上げます。

オプション A：大胆なサイドパネル — 氏名、連絡先、スキル、学歴を豊かなアクセントカラーの列にまとめた、暗色のサイドバー（240～260px）を配置します。右側のメインコンテンツ（キャリア目標、職務経歴）は、すっきりとした白い背景にします。

オプション B：印象的な全幅ヘッダー — 氏名を大きく（中央揃えまたは左揃え）配置し、希望職種のサブタイトルと明るい色の連絡先行を添えた、画面幅いっぱいの暗色ヘッダーにします。下端には幾何学的なアクセント、または斜めの clip-path を加え、その下にすっきりとしたコンテンツ領域を設けます。

オプション C：左側アクセントカラム — 左端に高さ全体にわたる、幅 6～8px の控えめな色付き境界線を配置します。左上に氏名を大きく置き、セクションラベルと本文のタイポグラフィに強弱をつけた、上品な 1 カラム構成にします。

オプション D：エディトリアルカード — 履歴書全体を影付きの中央揃えカードに収めます。氏名には特大のセリフ体（48px 以上）を使い、セクション見出しは細い罫線付きの大文字にします。余白をたっぷり取り、高級雑誌のようなレイアウトに仕上げます。

オプション E：斜め／幾何学的なヘッダー — ヘッダー領域に CSS の clip-path または斜めに傾けた疑似要素を使い、暗色のヘッダーと白いコンテンツ領域の境界を動きのある斜めの形にします。

デザインを引き立てる目を引くディテール：

• スキルを、色付き背景、角丸、小さめのフォントでスタイリングしたピル型バッジにする
• セクション見出しに装飾的な罫線、またはラベルの前に ▪ ◆ ● などの文字を添える
• 職種名と会社名を同じ行に配置し、日付は右揃えの控えめなバッジまたはイタリック体にする
• アクセントカラーの箇条書きマーカー（▸ • ◦ ➤）を使う
• 主要なセクション間に細い色付きの水平線を入れる
• ヘッダーに氏名のイニシャルを使った装飾的なモノグラムやアバターのプレースホルダーを配置する
• ヘッダーの背景に控えめな CSS グラデーションや幾何学模様を使う
• 職務経歴の項目の左側に、点と線を使ったタイムラインを設ける
• ホバー効果：職務カードに、控えめな左境界線の表示や背景色の変化を加える

スキルバッジのパターン（ATS 対応：<li> 内はプレーンテキストにし、見た目はスタイルで調整）：

<ul class="skill-tags">
  <li>React</li>
  <li>Node.js</li>
  <li>PostgreSQL</li>
</ul>

.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.skill-tags li { background: var(--accent-light); color: var(--accent-dark);
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }

印刷と PDF の最適化

必ず次を含めます。

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: var(--bg); color: var(--text); }
  .resume { box-shadow: none; margin: 0; border: none; max-width: 100%; }
}
@page { margin: 0; size: A4; }

---

ステップ 5：セクションテンプレートの参照

キャリア目標を含む HTML 全体の骨組み：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Name] – Resume</title>
  <link href="https://fonts.googleapis.com/css2?family=[DisplayFont]&family=[BodyFont]&display=swap" rel="stylesheet">
  <style>/* All CSS here */</style>
</head>
<body>
<div class="resume">
  <header>
    <h1>[Full Name]</h1>
    <p class="headline">[Target Job Title]</p>
    <div class="contact-info">
      <span>[email]</span> · <span>[phone]</span> · <span>[location]</span>
    </div>
  </header>

  <main>
    
    <section class="objective">
      <h2>Career Objective</h2>
      <p>[2–4 sentence tailored objective with role-specific keywords]</p>
    </section>

    
    <section class="experience">
      <h2>Work Experience</h2>
      <div class="job">
        <div class="job-header">
          <div>
            <h3>[Job Title]</h3>
            <span class="company">[Company]</span> · <span class="location">[City]</span>
          </div>
          <span class="dates">[Month Year] – [Month Year]</span>
        </div>
        <ul>
          <li>[Action verb] + [task] + [measurable result]</li>
        </ul>
      </div>
    </section>

    
    <section class="education">
      <h2>Education</h2>
      <div class="edu-item">
        <div>
          <h3>[Degree, Field]</h3>
          <span class="school">[Institution]</span>
        </div>
        <span class="dates">[Year]</span>
      </div>
    </section>

    
    <section class="skills">
      <h2>Skills</h2>
      <ul class="skill-tags">
        <li>Skill One</li><li>Skill Two</li><li>Skill Three</li>
      </ul>
    </section>
  </main>
</div>
</body>
</html>

---

ステップ 6：業界ごとの指針

業界	ビジュアルのトーン	重視する項目	備考
テクノロジー／エンジニアリング	すっきりとしたモダンな印象	GitHub、技術スタック、OSS	スキルセクションを上部に配置
金融／コンサルティング	保守的、ネイビー／バーガンディ	ROI 指標、案件規模	学歴を目立たせる
クリエイティブ／デザイン	大胆で表現豊か	ポートフォリオ URL、ビジュアルプロジェクト	プロジェクトセクションを追加
ヘルスケア	信頼感のあるブルー／グリーン	免許、認定資格	認定資格は学歴の後に配置
アカデミア	伝統的、セリフ体を多用	出版物、助成金、教育経験	フル CV 形式（長め）
エグゼクティブ／C-Suite	上質で控えめ	損益、取締役会、M&A、売上規模	取締役／アドバイザーセクション
スタートアップ	モダンで活気のある印象	成長指標、複数の役割	プロジェクト／副業

---

品質チェックリスト

ATS：

• <h1> に氏名、セクションに <h2>、職務名に <h3>
• キャリア目標が記載され、個人に合わせて調整され、キーワードが豊富
• スキルをプレーンな <li> テキストで記載
• 各箇条書きの先頭に行動を表す動詞を使用
• 各職務に少なくとも 1 つの指標を記載
• レイアウトに <table> を使用しない

ビジュアル：

• Google Fonts を読み込み — 独自性のあるフォントの組み合わせを使い、汎用的なものは避ける
• 統一感のあるカラーパレット — アクセントカラーを 1 色に絞り、一貫して使用
• ヘッダーに視覚的なインパクトがある（真っ白な箱にしない）
• セクション見出しにタイポグラフィの工夫がある（文字間隔、色、装飾的な罫線）
• スキルタグをピル型バッジとしてスタイリング
• print-color-adjust: exact を指定した印刷用 CSS
• 実際のデザイナーが作成したような見た目

内容：

• キャリア目標が個人に合わせて調整され、応募先職種のキーワードを使用
• 連絡先情報にメールアドレスと、少なくとも 1 つの別の連絡手段を記載
• 出力にプレースホルダーテキストがない
• 有効で完全な HTML

---

出力

CV／履歴書の HTML ファイル

続けて、以下について簡潔な注記を記載します：（1）選んだキャリア目標の方向性とその理由、（2）適用した ATS 最適化、（3）さらに内容を強化するための提案を 1～2 件。