Webデザイナーの職務経歴書テンプレートと書き方ガイド

「Webデザイナー」職務経歴書の書き方のポイント
「Webデザイナー」職務経歴書のサンプル見本
「Webデザイナー」の職務経歴書テンプレート（Word形式）をダウンロード
職務経歴書や履歴書がかんたんに作れる便利ツールをご紹介
ほかの「クリエイティブ」の職務経歴書テンプレートを見る
パソコンや語学、Webのスキルチェックシート

「Webデザイナー」職務経歴書の書き方のポイント

現在または直近の職種が「Webデザイナー」の人や、これまでの職歴の中で最もアピールしたい職種が「Webデザイナー」という人のために書き方を解説します。

「Webデザイナー」職務経歴書の書き方のポイント(まとめ)

1デザイナーとしてのセンスが一番大きな強みです。これまでの制作物を見せるために、職務経歴書とは別にポートフォリオを用意しましょう。
2職務経歴には、プロジェクトごとに概要や規模、担当業務、使用可能なツールなどを整理してください。成果や規模が大きい案件はどのような課題をどのようなデザインで解決したのか詳しく記載しましょう。
3テクニカルスキルで使用経験のあるデザインソフトや、PC言語をまとめてください。資格は持っているものをすべて書き出しましょう
4自己PRでは、今までに担当した案件のエピソードをもとに、どのようなことを考えてそのデザインに仕上げているのかを伝えてください。具体的な成果を書けなくても、どんな反応があったのかを書き添えるのがおすすめです。

ポートフォリオ

Webデザイナーは今までにデザインした成果物そのものが強みになるので、どんなサイトやページを作ったかを伝えることが大切です。そのためには、職務経歴書のほかにデザイナーとしてのセンスやレベルを示すことができるポートフォリオをぜひ用意してください。実務以外の作品を載せてもかまいません。

職務経歴

一方、職務経歴ではプロジェクトごとに区切って概要と担当業務、メンバー、使用ツールを明確にするのが分かりやすいでしょう。空白の期間は作らないよう、関わったプロジェクトはすべて書き出します。

数が多くなるようであればアピールしたいものだけ抜き出してもよいですし、記述内容に強弱をつけてもよいです。数を減らす場合は抜粋であることと、xx年間でxx件制作と全体の経験数を書き添えてください。

職務経歴で重要なのはプロジェクトの概要と規模です。メンバー数や受注金額が書いてあるとどのくらい大きな案件に携わったのかが明確になります。また、デザインしたサイトのURLもしくはページのキャプチャを貼りつけて、採用担当者がサイトのイメージをつかめるようにしておきましょう。

成果が出たり、規模が大きかったりしてアピールしたい案件は概要で意図・目的、業務内容・取り組み、成果・実績などの項目に分けて、どのように考えて行動したかを記載すると、マーケットを意識した視点を持てているとプラスの評価を得られることがあります。

結果については、具体的な数字があれば印象に残りやすいですが、事業会社側でないと分からないことが多いので、別案件の受注につながったエピソードなど顧客の反応を盛り込みましょう。

テクニカルスキル

テクニカルスキルでは使用した経験があるソフトや言語をすべて記載し、どのような業務でどのくらいの期間使用してきたか、具体的に書いてください。転職先でも活かせるスキルを持っているか、採用担当者が判断する基準になります。資格は特別必要なものはありませんが持っているものはすべて書きましょう。

あわせて読みたい）転職成功に近づくポートフォリオの作り方

自己PR

自己PRでは、デザイン制作の業務の中でどのような課題を設定し、その解決策としてどんなデザインを提案してきたかを伝えましょう。数字としての成果が書けるとよいですが、難しい場合は何を意識してどのように工夫したかを明確にすることがポイントです。

事業会社への転職を希望する場合はマーケティング的な素養を求められることがあります。数値での分析結果を基にしてデザインを改善した経験や、将来的にマーケティングも担えるデザイナーになりたいなどの志向を伝えてもよいでしょう。

dodaオリジナルのツール「レジュメビルダー」

「職務経歴書ってどんなことを書いたらいいか分からない…」「とりあえず自分に合ったフォーマットが欲しい…」、そんな人はdodaの職務経歴書作成ツール「レジュメビルダー」がおすすめです。

「Webデザイナー」職務経歴書のサンプル見本

