『みんなの転職「体験談」。』
『みんなの転職「体験談」。』

『みんなの転職「体験談」。』は、20~50代社会人男女の、 「転職したいけれど、迷いや不安で行動を踏み出せない」を 解決し、
より良い将来を目指した一歩を踏み出していける為の、 生々しい体験談情報やナレッジを提供するWebサービスです。

MENU

未経験からWebデザイナーになるには?仕事内容と転職成功のポイント

[最終更新日]2022/11/19

未経験からWebデザイナーになるには?仕事内容と転職成功のポイント

若い年代だけでなく、「Webデザイナーになりたい」という想いを持たれる方は近年増えてきています。

実際、Webデザイナーを求める企業は、IT・Web系の会社のみならず、「自社製品・サービスをインターネット上でアピールしたい」といった需要から、非常に多くなってきています。

目次

■サイトデザインの制作 ■ページデザインの制作 ■挿入図やグラフ、バナーなどの画像の制作 ■イラスト制作 ■コーディング

Webデザイナーの仕事は、主に以下のWeb制作を担当します。

  • サイトデザインの制作
  • ページデザインの制作
  • 挿入図やグラフ、バナーなどの画像の制作
  • イラスト制作
  • コーディング

業務範囲は企業によって異なり、上記5項目のすべて関わるケースもあれば、「サイトデザイン・ページデザインの制作」や「挿入図やグラフ・バナーなどの制作」がメインになるケースもあります。

職場によっては、Webデザイナーはデザインのみ行いコーディングはマークアップエンジニアHtmlコーダーが担当することもあります。
ただし、だからといってその場合もWebデザイナーがコーディングをまったく度外視して業務することはありません。
コーディング担当が業務しやすい形でWebデザインを手掛けていくことも、Webデザイナーに求められることのひとつです。

具体的な仕事内容について、見ていきましょう。

サイトデザイン・ページデザインの制作

サイトデザイン・ページデザインの制作は、Webページの基本デザインまたはページそのものを作る仕事です。

具体的にどのような工程になるのかについて、当サイト「みんなの転職体験談」を例に説明してみましょう。

 

みんなの転職「体験談」。のページデザイン依頼書(一部)

例えばみんなの転職「体験談」。では、とあるページのデザイン指示書を以下のように制作しました(※一部のみを抜粋しています)。
ちなみに、こちらの制作書はExcelで創られています。

デザイン指示書の一部
 

実際に出来上がったページ(一部)

実際に出来上がったページは、現在の「みんなの転職「体験談」。」Webサイトから直接確認することができますので、興味がありましたら、チェックしてみてください。↓※画像をクリックすると実際のページに遷移します。

Webデザイン成果物のイメージ

指示書からWebページに表示される迄の基本の流れとしては、以下になります。

  • 全体のページデザインをPhotoShop等の画像編集ソフトで作成
  • イラストが含まれる場合は、その分はIllustrator等のイラスト制作ソフトで作成
  • 1~2の内容を元に、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人いる。
手前に経っている人、奥に座っている人がいる。

《イメージ》
  • ジャケット
  • 自信がありそう
  • 華やかさと忙しさが同居
 

実際に出来上がったページ(一部)

みんなの転職「体験談」。TOPページ

※ イラストがWebサイト上でどう使われているかは、本サイトのトップページをご覧ください。

イラスト制作を行う場合は、Illustratorなどのイラスト制作ソフトを使います。
また、イラスト制作も途中段階でのチェック作業はふんだんに入ります(大体、ラフ画、線画、色塗りと大きく3つのフェーズに分けてチェックフェーズを持ちます)。

イラスト制作は通常イラストレータの仕事になるため、Webデザイナーが手掛けることはあまりありません。

ですが、もしWebデザイナーを目指される方が「自身もある程度イラストが描ける」という場合は、積極的にその点もアピールしていくと良いでしょう。
なぜなら、「イラストを描ける」という人は多くの場合社内にはおらず、大抵は「社外発注」となるケースが多いからです。

ディレクターからすると、依頼を社内で完結できた方がディレクション的にもコスト的にもスムーズになりますので、イラストを描けるWebデザイナーは重宝される傾向にあります。

Webデザイナーの仕事の流れ

❶指示・依頼内容を受ける❷制作スケジュールを立てる❸デザイン制作❹コーディング・確認作業❺納品

制作内容は様々あれど、Webデザイナーの仕事の流れの大枠は以下のようになります。

 

1) 社内ディレクターまたはクライアントから指示・依頼内容を受ける

社内ディレクター、または直接クライアント(顧客)から、制作してほしい内容の依頼を受けます。
Webサイト全般のデザインなど、制作範囲が大きい場合は通常「仕様書」や「設計書」が渡されます。

Webデザイナーはこの際に、指示・依頼内容を正確に理解し、その他納期や途中確認(チェック等)の進め方を確認し、依頼者と意思の齟齬が無いようにします。

 

