【現役Webデザイナーおすすめ】未経験でも独学でWebデザイナーになる方法

【現役Webデザイナーおすすめ】未経験でも独学でWebデザイナーになる方法

「未経験だけどWebデザイナーになりたい!でもなり方がわからない…」
「Webデザイナーを目指しているけど方向性や勉強の仕方がわからない」
「現在は別の業界で働いているけど、将来性のある業界に転職したい」
そんな疑問をWebデザイナーに転職する前の自分も抱いていました。
今回、現役Webデザイナーの自分が今だったら効率よく独学でWebデザインを学べる方法をまとめてみました。

CONTENTS

【結論】未経験でも独学でWebデザイナーになれます

未経験でも独学でWebデザイナーになれますか?どうやってを勉強したんですか?など聞かれることがありますが、結論から言うと、独学でもWebデザインを身に付けることはできます!ただWebデザイナーになるには勉強の仕方や順序が重要です。

Webデザイナーといってもやる事はデザインだけではありません。現に自分はデザイナー兼コーダーとして仕事をしています。
デザインだけをやりたい!って方もまずWebサイト全体の仕組みを理解していないとデザインができません。
なので、まずはざっくりでもいいのでWebサイト全体を学ぶ事が重要です。

WebデザイナーになりたいならまずWebサイトを作るべき

よくうちの会社にもWebデザイナーになりたいです!って面接に来る方がいますが、Webサイトは作ったことがありません。。と答える方が多いです。。新卒の場合はまだわかりますが、中途の場合でどうしてなりたいのにやったことがないんだろう?と考えてしまいます…

幼い頃を思い出してください。プロ野球選手になりたかったら野球をしますよね?パティシエになりたかったらケーキやお菓子を作ってみますよね?
Webデザイナーも同じでWebデザイナーになりたかったらまずWebサイトを作ってみましょう。まず行動することが重要です。

自分のWebサイトやポートフォリオ、ブログや他の人のサイトのまねをして作ってもなんでも構いません。
作ってみて初めて自分に向いているか?デザインをしたかったけどコーディングの方が面白いなど色々と発見もあります。

最終段階では自分で作ったオリジナルのサイトをまとめたポートフォリオサイトのURLを貼ってあげると転職や就活の際に効果絶大です。と言うか転職の場合はここがすべてです。

Webサイト制作に必要なスキル

一般的な制作会社などでWebデザイナーがWebサイト制作に必要なスキルは下記のすべてを一定レベル使いこないしています。

  1. デザインの基礎知識
  2. デザインツールのスキル(XDやIllustrator、Photoshop)
  3. HTMLとCSS
  4. JavaScriptとjQuery

一見、学ぶことが多そうですが、最初は完璧を求めず少しずつ勉強していきましょう。どれも勉強すると必ず身につけれることができます。
自分の場合は周りにWebデザイナーやWebサイト制作をしている人がいなかったため、またWebサイト制作に関する本などが少なく完全に独学で、勉強する順番もやりたいところからやるスタイルだったので効率が悪かったです。。。

では、ここから実際にWebサイトを制作する手順を5つのStepでご紹介していきます。
最初はデザイン、後半はコーディングの流れになっています。

Step1 【デザイン】 Webデザインの知識を独学で身につける

紙のデザインはやったことがあるけど、Webデザインはやったことがない方は多いと思います。
紙のデザインができる人はWebデザインもできると言う人がたまにいますが、最終的にはできてもWebデザインの基本的な知識が無くては、Webデザインはできません。

スマホ対応が一般的な今の時代、どんなに優れたデザインでも実際にコーディングをする際に画面幅を変えて表示するとレイアウト的に破綻してしまいデザインを修正する機会は多いです。ですので無駄な作業をなるべく増やさないためにも基礎知識の勉強をしましょう。

デザインの知識はWeb業界に限らず色々なジャンルでも必ず役立ちます。将来的にもAIにはデザインの仕事は取られないと思いますw

Webデザインの知識を本で勉強する

デザインはしっかり本で知識を勉強すると効果的です。自分も最初は本から勉強しました。
これからWebデザインを勉強するなら読んでおいた方がいいオススメの本をご紹介します。

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

デザインに特化しているわけではありませんが、全体を把握することもできるのでまず最初の1冊にオススメです。

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

415点の厳選した良質なWebサイトを集めた見本集です。ページを構成しているデザインパーツまで分解して解説しているので意味を理解することができる1冊です。

なるほどデザイン

デザインに関する考え方や基本的な知識を身につけることができる本です。Webデザインの本ではありませんが、自分もかなり勉強になったのでおすすめです。

Webデザイン必携。 プロにまなぶ現場の制作ルール84

知りたかった基本が幅広く記載されているので、ここに書いてあることをしっかり実践すればコーダーやプログラマーに愛されるwebデザイナーになれるかもです。

だから、そのデザインはダメなんだ

本当に使いやすいWebサイトを、○×形式でわかりやすく解説しています。実際のサイトなのでより実践に近いイメージができます。

Webデザインのギャラリーサイトから勉強する

本である程度知識がついたら、Webデザインのギャラリーサイトを見る事です。今現在活躍しているWebデザイナーが作ったサイトを見る事によってかなり刺激になります(現在進行形w)
自分の場合は1日1回必ず時間を作ってギャラリーサイトを見るようにしています。小さなことですが、デザインのアイデアやテクニックなど常に流行や最新のデザインを追い求めていきましよう。

おすすめギャラリーサイト

ちなみに最後に紹介したMUUUUU.ORGのギャラリーサイトは僕がWebを独学で勉強していた頃からよく見ていたのですが、現在では運営者の方とよく一緒にWeb制作のお仕事をさせてもらってます。

Webデザインをスクールで学ぶ方法もあります

Step2 【デザイン】 デザインツールを独学で使いこなす

Webデザインを作る際はデザインツールが必要不可欠です。そのデザインツールをもとにコーディングしていくという流れが一般的です。
一般的には下記のツールを使用します。

  • Adobe XD
  • Photoshop
  • Illustrator

Adobe XD

https://theblog.adobe.com/

以前はPhotoshopでデザインをするのがWeb業界では一般的だったのですが、Adobe XDの登場によりデザインスピードが爆速になりました。
Photoshopの場合は画像編集ツールのため、縦に長いデザインやアートボード(作業場所)を複数作ってしまうとかなりPCが重くなってしまい落ちることがよくありました。Adobe XDに切り替えてからはいくらアートボートを増やしても重くならずスムーズに複数のページをデザインする事ができるようになりました。

Photoshop

https://theblog.adobe.com/

Photoshop(フォトショップ)は画像編集ツールです。Webデザインに入れたい画像をまずはPhotoshopで編集してAdobe XDに入れるイメージです。
Web業界に限らず紙デザインのパンフレットやチラシ、ポスターなどのすべての業界で使えるので一生重宝します。

Illustrator

https://blogs.adobe.com/japan/aicc2020/

Illustrator(イラストレーター)は紙デザイン業界で知らない人はいないくらい有名なツールです。ベクターデータを作成したり編集したりできるツールです。Web制作では主にロゴやアイコンを作ったりするのに欠かせないツールです。

こちらで紹介したツールはすべてAdobe Creative Cloudの有料のツールになってしまいますが、Webデザイナーになって仕事を取れるようになれば1サイト30万〜50万くらいもらえるので将来的には元は必ず取れます。初期投資だと思いおもいきって初めてみましょう。
ちなみに学生割や無料体験版もあります。

デザインツールの使い方

デザインツールの勉強方法はまず本を読んだ方が圧倒的に理解できます。最初はしっかり基本の内容がまとめられている本を選びましょう。
自分の場合はIllustrator、Photoshopの本は何十冊と買いあさりましたw

デザインツールの使い方を本で勉強する

世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書

Adobe XDの基本から機能を丁寧に解説してあります。サンプルサイト制作を通じてXDによる実践的な作成方法も学べます。

世界一わかりやすい Illustrator&Photoshop

IllustratorとPhotoshopを両方同時に学べるので初めてにはもってこいの一冊です。

Photoshop 10年使える逆引き手帖【CC完全対応】

基本からワンランク上のプロの技までぎっしりつまっている一冊です。自分も読んでみるとこんな方法があったんだと勉強になります。

Illustrator 10年使える逆引き手帖

こちらも上記同様にあらゆる手法が載っているためオススメです。自分も昔、Tシャツのデザインをしている時代は大変お世話になりました。

Step3 【デザイン】 Webデザインを実践する

ここまできたら実際にデザインをしてみましょう。
自分の中で一番効果的だったのは、実践方法は自分がいいなと思ったWebサイトを模写することです。

Webサイトを1pxもずれずに作成しフォントサイズやボーダーの色、マージンの取りかたなど模写していくと今まで気がつかなかった発見がたくさんあります。(フォントは有料などを使っている場合もあるのでその場合は似たフォントで代替えOK)

「このフォントサイズでこのカラーにするとこんなにメリハリがでるのか!」
「この要素とこの要素のマージンを結構とるとゆったりした印象になるなぁ」
「ここのボーダーの色を薄くしているから印象が違うんだ」とか

実際に模写する方法は2パターンあります。

1.背景にスクリーンショットの画像を貼り付け、上からなぞる方法

こちらの場合は完全に上からなぞるので違う部分は一眼でわかるので模写しやすいです。

2.隣に参考サイトを置き見ながら作る方法

慣れてきたらこちらの方法でやってみましょう。参考サイトと離れている分難易度は上がりますが、違う部分があるとなぜ違うのか考えるより意識するため勉強になります。

こちらを何サイトも実行してみて、いざ自分のオリジナルサイトを作る際にアイデアがかなりストックされるはずです。
デザインに正解はありませんが、ある程度の法則やパターンみたいなものはあります。その法則やパターンを色々なサイトから吸収し自分の中で整理してアウトプットしていくのがデザイナーだと自分は思っています。

デザインについてはこちらの記事もオススメ

Step4 【コーディング】 HTMLとCSSを独学で身につける

次にコーディングの身につけ方です。
まず最初に覚える言語はHTMLとCSSです。学校の授業などで学んだ方もいるかと思います。
最初は英語でとっつきにくい印象がありますが(自分がそうでした)、
Bodyやheadなど単純な英語が多く比較的簡単でやっていくうちに自然と理解できます。

HTMLがベースとなる骨組みでCSSで装飾(デザイン)していくイメージです。
HTMLを正しく理解しコーディングしていればSEO的にも有利になり検索にも引っかかりやすくなりますので、SEOも意識しながらコーディングをしてみましょう

HTMLとCSSを本で勉強する

最初は本でしっかりと基礎を学ぶのが効果的です。

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

デザインのところでも紹介しましたが、HTMLとCSSも学べるので一石二鳥です。本のデザインも見やすく入門にオススメです。

HTML5&CSS3デザインブック

ステップバイステップのレッスン式なので、順番に読み進めていくと身についていくのが実感できます。

スラスラわかるHTML&CSSのきほん 第2版

HTMLとCSSをゼロから書きながら作るので一つ一つの意味を学ぶことができます。詳しい手順も載っていいるためこちらもオススメです。

HTMLとCSSをオンラインサービスで学ぶ

最近ではオンラインで学ぶこともできるのでよりリアルに自分が勉強したい部分を学んだり、わからない部分を質問できたりと効率よく学べるようになりました。
自分のときもこんなサービスがあったならと…羨ましい限りです。

Progate

Progateは初心者でも独学でも実際にブラウザ上で学べるオンライン学習サービスです。実際にコーディングをするので効率よく進められます。

ドットインストール

こちらは3分の動画を見て学習できるサービスです。豊富な動画数で幅広いレッスンが見放題です。プレミアム会員ならわからない部分などを質問できます。

HTMLとCSSをオンラインスクールで学ぶ

独学ではなくなってしまいますが、オンラインスクールで学ぶという方法もひとつです。
オンラインスクールの場合、分からない所は質問できるので独学で勉強するよりも上達は早いです。また途中で諦めることなく続けられる点もメリットです。
費用はかかってしまいますが、その分しっかりと学べるので本気ですぐにでもWebデザインを勉強したいという人や独学だとモチベーションが続かない人はオンラインスクールがおすすめです。

TechAcademy

マンツーマンレッスンを受ける事ができます。こちらはプロの方にチャットでも好きなだけ質問できます。※1週間の無料体験もあります。

TECH::CAMP

全国に6教室を構える他、オンラインでも受講が可能となっています。※無料体験会参加もあります。

プログラミングスクールについてはこちらの記事がおすすめ

Step5 【コーディング】 JavaScriptとjQueryを独学で身につける

HTMLとCSSでベースが出来上がったら次はJavaScriptとjQueryで動きをつけていきます。
普段見ているほとんどのサイトは動きが付いています。例えばスマホの場合右上のメニューボタンなどをクリックした際にメニューが出てくるあの動きです。
他にも、メインビジュアルで画像をスライドショーにして動かしたり、スクロールすると要素がフェードインで現れたりなどなどです。ギャラリーサイトを見ていると至る所に組み込まれています。

jQueryはJavaScriptを使いやすくしたもので最初はjQueryを勉強していくとスムーズに覚えることができると思います。
またjQueryは様々な便利プラグインがたくさんあり、一から実装すると難しい画像スライドショーばど簡単にできるプラグインがあります。

JavaScriptとjQueryを本で勉強する

よくWeb上でサンプルコードなどを載せているサイトなどがありますが、最初は雰囲気を掴む程度でコピペして使用するのは問題ないですが、その方法を
続けてしまうと全然身につけることができないので、最初は本などコピペができない状態で書いていくのが理想です。カンマ、ピリオド、コロンなど一文字違うだけでエラーになるのでなぜエラーになったのか自分で理解できるようにしておきましょう。

jQuery最高の教科書

プログラム経験の少ないデザイナーでも容易に理解できる構成で、第一線で活躍するプロフェッショナルの開発者が書いている本です。実際の現場でも使われているインタラクションなど買っても絶対損はしない一冊です。

Web制作の現場で使う jQueryデザイン入門