職務経歴書の体裁や書くべき項目を下図のサンプルで確認してみましょう。サンプルの下にダウンロードボタン（Word形式）があります。

職務経歴書

20××年×月×日現在
氏名：○○　○○

■職務要約

株式会社○○○○○に入社後、約x年間、WebデザイナーとしてECサイトやコーポレートサイトなどのサイト・UIデザイン、イラスト制作を担当。主にキャンペーンLPやバナー制作、HTML・CSSのコーディングに従事しました。デザインでは主にPhotoshopを使用し、アイコンやロゴなど細かなブラッシュアップにはIllustratorを使用。営業やディレクターからの分析結果を踏まえ、デザインによる課題解決を意識して業務に取り組んでいます。

■ポートフォリオURL

https://○○○○○○.jp
※グラフィックの実績は別紙に添付

■活かせる経験・知識・技術

・Webサイトデザイン経験
・ECサイト運用（楽天、Amazon）
・SNS運用業務（Instagram や TikTok の投稿）
・要件のヒアリング経験、顧客への提案経験
・販促物、ポスターの制作ディレクション
・制作ディレクション、進行管理経験

■テクニカルスキル

ツール
	Photoshop	x年xカ月	実務レベル
	Illustrator	x年xカ月	実務レベル
	XD	x年xカ月	実務レベル
	Figma	x年xカ月	実務レベル
	Dreamweaver	x年xカ月	実務レベル
	InDesign	x年xカ月	実務レベル
	WordPress	x年xカ月	実務レベル
	Premiere Pro	x年xカ月	実務レベル
言語
	HTML	x年xカ月	実務レベル
	CSS	x年xカ月	実務レベル
	JavaScript	x年xカ月	知識レベル
	PHP	x年xカ月	知識レベル

■過去携わったプロジェクト実績

＜株式会社○○○○○様のコーポレートサイト作成＞

http://〇〇〇〇〇〇〇〇.jp/

＜株式会社△△△△様のコーポレートサイト作成＞

http://〇〇〇〇〇〇〇〇.jp/

■職務経歴

※下記は手掛けた案件の抜粋です。xx年間でxx件のデザインを担当いたしました。

20xx年xx月～現在　　株式会社○○○○○
事業内容：Webプロモーション戦略立案/クリエイティブ開発/マーケティング事業資本金：xxx億円（20xx年xx月）　売上高：x億x千万円（20xx年xx月）従業員数：xxx人　上場：未上場	正社員として勤務

20xx年xx月～20xx年xx月　／格安SIMのコーポレートサイト制作	担当業務／メンバー
【プロジェクト概要】 ■株式会社〇〇〇〇〇（http://〇〇〇〇〇〇〇〇.jp/）■案件規模：約xxx万円情報が整理されていないため、料金体系やシステムが分かりにくく、電話による問い合わせが発生していました。情報を整理しつつ初心者にもやさしいサイトにリニューアルしました。【意図・目的】 ① 欲しい情報がきちんと格納された設計でコンバージョンまでスムーズな導線を敷く。 ② 硬くて難しい印象を和らげて初心者でも入りやすい雰囲気に。【業務内容・取り組み】 ① 料金、機能など情報ごとのタブを設定。文字に強弱もつけて情報に優先度をつけました。 ② イラストを多用してビジュアルで内容が理解できるように変更。【成果・実績】 ① CVRがxx％⇒xx％に改善。問い合わせ件数も約x割減ったとご報告いただきました。 ② ターゲットに設定したシニア層の流入数がアップ。 ③ クライアントにも効果にご満足いただき、別案件の受注にもつながりました。【使用ツール】Adobe Photoshop、Adobe Illustrator、HTML、CSS	【担当業務】サイトデザイン UIデザインイラスト制作コーディング【メンバー】計xx名営業x名プロデューサーx名ディレクターx名デザイナーx名エンジニアx名

20xx年xx月～20xx年xx月　／格安SIMのコーポレートサイト制作

担当業務／メンバー

【プロジェクト概要】
■株式会社〇〇〇〇〇（http://〇〇〇〇〇〇〇〇.jp/）■案件規模：約xxx万円
情報が整理されていないため、料金体系やシステムが分かりにくく、電話による問い合わせが発生していました。情報を整理しつつ初心者にもやさしいサイトにリニューアルしました。

