新卒でフリーランスになって月144万円かせぐまでの全てをnoteにまとめました

ウェブデザイナーに必要なスキルとは。未経験から転職やフリーランスへのルートも解説

「ウェブデザイナーに必要なスキルって何だろう。今は未経験だけど、ゆくゆくはウェブデザイナーとして仕事したい!」

と思っている方、こんにちは。現役でフリーランスのウェブデザイナーをしている、くろぽん(@ktsuyoc)です。

ウェブデザイナーって一言で言っても、求められるスキルはたくさんあります。HTML/CSS、JavaScript、Photoshop、Illustrator、PHP、WordPress…などなど。

ぼくがウェブデザインを始めたころは「こんなに必要なスキルがあるんなら、ウェブデザイナーになんて一生なれなくない?」と冗談抜きで思ってました。

とはいえ、いざウェブデザイナーになってみると、最初から必要なスキルは意外と多くないことが判明。そこでこの記事では、

  • ウェブデザイナーに必要な基本スキル+あるとよいスキル一覧
  • 未経験からウェブデザイナーを目指す方法
  • ウェブデザイナーになったあとのキャリアプランまとめ

の順に、ウェブデザイナーに必須のスキルから数年後のキャリアプランまでを解説します。

必要なスキルを見きわめることができれば、ウェブデザイナーとして仕事をすることも遠くはありません。

まずはこの記事で、ウェブデザイナーはどのようなスキルを持っているべきなのか、ざっくりおさえましょう!

ウェブデザイナーに必要なスキルは「フロントエンド&デザイン」

ウェブデザイナーに必要なのは「フロントエンド」と「デザイン」のスキルです。以下では、それぞれをもう少し細かく解説します。

フロントエンドで初心者がつけておきたいスキル2つ

フロントエンドで初心者がつけておきたいスキルは、

  1. HTML
  2. CSS

の2つです。

1. HTML:ウェブサイトの骨組みを作る言語

HTMLとは、いわばウェブサイトの骨組みを作る言語です。どのウェブサイトでも必ず使われており、HTMLはウェブデザインに欠かせません。

家で例えるなら、土台や柱などにあたります。これがないとウェブデザインは始まりません。

2. CSS:ウェブサイトの飾りつけをする言語

CSSは、HTMLで作った骨組みに見た目のデザインを追加する言語です。家なら壁紙とか、床とかですね。

CSSをどのように記述するかによって、ウェブサイトのデザインが大きく変わります。また、最近はアニメーションもCSSで作れるようになってきました。

次は、デザインにおいて習得しておきたいスキルを紹介します。

デザインで初心者がつけておきたいスキル2つ

デザインで初心者がつけておきたいスキルは、以下の2つです。

  1. Photoshop
  2. Illustrator

1. Photoshop

Photoshopは写真の加工に使われることが多いソフトです。そして、ウェブサイトのデザインにもよく使われます。

後述するIllustratorでもデザインは可能です。しかし仕事によって使うソフトが違うこともあるため、両方とも必須のスキルとして紹介しています。

2. Illustrator

illustratorはイラストやチラシのデザインなどに使われるソフトです。ぼくはこれを使ってウェブサイトをデザインすることが多いですね。

どちらのソフトをメインで使うかは、デザイナーによって好みが分かれます。まずは両方とも使ってみて、使いやすいほうを相棒として選んでみてください。

補足:デザインにセンスは必要ない

「デザインってセンスがないとダメなんでしょ?」と思う方もいるかもしれませんが、デザインにセンスは必要ありません。知識があれば大丈夫です。

ぼくは『ノンデザイナーズ・デザインブック』を使ってデザインの考え方を学びました。これを読めば、デザインをやったことない人でも整って見えるデザインが実現します。

そこからは調べながらスキルをつけたのですが、心配な方は『なるほどデザイン』など売れているデザイン書籍を読んでおくとよいかなと。

次はウェブデザイナーが”持っておくとよい”スキルを紹介します。

ウェブデザイナーが持っておくとよいスキル一覧

ここからは、ウェブデザイナーが持っておくとよいスキルを

  • WordPress
  • JavaScript
  • PHP
  • コミュニケーションスキル
  • ライティングスキル

の順に紹介します。これらのスキルをつけておくと、できる仕事の幅がグッと広がっておすすめです。

WordPress

WordPressとは、文章や写真などを整理して表示するためのシステムです。このブログもWordPressを使って作りました。

定期的に記事を更新するメディアや、お知らせが多い会社のウェブサイトなどに使われることが多いです。

人気のヒミツは管理画面が使いやすく、パソコン初心者でも扱いやすいこと。そのため、WordPressは世界中で使われています。(言ってしまえば世界中に仕事があるわけですよ)

JavaScript

JavaScriptは、ウェブサイトに動きをつけるための言語です。ひきつづき家の例えをすると、JavaScriptはお掃除ロボットや洗濯乾燥機などにあたります。

要するに「なくてもいいけど、あるとめっちゃ便利」という。最優先でつけるべきものではありませんが、ゆくゆくは習得したいスキルです。

PHP

PHPは、ウェブサイトとデータベースをつなぐ言語です。具体的には、お問い合わせフォームを作るときや掲示板への投稿を表示させるときなどに使います。

先述のWordPressにもPHPが使われているため、しっかりカスタマイズしたいときはWordPress内でPHPのコードを書くことも。

ちなみにPHPはフロントエンド(ウェブサイトの見た目)というよりは、バックエンド(ウェブサイトの仕組み)寄りの知識です。後述しますが、バックエンドも身につけるとウェブエンジニアとしてのキャリアも見えてきます。

コミュニケーションスキル

