未経験からWebデザインを独学で習得するための効果的な勉強手順とは



未経験からWebデザインを独学で習得するための効果的な勉強手順とは

Webサイトと言えば今では見たことがないという人を探すのが難しいくらいどこでも見れるものです。個人で製作したものを除けば、Webサイトのほとんどは「Webデザイナー」という人達によって作られています。

そういう意味ではインターネットを使ったWebサイトは今後も無くなる、廃れるという見通しはほぼ無いため、Webデザイナーの仕事も無くならないというのもまた事実ではないでしょうか。

そこで今回は、Webデザイナーになりたいけれど、未経験だしどうしていいか分からないという方にオススメの勉強方法などをご紹介します!

目次
  1. 未経験からWebデザインを独学で勉強するのは可能?
  2. スクールと独学のメリット・デメリット
  3. 独学の効率的な勉強手順
  4. ステップ1.Javascript,JQuery,html,cssを学ぶ
  5. ステップ2.webデザインスキルを学ぶ
  6. ステップ3.webデザインツールを学ぶ
  7. Webデザインを勉強するのにおすすめのパソコン
  8. 独学だと不安な方向け Webデザインを学べるスクール
  9. Code Camp
  10. KENスクール
  11. まとめ

未経験からWebデザインを独学で勉強するのは可能?

結論から言うと未経験からWebデザインを独学で勉強するのは「可能」です。パソコンさえあれば、ある程度のWebサイトを作成することは可能です。ただし独学の場合、詳細は後述しますが、少し苦労する部分も出てくるのも事実です。

Webデザインの仕事と言っても、見た目部分を考える「デザイン」的な側面とWebサイトを正しく動かせる「プログラミング」的な側面があるため、Webサイト作成が未経験でも、学生時代などにそのどちらかの経験があれば大きなアドバンテージとなります。

もちろんデザイン、プログラミングの経験が無いという人でもWebデザイナーの道が閉ざされていると言う訳ではありません。正しく、効率的な学習を心がけることでWebデザイナーへの道は開かれるでしょう。

スクールと独学のメリット・デメリット

Webデザインの勉強方法としては大きく2つあり「専門のスクールに通う」「本自分1人で勉強する」という方法です。それぞれにメリット・デメリットがあるので解説していきます。

スクールのメリット・デメリット

まずはスクールに通うという学習方法ですが、スクールに通う一番のメリットは「学習効率」です。スクールでは経験豊富な講師と充実したカリキュラムでサポートしてくれるので、分からないところ聞いたり、自分の得意分野を伸ばしたりということが比較的簡単に行えます。

特にWebデザインはコンピュータのことなので、分からない部分も数多く出てくるため、そんな時にすぐに聞ける人がいるというのは独学よりも有利な点と言えるでしょう。

デメリットとしては「コストが高い」と「移動時間」でしょうか。やはり費用面ではどうしても独学には勝てませんが、その分効率的に学習できると考えれば、「時は金なり」早く就職したい人には良いかもしれません。移動に関してもCodeCampなどのオンラインスクールなら自宅からパソコンのビデオ通話で、プロ講師のレッスンが受けられます。

独学のメリット・デメリット

独学のメリットは「コストが低い」と「自由な時間」ではないでしょうか。パソコンやデザインについてある程度の知識のある方や、自分のペースで学習したい方は独学の方が向いているかもしれません。プログラミングと言ってもWebデザインではそこまで難しい処理はしないので初心者でもどうにかなりますし、良いデザインのHPを研究すればデザインの勉強にもなります。

デメリットとしては「全て自分でする」ということにつきます。勉強でつまづいても自分で解決するしかありませんし、PhotoshopやIllustratorなどのグラフィックソフトも必要であれば購入から学習まで1人で行う必要があります。学習本も自分に合ったものをうまく見つけなければ学習をスムーズに進められなくなります。

