【初心者向け】Webデザイナーになるにはどうしたらいい?最初の準備の仕方を徹底解説!

Webデザイナーは副業で稼ぎやすくフリーランスとして独立しやすいことから
注目されるようになってきました。

・Webデザイナーになりたいけど、何から始めたらいいかわからない

・Photoshopなどを勉強しなきゃいけないのはなんとなくわかるけど、具体的にどう行動すべきかわからない

・Webデザイナーのお仕事が気になるけどセンスが必要なのではないか

・そもそも周りにやっている人いないし、誰も教えてくれる人がいない

そこで今回はどうやったらWebデザイナーになれるのかを解説していきます。

 

新しい働き方を目指すための人のオンラインクリエイティブスクールRirian School.では、

・Webデザイナーを目指している方

・Adobe Illustrator未経験者・初心者の方

・Adobe Illustratorの基礎はわかるけど実際の成果物の作り方がわからない方

・Adobe Illustratorで作品を作成することはできるけど、
実践的な入稿方法やお客様への納品方法などがわからない方

このようなお悩みをお持ちの方にむけて、以下の2つのイラレ講座をご用意しています。

動画でいつもでも学べるイラレストレーター講座
mikimikiからマンツーマンで学ぶ4daysイラストレーター講座

実際に現役のWebデザイナー、また登録者10万人以上のデザイン系YouTuberのmikimikiが直接丁寧にレッスンします

\こんなお悩みをお持ちの方にはIllustrator講座ががおすすめ/

目次

Webデザイナーとは

Webデザイナーはその名の通り「Webサイトのデザインを制作する人」です。
主なお仕事として

  • Webサイト作成
  • LP作成
  • バナーやロゴ作成
  • コーディング

などが挙げられます。

実はWebデザイナーにとって、デザイン作業は全体の中の一部に過ぎません。
デザインを行う前と後に重要な行程が多くあります。

デザインを行う前には、クライアントの「ヒアリン」、競合サイトの「調査・分析」、
コンセプトや構成を決める「サイト設計」、そしてコンテンツを決める「画面情報設計」を行います。

クライアントの課題解決につながる企画と情報設計でなければ、
いいデザインを施しても効果がなく、ここが極めて重要な行程と言えます。

そしていよいよ「デザイ」です。

ここまでに制作した戦略に基づき、魅力的なビジュアルを制作します。

Illustrator, Photoshopなどのグラフィックソフトを使い、
カラーやレイアウトの調整や、写真素材を加工などを行います。

デザインが終わると、HTMLなどの文字列で構成する「コーディング」、
更新しやすいシステムなどを構築する「プログラミング」を行います。

この行程では1文字でも記述を誤ると正しく表示されないため、緻密な作業を行うことが必要です。

そして最終確認を行い、Webサイトが完成します。

この一連の作業は、Webデザイナーが一人で全てを行うこともあれば、
他の職種の人と協力して行うこともあります。

Webデザイナーが実際に作るwebサイトの種類には以下のようなものがあります。

  • コーポレートサイト
  • 採用サイト
  • サービスページ
  • キャンペーンページ
  • LP(ランディングページ)
  • バナー

商品を認知させたい、ブランドイメージを変えたのでサイトもリニューアルしたい作りたいなど
Webサイトを作るのには必ずつくる目的があリます。

Webデザイナーの役目は、クライアントの要望や構成案に書かれた訴求をどのように表現するかを考えて、
デザインとしてアウトプットすることです。

Webデザイナーになるには未経験でもなれるのか

結論から言うと全くの未経験から会社員として働くとしても、フリーランスで働くとしても最初は狭き門です。

出来るスキルが多いとその分Webデザイナーとしての需要が高くなりますので、少しずつスキルを磨き勉強をしましょう。

まずは、以下のようなスキルを身につける必要があります。

  • Photoshop
  • Illustrator
  • コーディング
  • HTML、CSS
  • JavaScript
  • デザインスキル
  • 企画・発想・提案力

詳細は、以下の記事を参考にしてみてください。

関連記事:【厳しい現実】Webデザイナーには全くの未経験でもなれるのか?

Webデザイナーになるために準備するもの

未経験の方がWebデザイナーになるため、まず揃えておく必要があるものがいくつかあります。

【WEBデザイナーになるために準備すべきもの】
パソコン
デザインソフト(デザインを作るためのツール)

この2つを準備すれば、WEBデザイナーになる準備が整います。
どんなものを選べば良いのか、1つずつ解説していきます。

パソコン

まずはパソコンを用意しましょう。

既に持っている人が多いと思いますが、出来るだけスペックの高いパソコンを使うことをおすすめします

Webデザイナーが使用するデザインソフトは割と容量を使うので、
パソコンのスペックが低いとデザイン作成や保存時にかなり時間がかかります。