こちらは新版前から読んだことがあり、とてもわかりやすくお気に入りの本です。改訂新版になり最新のトレンドに合わせて、全サンプルを書き直し、スマートフォン向けのサンプルも追加されてより一層充実しています。

スラスラ読める JavaScriptふりがなプログラミング

こちらは全てのプログラミングにふりがなをふるという発想でかなりわかりやすい一冊になっています。特に読み下しと書いてある部分はプログラミングを日本語に文章として変換しているのでどう言う意味なのかをすぐに理解できます。

JavaScriptとjQueryをオンラインサービスで学ぶ

HTMLとCSS同様こちらもオンラインサービスがありますので、上記で紹介したProgateドットインストールで学ぶことができます。

JavaScriptとjQueryをオンラインスクールで学ぶ

こちらもHTMLとCSS同様こちらもオンラインスクールがあります。より早く確実に学びたい方はTechAcademyTECH::CAMPなどがオススメです。

+α 【コーディング】 CMS(WordPress)を独学で身につける

上記に+α学んでおくと大活躍できるのが、CMS(WordPress)です。
CMSをわかりやすく説明するとブログや会社情報のニュース部分などで使われる更新システムです。

HTMLだけでもWebサイトは作れますが、HTMLだけで作った場合、毎日更新するニュースなどは頻繁に修正が入り管理が大変です。
それを簡単に専用の管理画面からお客さんが更新できるように作ることができるようになります。プロの現場ではCMSは当たり前のように実装されています。

特に一番使われているCMSはWordPressです。WordPressは無料でダウンロードすることができ誰でもWordPressでブログサイトなどを作ることができます。
ただそのまま使うのでは、プロの現場では通用しません。会社や職種によってWordPressを自身でカスタマイズできるようになると多くのクライアントから引く手数多です。

面接や転職の場合でもオリジナルでWordPressのテーマが作れますと言うだけで目の色変えてくると思いますので是非覚えておきましょう。

CMS(WordPress)を本で勉強する

WordPressを勉強するにはまずしっかりと内容が詰まった本がオススメです。

本当によくわかるWordPressの教科書 改訂2版 はじめての人も、挫折した人も、本格サイトが必ず作れる

ドメインやサーバーなどの契約の仕方からWordPressのインストール方法など入門書としておすすすめです。

WordPressデザインレシピ集

中級の方におすすめなのが、こちらのWordPressデザインレシピ集です。現場で使われているテクニックが余すとこなく収録されています。

自分のポートフォリオサイトを作ってみる

ここまできたら最後は自分のポートフォリオサイトを作ってみましょう。下記のようなサイトのデザインで作るのがベストです。

UNDERLINE

白と黒の構成でシンプルで見ている人に伝わりやすいデザインです。

MIKE INGHAM

海外の方のポートフォリオですが見やすくレイアウトが参考になります。

HTMLだけでもいいですしCMSを駆使して作っても問題ありません。いかに自分が学んできたことをアピールできるかが重要です。
ただ注意してほしい点は、なんでもかんでもポートフォリオに載せるのは止めましょう。明らかに素人が作った感がでてしまうサイトは逆効果になってしまうので、できるだけ自信のあるサイトだけを載せましょう。

数は5〜10サイトあればその人のスキルや信頼感を得ることができますので採用される可能性が高くなります。
あとサーバーを契約する際には独自ドメインを取得することをおすすめします。プロは細かい部分に目が行きがちでポートフォリオのサイト名とドメイン名がまったく違うものだと違和感を覚えてしまいます。
少しでもお金をかけて独自ドメインを取得してみましよう。

おすすめのサーバーはロリポップです。
サーバーの契約方法やドメイン取得などの記事はまた後日追記いたします。

ロリポップ

ロリポップはとにかく月額のサーバー代が安いです!サポートも充実しており無料でSSLにも対応できます。プランはWordPressを入れることを考えてライトかスタンダードを契約すれば問題ありません。

まとめ

最後までご覧いただきありがとうございます。この記事は自分自身がWebデザイナーになるために独学で勉強してきた経験から、より効率の良い学び方をまとめた方法です。この方法が必ず正しいとは限りませんが、多少なりとも参考になれば幸いです。

最初はWebデザインやコーディングをすべてできるようになるのは時間がかかります。ただWebデザインに限らずですが、世の中を見ても、スタートラインにさえ立たない人間もたくさんいるし、勝手に脱落してくる、勝手に諦めてくる人間もたくさんいる。だから、誠実に、苦難に負けずに、頑張り続ければ、必ず勝てる。

これって結構、楽な競争社会だなと思う時があるんです。「継続は力なり」って本当だなと思うんです。
Webデザイナーを目指して毎日少しでも継続していく事を頑張りましょう!

この記事をシェアする