|
「Webデザイナーになりたい」 「Webデザインはどうやって始めたらいい？」 「Webデザインスクールで勉強した方がいい？独学じゃだめ？」 |
Webデザインは今人気の職業で、Webデザイナーになるためのスクールもたくさんあります。
無料の講義の動画や安価な月額で受けられるオンライン講座もあります。
ここではWebデザインの勉強の始め方とスクールとその特徴を比較・検討し、まとめてみました。
Webデザインの勉強の始め方
必要な知識とソフト
Webデザイナーが知っておくべき知識は以下2つです。
- Webサイトのデザイン
- Webサイトのマークアップと動きつけ
Webサイトのデザインはその名の通り、Webサイトの見た目をデザインすることで、Adobe Photoshop 、Adobe Illustrator を使って画像や図形をデザインします。
Webサイト全体はそれらソフトを使うのがこれまでの主流で、最近ではAdobe XDを使うことも増えているようです。
Webデザインの仕事には、それらソフトが全て含まれているAdobe Creative Cloudが必要です。
デザインされたWebサイトをモックアップといい、そのモックアップ通りにコードを入力することをマークアップといいます。
マークアップはHTML、CSSで行います。
さらにWebサイトにちょっとした動きを加えるのにJavaScriptが使われます。
ただ、JavaScriptを直接使うことは少なく、それを使いやすくまとめたライブラリを使います。
JavaScriptのライブラリの一つにJQueryがあり、単純なWebサイトの作成ではJQueryを使うことが多いようです。
これらHTML、CSS、JavaScript、JQueryを使ってコーディングする人をWebクリエイターと言いますが、最近ではそれら知識はWebデザイナーにも求めらる傾向にあります。
ですので、この記事ではWebクリエイターの仕事も含めてWebデザインと表現します。
勉強法
Webデザインの勉強の始め方は大きく分けて次の4つに分けられます。
- 無料
YouTube、ブログやWebサイト、Adobe公式チュートリアルなど - 安価なオンライン講座
たのまなAdobeベーシック講座、たのまなWebデザイナー・映像編集/Webコース、ドットインストール、Progate、Udemyなど - Webデザインスクール
デザイン専門学校、TECH CAMPデザイン、デジタルハリウッドSTUDIO by LIG、TechAcademy Webデザインコースなど - 海外の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 Creative CloudとAdobeベーシック講座がセットになったパッケージです。
ヒューマンアカデミーの通信講座、たのまなの一つ、社会人でもAdobe Creative Cloudをほぼ学割価格で購入でき、オンライン講座もついているということから人気です。
僕もこちらのパッケージでAdobe Creative Cloudを購入しました。
Adobeベーシック講座の内容と感想は以下の記事を参照してください。
たのまなのAdobeベーシック講座でもWebデザインで使用するAdobeのソフトの使い方は学習できます。
ただ、Webデザインの学習にはまだまだ足りない印象です。
（メリット）
- （社会人なら）実質無料
- Adobeソフトの使い方の基礎を効率良く学べる
（デメリット）
- スキルアップするための学習方法が分からない
- Webプログラミングは学べない
デジハリオンライン Adobeマスター講座
デジハリ・オンラインは、「デジタルハリウッド」が母体となって運営しているオンラインスクールです。
Adobeマスター講座は、デジタルハリウッド約20年の教育ノウハウに基づいて制作された基礎動画教材（46時間）と、12ヶ月版のAdobe Creative Cloudがセットになった講座です。
Adobe公式サイトからよりもAdobe Creative Cloudを安く購入でき、しかも、Adobeのソフトの使い方を学習できるのでお得です。
デジハリオンラインのAdobeマスター講座では、Adobeの以下ソフトの使い方を学べます。
- Photoshop
- Illustrator
- Dreamweaver
- Premiere Pro
- After Effects
- InDesign
Adobeマスター講座には、課題もあり、プロのクリエイターに課題を添削してもらえます。
基礎動画、課題の添削は、Adobeマスター講座を開始してから以下の期間有効です。
- 動画の視聴期間: １ヵ月
- 課題添削期間: 2ヵ月
Adobeオンライン講座の内容と感想は以下の記事を参照してください。
（利点）
- （社会人なら）実質無料
- Adobeソフトの基本的な操作方法を効率良く学べる
- 言語（HTML、CSS等）の説明が丁寧かつ豊富
（欠点）
- LP制作等の実践的なレッスンが不足
たのまな Webデザイナー、映像編集/Webコース
ヒューマンの通信講座*たのまな『在宅WORK/Webデザイナー』
たのまなにはAdobeベーシック講座だけでなく、より本格的なコース、Webデザイナー、映像編集/Webコースもあります。
このコースでは動画編集のスキルとWeb制作のスキルを両方習得できます。
Adobeベーシック講座と同様に、Adobe Creative Cloudライセンス一年間がついています。
こちらから無料で資料請求できるので、詳細はそちらを参照してください。
ドットインストール
ドットインストールはプログラミング学習サービスです。
プログラミングのジャンルはWebフロントエンド、Webアプリ、ゲーム、iPhone、Android、システム等幅広くあり、レッスン数も膨大です。
ドットインストールのレッスン一覧はこちらから確認できます。
Webデザイナーが知っておくべき知識、マークアップやWebに動きをあたえるのに必要なレッスンに次があります。
- ウェブサイトを作れるようになろう（HTML、CSS）
- JavaScripではじめるお手軽プログラミング（JavaScript）
- jQuery入門
- Bootstrap 4入門
- Chrome Developer Tools入門
- git入門
- Visual Studio Code入門
- WordPress入門
各レッスン内容、感想を以下にまとめています。
【ドットインストール】はじめてのHTML と CSS（無料）をやってみた感想
【ドットインストール】はじめてのJavaScript（無料）をやってみた感想
【ドットインストール】Visual Studio Code（VS Code）入門 をやってみた感想
レッスンは3分動画で、無理なく学習進められます。
各ジャンルはじめの数レッスンが無料で学習でき、それ以降は有料です。
有料のプレミアム会員の料金は月額1,080円（2020年5月）です。
また、会員になると分からないことを先生に質問できます。
（メリット）
- 格安
- プログラミングのジャンルが豊富
- レッスンも豊富
- 分からないことを質問できる
（デメリット）
- コーディングの学習サイトなのでWebデザインのレッスンはない
- コース、レッスンがたくさんあるので迷う
Webデザインのレッスンはないので、他のオンライン講座、例えば後述のUdemyと組み合わせて学習するといいでしょう。
Progate
ProgateはWebプログラミング学習サービスです。
Webサービスを作るのに必要な言語（HTML, CSS, JavaScript, PHP, Rubyなど）をわかりやすく学べるオンライン講座で、先ほどのドットインストールと並んで人気のプログラミング学習サイトです。
Webデザイナーが知っておくべき知識、マークアップやWebに動きをあたえるのに必要なレッスンに次があります。
- HTML & CSS
- JavaScript
- jQuery
- Command Line
- Git
Progateにログインすると、Progateが提供する学習コースの一覧が見れます。
各レッスン内容、感想を以下にまとめています。
【Progate】HTML & CSS 初級（無料）をやってみた感想
【Progate】JavaScript 1（無料）をやってみた感想
【Progate】Command Line（コマンドライン） 基礎編 をやってみた感想
Progateの特徴も上のリンク記事を参照してください。
とにかく、初心者に超やさしい学習サイトです。
こちらも有料会員にならないと学習を続けられない仕組みで、料金は月額980円（2020年5月）となっています。
なお、英語版のProgateもあります。
（メリット）
- 格安
- 超やさしい。難しい開発環境のセットアップが必要ない
（デメリット）
- コーディングの学習サイトなのでWebデザインのレッスンはない
- 分からないことを質問できない
Webデザインのレッスンはないので、他のオンライン講座、例えば後述のUdemyと組み合わせて学習するといいでしょう。
Udemy
Udemyは世界最大級のオンライン学習プラットフォームで、世界中の学びたい人と教えたい人をオンラインでつなぐサービスです。
開発、IT・ソフトウェア、マネージメント、マーケティングなどコースはいろいろあります。
Webデザインの中でもいろいろ種類があり、人気のコースに以下があります。
約1万5千円という格安で、Web知識、Photoshop、Webグラフィックデザイン、HTML、CSS、実践的なコーディングなどWebデザイナーに必要な知識が全て学べます。
（メリット）
- 格安
- Webデザイナーに必要な知識が全て学べる
- コースがたくさんある
（デメリット）
- コースがたくさんあるので迷う
デイトラ
デイトラは1日1題30日Webの課題をこなすことでWebの知識を学ぶオンラインスクールです。
2019年1月にサービス開始したまだ新しいスクールですが、「#30DAYSトライアル」のハッシュタグとともにツイッターで人気となり、今や多くのユーザーに利用されています。
Web制作コース、Ruby・Railsコースがあり、Webデザインコースは現在準備中（2020年6月）です。
Web制作コースはエンジニア向けに構成されていて、サーバー側やサーバーとのデータやり取りまで学習するので、Webデザイナー向けではないです。
（メリット）
- 実践に向けた学習カリキュラム
- 分からないことを質問できる（無制限）。
（デメリット）
- Webデザインコースは準備中（2020年6月）
- Web制作コースはWebエンジニア向け
Webデザインスクール
デザイン専門学校
昔からあるスタイルのデザイン専門学校でもWebデザインを学べます。
例えば、大阪ならHALデザイン専門学校、創造社デザイン専門学校などです。
僕はWebデザインではなくDTPデザインをデザイン専門学校で4ヵ月学びました。
また、たのまなのAdobeベーシック講座も全講座受けているので、その違いをこちらの記事にまとめていますので参考にしてください。
こういったデザイン専門学校のいくつかは職業訓練校も受託しています。
市が運営する職業訓練校と違ってプロの先生が仕事に必要な知識を教えてくれます。
なので、会社を退職してデザインを学ぶ場合、職業訓練受講給付金をもらって実践的な知識を学べます。
（メリット）
- （学校によっては）職業訓練受講給付金をもらってデザインを学べる
（デメリット）
- 職業訓練校出ない場合は費用がかかるので学校選びが重要
TECH CAMP デザイナーコース
TECH::CAMPオンラインデザイナーコース 
はWebプログラミングスクールで人気のテックキャンプが運営するデザインコースです。
未経験からプロのデザインスキルが身につく学習プログラムとキャリア支援を提供しており、最短、10週間(3ヶ月)でデザイナーとしてのキャリアがスタートできる学習カリキュラムです。
デザイナーとしての就職・転職が成功しなかった場合は受講料を全額返金という、デザイナー転職保証までしている本気のデザイナー養成スクールです。
入会前に無料で相談できます。
デジハリ・オンライン（デジハリONLINE）
Webデザイン
デジハリ・オンラインスクールは、「デジタルハリウッド」が母体となって運営しているオンラインスクールです。
Webデザイン、動画編集・動画クリエイター、3DCG・映像などの講座があります。
デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムが提供されています。
未経験者の人でもスムーズに学習できるように、以下のように学習方法に工夫されています。
- 何度でも反復学習できる動画授業
- リアルタイムで講師とコミュニケーションできるライブ授業
- 目的を達成するまでとことん付き合うオンラインサポート
ライブ授業では、その場で直接講師に質問できたり、クラスメイトとチャットができる学習方法になっていて、挫折しない万全のサポート体制です。
Webデザインには、以下の講座があります。
- Webデザイナー講座
本格的なWebサイトのデザイン・企画から、コーディング、公開までを習得しプロを目指す - グラフィックデザイン
Webサイトを彩る画像の補正・加工やレイアウトの手法を、ピンポイントに学ぶ - Web構築・プログラミング
Webデザイン構築のためのHTMLやプログラミングの基礎知識をピンポイントで習得する - Webマーケティング
SEO対策、リスティング、アクセス解析など、Webサイトに人を集めるための具体的な手法を学ぶ - ネット動画
需要拡大中の映像制作×マーケティングを学び、Webプロモーションの引き出しを広げる
制作スキルだけでなく、企画・ディレクションのノウハウ、マーケティング等カリキュラムは充実しているので、初心者の方からプロのクリエイターを目指せます。
受講内容、受講料、受講期間は講座によって違いますので、詳細はこちらを参照してください。
デジタルハリウッドSTUDIO by LIG
Web制作会社LIGが運営するWebデザインスクール【デジタルハリウッド STUDIO by LIG】 
です。
プロのWebデザイナーとなるために必要な基礎知識から最新スキルを6ヶ月で習得できる学習カリキュラムです。
デザイン、HTML・CSS・Javascriptを用いたコーディング、マーケティングスキル、ディレクションスキル等、Webデザイナーとして必要な知識やスキルを学ぶことができます。
現役クリエイターによる指導、全員Macでデュアルディスプレイの良質な学習環境、 コンサルタントによる手厚い就職支援があるのが特徴です。
TechAcademy
TechAcademy [テックアカデミー] 
のWebデザインコース 
です。
最短4週間で未経験からプロを育てるオンライン完結のスクールです。
現役Webデザイナーのメンターがついているので、個人に合ったオリジナルの学習システム、カリキュラムで効果的に無駄のない学習ができます。
Webデザインの原則、画像加工、JavaScript/jQuery、ワイヤーフレーム、
HTML5/CSS3、Git/GitHub等のWebデザインの実務に必要な知識を全て現役Webデザイナーのメンターのサポートのもとで学べます。
CodeCamp
オンライン個別指導のプログラミングスクールのWebデザインコースで、未経験からWebデザイン、Webサイト制作を学んでプロになるための学習カリキュラムです。
オンラインなのでどこからでもレッスンを受けられ、費用は安く、個別指導の講師の指名・変更やレッスン時間の変更も可能なので自由度が高いです。
以下ツールとスキルを身につけて、本格的なレスポンシブデザインのWebサイトが制作できるようになります。
Illustrator、Photoshop、HTML、CSS、JavaScript、JQuery、Bootstrap
海外のWebデザインスクール
ベトナム Weekly IT CAMP
Weekly IT CAMP 
はベトナム ダナンのオフショア開発会社で⾏う実践的な研修スタイルのIT留学です。
ベトナムはITオフショア開発拠点として世界的に有名で、国がプログラミング教育に⼒を⼊れています。そのため、⽇本よりも最先端の技術がベトナムにあります。
また、ベトナムは観光地としても世界的に有名で欧米からたくさんの観光客がやってきています。
こちらはダナンではなくハノイの記事ですが基本的に生活環境は同じです。
むしろ、ダナンには海があるリゾート地なのでリラックスできて生活環境はハノイより良いでしょう。
Weekly IT CAMP ですが、WebデザインコースとWebエンジニアコースの２コースあります。
Webデザインコースは学習期間によって以下ビギナーコースとエキスパートコースがあります。
- ビギナー
期間：2週間
ツール：Photoshop、Illustrator、XD
学習成果：デザインの基礎やアプリの使い方を学びLPのデザインができるようになります。 - エキスパート：
期間：4週間
ツール：Photoshop、Illustrator、XD、HTML、CSS
学習成果：コーポレートサイトやスマホのUIが作れるようになり、簡単なLPのコーディングができるようになります。
スクールの特徴は次の通りです。
- メイン講師は日本人ですべて日本語で授業
- 日本の最前線で活躍している一流講師陣が現地で授業
- 1クラスは最大10名という少人数制
- 最短2週間から受講可能
- 現地エンジニアとの交流機会が多い（ベトナムのIT開発会社の中で行う研修のため）
Weekly IT CAMPはリゾート地で快適に過ごしながらITを学ぶのに最適です。
フィリピン Vivixx CodingBootcamp
Vivixx CodingBootcampはフィリピン バギオで、英語でITを学べる超本気のIT留学です。
スクールの特徴は以下の通りです。
- 結果を意識したカリキュラムで 徹底的にITスキルと英語を学習
- 生徒同士が互いに成長し合える空間と コミュニティづくり
- IT業界の今を 知ることができるイベントに 積極的に参加できる
- IT業界で需要が高い 多数の言語を学習できる
- 業界で活躍するIT企業で ITスキルと英語を実践的に活かす
- 治安が良くてお得 フィリピンの避暑地バギオで リラックスしながら学ぶ
セブ島にも英語 x ITの語学学校はありますが、レベルが違います。
ITスキルを世界最高レベルのインドに照準を合わせていますので、英語で世界レベルのITを学べます。
出典: IT留学はインドとフィリピンどっちがオススメなのか？【徹底比較】
また、セブ島のIT留学は生徒は日本人ばかりですが、Vivixx CodingBootcampのメインの生徒はフィリピン人です。
【格安IT留学バギオ】43歳IT知識ゼロの女性がバギオでITブートキャンプに参加して劇的に変化している件
授業だけでなくフィリピン人と英語で相談し合う環境なので自然と英語が身につきます。
環境ですが、フィリピンのバギオは避暑地として有名な場所で、一年中涼しく、静かで、食べ物も新鮮なのでセブ島より生活環境は良いです。
詳細はこちらにまとめています。
さらに、ここが一番大きなメリットですが、コースの後半の１ヶ月は、ニューヨークをはじめ海外のテックカンパニーでインターンをします。
つまり、実力次第で卒業後に英語圏の欧米企業で就職できる可能性があるということです。
なお、今はオンラインでもブートキャンプをやっていて、コロナ禍のこの時期は特別キャンペーン中です。
フィリピンではじめての超本気IT留学（コロナに負けるな！ 特別価格キャンペーン中）
まとめ（ロードマップ）
WebデザインにAdobe Creative Cloudは必須ですので、まずはAdobe Creative Cloudを購入してAdobeのチュートリアルを見てツールの使い方をざっくり理解しておくといいです。
その際、社会人も学割でAdobe Creative Cloudを購入できるヒューマンアカデミー たのまな Adobeベーシック講座で購入するとお得です。
簡単にAdobeのツールの使い方を覚えた後にプロのWebデザイナーになるための勉強を始めるといいです。
費用をなるべく安く抑えるなら、UdemyのWebデザイン入門オンライン講座がおすすめです。
コーディングは同じくUdemyのフロントエンドエンジニアになりたい人の Webプログラミング入門
でも学べますが、初心者向けのドットインストールやProgateで始めることをおすすめします。
費用は少し高くなっても構わないので、プロのWebデザインを学びながら就職支援もして欲しいなら、以下のWebデザインスクールから選ぶといいです。
転職先を探すなら以下転職エージェントに登録しておくといいです。
- マイナビエージェント
IT・Web系の転職に強い
海外企業の就職支援を希望なら、以下のWebデザインスクールから選ぶといいです。
その他
その他Web、プログラミング、ブログ関連の記事をこちらにまとめているので参考にしてください。
