Webデザイナーになりたい！けど、未経験でもなれるの？
Webデザイナーになるには、どんなスキルが必要なの？
昨今インターネットの普及により、Webデザイナーという職業がますます注目を浴びています。
未経験でもWebデザイナーになれるのか、Webデザイナーになるにはどんなスキルが必要なのか知りたい方も多いでしょう。
この記事では、未経験でWebデザイナーになる方法やWebデザイナーに必要なスキルをご紹介します。Webデザイナーの需要や将来性についても解説しますので、キャリアプランの作成に役立ててください。
この記事の目次
未経験でも独学でWebデザイナーになれるの？
未経験でも、独学でWebデザイナーになることは十分可能です。未経験からWebデザイナーとなり活躍されている方がたくさんいます。
独学の場合は、Webデザイナーの仕事や必要なスキルを理解したうえで、正しいフローに沿って勉強する必要があります。また、不明点があったらすぐに質問できる環境を作る、モチベーション維持のため勉強会に参加するなど、挫折しないための工夫をしましょう。
Webデザイナーの仕事内容と必要なスキル
続いて、Webデザイナーという職業への理解を深めるために、Webデザイナーが普段行っている仕事と必要なスキルを工程別に説明いたします。
Webサイトの企画
Webサイトの企画とは、企画書に自社の目的や顧客のニーズにマッチするWebサイトのコンセプトをまとめることです。
一般的には、Webディレクターと呼ばれる職業の方が担当します。企業やプロジェクトによっては、一定の経験を積んだWebデザイナーが対応するケースもあります。
必要なスキル
- 企画力
- マネジメント力
Webサイトの設計
Webサイトの企画が完成したら、「ワイヤーフレーム」というツールを使ってWebサイト全体のコンテンツ、構成、そしてレイアウトといった骨組みを固めていきます。これをWebサイトの「設計」といいます。
ワイヤーフレームには、Webページのレイアウト、構成要素（テキスト、画像、ボタンなど）をまとめていきます。また、各構成要素にどういった機能を盛り込むかも併せて記載しておきます。
Webサイトの設計がきちんと固まっていないと、その後にクライアントから「そんなつもりではなかった」「こんな画面だとは聞いてない」と言われてしまう可能性があります。
また、Webサイトの設計ではUI/UX（ユーザーが見やすく、使いやすいか）も意識することが重要です。
UI/UXについて詳しく知りたい方は、以下の記事をお読みください。
必要なスキル
- ワイヤーフレーム作成ツールのスキル
Webサイトのデザイン
次に作成したワイヤーフレームをもとに、PhotoshopやIllustratorなどのツールを使ってWebサイトをデザインします。
Photoshopは、画像の編集・加工はもちろん、Webページ全体の配置やデザインを作るためのものです。また、Illustratorはグラフィックデザイン全般や、ロゴやアイコンなどの細かいパーツを作成するためのツールです。
Webサイトの概要自体は、設計工程である程度決まっています。このデザイン工程では、Webサイトの配色、レイアウトや各構成要素の配置などを最終決定していきます。
デザイン工程でつくる成果物は全体像をざっくりとまとめたワイヤーフレームよりも、実際のWebサイトに近いものです。そのため、クライアントからもさまざまな意見が出てくることがあります。
クライアントにデザインを提示する際は、幾つかのパターンを作ることが多いです。デザインパターンが異なるものを比較することで、クライアントの意見がクリアになるからです。
必要なスキル
- Photoshopのスキル
- Illustratorのスキル
Webサイトのコーディング
Webサイトのデザインが確定すると、いよいよ「コーディング」という工程に入ります。コーディングとは、前の工程で検討したWebサイトのデザインをHTML、CSS、JavaScriptなどの言語を使い再現する作業です。
HTMLはWebサイトの画像やテキストをはじめ、見出し、リンクといったコンテンツの要素を定義するものです。CSSは文字の色やサイズ、さらにはレイアウト全体の位置といった外観を整えるために使用するマークアップ言語のことを指します。
JavaScriptは、Webサイトの要素にアニメーションなどの動きをもたらすために使用するプログラミング言語です。
コーディングは企業やプロジェクトによっては、「マークアップエンジニア」と呼ばれる人が担当します。
ただマークアップエンジニアがいる場合でも、Webデザイナー自身もHTML、CSS、JavaSciptといった知識は必須となります。Webデザイナーがデザインの実現可否を判断し微調整も行うためです。
また、最近ではWebサイトを作成するために、「WordPress」というCMS（Contents Management System）を利用するケースが増えています。
WordPressはPHPというプログラミング言語で作られており、カスタマイズするためにはPHPの知識が必要です。WebデザイナーがPHPを使ったプログラミングを求められることはほとんどありませんが、知っておけば仕事の幅は広がるはずです。
必要なスキル
- HTML/CSS/JavaScriptなどのコーディングスキル
- PHP ※仕事の幅を広げるため、あればベター
未経験でWebデザイナーになるには？5STEPで転職成功！
プログラミングやデザイン未経験の方が、Webデザイナーになるには何から始めればよいでしょうか。
続いては、未経験でWebデザイナーに転職するための5つのステップをご紹介します。
STEP1.Webデザイナーの働き方を知っておく
Webデザイナーを目指すなら、どんな働き方をしたいのか、目標を決めることが大切です。
Webデザイナーにはさまざまな働き方があることをご存知でしょうか。具体的には、下記の3つです。
- 広告代理店・制作会社
- フリーランス
- インハウス
ひとつずつ見ていきましょう。
広告代理店・制作会社
広告代理店や制作会社で働くWebデザイナーは、顧客のWebサイトをデザインするのが主な仕事です。
広告代理店や制作会社の顧客は多岐に渡るため、さまざまな業界や企業のWebサイトデザインに携わることができます。場合によっては企画から参画し、クライアントとともに1つのものを作り上げていくという経験を積める可能性もあります。
規模の大きいプロジェクトに関わりたい方におすすめの働き方です。
フリーランス
フリーランスとは特定の企業に属さず、個人で働いて収入を得る個人事業主を指します。
企業のWebデザイナーと異なり、仕事を自分で獲得する必要があります。また、Webデザインとは直接関係がない業務もこなさなければなりません。
フリーランスのWebデザイナーは仕事が安定的に発生する保証がないので、継続的な収入を得るためにスキルアップや幅広い人脈の形成が必要です。
とはいえフリーランスは仕事に対する自由度が高いので、「自分のペースで納得のいく仕事を選んで働きたい」という方に向いています。
インハウス
特定の企業に属して、「インハウス」として働くWebデザイナーもいます。
インハウスとは「社内」や「組織内」という意味です。主に自社のWebサイト、自社プロダクトのキャンペーンサイトのデザインを担当します。
そのため、「次から次へと新しいものをつくりたい」と考えるタイプよりも、「1つのものにじっくりと向き合いたい」というタイプの方が向いています。
STEP2.必要なものを準備する
Webデザイナーになるために、何が必要になるのか具体的にわからない方もいますよね。
Webデザイナーになるために必要なものは下記の3つです。
- パソコン
- グラフィックソフト
- テキストエディタ
それぞれ説明していきます。
パソコン
Webデザイナーになるには、第一にパソコンを準備しましょう。
パソコンといっても、性能によって価格はさまざまです。OfficeやWebサイトを閲覧する程度の利用目的であれば、高性能ではないパソコンでも十分です。
ただし、Photoshopや Illustratorといったソフトは、パソコンに高い負荷がかかるため、一定以上の性能を持つパソコンが必要です。
Adobeの公式ページによれば、Illustratorの必要動作環境は以下の通りです。
| Windows | Mac | |
| RAM | 8GB以上の RAM （16GB以上を推奨） | 8GB以上のRAM（16GB 以上を推奨） |
| GPU | OpenGL 4.x ※ GPU パフォーマンスを使用するにはWindows に1GB以上の VRAM（4GB以上を推奨） | OpenGL 4.x ※ GPUパフォーマンスを使用するにはMacに1GB以上のVRAM（推奨：2 GB） |
抜粋：Illustratorの必要動作環境 、参照：Adobe Illustrator の必要システム構成
高性能のパソコンは大きな出費となりますが、Webデザイナーを目指すのであれば必要な投資です。
ストレスなく動作するパソコンを購入しましょう。
グラフィックソフト
次に、PhotoshopやIllustratorなどのソフトウェアを準備します。
以前、PhotoshopやIllustratorなどのソフトウェアは高価でしたが、最近ではサブスクリプション形式で使用できるAdobeクリエイティブクラウド（CC）というサービスが提供されています。Adobeクリエイティブクラウドを利用すれば、月々わずか数千円の負担でPhotoshopやIllustratorなどを使用可能です。
PhotoshopやIllustratorの代替となるフリーソフトウェアもありますが、実際に使ってみると細かいところの操作性や効率に差があります。
Webデザイナーを目指すためには、業界のデファクトスタンダードであるPhotoshopやIllustratorを使用するようにしましょう。
テキストエディタ
Webデザイナーになるには、テキストエディタの準備も必要です。テキストエディタはHTML、CSS、JavaScriptなどのコーディングをする際に使用します。
極論を言えば、コーディングはWindowsのメモ帳アプリでも可能です。ただ、メモ帳は単純にテキストを入力する目的のアプリであり、コーディングを想定して作られているわけではありません。
Webデザイナーを目指すのであれば、幾つかのテキストエディタを試し、自身に合うものを探してください。
ここではおすすめのテキストエディタを幾つかご紹介しす。
Atom（アトム）
Atomは、Gitホスティングサービスを展開するGitHub社が開発したテキストエディタです。
インストールすれば、誰でもすぐに無料で利用できます。
拡張機能の「パッケージ」が豊富である点、便利なショートカット機能で生産性向上につながる点、予測変換機能が優れている点が評価されており、多くのユーザーに指示されるテキストエディタです。
CotEditor
CotEditorは、MacOS向けのテキストエディタです。必要最低限の機能のみに限定しているため、非常に軽いのが特徴です。
最大の特徴は「シンタックスハイライト」という機能が搭載されていることです。シンタックスハイライトとは、テキスト内の特定の語句に対して、フォントや色を分けて表示してくれる機能です。
この機能は、テキストが抜群に読みやすくなり生産性の向上に貢献します。
「操作中の重さを感じない」と評判のCotEditorは、とにかく軽いソフトを使いたい人におすすめのテキストエディタです。
Visual Studio Code
Visual Studio Codeは、Microsoftが提供している無料のテキストエディタです。
軽量でサクサク動き、プラグインと呼ばれる拡張機能も豊富であるため、お気に入りの環境にカスタマイズすることができます。またWindows、Mac、LinuxなどOSを選ばない点や、JavaScriptのデバッグができる点も魅力です。
ITエンジニア向けのQ＆Aサイト「Stack Overflowの調査」では、Visual Studio Codeは2019年に最も人気が高いテキストエディタであるとわかっています。
なお、MicrosoftはほかにもVisualStudioという統合開発環境を提供していますが、Visual Studio Codeとは全く別ものなので注意してください。
STEP3.デザイン・コーディングの勉強をする
パソコン、グラフィックソフト、テキストエディタが揃ったら、いよいよWebデザイナーになるための勉強をスタートしましょう。
デザインやコーディングを勉強する方法は、主に「独学で学ぶ」「プログラミングスクールで学ぶ」の2つです。それぞれメリットとデメリットがあるので、紹介いたします。
独学で勉強する
独学でもWebデザイナーになることは可能です。プログラミング学習はIT人材不足や小学校教育における必修化の波を受けて、関連書籍が続々と発売されています。
本は体系的に知識を習得できるため、独学には欠かせない教材です。
インターネットにつながるパソコンさえあれば、プログラミングの学習サイトで勉強することもできます。
Progateやドットインストールといった学習サイトは、わかりやすいコンテンツが用意されているため、初心者にはぜひおすすめしたい教材です。
本や学習サイトで一通り基礎知識を学んだあとは、PhotoshopやIllustratorを使って実践しましょう。手を動かせば動かしただけ、スキルが身につき自身が成長していることを体感するはずです。
- メリット
- ・いつでも好きな時間に勉強できる
・費用が安い - デメリット
- ・勉強につまづいたときに解決に時間がかかる（あるいは解決できないことがある）
・モチベーションの維持が難しい
・誤った知識を身につけてしまうリスクがある
Webデザイナーを独学で目指す人におすすめしたいサイトやサービスにご興味がある方は、以下を参考にしてみてください。
プログラミングスクールに通う
Webデザイナーを目指すのであれば、プログラミングスクールに通うのもおすすめです。特に現役ITエンジニアの講義を受けられるスクールであれば、最先端の知識やスキルを学べます。
また、勉強につまづきそうになったとき、スクールであれば講師のほかコンサルタントなどが手厚くサポートしてくれる点も魅力です。
「プログラミングスクールは費用が高いから……」というイメージをお持ちの方も少なくありません。
しかし最近では、低コストかつ充実したカリキュラムのサブスクリプション型プログラミングスクールも展開されています。
ほかにも、卒業後の就職・転職サポートを行っているプログラミングスクールもあり、企業のWebデザイナーとして働きたいという方には心強いサービスです。
- メリット
- ・現役ITエンジニアの講義を受けることができる
・就職や転職サポートを行ってくれる
・メンタリング会議やチャットサポートなどモチベーションを維持する仕組みがある - デメリット
- ・独学と比較するとコストがかかる
・学習を自分のペースで進めにくい
STEP4.ポートフォリオを作成する
Webデザイナーとしての基本的な知識やスキルが身についたら、今度はポートフォリオを作成します。
ポートフォリオは、就職・転職活動、案件獲得において企業へのアピールとなる重要な資料です。採用を担当する面接官は、履歴書や面接だけでなくポートフォリオを見て合否を判断します。
Webデザイナーとしてのスキルを証明できる、さまざまなデザインや技術要素を使用したWebサイトを複数作成しておくとよいでしょう。
前述したプログラミングスクールでは、ポートフォリオ作成のサポートやアドバイスをしてくれるところもあります。ぜひ活用してみてください。
Webデザイナーのポートフォリオの詳細ついては、以下の記事を参考にしてみてください。
STEP5.転職活動をする
ポートフォリオの作成が完了したら、いよいよ転職活動です。
転職活動は、転職エージェントを活用するとよいでしょう。それぞれの希望に合った企業を見つけてくれますし、転職に関する相談にも乗ってくれます。
フリーランスで働きたい方は、クラウドソーシングサイトで求人や案件を探してみましょう。フリーランスとしてキャリアアップするには、コツコツと案件をこなし実績を積むことが大事です。
Webデザイナーの需要と将来性
2019年、インターネット広告費がテレビ広告費を追い抜いたことは、業界関係者の中では大きな話題となりました。これは、メディアの中心がテレビからインターネットに入れ替わったことを意味します。
すでにインターネットは密接に私たちの生活に深くかかわっています。今後もさまざまなビジネスやエンターテインメントがインターネットへとシフトするでしょう。
Webサイトは今後あらゆる企業組織でインフラ化され、Webデザイナーという職種についても引き続き高い需要が維持されることが予想されます。
参考までに、Webデザイナーの平均年収を確認しておきましょう。
求人ボックスによれば、Webデザイナーの平均年収は約447万円ですが、なかには年収700万円台を提示する求人も存在し、幅広いことがわかります。
企画力やプログラミングスキルなど+αのスキルを身につければ、Webデザイナーとしての市場価値は高まるといえます。
参照：2019年 日本の広告費 - ニュースリリース一覧 - ニュース - 電通
Webデザインを効率よく学ぶなら
Webデザインを効率よく学ぶなら、スクールに通うのがおすすめです。
何から始めたらいいかわからない方や、目的が明確でない方はSAMURAI ENGINEERの無料カウンセリングを受けてみてはいかがでしょうか？
無料カウンセリングでは、プログラミング学習に関する悩みだけではなく、今後の目標、理想のキャリアビジョンのほか、人生をより良くするためにどうすれば良いかなどご相談いただけます。
専属講師によるマンツーマン指導、オーダーメイドカリキュラムなどを採用し、これまでに多くの未経験者をWebデザイナーとして輩出してきました。
完全オンラインで、ご自宅やコワーキングスペースなど、リラックスできる環境で受講していただけますので、お気軽にご相談ください。
まとめ
今回は、未経験でもWebデザイナーになれる方法を説明しました。
正しいステップで勉強すれば、Webデザイナーとして希望の働き方を実現できます。
Webデザイナーは、今後も高い需要が予想される職種です。身に付けるべきスキルやステップもたくさんありますが、1つずつクリアしていきましょう。
この記事のおさらい
Webデザイナーになるには、1.「Webデザイナーの働き方を知っておく」、2.「必要なものを準備する」、3.「デザイン・コーディングの勉強をする」、4.「ポートフォリオを作成する」、5.「転職活動をする」の5STEPを行ってください。
Webデザイナーになるため必要なスキルは、Webデザイン関連ツールのスキル、HTML、CSS、JavaScriptのスキル、さらにはコミュニケーションなどのスキルも必要です。
インターネットへシフトしてきているため、Webデザイナーは今後も高い需要、将来性が見込めます。
