【初心者向】Webデザイナーの仕事内容と必要スキルを解説（画像付）

はじめまして、Webデザイナー歴17年・フリーランス歴10年になるフクです。

この記事では、Webデザイナーとはどういう仕事なのかを、実際の作業している画像等をまじえて、初心者向けにわかりやすく解説していきます。

Webデザイナーになりたいけど何からはじめたらいいのかわからない。そんな悩みを持つ人に向けて書いた記事です。

実際のWebデザイナーの仕事を細かく切り取って、その作業を行うのに必要なスキルをピックアップします。

全くの未経験者の方でも、Webデザイナーになるために必要なことがわかりますよ。

未経験者はいきなりWebデザイナーにはなれない？

結論：Webデザイナーになるためには、専門知識とスキルが必要です

未経験者でも、勉強をすればWebデザイナーになることは可能です。ただし、全く未経験・未学習のままでは採用は難しい職種でもあります。

昔はWebデザインの知識がゼロでもやる気さえあれば雇ってくれて、現場で勉強させてくれる時代もありました。

ただ今はそのようなやり方をやっている会社はほぼありません。理由として、

• 現場は人手不足で少しでも即戦力が欲しい
• 未経験はともかく、未学習の志望者は少ない。みんなどこかしらで勉強している。なので採用するならそっちを取る

という事情があるからなんですね。

なので、Webデザイナーへの転職や副業を考えている方がまずやること。

それは、Webデザインの専門知識の習得です。

Webデザインには勉強が必要。でも

• その最低限のWebデザイン知識って何なの
• その知識ってどこで学ぶの

って思いますよね。

それをこれから説明していきたいと思います。

Webデザイナーの仕事内容を知ることで、どんなツールが必要でどんなスキルを取得すればいいのかがわかります。

Webデザイナーの仕事内容は「Webの広告媒体を作る仕事」

Webデザインの仕事とは、簡単に言うと「Web上にある広告媒体を作る仕事」です。

大体みんなが思いつくのが、企業のWebサイト、SNSやショッピングサイトの広告バナー、でしょうか。

これらを1からデザインして作るのが、Webデザイナーの仕事です。

Webデザイナーが手がける媒体は、主に以下のものがあります。それ以外にも要望に応じて、Webに関するものならなんでもデザインします。

• 企業のWebサイト
• モバイルアプリ
• ブログ
• 各種広告バナー
• YoutubeやSNSのサムネイルやヘッダー

一番メインとなるのが、企業等のWebサイトです。Webサイトは、こんな流れで作られています。

３ステップでわかるWebサイト制作の流れ

STEP1. Webサイトのデザインを作る

Webサイトのデザイン、見た目を作ります。お客様からどんなサイトにしたいかヒアリングして、実際に絵に起こす作業です。この時作られた物のことを「デザインカンプ」と言います。

これらのデザインの制作作業には、Adobe(アドビ)社の「Photoshop(フォトショップ)」「Illustrator(イラストレータ)」「XD(エックスディー)」というデザインソフトを使います。Adobe以外のソフトでは「Figma(フィグマ)」を使うのもおすすめです。

この4つのソフトは、写真の加工にはPhotoshop、Webデザインの骨組みを作るのならFigmaという風にそれぞれ使い道が違っていて、多くのデザイナーはこれら４つソフトを状況によって使い分けるのが慣例です。

※一つのデザインソフトで全ての作業こなすデザイナーもたまにいます

Webデザイナーになるには、まずはこのデザインソフトを使いこなせるスキルが必ず必要となってきます。

例えば、こちらがIllustratorというデザインソフトの実際の画面イメージです。このような感じでデザインを起こしていきます。

先ほども書きましたが、Webデザインには以下のデザインソフトがよく使われます。

• Photoshop：フォトショップ。通称フォトショ
• Illustrator：イラストレーター。通称イラレ
• XD：エックスディー
• Figma：フィグマ

プロのWebデザイナーはこれらのソフトを目的に応じて使い分けますが、初心者であればPhoshopかFigmaがおすすめです。

この2つのソフトを薦める理由は、以下の通りです。

