【Webデザイン入門】無料・独学でもWebデザインのプロになれる方法

こんにちは。侍エンジニア塾ブログ編集部です。

インターネットの普及に伴い、Webサイトのデザインに興味をお持ちの方が多く見受けられます。しかし、いざ学習をはじめようとしても、

初心者がWebデザイナーになるためには、なにを学習したらいいの?
未経験者でもWebデザインを学んで仕事を取れるのかな?
そもそもWebデザインにはどんなスキルが必要なんだろう?

といった悩みや不安があるのではないでしょうか。そこで、この記事では、未経験者でもWebデザインについて学べるように

  • Webデザインに必要なスキル
  • Webデザインの入門におすすめの独学勉強法
  • Webデザイナーの需要や年収


上記3点についてまとめました。できるだけわかりやすく解説しますので、入門編としてまずはじっくりお読みください。

そもそもWebデザインとは?

画像:shutterstock

「Webデザイン」とは、WebサイトやWebサービスの画面で表示される色やレイアウト、またはそのデザインを決めることをいいます。また、最近では単に見た目の美しさだけではなく、ユーザーの使い心地にも配慮したデザインが重要視されてきています。

これは、WebサイトやWebサービスは新聞や雑誌などの紙媒体と異なり、PC・スマートフォン・タブレット等の様々な端末で見られ、それぞれの端末に適した表示に整える「レスポンシブデザイン」という形式を取っているためです。

一口にWebデザインといっても様々な要素が絡む、奥深いものなのです。

Webデザインに必要な知識やスキル

では、Webデザインを身につけるためには、どんな知識やスキルを学習する必要があるのでしょうか? ここでは代表的なものを簡単にご紹介させていただきます。

HTML/CSS

HTML/CSSは、Webサイトの見た目のデザインを作るために必要不可欠な言語。これを学ばなければ始まりません!

HTMLとは?
Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webサイトを作るために開発された言語です。
普段、あなたが見ているインターネット上のWebサイトのほとんどは、HTMLでできています。

CSSとは?
Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、HTMLと組み合わせて使用することが多く、Webサイトの見た目を装飾するための言語です。

なお、HTMLやCSSは

  • デザインの企画
  • Webサイトの設計
  • UI/UX視点のマーケスキル


などの要素を持ち合わせることで、よりよいWebデザインに仕上げることが可能です。この3つの要素も同時に学びつつ学習をすすめるといいでしょう。

JavaScript

JavaScriptはWebサイトやアプリなどの開発に頻繁に使用されるプログラミング言語です。少ない手間でWebサイトに動作を付けることができ、しかもHTML/CSSを使って記述できるので、最近ではWebデザイナー必須のスキルになりつつあります。

※JavaScriptのより詳しい説明は下記の記事をお読みください。

JavaScriptとは?初心者向けに概要や使い方をわかりやすく解説
更新日 : 2019年6月17日

jQuery

JavaScriptと合わせてjQueryも身に着けておきましょう。jQueryは、JavaScriptを使いやすく拡張した技術で、以下の京都大学のWebサイトのように、静的なサイトに面白い動きを加えることができるようになります。

探検!京都大学 ⇒ http://www.kyoto-u.ac.jp/explore/

どんなブラウザでも使えて短いコードで書けるというメリットがあるので、開発の効率が良くWebデザインではよく見かける技術のひとつです。

※jQueryのより詳しい説明は下記の記事をお読みください。

PHP

PHPはWebサービスの開発に特化したプログラミング言語です。未経験者でも使いやすく需要も高いので、非常に人気の高い言語になっています。

フリーランス向けにもPHPを用いた開発案件は圧倒的に数が多く、これを身につけるだけでも個人で仕事を受けることは十分に可能です。また、後述のWordPressにも使用されているため、覚えておくと一気にWebデザインの幅が広がります。

※PHPのより詳しい説明は下記の記事をお読みください。

PhotoShop/illustrator

デザインソフトの大定番である「PhotoShop」「illustrator」も必須スキルです。

PhotoShopは画像の加工に使用し、バナーなどWebサイトで使用する画像クリエイティブ全般の修正・変更に必要です。illustratorはアイコンやロゴ、イラストの作成に使用し、イラストパーツを作成する際に必須のソフトです。

この2つは併用してデザインすることが多いので、どちらのソフトも満遍なく使いこなせるようになりましょう。

WordPress

WordPressとは、全世界で最も多く使われているオープンソースのブログ作成ソフトです。先述したようにPHPで開発されており、装飾にはCSSが使用され、もちろんHTMLも使うことができます。

世界のWebサイトの4つに1つはWordPressと言われるほどのシェアを誇り、近年は企業が運営するブログやオウンドメディア、ホームページに頻繁にWordPressが使われています。それだけ需要が高いため、最低でも一通りさわれる程度には知識を深めておきましょう。

※WordPressのより詳しい説明は下記の記事をお読みください。

Webデザイン入門におすすめの独学勉強法

続いては、上記のスキルを含めてWebデザインを独学で学習する方法を書いていきます。主に無料学習サイトと、おすすめの書籍の2つをご紹介していきまして、

  • まずは無料学習サイトを用いて学習を進める
  • 学習サイトで学習後、必要に応じて書籍を購入して、知識・スキルの定着をはかる


という順番で独学をすすめてみましょう。

では、以下からは無料学習サイトと、おすすめの書籍をそれぞれご紹介していきます。

Webデザインを無料で学習できるおすすめサイト

まずは無料学習におすすめのサイトからご紹介します。

上から「入門者にわかりやすい順番」に並んでいますので、この通りにサイトを覗いていってみてください。

MUUUUU.ORG

MUUUUU.ORGは数あるWebギャラリーサイトの中でも、オーソドックスなレイアウトでかつ、非常にデザインが優れたサイトを厳選して掲載しています。

まずは美しいWebデザインを勉強するために、Webギャラリーサイトを覗いてみるのがおすすめです。更新も頻繁で、次々に優れたデザインのWebサイトが追加されていますので、眺めているだけでも勉強になります。

Schoo

Schooは「未来に向けて今あなたが学んでおくべきこと」をテーマに、ビジネスや健康・テクノロジー・ITスキルなどを幅広く無料で受講できるサービスです。

プログラミング(HTML,CSS,JQuery など)の基礎や、Photoshop、Illustratorなどの講義があり、現役スペシャリストの講師陣が教える動画を無料で見ることが可能です。

ちなみにHTML講座は3時間、Illustrator講座は6時間と、有料級のボリュームと質を兼ね備えています。中級・応用や過去授業の録画は月額:980円の有料プランに入ると閲覧できます。

SKILL HUB

SKILL HUBはWeb制作のプロを養成するオンライン学習サイトです。

有料プランがほとんではありますが、IllustratorやWordPress、HTMLなどは無料で受講することができ、これらのスキルを使って、Webサイトをアップするまでの一連の流れを見ることができます。Webデザインの仕事の流れを把握するにはぴったりのサービスです。

progate

Progateはスライドを見ながら、HTMLやCSS、PHPやRubyといったプログラミングを無料で受講できるサイトです。

課題をクリアすると次に進める形式をとっており、初心者向けに噛み砕いて解説してくれるので、実際に手を動かしながらプログラミングの基礎が学べます。

ドットインストール

ドットインストールは3分の短い動画でプログラミングが学べる無料学習サイトです。PCはもちろん、スマホからも動画を閲覧できるので、通勤時間や昼休憩などのスキマ時間を有効活用できます。

Adobeラーニング

Adobeラーニングは、PhotoshopとIllustratorの基礎的な使い方をマスターするのにぴったりです。

ソフトの提供元が提供しているものなので、レイヤーやベクターなどの専門用語の解説から、実際のソフトの使い方まで、動画を用いて懇切丁寧に解説してくれます。まずはソフトの操作方法を身につけたいという方におすすめです。

Webデザインのおすすめ入門書

続いてはおすすめの入門書を5つご紹介します。より知識やスキルを深めたい場合はもちろん、学習サイトが合わなかった方も読んでみてください!

いちばんよくわかるWebデザインの基本

「Webデザイン」にフォーカスして初心者向けにわかりやすく書かれている一冊です。内容は、レイアウトからカラーリング、写真、タイポグラフィーなどの一般的なデザインよりのものから、HTMLやCSSなどWebよりのものまで盛りだくさんです。

実際のウェブサイトのトップ画面なども載っていて、図を豊富について説明されているので最後まで飽きずに読み進めることができます。

⇒いちばんよくわかるWebデザインの基本| Amazon

[買わせる]の心理学 消費者の心を動かすデザインの技法61

「ネット上でものを売るためのデザイン」に特化した内容になっており、購買行動を起こさせるためにはどんなデザイン・文章・画像にすればいいのかが解説されている一冊です。

心理学に基づいた確かなデザインが、実例つきで詳しく解説されていて、単にWebデザインだけではなくマーケティングの勉強にもなります。流し読みするだけでも、売るためのWebデザインが学べるため、実際にWebデザインの仕事に就についてからより活きてくる良書です。

⇒[買わせる]の心理学 消費者の心を動かすデザインの技法61|Amazon

いちばんよくわかるHTML5&CSS3デザイン

上記の「いちばんよくわかるWebデザインの基本」と同じシリーズの本で、HTMLとCSSの基礎を学ぶことができる一冊です。

HTMLの基本的なパーツを順番に説明していき、最後にそれらを使ってWebサイトができあがる——という流れを取っているので、実際のWebデザインの流れがよくわかります。一つ一つの技術が丁寧に解説されていますが、テンポも良いのでサクサク読み進めることができるでしょう。

⇒ いちばんよくわかるHTML5&CSS3デザイン|Amazon

世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書

タイトルの通り、IllustratorとPhotoshopの 操作方法が図解付きでわかりやすく載っている本です。わからない操作方法があったとき辞書的に使えます。

ソフトやデザインの専門用語を極力使わず、初心者でもわかりやすい言葉で書かれていますので、Adobeのチュートリアルと併せて使えば盤石です。基本的に書いてある通りにやればしっかりと理解できる内容に仕上がっていますので、手元に置いておくと安心な一冊です。

⇒世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書|Amazon

WordPress 仕事の現場でサッと使える! デザイン教科書

WordPress初心者向けにWordPressを使ったデザインカスタマイズを解説した一冊です。

ただ、WordPress初心者におすすめの本とはいえ、HTMLやCSS、PHPを一通り理解した上で読むべき内容になっています。まずはそれらの知識・スキルを身に着けた上で読むことをおすすめします。

なお、カスタマイズがメインではありますが、他にもよく使うプラグインから運用面まで触れているので、デザインだけでなく最低限の実務的な内容を知ることができるでしょう。

⇒WordPress 仕事の現場でサッと使える! デザイン教科書|Amazon

モチベーションが続かない人はWebデザインが学べるスクールへ

ここまでは独学でWebデザインを勉強する方法を紹介してきましたが、独学の欠点は「モチベーションが続かない」ということです。また、次に何を勉強したらよいかわからず、不明点をすぐに解決できないと学習のストレスになってしまうことも……。

そんな方はプロからWebデザインのスキルを学べるスクールに通うのもおすすめです。スクールは、現場で役に立つ確かなスキルを短期間で身につけることができ、転職・就職のサポートまで受けられます。

以下に初心者でもWebデザインがしっかり学べるおすすめのスクールをまとめました。併せてお読みください。

Webデザイナーの需要・将来性

最後に、軽くWebデザイナーの需要・将来性をご紹介しておきます。

まず、実際に求人サイトから案件を調べ、以下の表にまとめてみました。

転職サイト名 求人数(2019年4月11日時点)
マイナビ転職 96
doda 367
エン転職 123
リクナビNEXT 72

最低でも72件、最高で300件を超えています。中には5人以上を積極採用する企業もあるほどでした。

また、待遇面でも、資格の取得を支援してくれたり、家賃補助・育児支援などを持つ企業も少なくなく、ワークライフバランスを重視する方におすすめの職種です。

dodaの転職市場予測2019上半期によれば、Webのクリエイティブ職はわずかに増加傾向にあり、年収アップやキャリアアップも叶いやすいとのことです。

まとめ

以上のように、Webデザインは初心者でも学習が進めやすい環境が整っており、需要も高く、年収・キャリアアップもかないやすいという職種です。

今回の内容を参考にしていただき、あなたが最短で憧れのWebデザイナーになれますよう応援しております!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナカガワダイキ

ナカガワダイキ

侍エンジニア塾ブログ編集部のナカガワです。ホテル業界に9年間従事し、未経験からIT業界へ転身。
初心者目線で、誰が読んでも分かりやすく読みやすい記事の執筆を心がけています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説