実際にWebデザイナーとして働く時は、複数のデザインソフトを同時に使う事もあり、
重くなると作業効率がかなり落ちるので、可能ならスペックが高いものを購入がおすすめです。


WindowsかOSはどちらでも問題ないので、好みの方を使いましょう。
以下に最低限必要だと思われるスペックを記載するので、参考にしてください。

必要なPCのスペック
CPU:インテルi5以上
メモリ:16GB以上
OS:Windows or macともに最新
ハードディスク : 500GB以上

8GBでも大丈夫!という記事も見かけますが、ソフトはバージョンアップとともに機能が豊富になり、
その分重くなってしまう傾向にあります。最低でも16GBはほしいところです。

デザインソフト

Webデザイナーに必要なデザインソフトは以下の通りです。

基本的にはAdebe製品で揃えておくと、ほとんどの案件で問題なく受けられます。

必要なデザインソフト
・Photoshop
・Illustrator
・XD

Photoshopは画像加工、バナー作成、サイトデザイン
Illustratorはイラスト作成、バナー作成
XDはサイトデザインで主に使われます。

他にも、デザインソフトはありますが、やっていきたい仕事に合わせて揃えていくのがよいでしょう。
下記記事では、Webデザイナーになるための最初の準備についてわかりやすく解説していますので、チェックしてみてくださいね。

関連記事:【超初心者向け】Webデザイナーになるための最初の準備をわかりやすく解説

また最近ではAdobe系のツールに加え、CanvaというオンラインクリエイティブツールもWebデザイナー、
特にデザインバックグランドのない方にはおすすめのデザインツールです。

Canvaでは操作自体が簡単で豊富なテンプレートと素材を使用することが出来ます。

誰でも、デザインの知識がなくても洗練された画像の加工・編集ができるのが特徴です。

以下の記事を見れば、Canvaの基礎から収益化の方法まで網羅的に分かります。

>>>【完全版】Canva使い方・学習完全マップ(基本操作習得〜収益化まで全公開)

Webデザイナーとしてどうなりたいのかゴールを決めよう!

まずはWebデザインを勉強する目的を明確化しておきましょう!

Webデザイナーに関わらず最も大事なのは目標を立てることです。

目標を明確にして、逆算してやるべきことを考えていきましょう。
目標を立てないと「自分がどんな未来に向かっているのか」「頑張ることで何が起きるのか」の想像がつかず
挫折しやすいです。


「とにかく初案件をとる」でもいいですし、「デザインで売り上げを伸ばしたい」でもいいです。

目的によって必須スキルも違うので、まずはあなたが「どこまで学べば良いか」というゴールを設定するために、
目的を明確化しておきましょう。

(Webデザイナーになるには)働き方について

Webデザイナーとしての働き方は、主に4つあります。

  • 正社員のWebデザイナー
  • 派遣のWebデザイナー
  • インターンでWebデザイナー
  • フリーランスWebデザイナー

まずはWebデザイナーというお仕事があなたに合うか分からないので、
とりあえずやってみたいと思う気持ちがあれば、副業として始めてみるのがおすすめです。

副業としてやってみたい!もっと知りたい!という方は下記の記事を参考にしてください。

関連記事:【入門】WEBデザイナーとして月5万稼ぐ手順〜ステップマップ付き~

(Webデザイナーになるには)就職活動に必須なもの

Webデザイナーになるには、「ポートフォリオ」を作り、クライアントや採用担当に認めてもらう必要があります。

ポートフォリオとは、簡単にいうと「あなたの実績やスキルを証明するもの」をまとめたものです。
実績・スキルとは、webデザイナーとしての制作物です。

Webデザイナーになるために、どのように「就職活動」を行うかも重要です。
就職活動の成功確率を高めるためにも、自分の作品を複数作っておく必要があります。

その作品は 自分のスキルが証明になるためにたくさんの技術を盛り込んだり、
コンセプトやデザインテーマが異なる作品を作ることが望ましいです。 

この作品の出来次第では、未経験の方でも就職活動で優位に立つことができます。

作る作品は架空の会社やお店のWebサイトなど、商用サイトであることが一般的です。

ポートフォリオは面接時や仕事獲得の為に自分のスキルをアピールする絶好のツールとなります。

Web上にPDF化にしておいていつでも共有できる状態でもいいですし、
印刷して紙を冊子化したものを持っておいてもOKです。

クライアントや入社したい会社に合わせて用意しましょう。

ポートフォリオって何を制作したらいいの?

独学であれば架空のお店・会社のWebサイトを制作しましょう。
実際のwebデザイナーのお仕事では前提にクライアントの依頼があります。

未経験のあなたに依頼してくれるクライアントは知り合い以外だと取りにくいので
スキルを証明するために架空サイトを制作していきましょう。