【意図・目的】
① 欲しい情報がきちんと格納された設計でコンバージョンまでスムーズな導線を敷く。
② 硬くて難しい印象を和らげて初心者でも入りやすい雰囲気に。

【業務内容・取り組み】
① 料金、機能など情報ごとのタブを設定。文字に強弱もつけて情報に優先度をつけました。
② イラストを多用してビジュアルで内容が理解できるように変更。

【成果・実績】
① CVRがxx％⇒xx％に改善。問い合わせ件数も約x割減ったとご報告いただきました。
② ターゲットに設定したシニア層の流入数がアップ。
③ クライアントにも効果にご満足いただき、別案件の受注にもつながりました。

【使用ツール】Adobe Photoshop、Adobe Illustrator、HTML、CSS

【担当業務】
サイトデザイン
UIデザイン
イラスト制作
コーディング

【メンバー】
計xx名
営業x名
プロデューサーx名
ディレクターx名
デザイナーx名
エンジニアx名

20xx年xx月～現在　／大手化粧品会社ECサイトのキャンペーンLP・バナー制作	担当業務／メンバー
【プロジェクト概要】 ■株式会社〇〇〇〇〇（http://〇〇〇〇〇〇〇〇.jp/）■案件規模：約xxx万円大手化粧品会社ECサイト内のLPは直帰率が高く、コンバージョンにつながっていませんでした。ユーザーの潜在ニーズに沿ったデザインに刷新することでCVRの改善を狙いました。【業務内容・取り組み】広告からの流入ユーザーの意図をくんだLPのデザインを担当。ヘッドラインのビジュアル・キャッチコピーの改修やリンクボタン（デザイン・文言含む）のABテストを実施。【成果・実績】 ①CVRがxx％⇒xx％に改善。顧客からの評判も良く、追加案件の受注につながりました。 ②CVRがxx％⇒xx％に改善。顧クライアントからお褒めの言葉をいただき、別企業様のご紹介をいただきました。【使用ツール】Adobe Photoshop、Adobe Illustrator、HTML、CSS	【担当業務】サイトデザインイラスト制作コーディング【メンバー】計xx名営業x名プロデューサーx名ディレクターx名デザイナーx名コーダーx名エンジニアx名

20xx年xx月～現在　／大手化粧品会社ECサイトのキャンペーンLP・バナー制作

担当業務／メンバー

【プロジェクト概要】
■株式会社〇〇〇〇〇（http://〇〇〇〇〇〇〇〇.jp/）■案件規模：約xxx万円
大手化粧品会社ECサイト内のLPは直帰率が高く、コンバージョンにつながっていませんでした。ユーザーの潜在ニーズに沿ったデザインに刷新することでCVRの改善を狙いました。

【業務内容・取り組み】
広告からの流入ユーザーの意図をくんだLPのデザインを担当。ヘッドラインのビジュアル・キャッチコピーの改修やリンクボタン（デザイン・文言含む）のABテストを実施。

【成果・実績】
①CVRがxx％⇒xx％に改善。顧客からの評判も良く、追加案件の受注につながりました。
②CVRがxx％⇒xx％に改善。顧クライアントからお褒めの言葉をいただき、別企業様のご紹介をいただきました。

【使用ツール】Adobe Photoshop、Adobe Illustrator、HTML、CSS

【担当業務】
サイトデザイン
イラスト制作
コーディング

【メンバー】
計xx名
営業x名
プロデューサーx名
ディレクターx名
デザイナーx名
コーダーx名
エンジニアx名

20xx年xx月～20xx年xx月　／地方銀行のサポートページ改修	担当業務／メンバー
【プロジェクト概要】 ■株式会社〇〇〇〇〇（http://〇〇〇〇〇〇〇〇.jp/）■案件規模：約xxx万円地方銀行のインターネットバンキングシステムの利用について電話での問い合わせが多く、人的工数を削減するためにチャットボットの設置およびサポートページをリニューアルしました。【業務内容／成果・実績】幅広い年齢層の人が利用するため、ひと目でチャットと分かる立体的なデザインにこだわりました。また、FAQページでは丸文字を使用し、やわらかな色使いを意識。誰でも気軽に利用できるイメージを実現し、公開後には電話での問い合わせ件数が減り、顧客に満足していただけました。【使用ツール】Adobe Photoshop、Adobe Illustrator、HTML、CSS	【担当業務】 UIデザインイラスト制作コーディング【メンバー】計xx名営業x名プロデューサーx名ディレクターx名デザイナーx名エンジニアx名

