未経験からWebデザイナーに転職するには？仕事内容とやりがい・転職実現へのアプローチ法
［最終更新日］2024/09/11
若い年代だけでなく、「Webデザイナーになりたい」という想いを持たれる方は近年増えてきています。
実際、Webデザイナーを求める企業は、IT・Web系の会社のみならず、「自社製品・サービスをインターネット上でアピールしたい」といった需要から、非常に多くなってきています。
-
専門知識が必要なWebデザイナーへの転職は、事前の準備が肝心です。
今回は、「未経験からWebデザイナーに転職したい」といった方に、Webデザイナーの仕事の概要、求められるスキル、転職前に準備しておきたいことを紹介していきます。
目次
１）Webデザイナーの仕事内容
Webデザイナーの仕事は、主に以下のWeb制作を担当します。
- サイトデザインの制作
- ページデザインの制作
- 挿入図やグラフ、バナーなどの画像の制作
- イラスト制作
- コーディング
業務範囲は企業によって異なり、上記５項目のすべて関わるケースもあれば、「サイトデザイン・ページデザインの制作」や「挿入図やグラフ・バナーなどの制作」が主な業務になるケースもあります。
職場によっては、Webデザイナーはデザインのみ行いコーディングはマークアップエンジニアやHtmlコーダーが担当することもあります。
ただし、だからといってその場合もWebデザイナーがコーディングをまったく度外視して業務することはありません。
コーディング担当が業務しやすい形でWebデザインを手掛けていくことも、Webデザイナーに求められることのひとつです。
具体的な仕事内容について、見ていきましょう。
サイトデザイン・ページデザインの制作
サイトデザイン・ページデザインの制作は、Webページの基本デザインまたはページそのものを作る仕事です。
具体的にどのような工程になるのかについて、当サイト「みんなの転職体験談」を例に説明してみましょう。
みんなの転職「体験談」。のページデザイン依頼書（一部）
例えばみんなの転職「体験談」。では、とあるページのデザイン指示書を以下のように制作しました（※一部のみを抜粋しています）。
ちなみに、こちらの制作書はExcelで創られています。
実際に出来上がったページ（一部）
実際に出来上がったページは、現在の「みんなの転職「体験談」。」Webサイトから直接確認できますので、興味がありましたら、チェックしてみてください。↓※画像をクリックすると実際のページに遷移します。
指示書からWebページに表示される迄の基本の流れとしては、以下になります。
- 全体のページデザインをPhotoshopなどの画像編集ソフトで作成
- イラストが含まれる場合は、その分はIllustratorなどのイラスト制作ソフトで作成
- １～２の内容を元に、Webページで表示できるようにHtml、CSS、JavaScriptなどのプログラム言語を使って構築していく
──つまり、ここでのWebデザイナーの仕事としては、PhotoshopやIllsutratorといった画像編集ソフト、イラスト制作ソフトはじめ、Html、CSS、JavaScriptといったプログラムの構築まで、幅広い業務が求められてくるということです。
その他、ページが完成されるまで依頼元（ディレクターやクライアント）に途中状態のチェックをしてもらいます。完成後に「イメージと全然違う」と言われないように、段階ごとに共有していくことが重要です。
挿入図やグラフ、バナーなどの画像の制作
Webデザイナーは、サイト・ページデザイン制作だけでなく、部分に特化した制作依頼も多くあります。
特に、最近では自社商品・サービスをインターネット広告で紹介するWebバナーを、Webデザイナーに外注で制作依頼する企業も多いです。
挿入図やWebバナーの例
図やバナー上で使用される文章（キャッチコピーやリード文など）や写真画像は、主に指示側のディレクターやクライアントから素材として渡されるケースが多いです。
Webデザイナーはそれら素材を組み合わせて、一つの画像（「クリエイティブ」と呼ばれることがあります）を制作していきます。
制作の工程で使用されるツールは、Photoshopなどの画像編集ソフトがメインです。
イラスト制作
Webデザイナーで「イラスト制作」まで担うケースはそれ程多くありませんが、イラスト制作自体の需要はかなり高まってきていますので、併せて紹介しておきましょう。
みんなの転職「体験談」。のイラスト制作依頼書（一部）
このサイト「みんなの転職「体験談」。」では、TOPページにサイトのイメージ・印象を持ってもらう為のイラストの制作をプロのイラストレータさんに依頼しました。依頼書は、以下のような感じです。
（※ はじめにイラストレータさんの絵のテイストであったり、サイトの全体イメージは伝えています。また、以下依頼書は一部を抜粋したものです。）
| イメージ（ラフ） | 指示書 |
|---|---|
 | 【20代ビジネスパーソンの電車風景】 20代社会人男女が6～7人いる。 手前に経っている人、奥に座っている人がいる。 《イメージ》
|
 | 【30代ビジネスパーソンの電車風景】 30代社会人男女が6～7人いる。 手前に経っている人、奥に座っている人がいる。 《イメージ》
|
実際に出来上がったページ（一部）
※ イラストがWebサイト上でどう使われているかは、本サイトのトップページをご覧ください。
イラスト制作をする場合は、Illustratorなどのイラスト制作ソフトを使います。
また、イラスト制作も途中段階でのチェック作業はふんだんに入ります（大体、ラフ画、線画、色塗りと大きく3つのフェーズに分けてチェックフェーズを持ちます）。
イラスト制作は通常イラストレータの仕事になるため、Webデザイナーが手掛けることはあまりありません。
ですが、もし「自分もある程度イラストが描ける」という場合は、積極的にその点もアピールしていくと良いでしょう。
なぜなら、「イラストを描ける」という人は多くの場合社内にはおらず、大抵は「社外発注」となるケースが多いからです。
ディレクターからすると、依頼を社内で完結できた方がディレクション的にもコスト的にもスムーズになりますので、イラストを描けるWebデザイナーは重宝される傾向にあります。
あわせて読みたい
-
- 未経験からイラストレーター正社員に転職するには？仕事内容と必要なスキル・準備すること
- イラストレーターとしてのスキルを生かして転職したい——。このように考えたことはありませんか？実務未経験からイラストレーターとして正社員を目指す方法について解説します。イラストレーターの年収やキャリアパスについても触れているので、ぜひ参考にしてください。...
Webデザイナーの仕事の流れ
制作内容は様々あれど、Webデザイナーの仕事の流れの大枠は以下のようになります。
１） 社内ディレクターまたはクライアントから指示・依頼内容を受ける
社内ディレクター、または直接クライアント（顧客）から、制作してほしい内容の依頼を受けます。
Webサイト全般のデザインなど、制作範囲が大きい場合は通常「仕様書」や「設計書」が渡されます。
Webデザイナーはこの際に、指示・依頼内容を正確に理解し、その他納期や途中確認（チェックなど）の進め方を確認し、依頼者と意思の齟齬が無いようにします。
２） 制作スケジュールを立てる
Webデザイナーのほうで制作スケジュールを立てます。
完成するまでの工程を整理し、途中依頼者とどのタイミングでチェック・確認していくかもスケジュールに落とし込んでいきます。
３） デザイン制作
デザイン制作フェーズです。
一定の段階ごとに、依頼者（社内ディレクターやクライアント）に進捗状況を確認してもらい、修正事項が無いかを見ていきます。修正依頼があった場合は、対応します。
４）コーディング・確認作業
デザイン制作の後は、コーディング（実装）を行います。
実装後は、実際にPCやスマホで表示を確認し、必要に応じて修正・調整を行います。
５） 納品
依頼者から「これで問題ありません」とOKをもらえたら、制作完了です。
完了後は、依頼者から指定された形式（ファイル形式であったり、各画像のサイズ・大きさなど）で成果物を提出することがあります。 特に重要となってくるのが、１）の「指示内容の確認」フェーズです。どんなにスキルのあるWebデザイナーであっても、依頼元と認識がずれていたら、満足してもらえる成果物を制作するのは不可能です。
初回と各フェーズにて、しっかりと依頼者とコミュニケーションを取りながら、相手の真に求めるニーズをくみ取りながら、デザイン制作をしていく──といったイメージです。
２）Webデザイナーのやりがい・魅力
Webデザイナーの仕事は、デザインという形で実際に成果物が目に見えやすいこともあって、やりがいも感じられやすい職業と言えるでしょう。
具体的に、どんなときに「Webデザイナーをやっていてよかった」と感じられるようなやりがい・魅力を感じているのか、代表的なポイントを3点、紹介しましょう。
作品を世の中に発信していける
Webデザイナーのやりがいでまず挙げられるのは、「クリエイターとしての働き方」です。
クリエイターは、自身が思っていること、感じていることを「作品」として形にし、世の中に出していけます。そして、その行為自体を大きなやりがいを感じられる人こそが、クリエイターたる所以とも言えます。
ただし、クリエイターはアーティストとは違います。「自分が思うものをそのまま作る」のではなく、「誰のためのデザインか」を考え、クライアントやエンドユーザーのことをしっかり見据えて、形にしていくことが大切です。
そのうえで、依頼してくるディレクターや社外のクライアントから、「彼らの目的を達成し、最大限満足してもらえるためにはどうすればよいのか」を熟考し、最適な形でアウトプットしていくことがWebデザイナーの役目であり、そして腕の見せ所でもあります。
新しい感性・視野を感じられる機会が多い
Webデザイナーは、「デザインが、それを観る人々の感情にどのような変化を与えるか」という点に向き合っていきます。そのためには、豊かな感性や人間性もまた求められるでしょう。
また、デザインという言語化できない領域と向き合っていく機会は、人として「新しい感性・視野」を感じる機会にも繋がります。
そしてそれは、自らの人生をより味わいのある、豊かにしていく行為とも直結していくでしょう。
デザイナーとしての向上・スキルアップを感じられる
「自身のデザインスキルをどんどん高めていきたい」という気持ちを強く持っている人は、Webデザイナーを主業務とすることによって、その要望はおのずと叶えていけるでしょう。
もちろん、Webデザイナーの仕事は簡単なものではなく、「なかなか良いデザインが生まれてこない」であったり、「クライアントの要求レベルが高い」など、悩むことや苦しいことの多いでしょう。ですが、そういった悩みや苦しみ自体が、あなたのデザイン力を高めていくきっかけにもなるのです。
また、Webデザイナーは、独立して自身で会社を興したり、フリーランサーとして活躍する人も多いです。
Webデザイナーを極めていく道のりは、同時にこれから先の未来や夢を切り開いていくことにも繋がっていく──ということですね。
デザイナーとしての向上・スキルアップが、同時に将来の可能性が大きく広がっていくこともまた、Webデザイナーのやりがい、魅力とも言えそうです。
３）Webデザイナーに転職する際に、必須となるスキル・条件は？
デザイン・レイアウトの基本知識は押さえておくのがベスト
- 「誰のためのデザインか」を常に念頭に入れる。
- 基本的なグリッド（レイアウトの規則性）を意識する。
- カラーは基本多く使いすぎない。ベースカラー、メインカラー、アクセントカラー＋αで4色前後を目指す。
- それぞれの色が与える印象や、補色（対立する色彩）関係を理解しておく。
- リーダビリティ（可読性）とレジビリティ（明瞭性）を意識したデザイン・レイアウトを意識する。
- 余白を効果的に使う。
- 文字を配置するときはカーニング（文字間のスペースを調整すること）を意識する。
- 行間隔・文字間隔に読みやすさおよび規則性を持たせる。
上記はデザイン・レイアウトについて考えていく際に基本となる考え方の一部です。
「初めて聞いた」という項目があったり、「聞いたことの無い単語が入っている」という人は要注意かもしれません。
これまで「なんとなく」であったり、感性の赴くままにデザイニングをされてきた、という人は一度書籍などを通してデザイン・レイアウトの基本知識は押さえておくのが良いでしょう。
Photoshop、illustratorはじめ、グラフィック系ソフトのマスターは必須
Webデザイナーの多くは業務用ツールとしてAdobe製品の「Photoshop」「illustrator」を使用します。
その他、業務内容によって「ClipStudio Paint」や「SAI」（イラスト制作ソフト）であったり、「XD」（UI・UXデザインツール）、「Dreamweaver」（Webサイト・Webページ制作ソフト）、データ管理やプレゼン説明用にExcelやPowerPointを使用することもあるでしょう。
各企業の要求レベルにも依りますが、まずはPhotoshopとillustratorを「使いこなせる状態」にしておくこと、その他Excel、PowerPointなどのデスクワーク一般で使用されるオフィス系ソフトは使えておいた方がよいでしょう。
また、Webに関する基本知識も持っておくことをおすすめします。
例えば、以下のようなことをしっかり押さえてWebデザイナーになるのと知らずになるのとでは、業務成果に大きな開きが出てくるものです。
- 現代では、PC・スマホなど閲覧するデバイスに応じて表示を最適化するレスポンシブ対応が主流
- Webサイト構築時は、多くの場合WordPress（WP）、MovableType（MT）といったCMS(コンテンツマネジメントシステム)を利用する
- 一般的にWebサイト上で使用する画像の解像度は 72dpi
- PC向けWebサイトでは、横幅1,000pxl前後を、スマホ向けWebサイトでは、640～700pxlを目安に作成
- CSSとJavaScriptでは、JavaScriptのほうが演出できる幅は広がるが、サイズが大きくなりがち（読み込みが遅くなる）。
このあたりは書籍で覚えていくのも大切ですが、ご自身でWebサイトを構築しながら覚えていくのも効果的です。実務経験が無かったとしても、「基本は抑えている」状態であれば、仕事を依頼する側からしても安心感を持ってもらえるものです。
常に多くのWebサイト、Webサービスに触れ、かつ新しい情報、技術に敏感であること
Webデザイナーは、常にデザインをアウトプットしていく仕事ですが、その分世の中の動きを頻繁にインプットしていくことが求められます。
日頃から様々なWebサイト、Webサービスを見ておく習慣を持っておくと良いでしょう。
それから、Webに関する新しい情報、技術にも敏感であることが重要です。
例えば、Webサイトを運営するうえで必ず意識することになる「SEO」（”Search Engine Optimization” の略であり、GoogleやYahooの検索サイトの結果表示を最適化すること）。──SEOに関するトレンド情報は、数ヵ月単位で変わっていきます。1年前のSEO情報が、現在はあまり意味をなさないということは、多くあります。
また、2012年頃からWebでの動画が多くのユーザーに受け入れられているというところから、「Web動画マーケティング」という言葉がもてはやされ、Webサイト上に動画やアニメーションを取り入れたサービスは増え続けています。
つまり、Web業界における技術やトレンドは日進月歩。「極めた」と思ったスキルも、驚くほどのペースで陳腐化されていきます。
Webデザイナーをプロの生業とするとしたら、そのスピード感にもついていこうという、常に向上していくスタンス・行動も求められます。
ディレクターやクライアントのニーズを掴み、満足してもらえるための「コミュニケーション力」
最後に紹介しておきたいのが、「コミュニケーション力」。
Webデザイナーに限らず、どの職種においても必要なスキルではありますが、Webデザイナーは「顧客の求めるニーズ」をしっかり【ヒアリング】して、かつ自身の考えや提案を分かりやすく伝えるための【トーキング力】、【プレゼン力】も求められます。
せっかく高いデザイン力を持っていても、コミュニケーションへの働きかけが低ければ、高い価値発揮を続けていくのは難しいでしょう。
コミュニケーション力は、実務と共に培われていくところも大きくありますので、「高いコミュニケーション力が無いとWebデザイナーになれないのでは…」と思う必要はありません。ですが、少なくとも「仕事相手とのコミュニケーションを大切にすること自体が、より良いデザインを創出していくことに繋がる」という意識と、働きかけを持つことが大切です。
あわせて読みたい
-
- 社会人の「コミュニケーションが苦手…」を克服する方法は？
- コミュニケーションへの苦手意識を持つ社会人に、その課題を克服するための具体的な方法について解説します。コミュニケーション力を高め、社会人としての貢献度や評価を高めたいと感じている人は、ぜひ参考にしてください。 ...
４） 未経験からWebデザイナーへの転職を成功するためのアプローチ
まずはポートフォリオを作ろう
「Webデザイナーになりたい！」と思って転職活動を始めるとしたら（社内での異動願いも同様）、まずはご自身のこれまで手掛けたデザインのポートフォリオを作っておきましょう。
ポートフォリオに載せるものは、実務で扱ったものだけでなく、プライベートで制作したものでも構いません。
要は、相手に「Webデザイナーとして任せられる」と思ってもらえるためには、あなたが現在どのようなデザイン・クリエイティブを手掛けられるかを見せる必要があり、相手もそれがないと判断が付かないのです。
その判断をしやすくしていく為に、またご自身のデザイン力とその可能性をアピールしていく為にも、現時点でご自身が見せられる最大限のポートフォリオの作成をしておくことが大切です。
あわせて読みたい
-
- デザイナーの転職で「ポートフォリオ」を効果的に作成するには？
- デザイナーの採用選考ではポートフォリオが最も重要視されるといっても過言ではありません。企業の評価ポイントや必須の記載事項など、ポートフォリオを作成する際に知っておきたい事柄をまとめました。...
Web系・クリエイター系に強い転職エージェントを利用するのがベスト
業務経験あり未経験に関わらずWebデザイナーに転職される際は、Web系・クリエイター系に強い転職エージェントを利用することをおすすめします。
理由は、Webデザイナーと一言で言っても企業が求めるありかたはそれぞれであり、そして皆さんの求める「Webデザイナー」の在り方とマッチするかは、まさに「相性」によるところも大きく、その相性を見極める第三者の存在があるかないかで、転職後に待ち受ける未来の様相も大きく変わってくるからです。
Web系・クリエイター系に強い転職エージェントを利用すれば、キャリアコンサルタントの密なサポートによって、より皆さんにあった企業を見つけられやすくなるでしょう。また、これからのキャリアプランやステップアップについても有益なアドバイスを受けられることもあるでしょう。
次の章で、Web系・クリエイター系に強い転職サービスとして代表的なところを5点程紹介しておきます。
ちなみに、どのサービスも無料で転職への相談・サポートを受け付けています。一度相談レベルでも利用すると良いかもしれません。
HIGH-FIVE
-
クリエイターへの転職支援に特化した転職エージェント。「これからの働き方」について相談したい人、職歴書・ポートフォリオの添削をじっくりしてほしい人におすすめです。
HIGH-FIVEは、クリエイターへの転職支援に特化した転職エージェントです。
HIGH-FIVEを利用するメリットでまず挙げられるのが、「充実したキャリア相談ができる」ことです。
キャリア相談をおこなう初回面談では、平均1時間ほどの時間をかけて、今回の転職だけでなく今後のキャリアで実現したいことまで話し合うことが可能です。
職種・業種特化型の転職エージェントを利用した人がよく言われるのは、「これからの働き方のイメージ・ビジョンが明確になった」ということです。
また、HIGH-FIVEは利用者のデザイナー・クリエイターとしての経験と志向にマッチした求人のみを紹介します。
他の転職エージェントを利用していて、「希望条件に合わない求人を多く紹介された」という人にも、HIGH-FIVEのサービスはおすすめです。
HIGH-FIVEの特徴
| 特徴 |
|
|---|---|
| サービス対応地域 | 全国 |
| 拠点 | 東京、大阪 |
| クリエイター職の公開求人数 | 約1,000件（2024年9月現在） |
実務経験者向けのサービスです。業界未経験の方は、関連する経験・スキルをアピールしていきましょう。
５）Webデザイナーの正社員転職におすすめの転職エージェント
doda（デューダ）
-
都市部・地方ともに豊富な求人と、担当からの積極的な提案が特徴。企業からのスカウトも多く、たくさんの求人に接していきたい人におすすめの転職エージェントです。
dodaは求人数・実績において国内トップクラスを誇ります。
実績で培ったノウハウがあり、「積極的に求人紹介をする」タイプのアドバイザーが多いため、「スピーディ」かつ「自分にマッチする求人が見つかりやすい」特徴があります。
Webデザイナーの求人は約900件あり、そのうちの100件は未経験歓迎のものです。
dodaのサービスの主な特徴は、「転職サイト・転職エージェント両方の機能を利用できる」、「企業からのスカウトが多く届く」ことです。
アドバイザーにキャリア相談をしながら求人を紹介してもらえるほか、自分でも登録後のマイページから気になった求人をチェックして応募が可能です。
企業からのスカウトについては、実際にdodaを利用した人たちからは「スカウトメールがたくさん届く」「（スカウトメールによって）色んな企業を知れる」といった評判・口コミが多く見られます。
業種や職種、地域に関わらず豊富な求人を擁していますので、「まずは求人をチェックしてみよう」という際にもおすすめのサービスです。
dodaの特徴
| 特徴 |
|
|---|---|
| サービス対応地域 | 全国 |
| Webデザイナーの公開求人数 | 約850件（2024年9月現在） |
dodaは求人を自分から応募可能ですが、エージェント経由でのみ紹介される非公開求人も多いです。担当エージェントには初回面談時に希望条件をしっかり伝えておくことで、より有意義なサポートを受けられるでしょう。
リクルートエージェント
-
Webデザイナーの求人数は国内No.1の豊富さ！転職支援ツールも豊富で、「正しい転職活動を知りたい」人にもおすすめのエージェントです。
リクルートエージェントは国内No.1の求人数の転職サービスです。2024年9月現在、Webデザイナーの求人は約3,100件あります。
転職先を選ぶにあたって、なるべく多くの求人を比較したい人にリクルートエージェントはおすすめです。
リクルートエージェントの強みは全業種・職種に対して豊富な求人数を持つこと、そして長年の実績で培われたノウハウ・転職支援ツールの充実さにあります。
とくに活用したい支援ツールは、企業の特徴から選考のポイントまでをまとめた「エージェントレポート」です。
先に述べた通り、Webデザイナーの働き方は企業によって様々です。希望する働き方ができる職場を見出す際に、レポート情報は大いに役立つはずです。
また、担当アドバイザーもこれまでの実績をもとにWebデザイナーへの転職に関する有益なアドバイスを提供してくれるでしょう。
リクルートエージェントの特徴
| 特徴 |
|
|---|---|
| サービス対応地域 | 全国 |
| Webデザイナーの公開求人数 | 約2,800件（2024年9月現在） |
リクルートエージェントを利用した人たちからは、オンラインで受講できる「面接力向上セミナー」について「実際の面接で役立った」という感想が多く見られます。登録後は無料で参加できますので、面接対策に不安を感じている人はぜひ利用しましょう。
マイナビクリエイター
-
Web・ゲーム・IT業界のクリエイター職に特化した転職エージェント。エージェントによる丁寧なサポートが欲しい人におすすめです。
マイナビクリエイターは、Web・ゲーム・IT業界のクリエイター職に特化した転職エージェントです。
Webデザイナーの求人は、2024年9月時点で約300件あります。
マイナビクリエイターは、自社のサポートの強みとして「専門性」、「マッチング力」、「満足度」の3点を挙げています。
実際にサービスを利用した人たちからは「サポートの丁寧さ」を評価する声が多く見られます。
今回が初めての転職の人や新たな業界や職種をチャレンジする人は、マイナビクリエイターのサポートが特に役に立ちやすいでしょう。
マイナビクリエイターの特徴
| 特徴 |
|
|---|---|
| サービス対応地域 | 関東・関西・東海・九州 |
| Webデザイナーの公開求人数 | 約300件（2024年9月現在） |
手厚いサポートを受けられるマイナビクリエイターですが、全体求人数はやや少なめです。以下に紹介するdodaやリクルートエージェントとの併用がおすすめです。
あわせて読みたい
-
- 転職エージェントの選び方と成功者がよくやる「鉄板」活用パターン3つ
- 転職エージェントを選ぶ際の大切なことは、単に「評判・実績のあるサービス」を選ぶのではなく、「『あなたにとって』役に立つ・頼りになるサービス」を選ぶことです。この記事では転職エージェント「鉄板の選び方」と、最大限有効活用する為のポイントを紹介しています。...
まとめ）「Webデザイナーに興味ある」人は、早いタイミングでの行動を
もしあなたが本気で「Webデザイナーで活躍したい！」と思われていたとしたら、いち早く「実務に携わること」を目指すのがよいでしょう。
理由は、Webデザイナーとして経験・スキルを積んでいくとしたら、やはり実務での経験が圧倒的に効果的だからです。
また、年齢が上がれば上がるほど、企業からはWebデザイナーとしてのスキル面だけではなく、ディレクション力やマネジメント力も求められるようになり、その分求人の敷居は高くなっていきます。そういった意味でも、早めの行動が望ましいのです。
この記事が、皆さんのこれからの働き方、キャリアパスを描いていく上で、少しでもお役に立てられることを、心より願っております。