2) 制作スケジュールを立てる

Webデザイナーのほうで制作スケジュールを立てます。
完成するまでの工程を整理し、途中依頼者とどのタイミングでチェック・確認していくかもスケジュールに落とし込んでいきます。

 

3) デザイン制作

デザイン制作フェーズです。

一定の段階ごとに、依頼者(社内ディレクターやクライアント)に進捗状況を確認してもらい、修正事項が無いかを見ていきます。修正依頼があった場合は、対応します。

 

4)コーディング・確認作業

デザイン制作の後は、コーディング(実装)を行います。

実装後は、実際にPCやスマホで表示を確認し、必要に応じて修正・調整を行います。

 

5) 納品

依頼者から「これで問題ありません」とOKをもらえたら、制作完了です。
完了後は、依頼者から指定された形式(ファイル形式であったり、各画像のサイズ・大きさ等)で成果物を提出することがあります。 特に重要となってくるのが、1)の「指示内容の確認」フェーズです。どんなにスキルのあるWebデザイナーであっても、依頼元と認識がずれていたら、満足してもらえる成果物を制作するのは不可能です。

初回と各フェーズにて、しっかりと依頼者とコミュニケーションを取りながら、相手の真に求めるニーズをくみ取りながら、デザイン制作をしていく──といったイメージです。

作品を世の中に発信していける。新しい感性・視野を感じられる機会が多い。デザイナーとしての向上・スキルアップを感じられる。

Webデザイナーの仕事は、デザインという形で実際に成果物が目に見えやすいこともあって、やりがいも感じられやすい職業と言えるでしょう。

具体的に、どんなときに「Webデザイナーをやっていてよかった」と感じられるようなやりがい・魅力を感じているのか、代表的なポイントを3点、紹介しましょう。

作品を世の中に発信していける

Webデザイナーのやりがいでまず挙げられるのは、「クリエイターとしての働き方」です。
クリエイターは、自身が思っていること、感じていることを「作品」として形にし、世の中に出していけます。そして、その行為自体を大きなやりがいを感じられる人こそが、クリエイターたる所以とも言えます。

ただし、クリエイターはアーティストとは違います。「自分が思うものをそのまま作る」のではなく、「誰のためのデザインか」を考え、クライアントやエンドユーザーのことをしっかり見据えて、形にしていくことが大切です。

そのうえで、依頼してくるディレクターや社外のクライアントから、「彼らの目的を達成し、最大限満足してもらえるためにはどうすればよいのか」を熟考し、最適な形でアウトプットしていくことがWebデザイナーの役目であり、そして腕の見せ所でもあります。

新しい感性・視野を感じられる機会が多い

Webデザイナーは、「デザインが、それを観る人々の感情にどのような変化を与えるか」という点に向き合っていきます。その為には、豊かな感性や人間性もまた求められるでしょう。

また、デザインという言語化できない領域と向き合っていく機会は、人として「新しい感性・視野」を感じる機会にも繋がります。
そしてそれは、自らの人生をより味わいのある、豊かにしていく行為とも直結していくでしょう。

デザイナーとしての向上・スキルアップを感じられる

「自身のデザインスキルをどんどん高めていきたい」という気持ちを強く持たれている方は、Webデザイナーを主業務とすることによって、その要望はおのずと叶えていけるでしょう。

もちろん、Webデザイナーの仕事は簡単なものではなく、「なかなか良いデザインが生まれてこない」であったり、「クライアントの要求レベルが高い」など、悩むことや苦しいことの多いでしょう。ですが、そういった悩みや苦しみ自体が、あなたのデザイン力を高めていくきっかけにもなるのです。

また、Webデザイナーは、独立して自身で会社を興したり、フリーランサーとして活躍する方も多くいます。
Webデザイナーを極めていく道のりは、同時にこれから先の未来や夢を切り開いていくことにも繋がっていく──ということですね。

デザイナーとしての向上・スキルアップが、同時に将来の可能性が大きく広がっていくこともまた、Webデザイナーのやりがい、魅力とも言えそうです。

デザイン・レイアウトの基本知識は押さえておくのがベスト

レイアウトの規則性、文字のカーニング、リーダビリティとレジビリティなどレイアウトの基本知識を抑えておく
  • 「誰のためのデザインか」を常に念頭に入れる。
  • 基本的なグリッド(レイアウトの規則性)を意識する。
  • カラーは基本多く使いすぎない。ベースカラー、メインカラー、アクセントカラー+αで4色前後を目指す。
  • それぞれの色が与える印象や、補色(対立する色彩)関係を理解しておく。
  • リーダビリティ(可読性)とレジビリティ(明瞭性)を意識したデザイン・レイアウトを意識する。
  • 余白を効果的に使う。
  • 文字を配置するときはカーニング(文字間のスペースを調整すること)を意識する。
  • 行間隔・文字間隔に読みやすさおよび規則性を持たせる。