また、自宅で学習するというのは自由に学習できるというメリットともありますが、自宅はスマホなどが自由に使えてしまうため、様々な誘惑があり勉強に集中できない場合もあります。

Mid_IV_Miyoshi

独学の効率的な勉強手順

独学の場合、どう勉強していいか分からなかったり、どういう教材が良いのか分からない場合があると思います。そんな時にどういう手順で勉強すればいいのか、また、どういう本やサービスを使って学習るのが効率が良いのか解説していきます。

ステップ1.Javascript,JQuery,html,cssを学ぶ

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

image

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
分類 書籍
価格 2,580円(税別)
発売日 2017/3/27
出版 マイナビ出版
購入 Amazon

この本は、Webの開発環境構築からはじまり、HTMLとCSS、JavaScriptの基本、Ajaxと呼ばれる地図サイトなどで使われている技術なども丁寧にサンプルコード付きで学ぶことができますので、1冊で幅広い技術を習得したいと感じている人にオススメです。

ブラウザのインストール、エディターの用意などの開発環境の用意から解説してくれているので、PC初心者にもやさしい内容となっています。

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

image

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
分類 書籍
価格 2,260円(税別)
発売日 2019/3/16
出版 SBクリエイティブ
購入 Amazon

この本はWeb関連の情報やデザインについて学べるブログ『Webクリエイターボックス』のManaさんがHTML、CSSなどのWebサイト構築の方法を分かりやすく教えてくれるという内容になっています。

内容はブラウザーやテキストエディタの種類といった一般的なIT知識から丁寧に解説されています。もちろん、Webサイト制作の基本からスマーフォン対応などのWebサイト作成のための技術を実際のWebサイトの画面などを織り交ぜながら解説してくれます。

ただし、JQueryやJavascriptなどは解説されていないため、他の書籍で学習する必要があります。とりあえず、難しそうなプログラミングや技術は置いておいてWebデザインをはじめたいと感じている人にはピッタリの書籍ではないでしょうか。

ドットインストール

image

ドットインストール
分類 オンラインサービス
公式サイト https://dotinstall.com/
価格 月額1080円
学習形式 オンラインでのビデオ講義

ドットインストールは3分動画でマスターできるプログラミング学習サービスです。1つ1つの講義が短いためスキマ時間を上手に使うことができるのが最大の特徴です。ビデオ講義なので気になったところは繰り返し見ることができます。

講義も、HTML、CSS、Javascriptなどの講義が豊富にそろっているので長い講義だと集中力が保てない方などにもオススメです。講義数もある程度あり、初級から中級くらいまでのレベルの講義がありますので、少しずつステップアップしていけます。

有料プレミアム会員になれば全ての動画講義、文字起こしの閲覧、講師エンジニアへの質問などが行えますが、登録しなくても無料の講義などもありますので気になった方はとりあえず無料会員で講義の雰囲気を確かめてみるのもいいかもしれません。

ステップ2.webデザインスキルを学ぶ

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

image

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
分類 書籍
価格 2,300円(税別)
発売日 2017/6/16
出版 SBクリエイティブ
購入 Amazon

この本は415点の厳選した良質なWebサイトを集めた見本集です。デザインセンスを身に付けるうえで必要なことの1つに良いデザインを研究するというのがあります。それは、センスは生まれ持ったものではなく、学ぶことができるからです。

ただデザイン性の高いサイトを乗せているわけでなく、Webサイトを見るだけではわからなかった「デザインの魅力の理由」が分かるようになっており、自分のサイトの制作する時に活用できます。

自分の思い描くデザインがうまく表現できない時などにも使えるため、プロになってもお世話になる機会が多い書籍ではないでしょうか。

Schoo

image

Schoo(スクー)
分類 オンラインサービス
公式サイト https://schoo.jp/
価格 月額980円
学習形式 オンラインでのビデオ講義

Schooは月980円で4700本のビデオ動画が学習できるオンラインサービスです。常に学習できる常設のビデオ講義と時間が決まっている生放送講義の2種類があり、生放送の講義は大学さながらの講義を自宅で受けることができます。