Photoshopをすすめる理由
写真加工もWebデザインもなんでもできる万能ソフト。これ一つあればなんでもできる。WebデザインスクールでもPhotoshopを教えているところが一番多い。

Figmaをすすめる理由
無料だから初心者の財布に優しい。Webデザインに特化したソフトでプロデザイナーもたくさん使っている。

もっと詳しくは、関連記事を読んでくださいね。

デザインソフトで作られるデザインは、この段階では、まだ「ただの絵」です。

STEP2. HTMLコーディングする

HTMLという言語を使って、デザインソフトで書いた絵をコード化したファイルを作ります。

この作業を「コーディング」または「マークアップ」と言います。

なぜコード化しないといけないのでしょうか。

デザインソフトで作られたデザイン画（デザインカンプ）はただの絵ですよね。

でも実際のWebサイトは、ボタンを押せば別のページに飛ぶし、メニューが開閉したり、文章にリンクをつけたり、何かのアクションがありますよね。

お問い合わせメールを送ることができたり、リンクを作ったり、そういうWebサイトならではの仕組みをもたせるには、ただの絵をプログラムの形にしなければいけないのです。

このコーディングという作業はテキストエディタというソフトを使って行います。

コーディングしている時のイメージが下の画面です。

プログラムっぽい記述になっているのがおわかりいただけますか。

このコードがHTMLと呼ばれる言語で、HTMLを記載したファイルをHTMLファイルといいます。

STEP3.インターネットにサイトをアップロードする

デザインカンプを作成する、デザインカンプを元にコーディングしてHTMLファイルを作る。
ここまでは自分のパソコン内で完結できます。いわばローカルの世界です。

しかし世界中の人に見てもらうにはインターネットの世界へ繋げなければいけません。

２で作ったHTMLファイルを、FTPというソフトを使って、インターネットへアップロードします。

この作業には、ドメインとサーバー、それからFTPというソフトの知識が必要になります。

ドメインとは

ドメインとは「fukufuku-life.com」のように、●●.com　●●.co.jp　という形式が決まっているものです。

ドメインをクリックすることで、そのサイトのリンクに飛ぶことが出来ますよね。ドメインはサイトの住所のようなものです。

ドメインは、サイト名と合わせて、そのサイトそのものを表すものです。ただしサイト名はかぶる可能性はありますが、ドメインは絶対に被りません。世界で一つのものです。

全世界のWebサイトのドメインは全てが一つ一つ違っていて、同じものにすることはできません。

サーバーとは

サーバーとは、作ったファイルをアップするインターネット上の場所、専用スペースのことです。

デザインを作ってコーディングをしただけでは、そのサイトは自分のパソコンの中でしか見ることができません。ドメインを割り当てて、サーバーの上にアップロードすることで、世界中の人があなたのWebサイトをインターネットでみることができるのです。

サーバーに関しては、「サーバーの基本。サーバーって何」という記事にも詳しく書いています。

FTPとは

FTPとはローカルに保存してあるHTMLファイルをインターネット上にアップするソフトウェアのことです。有料と無料がありますが、初心者であれば無料ツールで十分です。というか私も無料を使っています。

パソコンにFTPソフトをインストールして、FTPを介して、ファイルをインターネット上にアップロードする。

こうして、あなたの作成したファイルは初めて全世界に公開されることになります。

Webサイト制作の流れおさらい

Webサイト制作は、基本的にこの3ステップで作られているのがわかったでしょうか。

初心者用のWebデザインスクールは数多くありますが、基本的にどこもこの３つのスキルを中心に学ぶカリキュラムとなっています。

最新のWeb制作現場では、全部を覚える必要はなし！

Webデザイナー志望で苦手意識を感じやすいのが、HTMLコーディングやサーバーの部分です。

確かにデザイナーといえばデザインをするイメージで、プログラミングっぽいことをするのはちょっと分野違いの気がしますよね。

実はこれは、昔の話。数十年前のWeb現場では、デザイナーがコーディングもアップロードも担当することが多かったのです（なぜかと言われるとそういう時代だったとしか言えないのですが…今ほどHTMLが複雑でなかったのは確かです）

