Web制作・Webデザイン 始め方とスクールを比較・検討

Web デザイン スクール 比較
画像編集

「Webデザイナーになりたい」

「Webデザインはどうやって始めたらいい?」

「Webデザインスクールで勉強した方がいい?独学じゃだめ?」

Webデザインは今人気の職業で、Webデザイナーになるためのスクールもたくさんあります。

無料の講義の動画や安価な月額で受けられるオンライン講座もあります。

ここではWebデザインの勉強の始め方スクールとその特徴を比較・検討し、まとめてみました。




Webデザインの勉強の始め方

必要な知識とソフト

Webデザイナーが知っておくべき知識は以下2つです。

Webデザイナーに必要な知識

  1. Webサイトのデザイン
  2. Webサイトのマークアップと動きつけ

Webサイトのデザインはその名の通り、Webサイトの見た目をデザインすることで、Adobe Photoshop Adobe Illustrator を使って画像や図形をデザインします。

Webサイト全体はそれらソフトを使うのがこれまでの主流で、最近ではAdobe XDを使うことも増えているようです。

Webデザインの仕事には、それらソフトが全て含まれているAdobe Creative Cloudが必要です。

Adobe Creative Cloud

  • Adobe Creative Cloud(通常版) 
  • Adobe Creative Cloud(学生・教職員版)

デザインされたWebサイトをモックアップといい、そのモックアップ通りにコードを入力することをマークアップといいます。

マークアップはHTMLCSSで行います。

さらにWebサイトにちょっとした動きを加えるのにJavaScriptが使われます。

ただ、JavaScriptを直接使うことは少なく、それを使いやすくまとめたライブラリを使います。

JavaScriptのライブラリの一つにJQueryがあり、単純なWebサイトの作成ではJQueryを使うことが多いようです。

これらHTML、CSS、JavaScript、JQueryを使ってコーディングする人をWebクリエイターと言いますが、最近ではそれら知識はWebデザイナーにも求めらる傾向にあります。

ですので、この記事ではWebクリエイターの仕事も含めてWebデザインと表現します。

勉強法

Webデザインの勉強の始め方は大きく分けて次の4つに分けられます。

Webデザインの勉強法

  1. 無料
    YouTube、ブログやWebサイト、Adobe公式チュートリアルなど
  2. 安価なオンライン講座
    たのまなAdobeオンライン講座、たのまなWebデザイナー・映像編集/Webコース、ドットインストール、Progate、Udemyなど
  3. Webデザインスクール
    デザイン専門学校、TECH CAMPデザイン、デジタルハリウッドSTUDIO by LIG、TechAcademy Webデザインコースなど
  4. 海外のWebデザインスクール
    ベトナム Weekly IT CAMP、フィリピン Vivixx CodingBootcampなど

それぞれのメリット、デメリットを以下にまとめてみます。

無料で学習

無料で学習する方法として、YouTube、ブログやWebサイト、Adobe公式チュートリアルなどがあります。

YouTubeやWebサイトで勉強方法を調べるには、「web デザイン 入門」や「web デザイン 講座」のワードで検索すると簡単に調べられます。

なお、WebデザインではAdobeのソフト、Photoshop、Illustrator、XD、Dreamweaverを使用するので、それら全てのツールが入ったパッケージ、Adobe Creative Cloudが必須です。

Adobeのソフトパッケージ

そのAdobeのツールの使い方についてはAdobe公式サイトのチュートリアル動画で無料で学べます。

基礎的な勉強はこれらの無料動画やサイトの情報で分かります。

ただ、スキルアップするための学習方法が分からない・分かりにくいのが問題ですね。

無料で学習のメリット、デメリット

(メリット)

  • 無料
  • 基礎を学べる

(デメリット)

  • 有益な情報を探すのに時間がかかる
  • スキルアップするための学習方法が分からない

 

安価なオンライン講座で学習

たのまなのAdobeオンライン講座

Adobeのソフトが全て使えるAdobe Creative CloudとAdobeオンライン講座がセットになったパッケージです。

ヒューマンアカデミーの通信講座、たのまなの一つ、社会人でもAdobe Creative Cloudをほぼ学割価格で購入でき、オンライン講座もついているということから人気です。