Webデザインの講義は200を超えており、Webのためのグラフィックデザイン、配色セオリーなど興味をそそられる講義がいくつもあります。

4700本の中にはもちろんWebデザイン以外の様々な講義が学習できるので、プログラミング、デザイン、社会人としての心構えなど非常に広い範囲の知識を得ることができますので非常にWebデザイン以外のスキルアップをしたい方にもオススメです。

ステップ3.webデザインツールを学ぶ

WebデザインのためのPhotoshop+Illustratorテクニック

image

WebデザインのためのPhotoshop+Illustratorテクニック
分類 書籍
価格 2,400円(税別)
発売日 2017/3/30
出版 エクスナレッジ
購入 Amazon

Webデザインの現場で昔からよく使われるツールと言えばPhotoshopとIllustoratorではないでしょうか。現在では他にもツールは沢山出ていますが、これらのツールが使えると仕事の幅も広がります。

Photoshop、Illustoratorはそれぞれの学習本ならたくさんありますが、Webデザイン向けのPhotoshop、Illustoratorを両方学べる学習本となるとそう多くありません。本書ではWebサイトをより魅力的にするために、必要となるテクニックを目的に沿って作例を用いながら解説しています。

基本から説明されていますので、Webデザインをはじめて間もない方や、少しだけ触ったことがある程度の方には良い教本となるのではないでしょうか。

Udemy

image

Udemy(ユーデミー)
分類 オンラインサービス
公式サイト https://www.udemy.com/
価格 授業による
学習形式 オンラインでのビデオ講義

Udemyはオンラインでいつでもどこでも学習ができるサービスです。もちろんスマートフォン対応しているので外出中にも学習ができるのが特徴です。授業は買い切りのビデオ講義で1度購入すると何度でも受講することができます。

Webデザインの授業数も豊富でPhotoshopからillustratorの基本から応用のレッスン、AdobeXD、英語ではありますがFigmaなど、多くの数のレッスンの中から自分の目的に合わせて選ぶことができます。

レッスンの割引なども行われているため、24000円もするレッスンが1200円で購入できることもありますので、安いうちに購入しておいて時間があるときに学習すれば、学習本を購入するより安い価格でビデオレッスンを受講することも可能です。

Webデザインを勉強するのにおすすめのパソコン

Webデザインで使用するデザインツールによってはパソコンにそこそこハイスペックな能力が要求される場合があります。そこで必要な性能とおすすめのパソコンをご紹介します。

必要な性能

まず、デスクトップとノートですが、性能という意味では現在ではあまり差がなくなっています。ノートだと打ち合わせなどに直接持って行けますので便利です。デスクトップだと大画面モニターでの作業などできます。

性能だとまずCPUですが、これはインテル Core i5以上あればある程度のツールを動かしてもそこまで遅くなりません。非常に多くのツールを動かす場合はi7の方が良いでしょう。ハードディスクはSSDのタイプのものを選ぶとよいでしょう、容量はできれば500GB以上を確保した方が良いと思います。メモリは最低でも8GB、16GBは欲しいところです。

オペレーティングシステムはWindowsとiOSどちらでもWebデザインの開発はできますが、Windowsの方が使える無料ツールが多いというのは覚えておいた方が良いでしょう。

アップルコンピュータ:Macシリーズ

image

デザイナーのパソコンと言えばまず思い浮かぶのがアップルのMacシリーズではないでしょうか。デザインのスタイリッシュさはもちろんスペックの方もWebデザインに十分のものが数多く用意されています。ただしMacBook AirはMacの中では最も性能としては低いので重い作業にはあまり適さないかもしれません。

ただし、先述しましたがWindowsに比べると無料ツールなどが少ないのと、同スペックのWindowsパソコンよりはやや割高になっているのは注意が必要です。しかしMacは全て性能としては高水準なので、様々な種類のあるWindowsよりは間違いがないので選びやすいでしょう。