ウェブデザイナーはコミュニケーションが取れることも重要です。例えば、

  • チームで1つのウェブサイトを作るとき
  • ウェブの知識が少ないクライアントと話すとき
  • フリーランスとしてクライアントと交渉するとき

など。技術がいくらあっても、それを他人にうまく伝えることができないと厳しい場面も少なくありません。

特に、ウェブデザイナーとして独立したいならコミュニケーションのスキルは必須です。

ライティングスキル

「デザインなのになんで文章を書くスキルが必要なの?」と思うかもしれませんが、ウェブサイトって必ず文章が入っていますよね。

デザインだけでなく、文章の作成から関わることができると、仕事の幅がグッと広がります。

クライアントの目標(売上アップ、問い合わせ増加など)を意識して、セールスライティングやコピーライティングができると、もはや無敵かと。

ここまで、ウェブデザイナーが持っておくとよいスキルを紹介しました。続いては、未経験からウェブデザイナーを目指す方法について解説します。

未経験からウェブデザイナーを目指すなら、まず独学

未経験からウェブデザイナーを目指すなら、まずは独学で続けてみることをおすすめします。なぜなら、どちらにせよ最終的には独学でスキルを身につけ続ける必要があるからです。

というのも、ウェブデザインの世界は次から次へと新しい技術が出てきます。そのため、それらの技術を自分で学べないと、時代に置いていかれるのです。

ウェブデザインを独学していけるかどうかは、本格的にはじめる前にいったんやって確かめておくべきかと思います。

独学で挫折しない方法は「ウェブデザインの独学で挫折しないための3ステップを、経験談をもとに紹介。」で書いているので、気になる方はぜひ。

「独学だとダラけるのが見えてるから、最初からスクールに通いたい!」という方は、「【2018年版】おすすめのウェブデザインスクール比較ランキング9選!初心者も迷わない料金・内容まとめ」をチェックしてみてください。あなたに合うウェブデザインスクールが見つかるはずです。

ここまで未経験からウェブデザイナーになる最短ルートについて紹介しました。次は、ウェブデザイナーのキャリアプランについてまとめます。

ウェブデザイナーになったあとのキャリアプランまとめ

ここからは、ウェブデザイナーのキャリアプランについて、

  1. バックエンドもしっかり学んでウェブエンジニアになる
  2. ウェブディレクターでサイトの設計をする
  3. 起業やフリーランスを目指す

の順に紹介します。

1. バックエンドもしっかり学んでウェブエンジニアになる

1つ目はバックエンドのスキルも習得してウェブエンジニアになることです。黒い画面を見ながらカタカタやっている人は、たいていバックエンドを扱っています。

使うのはRubyやPHP、MySQLのような言語です。データベースから情報を引っ張ってきたり、逆に入力された情報をデータベースに入れたりします。

バックエンドも習得すると、ウェブサイトの見た目と中身の両方を作ることが可能です。コードを書くのが好きな方はバックエンドに進むことをおすすめします。

2. ウェブディレクターでサイトの設計をする

自分で手を動かしてデザインやコーディングをするのではなく、サイトの企画や設計をするディレクターになるルートもあります。

ディレクターはデザイナーよりも上流の工程なので、ぶっちゃけ儲かりますね。ただし、ウェブサイトに対しての知識や人員のマネジメント力、企画力や交渉力など幅広いスキルが必要です。

ぼくも最近はディレクションが増えてきました。ウェブデザインだけでなくビジネスのスキルも必要ですが、やりがいのある仕事です。

3. 起業やフリーランスを目指す

ウェブデザイン会社で働くのではなく、会社を自分で作ったり、はたまた独立したりするのも手段の1つです。

クライアントと直接交渉して、自分で自分の金額を決める必要があったり、確定申告をする必要があったりと大変な点も少なくありません。

が、自分の裁量をかなり取れるので、場所や時間にとらわれない働き方も可能です。

ぼくはフリーランスなので、この3番のキャリアプランを選んだことになりますね。実際、時間や場所にとらわれず、いつでもどこでもガンガン稼いでいます。

ノウハウは「note「ノンスキル・文系・コネなし新卒フリーランスが、独立8ヶ月で月144万円を達成するまでの全て」をつくりました」にまとめたので、本気で稼ぎたい方はどうぞ。再現性は高いですが、簡単な道ではないので注意してください。

必要なスキルを見極めて、最速でウェブデザイナーを目指そう

ここまで、ウェブデザイナーに必要なスキルやキャリアプランを紹介しました。まとめると、ウェブデザイナーに必要なスキルは、以下の通りです。

ウェブデザイナーに必要なスキル
  • フロントエンド:HTML、CSS
  • デザイン:Photoshop、illustrator

ウェブデザイナーに最低でも必要なスキルって、そこまで多くないんですよね。とはいえ、持っておくとよいスキルは以下の通り、幅広くたくさんあります。

ウェブデザイナーが持っておくとよいスキル
  • WordPress
  • JavaScript
  • PHP
  • コミュニケーションスキル
  • ライティングスキル

これらのスキルがあると、さまざまな仕事を受けることができるのはもちろん、食いっぱぐれないウェブデザイナーになれるはずです。

最後に、ウェブデザイナーになったあとのキャリアプランとして、

  1. バックエンドもしっかり学んでウェブエンジニアになる
  2. ウェブディレクターでサイトの設計をする
  3. 起業やフリーランスを目指す

の3つを紹介しました。

ウェブデザインというと難しく感じてしまうかもしれませんが、分解してみると最初から身につけたいスキルはそこまで多くありません。

文中でも紹介した通り、まずは独学でやってみて、難しそうならスクールの手を借りるのがおすすめです。