HTMLコーディングが昔より高度化してより複雑な動きを求められるようになったこともあり、現在では、デザイン作業とコーディング作業は分業されていることが多い時代です。

現在は分業制なので、デザイナーがHTMLを学ぶ必要は必ずしもありません！

HTMLコーディングは、別途コーダーやフロントエンドエンジニアといった職種の人が受け持つ流れになってきました。

デザイナーがコーディングのプロになる必要はありません。そこは、安心してください。

また、サーバーに関しても、基本的にはネットワークエンジニアが別にいますので、デザイナーがサーバーのことまであれこれ考えることはありません。

ただし。将来フリーランスを目指すのであれば別です。HTMLとサーバーの知識も学んだ方が仕事の幅が広がります。

詳しい理由は「WebデザイナーがHTMLコーディングを覚えた方が良い理由」という記事でまとめていますので、こちらも読んでみてくださいね。

フリーランスWebデザイナー志望も多いと思うので、いちおうこの記事ではコーディングとサーバーの知識も含めて「Webデザイナーの基礎スキル」の一つとして説明しています。

初心者はどこまでスキルを伸ばす必要があるのか

Webデザイナーになるには、実際に仕事を始める前にある程度の専門的な知識と技術を学習するのが先なのはその通りです。

ただし、全て覚える必要もないし、全部がプロ級であることもないです。

必要な資格も特にありません。

Webデザイナーとは、基本的なスキルさえあれば、あとは実戦で成長を期待される職業だからです。

基礎スキルさえ身につければ、とっとと就職した方が良いです。

以下は、Webデザイナーにあったら良いと思われるスキルをさらに深く掘り下げたものです。

【必須のスキル】に描いてあるスキルは、Webデザインスクールに通うと学べる基礎的なスキルです。なお、先ほども書きましたが、デザイナー志望であればまずはデザイン中心でいいと思います。

　

【あるといい】【もっとあるといい】にあげたのは、習得すると仕事の幅が上がる、高収入につながるスキルです。フリーランスWebデザイナーを目指すなら、このスキルは身につけるのを強くおすすめします。

CMSやJavaScriptなど、初心者の方には見慣れない単語だと思いますが、Webデザイナーの経験を積んでいくと自然に目にするようになるので、今は無理して覚えなくてもOKです。

Webデザイナーのスキルの勉強方法について

Webデザイナーに必要なスキルがぼんやりとでもわかりましたでしょうか？今はまだはっきり分かってなくても大丈夫です。

さて、必要なスキルがわかったところで、初心者の方がどうやってこのスキルを身につけるか。

一般的には、以下の３つのルートがあります。

1. Webデザインスクールで学ぶ

一番早く就職・転職・副業の道につながることができるのは、Webデザインスクールに通うことです。

経験豊富なスペシャリストの講師が無駄なく教えてくれる。スケジュールもしっかり組んでくれる、宿題もある、と至れり尽くせりです。

独学でやるより習得スピードが早く、体系的に教えてくれるので知識の漏れがありません。

何より、お金を払っているので勉強を続けようとするモチベーションを保つことができます。

オンラインスクールであれば時間の都合もつきやすく、忙しい社会人や主婦の方にとってもいいと思います。

就職支援が充実しているスクールもあるので、転職希望の方にはかなりのメリットがありますよね。

スクールのデメリットは、受講費用が高額ということです。安いところでも10万円〜60万円近いところも。

これから未知の世界へ飛び込もうとする人にとって、安い金額ではありません。

ただし、昨今のWeb制作現場は常に人手不足です。払った費用は身に付けたスキルでペイできます。

私のおすすめのWebデザイン専門スクールをまとめた記事を紹介しますね。

主婦ママ向けのWebデザインスクールはこちら

転職に強いWebデザインスクールはこちら

悩んでいる人向けに、スクール比較のポイントをまとめた記事

2.独学で学ぶ

スクールは利用せず、独学で学んでWebデザイナーになった人もたくさんいます。今はネット上の情報はもちろん、本や動画でいくらでもWebデザインのスキルが学べる時代です。

正しくスキルをインプットできれば、必ずしもスクールに通う必要はありません。

独学に必要なのは、強い意志と時間です。どうしてもスクールよりは時間がかかってしまいますが、効率の良い最短ルートや独学用の学習サイトも今は豊富に揃っていますので、ぜひ利用してスキルアップを目指しましょう。

Webデザイン初心者のための、独学ロードマップはこちらです。

3. 職業訓練校で学ぶ

職業訓練校とは、求職中の人が、就職に役立つ知識やスキルを習得するために通う学校のことです。ハローワーク等で職業訓練校へ申し込むことができます。

基本的には無料で通うことができ、条件によっては手当て（例：月10万）をもらいながらスキルを習得することができるのが特徴です。ただし、Webコースは人気のため、条件は年々厳しくなっていて狭き門となっています。

職業訓練校の場合、講師のレベルがまちまちだったり、身につくスキルは基本レベルで実践的ではないのですが、独学と併用してWebの仕事についている人もちゃんといます。

初心者がスクールか独学かで悩んだ場合

スクールに通うか、独学でがんばるか、というのは初心者にとって悩みどころかと思います。特に一番悩ましいのは、スクールの費用ではないでしょうか。

私個人の意見としては、転職や副業を希望であれば、スクールに通うことをおすすめします。

スクールには転職支援、副業支援といった、就職しやすいルートがあります。また、キャリアカウンセリングを設けているところも多く、就職相談や育児中ママの今後のキャリア相談にも乗ってくれます。

また、スクールの良いところは、制作物に対するレビューがもらえるところです。デザインのスキルアップには、第三者（上級者）からのレビューが不可欠です。特に就職の面接時や副業の開業時に必ず必要になるポートフォリオに関しては、スクールで手厚く添削をしてもらえます。

料金を払うことからも独学よりか挫折しにくく、SNS上で仲間と一緒に頑張れるコミュニティもあったりします。

もっと具体的な内容は記事にまとめてみましたので、よければ参考にしてみてください。

Webデザインを勉強した後の流れは？就職の方法について

さて、スクールや独学でWebデザインのスキルが身につきました。この後、どうやってWebデザイナーになればいいのでしょう？

一般的には企業に就職する道が無難ですが、Webデザイナーは、在宅で完結することができる仕事柄、フリーランスで独立する人も多いです。

会社員デザイナーに就職

王道のパターンはやはり、企業に就職し、会社員デザイナーとして給料をもらいキャリアを積んでいくことでしょうか。

フリーランスとして独立を希望しているとしても、やはり少しでも会社を経験してから独立するルートを強くお勧めします。特に若い方は。

制作の現場の知識というのは何にも変えられない尊い経験値です。会社に入って先輩からノウハウを学ぶというのは、若いうちが絶対いいです。歳をとるほど難しくなるからです。

独立はいつでもできますが、会社で現場を経験することは、何物にも変えられないデザイナーして貴重な経験値となります。

ひとくちに企業デザイナーと言っても、実はいろいろな形態があります。デザイナーの就職先についても記事にまとめてますので、参考にしてくださいね。

フリーランスになる

パソコンとインターネットさえあれば、好きな時間に好きな場所で作業ができる。それがWebデザイナーの魅力。

自由な仕事スタイルが可能なので、Webデザイナーはフリーランスとはとっても相性がいいのです。

実際に私はフリーランス10年を突破し、合間に結婚・出産もしました。

結婚後や出産後にフリーランスになる人もいます。Webデザイナーは主婦や会社員の副業にも向いています。

多様な生き方ができる時代だからこそ、フリーランスにもぜひチャレンジして欲しいです。

Web制作現場は常に人手不足で、人材を求めています。フリーランスのデザイナーとして生計を立てることは、けして夢ではありません。

まとめ

ここまで長い記事を読んでいただいてありがとうございました！

初心者がWebデザイナーになるのに必要なスキル、勉強方法についてまとめてみました。なんとなくでもイメージがついたでしょうか？

30代でも40代でもWebデザイナーになれる時代です！素敵なWebデザイナーを目指して頑張ってくださいね。