Webデザイナーの職務経歴書〜プロに学ぶ書き方【ダウンロード・サンプルつき】
Webデザイナーなど、クリエイティブ職の転職ではポートフォリオが必須です。そのため、「ポートフォリオがあるなら職務経歴書については簡易的でいいのでは？」と思う人も多いのではないでしょうか。
そこで今回は、Webデザイナーの方に向けて職務経歴書の書き方をポイントとともに解説します。無料でダウンロードできるサンプルもご用意したので、ぜひご活用ください。
目次
Webデザイナーが職務経歴書を書くときのポイント
Webデザイナーが職務経歴書を書くときはに、どんなことに気を付けるべきでしょうか。ポイントを確認しておきましょう。
Webデザイナーとしての「提案力」を意識する
中途採用をする企業が、Webデザイナーに求めるものはいくつかありますが、中でも「即戦力」を期待している場合、重視するのはデザインスキルです。ただし、デザインスキルの優れた中途採用希望者は多く存在します。そこで、他の中途採用希望者と差別化を図るには「提案力」のアピールが必要です。
提案力とは、相手の抱える課題に対して、問題解決に繋がる企画・提案・行動が積極的にできる能力を指します。これまでの実績を記載する際、問題解決に向けて自分はWebデザイナーとしてどんな関わり方をしたのか、何を提案し、どのように解決してきたのかなど、意識して盛り込むとよいでしょう。
見やすく、わかりやすく書く
職務経歴書を書くうえで最も大切なことは「できること・やりたいことをきちんと記載して、自分の魅力を相手に伝えること」です。これを実現するために、相手の立場にたった書類作成が必要となります。特に採用担当者は、毎日大量の書類に目を通しており、その中でも、しっかりと伝わるようなわかりやすさが求められます。「相手に伝わりやすくする工夫」はデザイナーとして大切な能力なので、職務経歴書においても意識したいところです。
Webデザイナーの職務経歴書サンプル
ではさっそく、職務経歴書のサンプルを見ていきます。
職務経歴書
2024年2月1日現在
氏名：○○ ○○
■職務経歴概要
デザイン系の専門学校を卒業後、株式会社△△△△（ゲーム制作会社）に入社し、2DCGデザイナーとして●年ほどコンシューマーゲーム制作における2Dデザイン業務を経験。その後、株式会社○○○○にWebデザイナーとして転職し、Webサイト・バナー・ランディングページ・アプリUIのデザインとコーディング、運用と更新、改修などの業務に携わってきました。
■活かせる経験・スキル・得意分野
- UIを意識したサイトデザイン
- HTML/CSSを用いたコーディング
- Photoshop/Illustrationでのバナー、アイコン、イラスト作成
| PCスキル/テクニカルスキル | 経験年数 | 備考 | |
|---|---|---|---|
| 担当業務 | デザイン コーディング |
●年 ●年 |
|
| ツール | Photoshop Illustrator XD |
●年 ●年 ●年 |
|
| 言語 | HTML（5） CSS（3） JavaScript（iQuery） PHP |
●年 ●年 ●年 ●年 |
通常業務で使用可能、指導も可能 通常業務で使用可能、指導も可能 経験薄だが知識あり |
| PCスキル/テクニカルスキル | 経験年数 | 備考 |
|---|---|---|
| 担当業務 | ||
| デザイン コーディング |
●年 ●年 |
|
| ツール | ||
| Photoshop Illustrator XD |
●年 ●年 ●年 |
|
| 言語 | ||
| HTML（5） CSS（3） JavaScript（iQuery） PHP |
●年 ●年 ●年 ●年 |
通常業務で使用可能、指導も可能 通常業務で使用可能、指導も可能 経験薄だが知識あり |
■会社履歴
| 期間 | 会社名 |
|---|---|
| 20XX年XX月～現在 | 株式会社○○○○（Web制作会社） |
| 20XX年XX月～20XX年XX月 | 株式会社△△△△（ゲーム制作会社） |
■職務経歴詳細
株式会社○○○○ [在籍期間：20XX年XX月～現在]
事業内容：Webコンテンツ・プロモーションの企画・設計・制作
従業員数：●●●名
資本金：●●万円
雇用形態：正社員
| プロジェクト期間 | プロジェクト詳細・業務内容 | 役割・チーム体制 | 環境・使用言語 |
|---|---|---|---|
| 20XX年XX月 ～ 20XX年XX月 |
【プロジェクト内容】
【成果・実績】 |
【組織】 ●名 【役割】 Webデザイナー |
【使用ツール】 Photoshop Illustrator サクラエディタ 【使用言語】 HTML CSS 【使用OS】 Mac |
| 20XX年XX月 ～ 20XX年XX月 |
【プロジェクト内容】
【成果・実績】
|
【組織】 ●名 【役割】 Webデザイナー |
【使用ツール】 Photoshop Illustrator サクラエディタ 【使用言語】 HTML CSS JavaScript 【使用OS】 Windows |
| プロジェクト期間 | プロジェクト詳細・業務内容 |
|---|---|
| 20XX年XX月 ～ 20XX年XX月 |
【プロジェクト内容】
【成果・実績】 |
| 役割・チーム体制 | |
| 【組織】 ●名 【役割】 Webデザイナー |
|
| 環境・使用言語 | |
| 【使用ツール】 Photoshop Illustrator サクラエディタ 【使用言語】 HTML CSS 【使用OS】 Mac |
|
| 20XX年XX月 ～ 20XX年XX月 |
プロジェクト詳細・業務内容 |
【プロジェクト内容】
【成果・実績】
|
|
| 役割・チーム体制 | |
| 【組織】 ●名 【役割】 Webデザイナー |
|
| 環境・使用言語 | |
| 【使用ツール】 Photoshop Illustrator サクラエディタ 【使用言語】 HTML CSS JavaScript 【使用OS】 Windows |
株式会社△△△△ [在籍期間：20XX年XX月～20XX年XX月]
事業内容：コンシューマーゲーム開発
従業員数：●●名
資本金：●●万円
雇用形態：正社員
| プロジェクト期間 | プロジェクト詳細・業務内容 | 役割・チーム体制 | 環境・使用言語 |
|---|---|---|---|
| 20XX年XX月 ～ 20XX年XX月 |
【プロジェクト内容】
【成果・実績】 |
【組織】 ●名 【役割】 2DCGグラフィッカー |
【使用ツール】 Photoshop Illustrator 【使用OS】 Windows |
| プロジェクト期間 | プロジェクト詳細・業務内容 |
|---|---|
| 20XX年XX月 ～ 20XX年XX月 |
【プロジェクト内容】
【成果・実績】 |
| 役割・チーム体制 | |
| 【組織】 ●名 【役割】 2DCGグラフィッカー |
|
| 環境・使用言語 | |
| 【使用ツール】 Photoshop Illustrator 【使用OS】 Windows |
■自己PR
1．強み
より洗練されたデザインにするためにどうしたらよいかを考え、ユーザビリティの向上や統一感の観点から変更したほうがよいと判断したものは積極的に提案するなど、クオリティの高いデザインを作成することを常に心がけています。自己満足ではなく「ユーザーにわかりやすいデザイン」を自分の中で指針としており、作成してきたデザインは依頼元や社内でも評判がよく、表彰されることもありました。
デザインに統一感を出せるよう自らキャラクターやアイテム等のイラストも制作できるといいうことも強みの1つです。
2．今後のビジョン
Webデザイナーとして、常に「何を求められているのか」を考えてデザインをしてきました。認識の齟齬を防ぐため、デザインは複数案つくる、周囲との連携を密に取りコミュニケーションロスを避けるなど、自分のデザインをより求められているものに近づけていく努力を行ってきました。
現職では業務委託であり企業の方針に深く関われず歯がゆい思いをしてきたので、今後は今までの経験を活かしてデザインの方向性に深く関わっていきたいです。
以上
無料でダウンロードしてお使いいただける職務経歴書のサンプル（記入例記載済み）をご用意しましたので、ぜひご活用ください。
合わせて読みたい
なお、こちらの職務経歴書を印刷する際の用紙サイズは、採用担当者にとって扱いやすく見やすいA4サイズがおすすめです。
職務経歴書の書き方について、ご不明な点がありましたら、お気軽にマイナビクリエイターのキャリアアドバイザーにご相談ください。採用担当者に伝わる職務経歴書になるよう、アドバイスさせていただきます。
＼ 転職のプロがあなたをサポート！ ／
Webデザイナーの職務経歴書に書くべき5つの要素と書き方
ここからはWebデザイナー向けの職務経歴書の書き方について、具体的なポイントをご紹介していきます。
Webデザイナーの職務経歴書を書く際には、以下5つの要素を盛り込みましょう。
Webデザイナーの職務経歴書に盛り込む5つの要素
- 職務要約
- 得意分野・スキル
- PC／テクニカルスキル
- 職務経歴詳細
- 自己PR
職務要約：200～300字程度で簡潔に
職務要約では、Webデザイナーとしてのキャリアを簡潔に200～300字程度で伝えることを目指します。
職務要約で情報を絞り込む際のポイントとしては、自分がやってきた経験の「事実」を中心に記載することです。売上や達成率など具体的な数字は後ほど「職務経歴詳細」で記載するため、ここでは書く必要ありません。
以下、複数回転職をしている方、転職経験が初めての方、それぞれの職務要約の例文をご紹介します。
複数回転職をしている方／職務要約の例文
Web系の制作会社○社経験した後、株式会社○○に所属し、UI/UXを意識したサイトデザイン、FireworksやPhotoshopを使用したイラスト・バナー作成、コーディングに従事しました。複数社で、企画立案や外注スタッフの管理、マネジメントの経験がございます。
転職経験が初めての方／職務要約の例文
株式会社○○入社後、○年間、Webデザイナーとしてサイトデザインを手がけました。HTML、CSSによるコーディング、Illustrator、Photoshopの使用も実務レベルで可能です。クライアントの販促に携わった経験もございます。販促物は〇〇向けに商品POPやチラシ制作等のDTP領域、CRMコンテンツの制作等のご経験がございます。
得意分野・スキル：箇条書きで見やすく
得意分野やスキルの項目は、相手がひと目で内容を把握しやすいようにするため、下記のように箇条書きがおすすめです。
【例】得意分野・スキル
■活かせる経験・スキル・得意分野
- UIを意識したサイトデザイン
- HTML/CSSを用いたコーディング
- Photoshop/Illustratorでのバナー、アイコン、イラスト作成
箇条書きの際は、「○○を意識した○○」（例：UIを意識したサイトデザイン）や「○○を用いた（使用した）○○」（例：HTML/CSSを用いたコーディング）といった書き方を意識すると、過不足なく情報を伝えることができます。
PC／テクニカルスキル：レベルも合わせて記載
PC／テクニカルスキルの項目では、担当業務、ツール、言語を記載し、さらにそれぞれの経験年数、備考を記載します。記載する項目が多いため、表を用いてすっきりとまとめるとよいでしょう。
【例】PC／テクニカルスキル
| PCスキル/テクニカルスキル | 経験年数 | 備考 | |
|---|---|---|---|
| 担当業務 | デザイン コーディング |
●年 ●年 |
|
| ツール | Photoshop Illustrator XD |
●年 ●年 ●年 |
|
| 言語 | HTML（5） CSS（3） JavaScript（iQuery） PHP |
●年 ●年 ●年 ●年 |
通常業務で使用可能、指導も可能 通常業務で使用可能、指導も可能 経験薄だが知識あり |
| PCスキル/テクニカルスキル | 経験年数 | 備考 |
|---|---|---|
| 担当業務 | ||
| デザイン コーディング |
●年 ●年 |
|
| ツール | ||
| Photoshop Illustrator XD |
●年 ●年 ●年 |
|
| 言語 | ||
| HTML（5） CSS（3） JavaScript（iQuery） PHP |
●年 ●年 ●年 ●年 |
通常業務で使用可能、指導も可能 通常業務で使用可能、指導も可能 経験薄だが知識あり |
なお、備考欄には「具体的な経験/習得レベル」「関連する取得資格」などについて記載します。また指導の経験がある場合は、その事実を記載することで、高いスキルを持つ証明となり、人材育成に力を入れる企業であれば大きなアピールになります。
職務経歴詳細：会社ごとに抜け漏れがないよう注意
職務経歴書の中盤では、職務経歴詳細を記載します。これまでに勤務した会社ごとに分けて、従事した業務内容、所属していた組織とそこでの役割、さらに業務で使用したツールや言語、使用パソコンのOSについても記載しましょう。
【例】職務経歴詳細
株式会社△△△△ [在籍期間：20XX年XX月～20XX年XX月]
事業内容：コンシューマーゲーム開発
従業員数：●●名
資本金：●●万円
雇用形態：正社員
| プロジェクト期間 | プロジェクト詳細・業務内容 | 役割・チーム体制 | 環境・使用言語 |
|---|---|---|---|
| 20XX年XX月 ～ 20XX年XX月 |
【プロジェクト内容】
【成果・実績】 |
【組織】 ●名 【役割】 2DCGグラフィッカー |
【使用ツール】 Photoshop Illustrator 【使用OS】 Windows |
| プロジェクト期間 | プロジェクト詳細・業務内容 |
|---|---|
| 20XX年XX月 ～ 20XX年XX月 |
【プロジェクト内容】
【成果・実績】 |
| 役割・チーム体制 | |
| 【組織】 ●名 【役割】 2DCGグラフィッカー |
|
| 環境・使用言語 | |
| 【使用ツール】 Photoshop Illustrator 【使用OS】 Windows |
『プロジェクト詳細・業務内容』は「プロジェクト内容」「担当業務」「成果・実績」の3項目に分けると採用担当者へ具体的に情報を伝えることができます。「成果・実績」の項目では、「チームに対してどのような貢献をしたか」などを記載し、高く評価されたり、表彰されたりした場合は、それについても伝えましょう。
『役割・チーム体制』の「組織」「役割」の項目はWebデザイナーが記載を忘れてしまいがちな箇所ですが、ここで携わったプロジェクトの詳細を伝え、リーダー経験やマネジメント経験などを記載しましょう。リーダーやマネジメントの経験がなくても「業務を共に遂行するフロントエンドとのやり取りを円滑にするよう心がけた」といったアピールできます。
たとえば、リーダーやマネジメントの経験がある場合、組織／役割の項目を記載することで、どのくらいの規模のチームの管理をしたかが、ひと目でわかるようになります。特にマネジメント経験は、Webデザイナーとマネージャーの両方の素質を併せ持つ「プレイングマネージャー」のアピールができ、マネジメント経験のない求職者と差別化が期待できます。
Webデザイナーの職務経歴は、一般職種に比べると細かい記載が必要ですが、表を使い、情報を箇条書きにすることで見やすくできます。作品を紹介する際は、キャプチャ画像等でも構いませんが、制作に携わったWebサイトのURLを貼り付けたほうが、採用担当者が実際の作品を見ることができるので、成果物としてより伝わりやすくなるでしょう。
また、職務経歴で制作に関わった作品を紹介する際には、著作権や守秘義務についてしっかりと確認のうえ、掲載してください。
合わせて読みたい | 作品の著作権・守秘義務についてさらに知りたい方はこちら
自己PR：「強み」と「今後のビジョン」をセットに
自己PRでは「（Webデザイナーとしての自身の）強み」「今後のビジョン」を分けて記載します。記載ボリュームは、自己PR全体で、A4サイズで半分くらいの分量を目安とするとよいでしょう。
【例】自己PR
■自己PR
1．強み
より洗練されたデザインにするためにどうしたらよいかを考え、ユーザビリティの向上や統一感の観点から変更したほうがよいと判断したものは積極的に提案するなど、クオリティの高いデザインを作成することを常に心がけています。自己満足ではなく「ユーザーにわかりやすいデザイン」を自分の中で指針としており、作成してきたデザインは依頼元や社内でも評判がよく、表彰されることもありました。
デザインに統一感を出せるよう自らキャラクターやアイテム等のイラストも制作できるといいうことも強みの1つです。
2．今後のビジョン
Webデザイナーとして、常に「何を求められているのか」を考えてデザインをしてきました。認識の齟齬を防ぐため、デザインは複数案つくる、周囲との連携を密に取りコミュニケーションロスを避けるなど、自分のデザインをより求められているものに近づけていく努力を行ってきました。
現職では業務委託であり企業の方針に深く関われず歯がゆい思いをしてきたので、今後は今までの経験を活かしてデザインの方向性に深く関わっていきたいです。
なお、自己PRを書く際、情報を整理せず、どうしても入社したいという強い気持ちから感情を優先した書き方をすると、事実（ファクト）がわかりづらい内容となり、採用担当者に「客観的に物事が見れていない」との印象を与える恐れがあります。
そこで、これらに注意しつつ、以下「10年間のキャリアを持つWebデザイナー」を例に「強み」「今後のビジョン」の書き方を、例文とともにご紹介します。
「強み」の例文
Webデザイナーの10年間のキャリアの中で○つのWebサイトのデザインを手がけました。中でも××社のWebサイトのアートデザインでは□□賞を受賞しました。最近ではUI/UXに優れたサイトを目指して試行錯誤しています。Webデザイン以外では、ECサイトの運営に携わったこともあり、コンバージョン率を○％改善しました。また、HTML、CSS、JavaScriptのスキルを活かして、コーディング業務も一部担当しておりました。
ポイント
強みでは、数字や受賞歴などの出来事などを盛り込むと具体的な内容になります。ただし、Webデザイナー以外にはわかりにくい専門用語や技術用語を多く使用すると、採用担当者が理解できない可能性もあるため、表現を噛み砕いて書くようにしましょう。
「今後のビジョン」の例文
Webデザイナーとして、ユーザーやクライアントの要望にしっかり耳を傾けていきたいと思います。そして、他のクリエイターと働く中で、刺激を受けて、成長しながら、業務に対して最大限のパフォーマンスを出すことにチャレンジしていきたいです。貴社に採用された際は、着実に実績を積み重ねて行くことが近々のビジョンとなります。
ポイント
今後のビジョンにあまり具体的な内容を記載すると、企業とのミスマッチが発生する恐れがあるため注意が必要です。
1つ目に気をつけたいのは「願望のミスマッチ」です。「Webディレクターになりたい」など、具体的な願望を記載してもた場合、それを叶えることが難しい企業から、書類選考の段階で落とされる恐れがあります。
2つ目に気をつけたいのは「業界的なミスマッチ」です。たとえば、応募先企業の主な事業がBtoBなのに「消費者に喜ばれるデザイナーになりたい」などBtoC寄りのビジョンを書くと、書類選考の段階で落とされる恐れがあります。
合わせて読みたい
Webデザイナーの職務経歴書でよくある質問5選
ここからはWebデザイナー向けの職務経歴書の書き方についてマイナビクリエイターによく寄せられる質問に回答します。
Q.1これまでの職務経歴は、すべて記入したほうがいい？
複数回転職している方で、すべてを細かく記載すると膨大な量になる場合は、記載する内容を絞り込みます。具体的には、直近で所属していた企業、もしくは志望企業の業務内容と近い企業の、実務内容を中心に記載しましょう。
反対に、転職経験が初めての方は、内容が薄くなってしまわないように注意しましょう。仕事内容、携わった役割、プロセス（企画から入っているのか、デザインだけなのか、クライアントとの打ち合わせはあるのか）、チーム体制、スキルセット（各種ソフト、コーディング）などを可能な限り書くようにしてください。
Q.2実績が多い場合は、どのくらい記載したほうがよいの？
職務経歴書に掲載する実績の数は、1社につき多くても「5～7作品」が目安です。それ以上、記載しても採用担当者が最後まで目を通さない可能性があります。ただやみくもに、数を挙げるのではなく、志望企業にとって即戦力のアピールに繋がるような実績を厳選するようにしましょう。
また、作品のビジュアルは、一緒に提出するポートフォリオで見せることができますので、添付は不要です。Webサイトのリンクなどを貼るだけで充分でしょう。
Q.3（スクール卒で）未経験だけど、今までの別職種の経験を書いたほうがよいの？
別職種の経験を書く場合は、できるだけWebデザイナーの業務に近い経験、あるいは志望企業で活かせそうな経験を書いたほうがアピールに繋がるでしょう。
「Webデザイナーとして採用された場合、何ができるか」を採用担当者にイメージしてもらうことが重要です。
Q.4Webデザイナーが職務経歴書を作るツールって何が適切なの？
Webデザイナーだからといって、特別なツールは不要です。
職務経歴書を作るツールに指定はありませんが、おすすめなのはWordやExcelです。これは、WordやExcel形式の職務経歴書テンプレートがインターネット上で入手しやすいためです。
WordやExcel形式の職務経歴書テンプレートはそのまま使用することもできますし、構成を変えたい場合なども簡単に編集することができます。
Q.5職務経歴書はおしゃれな方がいい？
職務経歴書は「おしゃれである」というよりも「見やすく」「わかりやすい」ことのほうが重要です。
おしゃれな職務経歴書だからといって、転職活動が有利になるわけではありません。重要なのは「見やすく」「わかりやすい」体裁で職務経歴書を作成し、その内容を採用担当者にしっかりと伝えることです。
まとめ
職務経歴書を作成する際は、Webデザイナーとしてのアピールポイントや想いがしっかりと伝わるように、採用担当者側からの見やすさを意識しましょう。
なお、実際に職務経歴書を作り始めると不明点・疑問点が出てきたり「もっとよい内容にしたい」と思う方も多いことでしょう。転職エージェント「マイナビクリエイター」は職務経歴書の添削もおこなっており、客観的な視点でのアドバイスによる職務経歴書の作成が可能です。職務経歴書の添削によって、些細なミスや見落としを避けることができるほか、面接対策等も行なっており、万全の準備で選考に臨めます。
また、転職エージェントには、数多くの求職者の職務経歴書を見てきたCAが在籍しており、応募先企業ごとに最適な職務経歴書を作成することも期待できます。
ぜひ今回の記事を参考に、Webデザイナーとしてのあなたならではの魅力が伝わる職務経歴書を完成させましょう。