上記はデザイン・レイアウトについて考えていく際に基本となる考え方の一部です。
「初めて聞いた」という項目があったり、「聞いたことの無い単語が入っている」という方は要注意かもしれません。

これまで「なんとなく」であったり、感性の赴くままにデザイニングをされてきた、という方は一度書籍などを通してデザイン・レイアウトの基本知識は押さえておいた方が良いでしょう。

Photoshop、illustratorはじめ、グラフィック系ソフトのマスターは必須

デザインに必要なソフトを使いこなせる状態にしておき、Webに関する基本知識も抑えておく

Webデザイナーの多くは業務用ツールとしてAdobe製品の「Photoshop」「illustrator」を使用します。

その他、業務内容によって「ClipStudio Paint」や「SAI」(イラスト制作ソフト)であったり、「XD」(UI・UXデザインツール)、「Dreamweaver」(Webサイト・Webページ制作ソフト)、データ管理やプレゼン説明用にExcelPowerPointを使用することもあるでしょう。

各企業の要求レベルにも依りますが、まずは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サービスを見ておく習慣を持っておくと良いでしょう。

それから、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系・クリエイター系に強い転職サービスとして代表的なところを3点程紹介しておきます。
ちなみに、どのサービスも無料で転職への相談・サポートを受け付けています。一度相談レベルでも利用すると良いかもしれません。

マイナビクリエイター|エージェントによる丁寧なサポートが欲しい人におすすめ

Web・ゲーム・IT業界専門の転職エージェント、マイナビクリエイター。

マイナビクリエイターは、Web・ゲーム・IT業界に特化した転職エージェントです。
Webデザイナーの求人は、2022年5月時点で約250件あります。

マイナビクリエイターを利用するメリットには以下の3点があります

  • 業界トップクラスのクリエイター求人数を保有
  • 業界出身のエージェントによる丁寧なサポート
  • 「MATCHBOX」を使って手軽にポートフォリオを作成できる

マイナビクリエイターは、サポートの強みとして「専門性」、「マッチング力」、「満足度」の3点を挙げています。
今回が初めての転職の方や新たな業界や職種をチャレンジする方は、マイナビクリエイターのサポートが特に役に立ちやすいでしょう。

Web・ゲーム・IT業界転職に強み
登録は5~10分程で完了します。

doda|なるべく早く転職を済ませたい人におすすめ

doda 転職なら、・・転職サイトdoda(デューダ)

dodaは「なるべく早く転職したい」という人におすすめの転職エージェントです。

常時10万件を超える求人を保有していること、担当エージェントが積極的に求人紹介を行ってくれることから、「希望にマッチした求人が見つかりやすい」のが特徴です。
Webデザイナーの求人は、2022年5月時点で約600件あります。

その他、dodaを利用するメリットには以下の2点があります

  • 企業からの直接スカウトが多い
  • 「年収査定」「キャリアタイプ診断」などのツールが充実

スカウトメールを受け取ることにより、転職先の選択肢が増えるだけでなく、自身のおおよその市場価値の把握にも繋がるでしょう。

転職者満足度 No1
登録は5~10分程で完了します。

リクルートエージェント|求人を数多く比較検討したい人

転職エージェントならリクルートエージェント。非公開求人からご希望に沿った求人をご紹介。転職エージェントがあなたの転職を成功に導きます。

リクルートエージェントは国内No1の求人数の転職サービスです。2022年5月現在、Webデザイナーの求人は約2,700件あります。
転職先を選ぶにあたって、なるべく多くの求人を比較したい人に、リクルートエージェントはおすすめです。

その他にも、リクルートエージェントの特徴・メリットとしては以下の2点が挙げられます。

  • 「リクルート」ブランドへの信頼性もあり、多くの企業との間にパイプがある
  • 担当エージェントによる的確なサポートに定評がある

中でも担当エージェントのサポートに関する高評価は多く、「担当エージェントの年収交渉により、前職より100万円以上年収がアップした」「書類添削・面接対策などが手厚かった」といった意見が見られました。

求人数・サポート実績No1
登録は5~10分程で完了します。

まとめ)「Webデザイナーに興味ある」という方は、早いタイミングでの行動を

Webデザイナーは実務での経験が圧倒的に効果的!いち早く行動を。

もしあなたが本気で「Webデザイナーで活躍したい!」と思われていたとしたら、いち早く「実務で携わっていくこと」をおすすめします。

理由は、Webデザイナーとして経験・スキルを積んでいくとしたら、やはり実務での経験が圧倒的に効果的だからです。

また、年齢が上がれば上がるほど、企業からはWebデザイナーとしてのスキル面だけではなく、ディレクション力やマネジメント力も求められるようになり、その分求人の敷居は高くなっていきます。そういった意味でも、早め早めの行動が望ましい、ということですね。

この記事が、皆さんのこれからの働き方、キャリアパスを描いていく上で、少しでもお役に立てられることを、心より願っております。

目次[ 閉じる ]