マウスコンピューター:DAIVシリーズ

image

マウスコンピューターのDAIVシリーズはクリエイターのために作られたコンピューターです。その全てにグラフィックボードGeForceとSSDを搭載しており、Webデザイン製作活動に必要な能力は備わっています。

値段も最安のものは99,800円からありますのでコストは押さえたいけれどある程度のスペックは要求したい方にもオススメです。ただし安いモデルはSSDが128GBだったり、メモリが8GBと少し性能が低くなります。また、Macと違いデスクトップはモニターは付属しませんので別途購入する必要があります。

独学だと不安な方向け Webデザインを学べるスクール

どうしても1人だと怠けてしまう、技術の習得に自信がないという方にはスクールをオススメします。スクールには自宅からパソコンでレッスンを受けられるオンラインスクールと直接スクールに通うオフラインスクールがあります。

Code Camp

image

Code Camp(コードキャンプ)
公式サイト https://codecamp.jp
運営会社 エデュケーショナル・デザイン株式会社
学習形式 オンライン学習
学べる言語やスキル プログラミング(HTML5、JavaScript、CSS、MySQLなど)、デザイン(Photoshop、Illustratorなど)

CodeCampでは経験豊富なエンジニアのマンツーマンレッスンが毎日7時から24時まで時間・場所を選ばずに受けることができます。Webマスターコースなら、プログラム、デザイン未経験の方も自分1人の力でWebサイトを作成できるまで技術を習得することができます。

未経験者にも優しいカリキュラムと、理解度に応じたマンツーマンレッスンでパソコンやスマートフォンからアクセスできる料理レシピ検索サイト、インターネット掲示板、ショッピングサイトなど普段良く見るWebサイトを作成できるようになります。

すぐにでも就職したい人向けの転職支援サービスなども行っていますので、しっかりと実力を身に付け、次のステージへとステップアップしたい人にオススメです。無料体験も行っていますので興味のある方はオンラインレッスンを受けてみていかがでしょうか。

KENスクール

image

KENスクール(ケンスクール)
公式サイト https://www.kenschool.jp/
運営会社 株式会社シンクスバンク
学習形式 スクールへ来校しての受講
校舎 東京、横浜、名古屋、大阪、北海道など
学べる言語やスキル プログラミング(HTML5、CSS、Javascript、など)、デザイン(Photoshop、Illustrator、Dreamweaverなど)

KENスクールでは、業界を席巻するような新しい学習システムを多数構築し、開講から30年間という長い間でたくさんの技術者を育ててきました。学習スタイルはインストラクターが「個別指導」で対話しながら授業を進行するスタイルを開講当初から行っています。

個別指導のインストラクターは現役のプロクリエイターが行いますので、現場の生きた技術を直接学ぶことができます。もちろん、未経験でもコーディング、グラフィックデザインなどWebデザインに必要なすべての技術を身に付けることができます。

受講料の20%相当額が戻ってくるWebデザインコース一般教育訓練給付金制度対象講座などもありますので、費用を抑えたいと考えている方にも嬉しい制度です。こちらはスクールに通うタイプなので近くにスクールが無い場合は通えませんが、近くにある方は検討してみてはいかがでしょうか。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

Webデザイナーは求人も割と多く、ある程度のスキルさえ身に付けられればそこまで狭き門でもありません。ただし、他の職種に比べ少し年収が低いという結果も出ていますので、そこは自分にしかできないスキルを身に付けて自分の価値を高めていかなければなりません。

独学でもスクールでもどちらもメリット、デメリットはありますので、総合的に考え、自分に合った勉強方法を見つけることが重要です。今回ご紹介したスクールや勉強方法などを上手に活用して、他の人より1歩先のスタートを切ってみてはいかがでしょうか。  

関連記事

ふろっく
この記事を書いた人
ふろっく
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp