Webデザイナーになる方法

Webデザイナーになるには?身に付けるべきスキルと学習方法を現役Webデザイナーが解説!

kana*

こんにちは、フリーランスWebデザイナーのkana*です。インスタフォローしてもらえたら嬉しいです♩

Webデザイナーになるためには、ある程度の知識やスキルが必要です。
ですがはじめは何を勉強したらいいのか、何からはじめたらいいのかわからないと思います。

Webデザインのスクールを見てみると、学べるスキルとして20個くらい並べてあって「こんなに必要なの?」と思うかもしれません。

ですがWebデザイナー歴11年の私が思う、Webデザイナーとして働くために最低限必要なスキルは下記の2つのみ!

  • Photoshop
  • html・css

他のスキルも言い出したらキリがないのですが、まずはこの2つのスキルがあればWebデザイナーとして働くことができます。

cotoha

他のスキルはこの2つを身に付けてから徐々にレベルアップしていきましょう。

この記事では、Webデザイナーになるための必須スキル・学習方法・Webデザイナーとして働くための準備などを下記の4stepに分けてご紹介していきます。

  1. Webデザイナーの仕事内容・必須スキルを理解する
  2. Webデザイナーの必須スキルを習得する
  3. ポートフォリオを作る
  4. 就職活動をする or フリーランスになる

それではstep1からご紹介していきます。

この記事を書いている人
  • 歴11年のWebデザイナー
  • 10年間Web制作会社に勤務 → 独立
  • フリーランス2年目
  • 30代主婦・一児の母(娘溺愛中♡)
  • 地域情報ブログ「福知Navi」運営
  • 福知Naviインスタフォロワー1万人超
  • インスタ集客の発信も行っている
kana*

【step1】Webデザイナーの仕事内容・必須スキルを理解する

Webデザイナーの仕事内容

Webデザイナーになるため何を学習すればいいのか?
なぜ2つのスキルだけで大丈夫なのか?

それを知るために、まずはWebデザイナーの仕事内容について簡単にご紹介します。

Webデザイナーはホームページを作るというがメインの大きな仕事です。
ホームページを作る工程は大きく分けて、デザインコーディングという2つに分けられます。

cotoha

コーディングについては後のコーディングスキルの箇所で詳しく説明しています。

ひとまずデザインは必須!
デザインができないとWebデザイナーとは呼べません。

ただコーディングは実務で行うWebデザイナーもいれば、デザインだけを担当しコーディングは行わないWebデザイナーもいます

kana*

このあたりは会社によってそれぞれです。
私が働いていた会社ではデザインとコーディングは分業制でした。

フリーランスWebデザイナーでもそれぞれで、どちらも行う方もいればコーディングだけ外注される方もいます。(私はどちらも行います)

ただデザインだけ制作するにしても、コーディングの基本的な知識は必須です。

コーディングの知識がないとコーディングしづらい(もしくはできない)デザインを作ってしまって、コーダーや後々更新するお客様などに迷惑をかけてしまいます。

cotoha

ホームページのデザイン(Webデザイン)は紙のデザインと違って、好きなレイアウトで作っていいものではありません。後々コーディングのことまで考えて作る必要があります。

そのため、身につけるべきスキルとしてはWebデザインとコーディングのスキルが必須です。

ホームページ制作以外にもWebデザイナーが任される仕事には色々あるのですが(紙のデザイン・イラスト制作など)、まずはWebデザイン・コーディングをしっかりと身に付けてから、レベルアップの手段として他の分野のスキルも身に付けていきましょう。

Webデザイナーの必須スキル

ひとまずこのスキルだけは身につけておけばOKいうスキルは下記の通り。

必須スキル
  1. Photoshop(デザイン)
  2. html・css(コーディング)

それぞれ順にご紹介します。

cotoha

一通りのスキルを紹介した後、学習方法について紹介していきます。

Photoshop(フォトショップ)

Webデザインを作るためにはまず最低限、AdobeのPhotoshopは使えるようになりましょう!

最近はAdobe XDでWebデザインを作ることも多くなってきていますが、XDで作るにしても、画像補正や細かいデザインにはPhotoshopを使用します。

逆にPhotoshopさえ覚えれば他にソフトは使わなくても、PhotoshopだけでWebデザインは作れます。

なのでPhotoshopは必須です!

▼ Webデザイナー必須アイテム「Adobe CC」を正規より安く購入する方法はこちら