・サイトの種類と何を作成したらいいのか
・制作範囲と制作数

をそれぞれ解説していきます。

サイトの種類と何を制作したらいいのか

まずはサイトの種類です。

  • コーポレートサイト
  • 採用サイト
  • サービスページ
  • キャンペーンページ
  • LP(ランディングページ)
  • バナー

上記のサイトを全部作る必要はありません。
最低限作るべき架空サイトは以下の2つになると思います。

  • コーポレートサイト
  • LP(ランディングページ)

理由としては実務で一番制作頻度が多い、題材として作りやすいからです。

題材として作りやすいというのは、Webデザイナーはクライアントの要望やディレクターが作成した構成案を元にデザインを制作します。

独学で架空サイトを制作する時は、このクライアントの要望や
ディレクターが作成した構成案を自分で準備する必要があります。

上記で選んだコーポレートサイト、LPはこの準備がしやすです。

この架空サイトを作る過程では、報酬はもちろん得られませんが、
クライアント側に立って物事を考えたりできるようになるいい練習になります。

制作範囲と制作数

最低限制作範囲として必要なものは、

  • 制作範囲:PC・スマホのTOPページデザインだけ
  • 制作数:最低でも気合の入った質のいいものを3つ

Webサイトは数ページのものから数千ページに及ぶものまでありますが、
架空として制作するのはTOPページだけで大丈夫です。

また現在はスマホ版に対応しているサイトがほとんどなので、スマホ用のデザインも作っておきましょう。

どのくらいの数制作すればいいのかについては、制作数が多いに越したことはありませんが、最低でも気合の入った質のいいサイトを3つほど作りましょう。

 

就職活動について

未経験者を積極的に採用するかどうかは、会社のスタンスによります。

会社が即戦力を欲しがっている場合は、実務経験のある人を優先的に採用するケースもあります。
しかし経験者の中にはこれまでの自分のやり方を曲げられない人や、
他の会社の色がつきすぎていてあまり馴染めない人などもいます。

そのため、未経験でもやる気があれば育てたいと考える会社もあります。

とはいえ未経験であっても求められるスキルは高いことが多いです。

様々な求人サイトを見て「就職のためには、どんなスキルがどれぐらい必要なのか」を見極めたり、
転職エージェントを使用して自分の市場価値を調べてみましょう。

関連記事:【保存版】未経験Webデザイナー向けの求人サイト10選

どんな人がWebデザイナーに向いているのか

地道にコツコツ作業をすることが好きな人
・好奇心を持っていて、新しいものに興味のある人
・制作することが好きな人
・コミュニケーション能力がある人
・時間管理ができる人

納期があるものなので時間管理ができるのは重要なポイントですが、
何よりWebデザインをしている時に、楽しいと思える人はWebデザイナーのお仕事を長く続けている傾向にあります。

よくある質問

フリーランスと業務委託の違いとは

どちらも「会社に所属せずに働くこと」というイメージを持つ方が多いと思いますが、これらはそれぞれ違った意味合いを持つ言葉です。

フリーランスとは、企業や組織に属さず個人で業務を請け負う働き方を指します。

業務委託は、案件ごとにクライアント(発注側)がフリーランスなど(受注側)に業務を委託する契約方法のことを指します。

つまりフリーランスは働く方法であり業務委託は契約方法です。

LP(ランディングページ)とは

ランディングページ(LP)とは、Landing Pageの略称です。
Landingには「着地」という意味があるため、Landing Pageを直訳すると「着地ページ」となります。

一般的には、リスティング広告やSNS広告といった
Web広告をクリックした時のリンク先(Web)のページをランディングページと呼びます。

ランディングページ(LP)は省略して「エルピー」と表現することもあります。

まとめ

この記事ではWebデザイナーになるためのロードマップを簡単に解説していきました。

Webデザイナーの勉強を早速スタートしていきましょう!

 

新しい働き方を目指すための人のオンラインクリエイティブスクールRirian School.では、

・Webデザイナーを目指している方
・Adobe Illustrator未経験者・初心者の方
・Adobe Illustratorの基礎はわかるけど実際の成果物の作り方がわからない方
・Adobe Illustratorで作品を作成することはできるけど、実践的な入稿方法やお客様への納品方法などがわからない方

このようなお悩みをお持ちの方にむけて、以下の2つのイラレ講座をご用意しています。

動画でいつもでも学べるイラレストレーター講座
mikimikiからマンツーマンで学ぶ4daysイラストレーター講座

実際に現役のWebデザイナー、また登録者10万人以上のデザイン系YouTuberのmikimikiが直接丁寧にレッスンします

\こんなお悩みをお持ちの方にはIllustrator講座ががおすすめ/

 

よかったらシェアしてね!

この記事を書いた人

目次
閉じる