僕もこちらのパッケージでAdobe Creative Cloudを購入しました。

Adobeオンライン講座の内容と感想は以下の記事を参照してください。

ヒューマンアカデミー たのまな Adobe

ヒューマンアカデミー たのまな のAdobeオンライン講座の体験談【2020年5月】

2020年5月8日

たのまなのAdobeオンライン講座でもWebデザインで使用するAdobeのソフトの使い方は学習できます。

ただ、Webデザインの学習にはまだまだ足りない印象です。

たのまなのAdobeオンライン講座

(メリット)

  • (社会人なら)実質無料
  • Adobeソフトの使い方の基礎を効率良く学べる

(デメリット)

  • スキルアップするための学習方法が分からない
  • 言語(HTML、CSS等)の説明はない

Dreamweaverでマークアップする操作方法の説明はありますが、マークアップ一つ一つの説明はほとんどありません。

ヒューマンアカデミー Adobe Dreamweaver 感想

ヒューマンアカデミー たのまな Adobe Dreamweaverオンライン講座内容と感想【2020年5月】

2020年5月7日

ですので、後述のドットインストールProgateと併用して学習すると良いです。

たのまな Webデザイナー、映像編集/Webコース

たのまな Webデザイン

 

ヒューマンの通信講座*たのまな『在宅WORK/Webデザイナー』

たのまなにはAdobeオンライン講座だけでなく、より本格的なコース、Webデザイナー、映像編集/Webコースもあります。

このコースでは動画編集のスキルとWeb制作のスキルを両方習得できます。

Adobeオンライン講座と同様に、Adobe Creative Cloudライセンス一年間がついています

こちらから無料で資料請求できるので、詳細はそちらを参照してください。

ドットインストール

ドットインストール

ドットインストールはプログラミング学習サービスです。

プログラミングのジャンルはWebフロントエンド、Webアプリ、ゲーム、iPhone、Android、システム等幅広くあり、レッスン数も膨大です。

ドットインストールのレッスン一覧はこちらから確認できます。

Webデザイナーが知っておくべき知識、マークアップやWebに動きをあたえるのに必要なレッスンに次があります。

Webデザイナー向けのレッスン

  • ウェブサイトを作れるようになろう(HTML、CSS)
  • JavaScripではじめるお手軽プログラミング(JavaScript)
  • jQuery入門
  • Bootstrap 4入門
  • Chrome Developer Tools入門
  • git入門
  • Visual Studio Code入門
  • WordPress入門

各レッスン内容、感想を以下にまとめています。

ドットインストール HTML はじめて

【ドットインストール】Web初心者がはじめてのHTML と CSS(無料)をやってみた感想

2020年6月1日
ドットインストール JavaScript はじめて

【ドットインストール】Web初心者がはじめてのJavaScript(無料)をやってみた感想

2020年6月4日
ドットインストール JQuery

【ドットインストール】Web初心者がJQuery入門をやってみた感想

2020年6月5日
ドットインストール git

【ドットインストール】git入門をやってみた感想

2020年6月11日
ドットインストール Visual Studio Code

【ドットインストール】Visual Studio Code(VS Code)入門をやってみた感想

2020年6月8日

レッスンは3分動画で、無理なく学習進められます。

各ジャンルはじめの数レッスンが無料で学習でき、それ以降は有料です。

有料のプレミアム会員の料金は月額1,080円(2020年5月)です。

また、会員になると分からないことを先生に質問できます。

ドットインストールでの学習

(メリット)

  • 格安
  • プログラミングのジャンルが豊富
  • レッスンも豊富
  • 分からないことを質問できる

(デメリット)

  • コーディングの学習サイトなのでWebデザインのレッスンはない
  • コース、レッスンがたくさんあるので迷う

 

Webデザインのレッスンはないので、他のオンライン講座、例えば後述のUdemyと組み合わせて学習するといいでしょう。

Progate

Progate

ProgateはWebプログラミング学習サービスです。

Webサービスを作るのに必要な言語(HTML, CSS, JavaScript, PHP, Rubyなど)をわかりやすく学べるオンライン講座で、先ほどのドットインストールと並んで人気のプログラミング学習サイトです。

Webデザイナーが知っておくべき知識、マークアップやWebに動きをあたえるのに必要なレッスンに次があります。

Webデザイナー向けのレッスン

  • HTML & CSS
  • JavaScript
  • jQuery
  • Command Line
  • Git

Progateにログインすると、Progateが提供する学習コースの一覧が見れます。

各レッスン内容、感想を以下にまとめています。

Progate HTML 初級

【Progate】Web初心者がHTML & CSS 初級(無料)をやってみた感想

2020年5月29日
Progate JavaScript 無料

【Progate】Web初心者がJavaScript 1(無料)をやってみた感想

2020年6月4日
Progate JQuery 無料

【Progate】ゲームプログラマーがJQuery初級編をやってみた感想

2020年6月6日
Progate React 無料

【Progate】ゲームプログラマーがReact 1をやってみた感想

2020年6月7日
Progate コマンドライン

【Progate】ゲームプログラマーがCommand Line(コマンドライン) 基礎編をやってみた感想

2020年6月10日
Progate Git

【Progate】ゲームプログラマーがGitとGit環境構築をやってみた感想

2020年6月10日

Progateの特徴も上のリンク記事を参照してください。

とにかく、初心者に超やさしい学習サイトです。

こちらも有料会員にならないと学習を続けられない仕組みで、料金は月額980円(2020年5月)となっています。

なお、英語版のProgateもあります。

Progateでの学習

(メリット)

  • 格安
  • 超やさしい。難しい開発環境のセットアップが必要ない

(デメリット)

  • コーディングの学習サイトなのでWebデザインのレッスンはない
  • 分からないことを質問できない

Webデザインのレッスンはないので、他のオンライン講座、例えば後述のUdemyと組み合わせて学習するといいでしょう。

Udemy

Udemy Webデザイン

Udemyは世界最大級のオンライン学習プラットフォームで、世界中の学びたい人と教えたい人をオンラインでつなぐサービスです。

開発、IT・ソフトウェア、マネージメント、マーケティングなどコースはいろいろあります。

Webデザインの中でもいろいろ種類があり、人気のコースに以下があります。

約1万5千円という格安で、Web知識、Photoshop、Webグラフィックデザイン、HTML、CSS、実践的なコーディングなどWebデザイナーに必要な知識が全て学べます

Udemyでの学習

(メリット)

  • 格安
  • Webデザイナーに必要な知識が全て学べる
  • コースがたくさんある

(デメリット)

  • コースがたくさんあるので迷う

 

デイトラ

デイトラ

デイトラ1日1題30日Webの課題をこなすことでWebの知識を学ぶオンラインスクールです。

20191月にサービス開始したまだ新しいスクールですが、「#30DAYSトライアル」のハッシュタグとともにツイッターで人気となり、今や多くのユーザーに利用されています。

Web制作コース、Ruby・Railsコースがあり、Webデザインコースは現在準備中(2020年6月)です。

Web制作コースはエンジニア向けに構成されていて、サーバー側やサーバーとのデータやり取りまで学習するので、Webデザイナー向けではないです。

デイトラでの学習

(メリット)

  • 実践に向けた学習カリキュラム
  • 分からないことを質問できる(無制限)。

(デメリット)

  • Webデザインコースは準備中(2020年6月)
  • Web制作コースはWebエンジニア向け

 

Webデザインスクール

デザイン専門学校

昔からあるスタイルのデザイン専門学校でもWebデザインを学べます。

例えば、大阪ならHALデザイン専門学校、創造社デザイン専門学校などです。

僕はWebデザインではなくDTPデザインをデザイン専門学校で4ヵ月学びました。

また、たのまなのAdobeオンライン講座も全講座受けているので、その違いをこちらの記事にまとめていますので参考にしてください。

DTP デザイン 始め方 スクール

DTPデザイン 始め方 スクールで勉強することとオンライン講座との違い

2020年5月14日

こういったデザイン専門学校のいくつかは職業訓練校も受託しています。

市が運営する職業訓練校と違ってプロの先生が仕事に必要な知識を教えてくれます。

なので、会社を退職してデザインを学ぶ場合、職業訓練受講給付金をもらって実践的な知識を学べます。

デザイン専門学校での学習

(メリット)

  • (学校によっては)職業訓練受講給付金をもらってデザインを学べる