3万以上もお得!Adobe CCの「コンプリートプラン」を安く購入する方法 この記事はこんな方におすすめです Adobe CC【コンプリートプラン】を正規より安く購入する方法が知りたい方 Webデザ...

上記はデジハリのAdobeマスター講座というオンライン講座に、Photoshopを含むAdobeソフトのライセンス1年分が付属しているもの。

独学でPhotoshopを学びたい場合におすすめです。

html・css

ホームページのデザインをPhotoshopで作ったら、それを実際にホームページとして動くように組み立てていく必要があります。この組み立てる作業のことを「コーディング」と言います。

専用の言語を使ってコードを書いていく【=コーディングする】ことにより、ホームページは完成します。
この専用の言語がhtmlとcssです。

  • html(エイチティーエムエル)はウェブページを作成するために開発された言語
  • css(カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語

参考:HTMLクイックリファレンス

昔はホームページ制作と言えば、Adobeのコーディング用ソフト「Dreamweaver」を使って、html・cssでコーディングすることが主流でした。

ですが、現在はWordPressでの制作が主流で、html・cssでイチからコーディングすることは少なくなってきています。

cotoha

WordPress(ワードプレス)に関しては、次の番外編でご紹介します。

なので完璧に覚えないといけない!というわけでもないんですが、基本的な知識は必須。
簡単なサイトでもいいので、html・cssでコーディングはできるようになっておいたほうがいいです。

WordPressで制作するにしても、html・cssの知識はある程度必要ですし、Webデザインを作る上でも知っておいたほうが絶対に良いです!

Webデザインは後々コーディングすることを考えて作らないと「あれ、これ組めない…」となって後から大変な思いをします。

kana*

デザインとコーディングが分業になっている場合は、コーダーからめっちゃ文句言われますw

【番外編】他にもあれば武器になるスキル

まず基本の2つを習得することが重要ですが、他にもあれば武器になるスキルをご紹介しておきます。
余裕があれば、または楽しいと感じられることがあれば、習得を目指してみましょう。

デザイン制作

  1. XD
  2. Illustrator

急激に利用する人・企業が増えている「XD(UI/UXのためのデザインツール)」は使えると有利です。
(使えることが必須の企業もあります)

またIllustratorは、主に紙媒体のデザインやロゴを制作す際に使用するツールです。

Webの会社でもチラシやロゴ等を作ることはありますし、フリーランスになるとしても「ホームページとチラシを作ってほしい」という依頼もよくあるので、使えた方が戦力になります。

cotoha

どちらもPhotoshopが使えたら、似ている部分も多いので、少し使ったら早めに使えるようになると思います。
まずはPhotoshopを使いこなせるようになりましょう!

kana*

私はXDはほとんど使いませんが、Illustratorは紙モノデザインで使います。
Photoshopとは違う魅力があり楽しいと感じるので、使えるようになりました。

コーディング

  1. WordPress
  2. PHP
  3. JavaScript

html+cssでホームページを作ると、Webに詳しい方ではないと更新することは難しいです。
そこで近年は更新のしやすさから、WordPressでホームページを作ることが主流になっています。

WordPressには様々なテーマ(テンプレート)があり、イチから組み立てなくても、テーマに沿って画像やテキストを入れていけばホームページを作ることができます。

デザインにこだわろうと思えば、かなりカスタマイズする必要があります。

慣れたら使いやすいツールですが(私はWordPress大好きです♩)、慣れるまでがかなり大変。
勉強と実践を繰り返して使いこなす必要があります。

cotoha

html・cssをきちんと理解していたら、WordPressの習得は早いですよ!

また得意な方はPHPやJavaScript勉強しておくと◎
極めると、ホームページに自由に動きを付けたり、WordPressのオリジナルテーマを作ったりできます。

kana*

ただ私は何度もチャレンジしましたが、この分野がすっごく苦手!
勉強するのは諦めましたw
身につけることができればかなりの戦力になりますが、なくても何とかなります。

【step2】Webデザイナー必須スキルを習得する(3つの方法あり)

Webデザイナーに最低限必要な2つのスキルについては理解していただけたと思います。
ここからはそのスキルを習得する方法を3つご紹介します。

1. スクールに通う

お金はかかってしまいますがこれが一番良い方法ですね。

独学でも可能ですが、Adobeのソフトはどれも高機能・多機能で、Photoshopだけでも使い方を覚えるのにはけっこう苦労します。

kana*

Webデザイナー歴11年ですが、未だに使いこなせていない機能めっちゃあります。
「こんな機能あったんだ…!」と後から驚くことも。

また、html・cssの勉強も初心者にはハードルが高く…
何から勉強していいのか?わからないことがわからない…という状態になる人も多いかと思います。

やっぱりプロに順序立てて教えてもらって、わからないところは質問できるという環境がベストだと思っています。

プロのWebデザイナーの指導を受けられるスクールもあるので、プロのフィードバックを受けながらデザインを作っていくと独学では難しいデザインセンスも磨くことができます。

▼ プロからの指導を受けられるスクールをまとめました!

現役Webデザイナーがオススメ!Webデザインスクール6選【2022年最新】 この記事はこんな方におすすめです Webデザイナーになるためのスクールを探している方色々スクールがあるけどどこがいいの?と思ってい...

私も実際スクールに通って勉強しました。

kana*

バイトしながらで、途中やる気を見失ったりして1年かかってしまいましたが(汗)
本気で集中的に通えば3ヶ月くらいで済むはず…!

そしてどのスクールでも、一通りの知識を勉強した後、卒業制作で自分でイチからホームページを制作すると思います。

その経験はとても重要で、それが後で説明するポートフォリオになります。

2. 職業訓練校に通う

「職業訓練校」とは、失業中の人が再就職するための公共職業訓練を行う施設のことで、ハローワーク経由で申込みができます。(ハローワークで求職申込みをしている人限定)

メリットはなんと言っても受講料無料かつ、失業保険等のお金ももらえること!
民間のスクールに通えば数十万のお金がかかるところ、逆にお金をもらいながら通うことができ、お金の心配を一切せずに済みます。

職業訓練校には色々なコースがあるんですが「Webデザイナーコース」というものがあり、基本的なソフトの使い方を学ぶことができます。

もちろん有料のスクールほどのレベルではありませんが、「全くの初心者で、基礎的なソフトの使い方を学びたい」という方にはとても良い選択だと思います。

kana*

以前勤めていたWeb制作会社の後輩にも、職業訓練校出身の子が何人かいましたよ。

ただ、申込み時期が決まっているのでいつからでも始められるというわけではなく、そして倍率が高いことでも有名で、誰もが好きなときに受講できるわけではありません。

気になる方はお近くのハローワークで聞いてみてください。

3. 独学で勉強する

Webデザイナーになるための勉強は正直独学では難しいと思います。
ですが、やる気と読解力とセンスがあれば独学でも可能かもしれません。

  • やる気
    1人で行うにはモチベーションの維持が難しいです。
    絶対に独学でWebデザイナーになる!という強い意志とやる気が必要です。
  • 読解力
    Photoshopやhtml・cssを学ぶには、専門用語も多くすぐに理解することは難しいです。
    スクールのように気軽に質問することもできないので、自分1人で理解する読解力が必要になってきます。
  • センス
    センスは元々なくても、センスのあるデザイナーからのアドバイスがあり、それを素直に聞いて実践することができれば、センスは磨かれます。
    元々センスがある人ならいいですが、そうでないなら1人で勉強してもセンスあるデザインを作ることはできません。

上記の内、1つでも自信がないな~という方はスクールをおすすめします。

【step3】ポートフォリオを作る

Webデザイナー必須スキル3つを身に付けたら、すぐに就職活動する人がいます。
ですがそれはNGです。

就活の前にまずはポートフォリオ(自分の作品)を用意しましょう!
Webデザイナーになりたいのなら、ポートフォリオが一番重要と言っても過言ではないです。

私はWeb制作会社で10年間働いていたんですが、その後半は新しく雇うWebデザイナーの書類選考や面接も担当していました。

ここで驚いたことは、ポートフォリオがない人ばかり。

Webデザイナーを探す側としては、学歴や資格・志望動機なんかよりも、「あなたがどんなデザインを作れるのか?」「あなたにはどんな技術があるのか?」が知りたいのです。

フリーランスWebデザイナーになるにしても、仕事を依頼する人が知りたいことはここです。

1つでもいいので、自分でイチからデザイン・コーディングをして、自分の作品を作ってそれを見てもらいましょう。

kana*

ポートフォリオが1つでもあると「どんなデザインができるのか」「どんな技術があるのか」「センスがあるのか」「今はイマイチでも今後伸びそう」など大体わかります。

未経験であってもしっかりとしたポートフォリオがあれば面接に呼んでもらえる確率はかなり上がります。

ポートフォリオの必要性や作り方については下記の記事で詳しく紹介しています。

Webデザイナー人事担当者が語る!採用されるポートフォリオの作り方 この記事はこんな方におすすめです Webデザイナーになるためにはどんなポートフォリオが必要?そもそもポートフォリオって何で必要?就...

【step4】就職活動をする or フリーランスになる

必要なスキルを身に付けて、ポートフォリオを作ったら、Webデザイナーとして働く準備はできました。
主な働き方としては下記の3つ。

  1. Web制作会社にWebデザイナーとして就職する
  2. 一般企業のWeb担当(ホームページの更新・オンラインショップの運営等)として就職する
  3. いきなりフリーランス!

一番のおすすめはやっぱり①。
Web制作会社で働くことで学ぶことが本当にたくさんあります。

フリーランスを目指すにしても、会社での経験や人脈はすごく役立ちます。

kana*

私が今フリーランスとして順調に活動できているのも、会社員時代の経験のおかげです。
色々な仕事を任せてもらえて貴重な経験をさせてもらえました!

ただ未経験からWebデザイナーへの就職はそう簡単ではありません。
(繰り返しになりますが魅力的なポートフォリオがあれば、だいぶ確率は上がりますよ!)

私が未経験からWebデザイナーになった際の体験談については下記の記事をご覧ください。
(私は30社面接に落ち続けました)

未経験からWebデザイナーになるには?【体験談を踏まえてお伝えします】 この記事はこんな方におすすめです 未経験でもWebデザイナーになれる?と思っている方実際に未経験からWebデザイナーになった人の体...

もし制作会社が難しければ「②一般企業のWeb担当」を探してみるのもいいかもしれません。
自社のホームページの更新や、オンラインショップの運営をしてくれる人を探している会社は割と多いです。

WordPressで作られたホームページだったら更新することでWordPressの勉強になるし、バナーのデザインを作る機会もあると思います。

cotoha

実際に稼働しているホームページの更新・運営に携わることは、学ぶことが山程あります。

③のいきなりフリーランス!は今流行ってますが、私は正直難しいと思っています。
Webデザイナーには求められるものが多く、私は会社員時代に少しずつ培ってきました。

会社での経験なしにいきなりフリーランスになると、わからないこと・できないことにたくさん直面するのでは…と思います。

でもチャレンジしてわかることも多いと思うので、チャレンジしてみるのを否定はしません。
上手くいくかもしれないし、上手くいかなかったら就職を選択肢に入れるのもいいですね。

kana*

今はココナラなどで個人で仕事を受けやすい時代ですし、はじめは安めに設定して実績を積んでいくのもいいと思います。

まとめ

Webデザイナーとして働きたいと思っている方へ、Webデザイナーの仕事内容・身につけるべきスキル・スキルを学ぶ方法・Webデザイナーの働き方についてご紹介しました。

Webデザイナーになるためのstepは下記の通り。

  1. Webデザイナーの仕事内容・必須スキルを理解する
  2. Webデザイナーの必須スキルを習得する
  3. ポートフォリオを作る
  4. 就職活動をする or フリーランスになる

Webデザイナーへの道のりは簡単なものではありませんが、勉強やポートフォリオの制作が楽しいと感じたなら、Webデザイナーとしてやっていけると思います。

kana*

やっぱり楽しむのが一番♩
Webデザイナー歴11年の私ですが、今でも大好きな仕事です。

関連記事

現役Webデザイナーがオススメ!Webデザインスクール6選【2022年最新】 この記事はこんな方におすすめです Webデザイナーになるためのスクールを探している方色々スクールがあるけどどこがいいの?と思ってい...
Webデザイナー人事担当者が語る!採用されるポートフォリオの作り方 この記事はこんな方におすすめです Webデザイナーになるためにはどんなポートフォリオが必要?そもそもポートフォリオって何で必要?就...
未経験からWebデザイナーになるには?【体験談を踏まえてお伝えします】 この記事はこんな方におすすめです 未経験でもWebデザイナーになれる?と思っている方実際に未経験からWebデザイナーになった人の体...
ABOUT ME
kana*
Webデザイナー歴11年。今まで作ってきたデザインは約1,000件!10年間Web制作会社に勤務し、2020年にフリーランス(屋号:コトノハデザイン)として独立。今までの経験を活かし、フリーランスWebデザイナーの方・またはそれを目指す方へ役立つ記事を発信しています。