20xx年xx月～20xx年xx月　／地方銀行のサポートページ改修

担当業務／メンバー

【プロジェクト概要】
■株式会社〇〇〇〇〇（http://〇〇〇〇〇〇〇〇.jp/）■案件規模：約xxx万円
地方銀行のインターネットバンキングシステムの利用について電話での問い合わせが多く、人的工数を削減するためにチャットボットの設置およびサポートページをリニューアルしました。

【業務内容／成果・実績】
幅広い年齢層の人が利用するため、ひと目でチャットと分かる立体的なデザインにこだわりました。また、FAQページでは丸文字を使用し、やわらかな色使いを意識。誰でも気軽に利用できるイメージを実現し、公開後には電話での問い合わせ件数が減り、顧客に満足していただけました。

【使用ツール】Adobe Photoshop、Adobe Illustrator、HTML、CSS

【担当業務】
UIデザイン
イラスト制作
コーディング

【メンバー】
計xx名
営業x名
プロデューサーx名
ディレクターx名
デザイナーx名
エンジニアx名

20xx年xx月～20xx年xx月　／弁護士事務所のサイト新規制作	担当業務／メンバー
【プロジェクト概要】 ■株式会社〇〇〇〇〇（http://〇〇〇〇〇〇〇〇.jp/）■案件規模：約xxx万円弁護士事務所開設に際して新しく公式サイトを制作しました。【業務内容／成果・実績】堅実で爽やかなイメージを出したいという顧客の要望に合わせてロゴやトップイメージを作成しました。寒色をメインにすっきりとしたデザインに仕上げ、事例集などユーザーが求める情報へも適切なリンクを設定し、顧客から高評価をいただきました。【使用ツール】Adobe Photoshop、Adobe Illustrator、HTML	【担当業務】サイトデザインコーディング【メンバー】計xx名ディレクターx名デザイナーx名エンジニアx名

20xx年xx月～20xx年xx月　／弁護士事務所のサイト新規制作

担当業務／メンバー

【プロジェクト概要】
■株式会社〇〇〇〇〇（http://〇〇〇〇〇〇〇〇.jp/）■案件規模：約xxx万円
弁護士事務所開設に際して新しく公式サイトを制作しました。

【業務内容／成果・実績】
堅実で爽やかなイメージを出したいという顧客の要望に合わせてロゴやトップイメージを作成しました。寒色をメインにすっきりとしたデザインに仕上げ、事例集などユーザーが求める情報へも適切なリンクを設定し、顧客から高評価をいただきました。

【使用ツール】Adobe Photoshop、Adobe Illustrator、HTML

【担当業務】
サイトデザイン
コーディング

【メンバー】
計xx名
ディレクターx名
デザイナーx名
エンジニアx名

■PCスキル

Word ／社内打ち合わせ用の資料作成、社外プレゼン資料作成が可能なレベル
Excel ／関数を組み合わせての数式作成が可能なレベル
PowerPoint ／社内打ち合わせ用の資料作成、社外プレゼン資料作成が可能なレベル

■資格

普通自動車第一種運転免許／ 20xx年xx月取得
色彩士検定3級／ 20xx年xx月取得

■自己PR

＜デザイナーとしての向上心＞

納品後の分析結果をデザインに反映させ、主観的な良し悪しではなくユーザーの求めているデザインを追求することを心掛けています。現在の会社ではサイト公開後の効果検証をあまり行っていませんが、私は可能な限り顧客に実装後の結果をフィードバックしていただくよう積極的に声をかけていました。研鑽を積んだ結果としてパートナー企業からほかの案件で追加受注をいただくことも多く、今後もマーケティング視点を持ったデザイナーとして貢献したいと考えています。

＜営業・ディレクターとの調整力＞

顧客企業からは短い期間での納品を求められることも少なくありません。基本的には決められた期日から逆算してタスクに落とし込み、間に合わせるように努めていますが、デザインの知見がない顧客の場合、納品までの時間が極端に短いこともあります。そういった場合は、自社の営業・ディレクターを説得して質を担保するために最低限必要な日数を確保しています。どうしても短納期を要求された時はできることとできないことを事前に伝え、顧客の了承を得た上で納品期日を守り、トラブルを回避しました。

以上