(デメリット)

  • 職業訓練校出ない場合は費用がかかるので学校選びが重要

 

TECH CAMP デザイナーコース

テックキャンプ デザイン

TECH::CAMPオンラインデザイナーコース はWebプログラミングスクールで人気のテックキャンプが運営するデザインコースです。

未経験からプロのデザインスキルが身につく学習プログラムとキャリア支援を提供しており、最短、10週間(3ヶ月)でデザイナーとしてのキャリアがスタートできる学習カリキュラムです。

デザイナーとしての就職・転職が成功しなかった場合は受講料を全額返金という、デザイナー転職保証までしている本気のデザイナー養成スクールです。

入会前に無料で相談できます。

デジタルハリウッドSTUDIO by LIG

デジタルハリウッドSTUDIO by LIG

Web制作会社LIGが運営するWebデザインスクール【デジタルハリウッド STUDIO by LIG】 です。

プロのWebデザイナーとなるために必要な基礎知識から最新スキルを6ヶ月で習得できる学習カリキュラムです。

デザイン、HTMLCSSJavascriptを用いたコーディング、マーケティングスキル、ディレクションスキル等、Webデザイナーとして必要な知識やスキルを学ぶことができます。

現役クリエイターによる指導、全員Macでデュアルディスプレイの良質な学習環境、 コンサルタントによる手厚い就職支援があるのが特徴です。

TechAcademy

TechAcademy Webデザイン

TechAcademy [テックアカデミー] Webデザインコース です。

最短4週間で未経験からプロを育てるオンライン完結のスクールです。

現役Webデザイナーのメンターがついているので、個人に合ったオリジナルの学習システム、カリキュラムで効果的に無駄のない学習ができます。

Webデザインの原則、画像加工、JavaScript/jQuery、ワイヤーフレーム、
HTML5/CSS3、Git/GitHub等のWebデザインの実務に必要な知識を全て現役Webデザイナーのメンターのサポートのもとで学べます。

CodeCamp

Codecamp デザインマスター

現役エンジニアのオンライン家庭教師CodeCamp

オンライン個別指導のプログラミングスクールのWebデザインコースで、未経験からWebデザイン、Webサイト制作を学んでプロになるための学習カリキュラムです。

オンラインなのでどこからでもレッスンを受けられ、費用は安く、個別指導の講師の指名・変更やレッスン時間の変更も可能なので自由度が高いです。

以下ツールとスキルを身につけて、本格的なレスポンシブデザインのWebサイトが制作できるようになります。

Illustrator、Photoshop、HTML、CSS、JavaScript、JQuery、Bootstrap

海外のWebデザインスクール

ベトナム Weekly IT CAMP

Weekly IT CAMP

Weekly IT CAMP ベトナム ダナンのオフショア開発会社で⾏う実践的な研修スタイルのIT留学です。

ベトナムはITオフショア開発拠点として世界的に有名で、国がプログラミング教育に⼒を⼊れています。そのため、⽇本よりも最先端の技術がベトナムにあります。

また、ベトナムは観光地としても世界的に有名で欧米からたくさんの観光客がやってきています。

ハノイ 観光 おすすめ

【保存版】ハノイ 観光 おすすめの観る、食べる、泊まるあと移動方法や滞在日数とか【2020年】

2020年1月28日

こちらはダナンではなくハノイの記事ですが基本的に生活環境は同じです。

むしろ、ダナンには海があるリゾート地なのでリラックスできて生活環境はハノイより良いでしょう。

Weekly IT CAMP ですが、WebデザインコースWebエンジニアコースの2コースあります。

Webデザインコースは学習期間によって以下ビギナーコースとエキスパートコースがあります。

  • ビギナー
    期間:2週間
    ツール:Photoshop、Illustrator、XD
    学習成果:デザインの基礎やアプリの使い方を学びLPのデザインができるようになります。
  • エキスパート:
    期間:4週間
    ツール:Photoshop、Illustrator、XD、HTML、CSS
    学習成果:コーポレートサイトやスマホのUIが作れるようになり、簡単なLPのコーディングができるようになります。

スクールの特徴は次の通りです。

