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

独学で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デザイナーは基本的に、以下のスキルが求められます。

■Webデザイナーに必要なスキル
・HTML/CSS
・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デザイナーになれるでしょう。

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

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

関連記事: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を使っているがイマイチ理解できていない」と言う人にもおすすめです。

 

テクノロジースクールTECH::CAMPで
10年後も仕事に困らないスキルを身に着けませんか?
テックキャンプ体験会

TECH::CAMP』はこれからのテクノロジー時代で結果を出せる、次世代のビジネスパーソンを育成するスクールです。以下のような方におすすめです。

  • 今の職場でキャリアアップ、年収アップしたい
  • エンジニア以外の職種でIT業界に転職・就職したい
  • ビジネスパーソンとして総合的にスキルを高めたい

まずは無料体験会に参加してみてください。体験会は月に1000名以上のお申し込みをいただいているため、ご希望の日が埋まることがあります。今すぐのご予約をおすすめします。

体験会について詳しくみる

Kimura Mayumi Kimura Mayumi
フリーランスのWebライターです。小学生の娘と一緒にプログラミングを学習中です。TECH::NOTEではITの最先端を学びつつ記事を書いています。
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

  • カテゴリー