Claude と一緒に採用サイトの待遇実績ページを作った話

はじめに

クラスメソッドの採用サイトに「給与実績データ」ページを新設しました。平均年収や職種別・年代別の給与データなど、転職を検討される方に向けて透明性の高い情報を公開するページです。

https://careers.classmethod.jp/feature/salary/

今回、このページの制作に Claude を活用したので、その過程を共有します。

なぜ給与データを公開するのか

転職を検討する際、報酬水準は重要な判断材料の一つです。しかし多くの企業では「経験・能力により優遇」といった曖昧な表現にとどまっています。また、モデルケースとして年代や入社歴ベースで2-3個紹介されているだけの場合もあります。

当社では「求職者に誠実に情報を開示する（道徳）ことが、採用のミスマッチを減らし会社の成長に繋がる（経済的利益）」という考えのもと、実際の社員データに基づく給与実績を公開することにしました。

突貫で。つまり、これは生成AIの出番です。

でも私は採用サイトの管理画面を触るのは今回が初めてでした。ドキドキ。だって、過去にはプロンプトを少しでも間違えたら、二度と正規ルートには戻れない...なんてこともありました。その中で、そんなことに悩まされることなくうまくいったので、記録に残しておきたいと思います。目指すは再現性！

Claude との制作プロセス

なお、今回はclaude.ai（ブラウザ上）で全て作業を行いました。どうしても既存ソースの読み込みが甘くなるため、ソース自体はとても長く、途中から返答が長すぎてエラーになりました。でもこれが返ってダウンロードできるhtmlを都度作成してもら得たので、ページが崩れるようなプロンプトを渡してしまった状態からすぐにリカバリーできたのは良かったなと思いました。

次のブログで書く予定ですが、比較用にWordPressのテンプレートをローカルに置いた状態で、VS Code上で作成した流れも紹介するので、併せて参考にしてもらえると幸いです。なお、おすすめは、ローカルです。

1. 元データの確認

手元にあるのは、公開情報として受け渡された給与データやテキスト（Markdown形式）

• 全社サマリー（平均年収・中央値）
• 年度別推移
• 職種別・年代別・性別・社歴別の内訳
• グレード（役職）別の年収
• キャリアパス比較（スペシャリスト vs マネージャー）
• よくある質問（Q&A）58問

そして、ページデザイン案と掲載用のグラフ画像7種類です。

2. HTML/CSS の生成

Claude に1のデータを渡し、WordPress に貼り付けられる HTML + CSS を生成してもらいました。

実際のプロンプト

添付したマークダウンの内容を、HTMLに整形してください。WordPressの管理画面に張り付けて使うので、HTML＋CSSの形式で内容のみ抽出してください。なお、グラフ画像は適切なURLに置き換えてください。

このように、用途（WordPressに貼り付け）と形式（HTML+CSS）を明確に伝えることで、すぐに使える形式で出力されます。
土台ができた上で、デザイン案を取り入れてもらいましょう。

実際のプロンプト

現行の採用サイトのテイストや添付した画像をもとに、ページデザインを修正してください。

ここでざっくりとしたページ構成は完成です。

3. レイアウト・デザイン微調整

ここが結局一番長いやり取りになります。今回はデザイン案があったので、正誤をチェックしながら、レイアウトの改善を指示していきます。キャプチャを適宜渡しつつ、できる限り言語化して伝えるように心がけます。

実際のプロンプト

添付したhtmlをベースに、以下の変更をお願いします。
* 表は読みづらいので、横2列ではなく1列にしてください。
* レスポンシブ対応できていないところが一部あるので調整してください。
* 年次の表画像を真ん中寄せにしてください。
* テキストサイズが小さいところが見受けられるので、最低サイズを16pxにしてください。ただし、注意書きは14pxでOKです。
* ネガティブな表現になっているところはポジティブな表現に書き換えたいので、ピックアップして、修正案をください。

全社サマリー：mdファイルに沿って、見出しも入れてください。
グラフの入っているところ：右からむの開始位置は、左のテキスト開始位置でお願いします。テキストが横一列に伸びてしまうと読みづらいです。
グレード昇格による年収アップ：添付画像のようなレイアウトになっていないので見直してください。
キャリア別の平均像：ディレクターを目立たせなくて良いです
年収内訳の画像は img_graph17.png です

その他の調整のやりとり例：

• 「表とグラフの位置が逆です。添付した画像のように左に表、右にグラフを配置して」
• 「見出しはテキストに色をつけるのではなく、採用サイト（URL付与）と同様に黄色のアンダーラインマーカーを付けて」
• 「アクセントカラーが既存と異なるので、サイトの水色（#00B8D4）に変更して」

コツは、最初の方はまとめて指示出した方が効率が良いですが、だんだんと細かくなってきた時に、別の指摘で崩れてしまう時があるので、1つずつにしたほうが良いです。