Weekly IT CAMPの特徴

  • メイン講師は日本人ですべて日本語で授業
  • 日本の最前線で活躍している一流講師陣が現地で授業
  • 1クラスは最大10名という少人数制
  • 最短2週間から受講可能
  • 現地エンジニアとの交流機会が多い(ベトナムのIT開発会社の中で行う研修のため)

Weekly IT CAMPはリゾート地で快適に過ごしながらITを学ぶのに最適です。

フィリピン Vivixx CodingBootcamp

Vivixx CodingBootcamp

Vivixx CodingBootcampフィリピン バギオで、英語でITを学べる超本気のIT留学です。

スクールの特徴は以下の通りです。

Vivixx CodingBootcampの特徴

  • 結果を意識したカリキュラムで 徹底的にITスキルと英語を学習
  • 生徒同士が互いに成長し合える空間と コミュニティづくり
  • IT業界の今を 知ることができるイベントに 積極的に参加できる
  • IT業界で需要が高い 多数の言語を学習できる
  • 業界で活躍するIT企業で ITスキルと英語を実践的に活かす
  • 治安が良くてお得 フィリピンの避暑地バギオで リラックスしながら学ぶ

セブ島にも英語 x ITの語学学校はありますが、レベルが違います

ITスキルを世界最高レベルのインドに照準を合わせていますので、英語で世界レベルのITを学べます。

バギオ IT x 英語

出典: IT留学はインドとフィリピンどっちがオススメなのか?【徹底比較】

また、セブ島のIT留学は生徒は日本人ばかりですが、Vivixx CodingBootcampメインの生徒はフィリピン人です。

【格安IT留学バギオ】43歳IT知識ゼロの女性がバギオでITブートキャンプに参加して劇的に変化している件

授業だけでなくフィリピン人と英語で相談し合う環境なので自然と英語が身につきます

環境ですが、フィリピンのバギオは避暑地として有名な場所で、一年中涼しく、静かで、食べ物も新鮮なのでセブ島より生活環境は良いです。

詳細はこちらにまとめています。

バギオ おすすめ ホテル

バギオ 観光におすすめのホテルは?【2019年】

2019年4月2日

さらに、ここが一番大きなメリットですが、コースの後半の1ヶ月は、ニューヨークをはじめ海外のテックカンパニーでインターンをします。

つまり、実力次第で卒業後に英語圏の欧米企業で就職できる可能性があるということです。

なお、今はオンラインでもブートキャンプをやっていて、コロナ禍のこの時期は特別キャンペーン中です。

フィリピンではじめての超本気IT留学(コロナに負けるな! 特別価格キャンペーン中)

まとめ(ロードマップ)

WebデザインにAdobe Creative Cloudは必須ですので、まずはAdobe Creative Cloudを購入してAdobeのチュートリアルを見てツールの使い方をざっくり理解しておくといいです。

Adobeのソフトパッケージ

  • Adobe Creative Cloud(通常版) 
  • Adobe Creative Cloud(学生・教職員版)

その際、社会人も学割でAdobe Creative Cloudを購入できるヒューマンアカデミー たのまな アドビソフトウェア通信で購入するとお得です。

簡単にAdobeのツールの使い方を覚えた後にプロのWebデザイナーになるための勉強を始めるといいです。

費用をなるべく安く抑えるなら、UdemyWebデザイン入門オンライン講座がおすすめです。

コーディングは同じくUdemyフロントエンドエンジニアになりたい人の Webプログラミング入門でも学べますが、初心者向けのドットインストールProgateで始めることをおすすめします。

費用は少し高くなっても構わないので、プロのWebデザインを学びながら就職支援もして欲しいなら、以下のWebデザインスクールから選ぶといいです。

転職先を探すなら以下転職エージェントに登録しておくといいです。

おすすめの転職エージェント

海外企業の就職支援を希望なら、以下のWebデザインスクールから選ぶといいです。

おすすめの海外企業Webデザインスクール

さらに情報が増えたらロードマップとして別記事にまとめます。

2 件のコメント

  • 値段わかんないですが、日本人が日本人向けにつくったテックキャンプでいいんじゃないですかね?

    いまだとオンラインのものもあるみたいですし

  • そうですね。
    なるべく早く実務経験を積んだほうがいいので、転職保証制度は大きいです。
    ただ、デザイナー職は渋谷アジアビル校だけのようです。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください