自由に働きたい人必見!フリーランス超入門

独学でWebデザイナーになるには?勉強法やおすすめ書籍&サービスを紹介

作成: 2019.01.23 更新: 2019.07.11

 

>> 世帯年収300万以下限定!
転職成功まで受講料発生なし

独学でWebデザイナーになりたいと考えていませんか。

結論から言うと、未経験から独学でWebデザイナーを目指すことは可能です。ただ相当な努力期間は必要ですし、明確なゴールがないと挫折することもあるでしょう。

この記事ではWebデザイナー職の概要や必要とされるスキル、独学におすすめのWebサービスや書籍、参考になるサイトなどを紹介します。

これを読めば、Webデザイナーに必要なスキルセットや具体的な勉強法がわかり、今日から学習を進められるでしょう。

独学でもwebデザイナーになるのは可能

独学でもWebデザイナーを目指すことはできます。しかし未経験からWebデザイナーとして就職・活躍するためには相当の努力が必要、と理解しておきましょう。

特に現在Webデザインとは無縁の仕事に就いていて、漠然とWebデザイナーの仕事に興味を持っている段階であれば、

・Webデザイナーの具体的な仕事内容
・Webデザイナーに必要なスキル

これらをまず理解することから始めなければなりません。

その上で自分が目指したいWebデザイナー像をイメージし、必要なスキルを獲得するための学習をスタートさせましょう。

Webデザイナーとは

WebデザイナーとはWebデザインの業務に携わる人のことを指します。Webデザインの効果でWebサイト全体を見やすく整えたり、商品を魅力的に伝える役割を担います。

Webデザインは魅力的で使いやすいWebサイトを作成するのになくてはならない存在です。

WebデザイナーはWebページ全体のレイアウトや、ページに使用する写真や画像、動画の作成や加工などを行います。PhotoshopやIllustratorなどのツールを使用するスキルが求められます。

またHTMLやCSSなどのマークアップ言語を使ったり、プログラミング言語JavaScriptなどを使ってWebサイトに動きを付けたりする作業を行うケースもあります。

webデザイナーに求められる6種のスキル

自分らしい働き方を手に入れる無料デザイン体験会

TECH::CAMPではフリーランスのWebデザイナーを目指すための「無料デザイン体験会」を実施しています。

  • 副業で月収をプラス5万円増やしたい
  • フリーランスに興味がある
  • パソコン1台でどこでも仕事ができる生活をしたい

このように考え、Webデザインに興味のある方はぜひ詳細をご覧ください。未経験から副業・フリーランスWebデザイナーとして活躍するための第一歩を踏み出せる体験会です。

無料デザイン体験会の詳細

Webデザイナーは基本的に、以下のスキルが求められます。

・JavaScript,/jQuery
・デザインの基本スキル
・UI/UXデザインのスキル
・デザインツールのスキル
・SEOとアクセス解析

「Webデザイナー」と一口に言っても携わる業務はさまざまです。またWebサイト制作は、Webデザイナーやコーダー、プログラマーが連携して業務を行うこともあります。

なのでデザインツールのスキルだけでなく、プログラミングやUI/UXデザインの知識も求められるのです。

ここからそれぞれのスキルを一つずつ見ていきましょう。

HTML/CSS

HTML/CSSとは、Webページの見た目を作るマークアップ言語です。HTMLはヘッダーやフッター、見出しなどの情報構造に、CSSは文字の装飾などに用いられます。これらを整えることで、読者が読みやすい、わかりやすいサイトを作ることができます。

例えばこの記事にも見出しがあり、重要な項目は太字になっていたり色が変えられていたりするでしょう。このような見た目はHTML/CSSで構成されています。

JavaScript/jQuery

JavaScriptはさまざまなWebサービスで用いられるプログラミング言語、jQueryはJavaScriptライブラリです。

ライブラリとは汎用性の高いプログラムを再利用できる形にまとめたもの。JavaScriptライブラリであるjQueryを活用すれば、コーディングの手間が省けたり、管理がしやすくなると言うメリットがあります。

JavaScriptはWebサイトに動きをつけるときに用いられます。例えばポップアップウィンドウを表示させたり、ボタンがクリックされた際にアニメーションを表示させることが可能です。

デザインの基本スキル

デザインには基本となる4大原則(近接・整列・反復・コントラスト)があります。初心者からWebデザイナーを目指す場合は、このような基本を押さえる必要があります。

この4大原則は後ほど紹介する書籍「ノンデザイナーズ・デザインブック」で学べるので参考にしてください。

また色の配色やレイアウト、フォントデザインなどの知識も必要です。このような知識は実際に優れたデザインで作られたWebサイトを参考にしたり、Webデザインについてまとめられた記事を参考にするといいでしょう。

UI/UXデザインのスキル

UIとはユーザーインターフェース(User Interface)、UXとはユーザーエクスペリエンス(User Experience)の略です。

インターフェース(Interface)とは「境界面」や「接点」を意味する言葉。UIはユーザーの目に触れる部分、例えばWebサービスで表示されるデザインやフォント、製品であればその外観のことを指します。

一方でエクスペリエンス(Experience)は「経験」や「体験」を意味する言葉。UXとはユーザーが製品やサービスによって得る体験のことを指します。

UXへ影響を与えるものの中には、前述したようなデザインやフォントと言ったUIの部分も含まれます。なのでUXを高めるためにUIの改善から取り掛かるケースも多いです。例えば問い合わせフォームの配置(UI)を変更することによって、ユーザーの導線をスムーズにする(UX)ことができます。

ECサイト制作においては、このようなUI/UXがコンバージョン(商品購入などの最終的な成果)に大きく影響します。必要とされるWebデザイナーになるためには、UI/UXデザインのスキルが重要と言えるでしょう。

デザインツールのスキル

Webページのレイアウトや使用する写真や画像の作成にはツールを使います。Web制作現場で使われる代表的なデザインツールには、以下のようなものがあります。

・Sketch
・Adobe XD
・Photoshop
・Illustrator

これからWebデザイナーを目指すのであれば、まずはPhotoShopを使いこなせるようになっておくといいでしょう。それぞれのツールについては後ほど詳しく解説します。

SEOとアクセス解析

いくらわかりやすく魅力的なWebサイトを作っても、ユーザーにアクセスされないと意味がありません。その際に必要となるのがSEOです。

SEOとはサーチエンジン最適化のこと。あるキーワードで検索をかけたときに、検索結果の上位にサイトが表示されるようにすることを指します。

SEOを効果的に行うためには、キーワードで検索したユーザーにとって有益なWebサイトにする必要があります。

WebデザインがSEOに与える影響

WebデザインがSEOに与える影響は以下のような点です。

・直帰率(一つのページを見ただけでそのサイトから離れた率を出したもの)
・滞在時間
・ページ表示速度
・モバイルファースト(モバイルで見たときにわかりやすいデザインかどうか)

これらの条件を総合的に見て、検索エンジンは有益なWebページを判定しています。直帰率や滞在時間などは、アクセス解析ツール(Googleアナリティクスなど)で判定できます。

なので解析ツールの知識も持ち合わせておくと、評価されるWebデザイナーになれるでしょう。

TECH::EXPERT 東京・名古屋・大阪・福岡

プログラミング未経験からWebエンジニアとして転職成功まで導くスクール TECH::EXPERT は、挫折しない環境を提供いたします。すべて駅から通いやすい便利な場所。いつでも質問できるメンター(講師)、一緒に頑張る同期がいるから頑張れる。そんな教室を是非見にきてください!

HTML/CSSを独学で身につけるには

HTML/CSSのスキルは独学で身につけることも可能です。ここではオンラインサービスと書籍で学ぶ方法を紹介します。

オンラインサービスを使う

HTML/CSSが学べるオンラインサービスを紹介します。

Progate

Progateは無料でプログラミングを学べるサービスです。
スマートフォンやタブレットにダウンロードできるアプリもリリースされています。

ProgateのHTML/CSSコースは初級編・中級編・上級編があります。スライドで言語の解説を学び、エディット画面で課題に取り組みます。プレビューで確認しながらコーディングできるので、全体像を把握しながら学習を進められるでしょう。

仕様書に沿ってWebページを一から作る道場コース(プラス会員受講可能)などもあり、着実に力をつけたい人にもおすすめです。プラス会員は月額980円(税込)です。

ドットインストール

ドットインストールは、1本3分程度の動画でプログラミングを学べるサービスです。
「はじめてのHTML」、「はじめてのCSS」と言う初心者向けレッスンがあり、合わせて32回で構成されています。

実際に作業している動画を見ながら解説を聞くことができるので、初心者でもわかりやすいです。1本3分なので、仕事の昼休み中などに動画で流れを理解しておいて、時間のあるときに動画を見ながら手を動かして学ぶといいでしょう。

プレミアム会員になると中上級者向けレッスンを見ることもできます。プレミアム会員は月額980円(税込)です。

Codecademy

Codecademyは無料からプログラミングを学べるサービスです。
英語のサービスですが、翻訳機能を使えば問題なく学習を進められるでしょう。

HTMLのコースは7時間、CSSのコースは15時間が学習時間の目安です。画面の左側に表示される解説に従って、真ん中のエディット画面で指示通りにコードを書き、右側のプレビュー画面で確認できるようになっています。

プロ会員(有料)になるとクイズやプロジェクト形式で学習できます。月額料金19.99ドル、12ヶ月継続プランは月額15.99ドルです。

書籍で勉強する

HTML/CSSは書籍でも学習できます。書籍を選ぶ際は最新情報が載っているもの選ぶようにしましょう。ちなみに現在主流となっているバージョンはHTML5/CSS3。ここから2冊紹介します。

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

Webサイトを作りながらHTML/CSSを学べる書籍です。モバイル端末にも対応したサイトを作ることができます。詳しい操作方法が載っているため、初心者でも読み進めながら手を動かせるでしょう。

現在主流となっているレスポンシブWebデザインの基本が学べます。レスポンシブWebデザインとは、パソコンだけでなくタブレットやスマートフォンなどのデバイスでも安定したWebサイトを作るために必要な知識です。

HTML5/CSS3モダンコーディング

実際のWeb制作現場の流れを学べる書籍です。現在主流となっている3つのデザインスタイルを適用したサイトを作りながら学習を進められます。

現場目線で書かれていますので、「これから仕事でWeb制作に関わることになった」と言う場合でも役立つでしょう。先に紹介した書籍で基礎固めをし、さらにステップアップする際にもおすすめです。

JavaScript/jQueryを独学で身につけるには

 

JavaScript/jQueryはWebサイトに動きをつける際に用いられます。オンラインサービスと書籍を活用すれば独学で身につけられるでしょう。

オンラインサービスを使う

先に紹介したProgateとドットインストールにはJavaScript/jQueryのカリキュラムも用意されています。

例えばProgateでおすすめなのは「Webデザインコース」。こちらは全11レッスンで構成されており、HTML & CSS・Sass・JavaScript(ES5)・jQueryと言った、Webデザインの現場で用いられる言語をセットで学ぶことができます。

書籍で勉強する

JavaScript/jQueryを学べる書籍を2冊紹介します。まず前述したようなWeb学習サービスで概要を掴み、その上で書籍で実際に手を動かしながら学ぶと力になりやすいでしょう。

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

サンプルを作りながら学べる書籍です。実際に現場で使えるようなサンプルなので、モチベーションを保ちやすいです。