4. レスポンシブ対応

スマートフォンでの表示確認を行い、いくつかの問題を修正しました。

発見した問題：

• ボタンがはみ出す
• 表も横スクロールが多く読みにくい
• セクション間の余白が大きすぎる
• 縦一列に並べ替えた時に内容の順序がおかしい

実際のプロンプト

添付した画像のように、スマホだと上下の余白が大きいので、調整してください

レスポンシブ対応のレビューです。
* ボタン：はみ出ています。
* 一部のグラフを非表示にしたいので、cssを作ってください。例えば年代別グラフです。レスポンシブにしたときに流れがおかしくなるので。

シンプルな指示でも、Claude が適切に判断して各要素の余白を調整してくれました。

5. 既存サイトとのトンマナ合わせ

他のページと比較して「フォントサイズが小さい」「色が薄くて読みづらい」と指摘があったため、既存ページの URL を渡して調整を依頼しました。

実際のプロンプト

他のページに比べて、フォントサイズが小さかったり、色が薄くて読みづらいです。
このページを参考に調整できますか？
https://careers.classmethod.jp/feature/merit/

URL を渡すだけで、Claude が該当ページを参照し、フォントサイズや色を合わせてくれます。また、変更点もまとめてくれたのも良かったです。

6. 固定目次パネルの追加

5の時点で、先に公開はしていたもののページが長いのが気になったため、追加で右下に固定の目次パネルを追加することにしました。

実際のプロンプト

「カジュアル面談してみる」ボタンもどこかに追加したいです。ページが長いので、右下かどこかに、目次を固定表示できたりしますか？

[添付画像]
いい感じですが、既存のボタンと被ってるので、調整してください。あと、色は、サイトの青を使って欲しい
あと、目次はスマホは非表示にしてください

サイトの青は 
#00A2F7 です。あと、ボタンが行落ちしてるので調整して

すごいゆるふわなプロンプトに対して、めちゃいい感じのものを出してくれました。。Claudeありがとう。。

まぁ、言わんでもそりゃ普通あるよね！っていう機能を非機能要件といって、そんなこと知らない担当が不親切な開発会社に頼むと一切考慮されてないものが仕上がる....というのが世の中のセオリーでございます。

がしかし、Claude は、適切な実装（クリックで開閉、アニメーション付き）を勝手に取り入れてくれます。なんて優しい世界なんだ。

7. 文言の相談

コードだけでなく、Q&A の文言調整も Claude に相談しました。

実際のプロンプト：

文言の相談です。

> Q. 面接はオンラインですか？
> A. 1次面接はオンラインで行います。2次面接以降は必ず1回オフラインでの顔合わせがあります。

二次面接以降もオンラインのことが多く、「必ず」とは言い切れないそうなので、文案ください

Claude が複数の文案を提案し、さらに追加の要望を伝えて調整しましょう。

基本的には会いたいので、Cをベースにしたいかもです。Aだと、少しニュアンスが違う

このように壁打ち形式で、意図に合った文言に絞り込んでアイデアが最適化されてゆきます。以上が全ての流れです。

Claude 活用のポイント

よかった点

1. スクリーンショットを見せながら修正指示ができる

   • 「ここがはみ出してる」「この色を使って」など視覚的なフィードバックも可能

2. 既存ページの URL を渡してスタイルを合わせられる

   • 「このページを参考に調整して」で既存サイトとのトンマナを合わせられる

3. バージョン管理しながら進められる

   • v1 → v2 → ... → v11 と段階的に改善

4. HTML/CSS だけでなく文言の相談もできる

   • Q&A の文言調整など、コピーライティングの壁打ちにも活用

5. MDファイルとのテキストや数字のズレはなかった

   • 念の為、別の生成AIツールに、mdファイルとサイトのキャプチャを渡してチェックしてもらいましたが差分ゼロでした。

注意点

1. WordPress との相性確認は必須

   • ローカルで見えていても、WordPress に貼ると崩れることがある

2. <style> タグの消失に注意

   • 編集中に <style> タグが抜け落ちて全体が崩れることがあった

3. 既存 CSS との競合

   • サイト側の CSS と競合しないように、ページ専用のプレフィックス（p-salary__）等を利用して対応するのが良い（今回はclaudeさんがよしなにしてくれたが、別の場面で競合したことはあった）

プロンプト分析：何がうまくいったか

今回のセッションで使用したプロンプトを振り返り、うまくいったものとそうでなかったものを分析します。エンジニア経験がない方でも再現できるよう、ポイントをまとめました。

◎ 特に効果的だったプロンプト

1. 用途と形式を明示した初期依頼

添付マークダウンの内容を、HTMLに整形してください。
WordPressに張り付けて使うので、HTML＋CSSの形式でお願いします。
グラフ画像は適切なURLに置き換えてください

なぜ良いか：

• 入力（添付マークダウン）と出力（HTML+CSS）が明確
• 用途（WordPress）を伝えることで、適切な形式で出力される
• 補足情報（グラフ画像のURL）で期待値を調整

ポイント： 「何を」「何のために」「どんな形式で」を伝えると、一発で使える成果物が出てきます。

2. 参考URLを渡すだけのスタイル指定

https://careers.classmethod.jp/feature/merit/
ここを参考に、フォントサイズや色を調整してください

なぜ良いか：

• 言葉で説明するより「お手本」を見せる方が正確
• 調整範囲（フォントサイズ、色）を限定している

ポイント： デザインの指示は「このサイトみたいに」が最強です。

3. 現状と問題点をセットで伝える文言相談

文言の相談です。

Q. 面接はオンラインですか？
A. 1次面接はオンラインで行います。2次面接以降は必ず1回オフラインでの顔合わせがあります。

二次面接以降もオンラインのことが多く、「必ず」とは言い切れないそうなので、文案ください

なぜ良いか：

• 現状の文言を提示している
• 何が問題か（「必ず」が言い切れない）を明確に説明
• 背景情報（実態はオンラインが多い）を共有

ポイント： 「現状」+「問題点」+「背景」のセットで、的確な提案が得られます。

○ 良かったが改善の余地があったプロンプト

4. スクリーンショット＋修正指示

[スクリーンショット添付]
いい感じですが、既存のボタンと被ってるので、調整してください。
あと、色は、サイトの青を使って欲しい

良かった点：

• 視覚的に問題を示している
• 「いい感じ」と肯定してから修正点を伝える

改善できた点：

• 「サイトの青」が何色か分からず、追加の質問が必要になった

より良いプロンプト：

[スクリーンショット添付]
いい感じですが、2点修正お願いします。
1. 既存のボタン（画像右下）と被っているので、上に移動
2. 色をサイトの青（#00A2F7）に変更

5. 試行錯誤の撤回

やっぱりボタンは一行が良さそうです。戻してもらえますか。

問題ではないが：
事前に複数案を出してもらう方が効率的でした。

より良い進め方：

ボタンのテキストを検討中です。
以下の2パターンを作って、比較させてください。
A: 「カジュアル面談してみる」（1行）
B: 「カジュアル面談」「してみる」（2行）

△ 改善した方が良かったプロンプト

6. 曖昧な問題報告

激しく見た目が崩れています

問題点：

• どこで確認したか不明（ローカル？WordPress？プレビュー？）
• どう崩れているか不明

実際の流れ：
Claude から質問 → 追加情報を提供 → 解決（1往復余計にかかった）

より良いプロンプト：

WordPressに貼り付けたら見た目が崩れました。
Claudeのプレビューでも崩れています。
[スクリーンショット添付]

エンジニア経験がない人向けテンプレート

今回の経験を踏まえ、すぐに使えるプロンプトテンプレートをまとめました。

HTML生成を依頼するとき

[ファイルを添付]

このデータを元にHTMLページを作ってください。

用途: [WordPressに貼る / メールに添付 / 社内共有]
デザイン: [シンプル / 参考URL: https://...]
特に注意してほしい点: [スマホ対応 / 印刷対応 / など]

デザイン修正を依頼するとき

[スクリーンショットを添付]

以下を修正してください。
1. [具体的な修正点]
2. [具体的な修正点]

参考: [参考URLや色コード]

問題を報告するとき

問題が発生しました。

環境: [ローカル / WordPress / Claudeプレビュー]
症状: [何がどう崩れているか]
期待: [本来どうなっていてほしいか]

[スクリーンショットを添付]

文言を相談するとき

文言の相談です。

現状:
[現在の文言]

問題点:
[何が問題か、なぜ変えたいか]

希望するニュアンス:
[どんな印象にしたいか]

学んだベストプラクティス

完成したページの構成

最終的に以下の構成でページを公開しました。

1. イントロダクション
2. 採用応募を検討している皆さまへ
3. 全社サマリー（平均941万円、中央値911万円）
4. 拠点（勤務地）別
5. 男女別
6. 社歴（勤続年数）別
7. 職種別
8. 年代別
9. 役職（グレード）別
10. 給与構成の透明性
11. キャリアパス
12. 最後に
13. Q&A（58問）

まとめ

Claude を活用することで、データ整理からHTML生成、レスポンシブ対応、文言調整まで一気通貫で進めることができました。

特に「スクリーンショットを見せながらの修正指示」は、デザイン調整において非常に効率的でした。従来であればデザイナーやエンジニアとのやりとりが必要だった作業を、マーケティング担当者が主導して進められる点は大きなメリットです。

給与データの公開は、採用における透明性向上の第一歩です。このページが転職を検討される方の判断材料となれば幸いです。

関連リンク

• 給与実績データ（2025年7月時点）
• クラスメソッド キャリア採用サイト