一方で全くの初心者は理解が難しい内容もあります。Progateなどで基礎固めをしたあとにこの書籍で学ぶのがおすすめの手順です。

現在Webデザインに携わっている人でも参考になる内容なので、一冊持っておくと重宝するでしょう。

作りながら学ぶjQueryデザインの教科書

実用サンプルを作りながら学習を進められる書籍です。jQueryの基本からレスポンシブWebデザイン、UI/UXの知識までまかなえます。

ありがちなミスについての解説もあるので、挫折を防ぎながら学習を進められるでしょう。基本から応用までカバーできるので、「現場でjQueryを使っているがイマイチ理解できていない」と言う人にもおすすめです。

デザインスキルを独学で身につけるには

デザインスキルを独学で身につけるには、まずは書籍で体系的な知識を学習するのがおすすめです。また、優れたデザインが施されたWebサイトを見て情報収拾するのも大切でしょう。

書籍で学ぶ

ここではデザインスキルを学ぶ際におすすめの2冊を紹介します。

ノンデザイナーズ・デザインブック

デザイン未経験の人に向けて書かれた、デザインの基本知識を学べる書籍です。前述したデザインの4つの基本原則(近接・整列・反復・コントラスト)を学習できます。

実例が多数紹介されており、良い例と悪い例を見ながら、基本原則をどのように使えばいいのかがわかる内容になっています。Amazonの商品ページで中身が一部公開されているので参考にしてください。

なるほどデザイン

楽しみながら学習できるデザインの参考書です。目で見て楽しめる内容なので、デザイン学習の導入としておすすめです。

目的別のデザインを実例とともに学べるようになっています。「右脳と左脳で色を考える」など、デザインのアイディアが得られる書籍でしょう。

Web制作の現場で使用されるデザインツール

Web制作では以下の4つのツールを使うことが多いです。

・Sketch
・Adobe XD
・Photoshop
・Illustrator

これらのうちSketchとAdobe XDは人気のUIデザインツール。UIデザインツールとはWebサービスなどのUI制作に特化したものです。

これらが使えるだけでもWeb制作は可能ですが、さらにPhotoshop、Illustratorといった高機能ツールが使いこなせると、より複雑なデザインを制作することができます。

Sketch

UIデザイン・Webデザインに特化したツールです。
99ドル/年(1年間のアップデート保証)で購入できます。

ベクター(画像を数値で記録する)画像を扱うため解像度の変化に強いです。これまでPhotoshopを使ってきた人であれば、Sketchの軽さ・早さに驚く人も多いでしょう。

Adobe XD

Webサイトなどのワイヤーフレーム制作(サイトの設計図面)に適したツールです。ベクター画像を扱うソフトです。

体験版は無料で、単体プランは1,180円(税抜)/月で購入できます。プロトタイプ(開発初期の試作品)機能などが備わっており、チームでデザインをスムーズに共有することが可能。

Sketchが大規模案件に適しているのに対し、Adobe XDは新規案件をスムーズに開発するのに適しています。

Photoshop

ラスター(ドットの集合で表現している)画像を取り扱うソフトです。
フォトプランは11,760 円(税抜)/年、単体プランは26,160円(税抜)/年で購入できます。

写真などのドットの集合体でできた画像の加工に適したツールです。画像全体の色味の調整したり、フィルターやぼかしを加えたりできます。

Illustrator

ベクター画像を取り扱うソフトです。
フォトプランは980円(税抜)/月、単体プランは2,180円(税抜)/月で購入できます。

アイコンやロゴ制作、レイアウトに適したツールです。クライアントに提示するWebサイトのデザイン案を作ったり、平面的なインフォグラフィックを作ったりできます。

まずはSketchから触れてみよう

「Webデザイナーに興味がある」あるいは「まず趣味でWebデザインに触れてみたい」段階では、Sketchをおすすめします。Sketchは動きが軽く初心者でも扱いやすいツールだからです。

本格的にWebデザイナーを目指す場合はPhotoshopは使いこなせるようにしておきましょう。さらにIllustratorも活用できると、あらゆるシーンのWebデザインに対応できるようになります。

デザインツールは書籍で学ぶのがおすすめ

デザインツールの使い方を学ぶ際は、書籍で体系的に知識をつけて、わからない部分はその都度検索するのがおすすめです。書籍で学ぶ場合は以下のポイントを押さえて選ぶといいでしょう。

・基礎から応用まで体系的に学べる
・ツールに触れながら学べる
・つまずきがちなポイントの解説がある
・現場で使える実践力が養える

例えば基本的な操作だけでなく、実際にサンプルサイトを制作しながらスッテプバイステップで学べるものがおすすめです。必要なサンプルファイルをダウンロードできる書籍ですと、初心者でも学習を進めやすいでしょう。

書籍でも補完できないことが出てきたら、インターネットで検索して情報を集めましょう。後ほどWebデザイン学習で参考になるサイトを紹介しますので、アクセスしてみてください。

SEOとアクセス解析を独学で学ぶ

SEOとアクセス解析を学ぶには、実際にWebサイトを作り、アナリティクスを導入し、実践で学ぶのが最も効率的です。そのためにはブログサイトなどを作って、実際に運用してみるのがいいでしょう。

またGoogleアナリティクスの活用方法はGoogleの無料サービスで学ぶこともできます。理解度テストに合格すれば「Google アナリティクス個人認定資格(GAIQ)」を取得することも可能。

Webマーケティングの勉強にもなるので、Webサイト制作に携わるのであれば学習しておいて損はないでしょう。

Webデザインのスキルをもっと高めるには

Webサービスや書籍で体系的なスキルを学んだ後は、現場で使える実践的スキルや、できるWebデザイナーとして必要なスキルを高めるのが重要でしょう。

自分でデザインを考えてレビューをもらう

デザインを模写するだけではなく、ユーザーの状態・課題に対してデザインをしていくという流れで学ぶと、実践的なスキルが身につきやすいです。そこでおすすめなのが「Cocoda!」というサービス。こちらではサービス上にアップされている架空の案件に取り組めます。

例えば
・カフェの空席情報がわかるアプリ制作案件
・アカウント管理アプリ制作案件
・モバイル名刺交換アプリ制作案件
などのお題からチャレンジできます。

各案件には依頼主や依頼内容などが設定されています。類似サービスも提示されているので、完成形をイメージしながら取り組めるでしょう。お題の取り組み方や制作の目安時間も設定されています。

綺麗なデザインや好みのデザインになんとなく仕上げるのではなく、どのような目的でこのデザインにするのか、という設計スキルが身につきます。また制作の意図を言語化してデザインと一緒に提出することで、自動的にポートフォリオを作成できるようになっています。

推奨デザインや他のユーザーのデザインとの比較もできるので、自身のデザインを客観的に評価する機会にもなるでしょう。

Webデザインのブログを定期購読する

さまざまなWebデザイン情報に触れることも、デザインスキルを上げるためには大切です。そこでおすすめなのが、Webデザインのブログを定期購読することです。

現役デザイナーが更新しているブログでは、すぐに現場で活用できるノウハウやツールが紹介されています。ここからいくつか紹介するので参考にしてください。

Webクリエイターボックス

Webクリエイターボックスは、海外勤務経験を持つWebデザイナーが更新するブログです。コーディングやデザイン、便利ツールなどが紹介されています。

Webデザインに関するものですと、先ほど紹介したAdobe XDの作業手順や、手軽にロゴ制作ができるサービスの紹介記事などがアップされています。

海外のトレンド情報も発信されているため、Webデザイナーとしてレベルアップしたい人はチェックすべきブログでしょう。

coliss

colissはフリーのWebデザイナーが更新するブログです。Web制作現場で役立つツールやサービス、CSS実装テクニックなどの情報が発信されています。

例えばCSSコーディングやUI/UXデザインのトレンドや、フォント管理に便利なアプリなどが紹介されています。

ferret

ferretはWebマーケティング会社が運営しているメディアです。Webデザインに関する記事が多数発信されています。

SEOなどのWebマーケティングに関する知識も学べるのが魅力です。Web制作全般の情報を収集するのにおすすめのサイトでしょう。

デザインが優れたブログを参考にする

ここまではWebデザインの知識を発信するブログを紹介してきましたが、デザインが優れたブログやサイトを参考にするのもおすすめです。

国内外問わずチェックしておくと、海外のトレンドもキャッチできるでしょう。特に気になるデザインがあればストックしておくのがおすすめです。

参照:おしゃれなブログデザイン23選〜参考になる国内外の美しいブログ|サルワカ

気になるデザインを見つけたらストックする

前述したようなブログやサイトの中で気になるデザインを見つけたら、参考のためにストックしておきましょう。

「いいな」「素敵」と思うようなデザインを見つけたら、Evernoteなどに保存するのがおすすめです。その時デザインのどこが魅力的なのかざっくり分けておくために、タグ付けしておきましょう。例えば「ダークカラー」「おしゃれ」「可愛い」「かっこいい」など。タグ付けしておくとデザインを検索しやすくなります。

独学よりもっと効率的に学ぶには、スクールに通うのがおすすめ

ここまでは独学でWebデザイナーを目指す人に向けて、学習サービスや書籍をメインに紹介してきました。しかし初心者が独学でWebデザインを学ぶのはハードルが高いです。

中にはつまずき、挫折する人も多いでしょう。特に仕事をしながら勉強する場合、相当な志がないと継続が難しいです。

そこでおすすめなのがスクールでWebデザインを学ぶ方法です。自宅でも学べる教材があるスクールなら、平日は自宅で、週末はスクールで、と効率的に学習を進められるでしょう。

稼げるwebデザイナーになるには

晴れてWebデザイナーとして仕事ができるようになったとしても、稼げなければモチベーションは保てません。稼げるWebデザイナーになるためには、「この人に依頼したい」「こういうデザインならこの人」と指名を得られるようなスキルが必要です。

このような売れっ子Webデザイナーになるためには、以下のようなポイントを意識しましょう。

・常にトレンド情報をキャッチアップする
・コンバージョンにつながるデザインを理解する
・制作意図を正しく理解して提案する
・チーム全体の動きを理解してデザインを提案する
・プラスアルファのスキルを持つ

コンバージョンとは、Webサイトにおける最終的な成果のこと。例えばECサイトであれば商品が売れることなどを指します。

プラスアルファのスキルとは、例えばイラスト制作に長けている、Webマーケティングの知識を備えている、プログラミングができるなど。このようなスキルも持ち合わせていると、Web制作の全体像を把握しやすくなります。

特徴的なスキルを身につけて実績を積んでいけば、フリーランスWebデザイナーとして独立することも可能です。

会社に縛られず自由に働けるエンジニア・Webデザイナーへ

TECH::EXPERTは未経験からのエンジニア・Webデザイナー転職を実現するスクールです。

  • 残業が多い
  • プライベートを充実させながら自由に働きたい

そんな方には柔軟な働き方が可能なエンジニア・Webデザイナーがおすすめです。未経験からプロとして働けるスキルを身につけられ、徹底したサポートで案件獲得を支援します。

まずは無料キャリア相談(カウンセリング)から、お気軽にご相談ください。

無料キャリア相談の日程を見る

この記事を書いた人

Avatar
Kimura Mayumi
フリーランスのWebライターです。小学生の娘と一緒にプログラミングを学習中です。TECH::NOTEではITの最先端を学びつつ記事を書いています。