こんにちは、DAINOTE編集部のDAIです。

これからWebデザインを学びたい!と思われていて、どういうスクールに行こうか迷われている方も多いのではないでしょうか。

そこで今回は

  • Webデザインで何を学ぶべきか
  • Webデザインを学ぶのにおすすめのスクールはどこか

について、解説していきたいと思います。

Webデザインのスキルってどんなもの?

Webデザインのスキルと一口に言ってもイメージするのが難しいですが、以下のものです。

  1. Webデザイン:Photoshop / Illustrator / Adobe XD
  2. プログラミング言語:HTML / CSS / JavaScript / jQuery / Bootstrap / (ワードプレスを使うなら)PHP/ WordPress

それぞれについて軽くおさらいしておきましょう。

Webデザインのスキル①:Photoshop

Photoshopとは、Adobe社の画像編集&デザインソフトです。

主に、写真の編集に秀でたソフトウェアなので、写真撮影を生業としている人にも使われます。Webサイトで使用するクリエイティブをより魅力的に編集したいときに、Photoshopのスキルを持っていると便利というわけ。

Photoshopスキルがあれば、以下のような編集が簡単にできます。

  • カラー写真をモノクロにする
  • 余計に写り込んでいるイメージを消す
  • 文字型に画像を切り出す
  • 空の色をより青く見せる
  • いい感じに影を作る
  • 人の肌をより綺麗に見せたり顎をシャープに見せたりする

以上のような編集も手早くできると、Webデザイナーとしてより重宝されるでしょう。

Webデザインスクールで学べるスキル②:Illustrator

IllustratorもAdobe製品の一つ。「イラレ」と呼ばれているアレです。

Photoshopが写真編集向けのソフトであるのに対し、Illustrator(イラレ)は、イラストなどを自由に描画・アレンジできるソフトウェア。

世界中のデザインのほとんどはイラレで作られていると言っても過言ではないほど、イラレでできることは多彩です。つまり、Webデザインのスキルとしては鉄板も鉄板であると言えます。

Illustrator(イラレ)のスキルがあれば、Webページ内のデザインはもちろん、フライヤーやチラシ、ポスター、図解資料などを、美しく人目をひく見やすいものに仕上げることができるのです。

Illustrator(イラレ)を使えば、こんなことができます。

  • 図形を描き、自由に形を編集する
  • ペンがなくても図形の組み合わせでイラストが描ける
  • 魅力的なフォントを使ったテキストを自由にレイアウトする
  • 色や形に子細までこだわったオリジナルロゴを作成する

Webデザインをスクールで学ぶのであれば、一番初めに触れておきたいスキルとも言えるかもしれません。

Webデザインスクールで学べるスキル③:Adobe XD

Adobe XDは、Webデザイン領域の中で「プロトタイピング」に有用なデザインツールです。

Webサイトやアプリのデザインする過程で、画面の遷移や動きを確認するために「プロトタイプ」を作る場合があります。

  • Webサイト・アプリのUI構成をデザインする
  • ボタンごとの画面遷移や挙動を設定する
  • Webサイトのデザインをリンクで関係者に共有する

XDをあやつるスキルがあれば、Web制作にかかわる関係者に素早く出来栄えを共有したり、UIに関して意見交換を行ったりできるのです。

より良いWebサイト・アプリ政策を行う上で、XDスキルのあるWebデザイナーはより重宝されることでしょう。

Webデザインスクールで学べるスキル④:HTML

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)のこと。ごく基本的なプログラミング言語の一つです。

Webページのソースコードを見てみると、私たちが日常的に見ているWebサイトのほとんどはHTMLコードで作られています。

  • テキストに色や大きさ、リンクなどの機能を持たせる
  • 画像を表示する
  • 段落や見出し、リストを作る
  • 入力フォームを作る

これらは全て、HTMLコードで指定することができます。

Webデザインに興味がない人でも、ブログなどを自分で編集したことのある人なら馴染みがあるような、ごく基本的なスキルです。

Webデザインの初歩として最低限学んでおくことをおすすめします。

Webデザインスクールで学べるスキル⑤:CSS

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)のことで、Webページのスタイルを設定するためのプログラミング言語です。HTMLと組み合わせて利用されます。

HTMLを使ってテキストを整形し情報の構造を整えたら、それを見栄え良くするために用いる言語がCSSなのです。

  • HTMLで定義した「見出し」や「段落」「表」「リスト」などの構成を、画面上にどう配置するかを定義する

HTMLを使ってお弁当の中に入れるおかずを決めるとしたら、CSSではそのおかずをお弁当箱の中にどう配置するかを決めます。

HTMLだけでWebサイトを構成することも不可能ではありませんが、昨今では流行りません。CSSもセットで使えるよう、スクールや独学で学ぶことをおすすめします。

Webデザインスクールで学べるスキル⑥:JavaScript

JavaScriptもプログラミング言語の一つで、「Java」とは全くの別物です。

JavaScriptがどのような役割をもつ言語なのかを一言で定義するのはとても難しいですが、私たちが普段スマートフォンやパソコンで何かをする上で、JavaScriptを避けては通れないほど各所に使われているのです。

例えば、以下のような動作はJavaScriptによってプログラムが可能です。

  • 入力フォームのバリデーションチェックを行う
  • ページ全体ではなく一部だけをリロードすることで必要な情報を低負荷で表示する
  • ページ遷移時に適切な場所に移動する

Webサイトをよりユーザーフレンドリーにするために、JavaScriptによるプログラムはとても重要。

Webデザイン・コーディングで仕事を得るのであれば、身につけておきたいプログラミングスキルです。

Webデザインスクールで学べるスキル⑦:jQuery

jQueryとは、JavaScriptで定義されたプログラムをより扱いやすくしたファイル(=ライブラリ)機能。JavaScriptを使いこなさないプログラミング初心者でも、jQueryがわかれば簡単に動きのあるWebサイトを作成できるようになります。

  • マウスオーバーするとアイコンが跳ねる・色が変わる
  • 画像をクリックすると別画像に入れ替わる

上記のように、jQueryを知っていれば動的なWebサイトを簡単に作れるようになります。

JavaScriptと合わせて勉強しておきたいWebデザインスキルの一つです。

Webデザインスクールで学べるスキル⑧:Bootstrap

Bootstrapとは、Twitter社が開発した「フレームワーク」のこと。よく使われるCSSのスタイルをテンプレート的に定義したものです。

ブラウザの画角にとらわれないWebデザインの仕方を「レスポンシブデザイン」と言いますが、Boostrapはこのレスポンシブデザインに対応しているため、デバイスごとにいくつものデザインを検討する手間を省くことができます。

効率よくWebデザインを行うために、CSSやJavaScriptと合わせて覚えておきたいスキルです。

Webデザインスクールで学べるスキル⑨:PHP

PHPもプログラミング言語の一つで、JavaScriptと同じようにWeb開発で使用される「スクリプト」言語です。

クライアントサイドで実行されるJavaScriptと違い、PHPはサーバーサイドで実行されます。PHPを使えば、HTMLソースコードを生成したり、Webサイトをデータベースと連携させたりと、できることはさまざまです。

関数が豊富にあったり、型の自動変換機能があったりと、PHPは初学者でも習得しやすい言語だと言われているので、ぜひ機会があれば触れてみましょう。

Webデザインスクールで学べるスキル⑩:WordPress

WordPressは、CMS(Contents Manegiment System:コンテンツ管理システム)の一つで、Webサイトのコンテンツを管理するプラットフォームとなっています。

HTMLやCSSを知らなくても、WordPressのUIを理解してさえいれば、ブログやWebサイトの記事を編集できるのです。

Webデザインに携わる上で、Webサイトの装飾や作りなどをWordPressで編集するスキルも求められることがあります。Webデザイン初学者でもとっつきやすいシステムなので、ぜひ学んでおきましょう。

 

Webデザインを学べる人気スクール3選

市場が大きくなりWebデザイナーの需要が高まっていることもあり、Webデザインを学べるスクールは増えてきています。

人気スクールを早速紹介しましょう。

  1. CodeCamp:デザインマスターコース (場所や時間を選ばず勉強したい人向け)
  2. TechAcademy:Webデザインコース (実践的なスキルを効率よく学びたい人向け)
  3. デジタルハリウッドSTUDIO by LIG: Webデザイナー専攻, Webプログラミングコース(Webデザイナー転職、独立を目指す方向け)

Webデザインを学べるスクール①:CodeCamp(コードキャンプ)

CodeCampとは、オンライン完結型プログラミングスクールです。

パソコン一台あれば通学の必要がなく、プログラミング初心者でも効率的にWebデザインやプログラミングを学習できます。

  • 受講者数:20,000人以上
  • 導入企業数:300社以上
  • 導入企業例:LINE株式会社、ガンホー・オンライン・エンターテイメント株式会社、株式会社インタースペース、株式会社レコチョクなど
  • レッスン満足度:94.6%
  • 在籍講師数:200人以上
  • 受講可能時間帯:7:00〜23:40 年中無休
  • レッスン時間:40分/1レッスン
  • レッスン形態:マンツーマン・オリジナルカリキュラム

仕事や学校と両立しながら自分のペースで学習できるのが、CodeCampの魅力。

未経験から始めて、エンジニアとして就職したり副業で稼いだり、実用的なスキルを身に付けることが可能です。

Webデザインを学びたい初心者向けの「デザインマスターコース」では、HTML、CSS、JavaScript、jQuery、Photoshop、Illustrator、Boostrapと、Webデザインに必要なスキルを網羅的に学習できます。

実際に僕がCodeCampでプログラミングを学んだときの体験記事があるので、合わせてチェックしてみてください。CodeCampのカリキュラムや学習スタイル、最終的に提出した成果物などについて細かく書き留めてあります。

自身で作ったLP案をもとに提案するので、Webデザイン案をPhotoshopやIllustratorで作れて、その後HTML、CSSでコーディングまで行える必要がありますね。

逆に言うと、CodeCampで実際にこのコースを完了させるころには、実際にポートフォリオとして自分のWebページが公開できるわけですね。

さらに、CodeCampでは現役エンジニアがいるので、学習が早ければ受講中に案件獲得することも不可能ではありません。

関連記事:【体験記】CodeCamp(コードキャンプ)の評判を確かめに、実際に2カ月受講してみた感想【PR】

実際にやってみてよかったのが、メンターをこちら側から選べる点ですね。例えば、女性の場合、在宅勤務でフリーランスをされている方を選んでキャリアの相談をしたり、案件の取り方について相談できたりします。

実際にサービスを体験できる、無料体験に申し込むと、カリキュラムの一部が解放されるので、気になった人はまず無料で試してみてください。

Webデザインを学べるスクール②:TechAcademy(テックアカデミー)

TechAcademyとは、短期集中型のオンラインプログラミングスクールです。

一人ではなかなか続かないという人も、メンターのサポートを受けながら短期間に集中してWebデザインのスキルを高めることができます。

  • 受講者数:25,000人以上
  • 導入企業数:500社以上
  • 導入企業例:株式会社ぐるなび、合同会社DMM.com、株式会社コロプラ、株式会社フジテレビジョン、株式会社カカクコムなど
  • 受講料金:(例)99,000円〜(はじめてのプログラミングコース4週間の場合)

課題提出のためのGitHubや、メンターとのコミュニケーションのためのSlackなど、レッスン内容外の部分でも学びが多いと評判のTechAcademy。

カリキュラムも充実しているため、自分が本当に学びたいことに絞って効率よく確実にスキルを身につけられます。

TechAcademyについても、以前卒業生にインタビューして体験談をまとめた記事があるので、合わせて参照してください。

コースのレベルとしては、初心者でも分かりやすく絵も使って説明されていました。
カリキュラムでは学習のサポートをしてくれる担当メンターが1人就いてくれます。週2回のオンライン面談があり、分からないことがあれば、そこで質問も出来ました。カリキュラムの内容をもじった様な自作アプリは作ることが出来る様になったので、総合的には満足しています。

関連記事:【体験談】TechAcademyの評判を確かめにエンジニアに転職された卒業生にインタビュー【PR】

TechAcademyのおすすめポイントをまとめるとしたら、こんな感じでしょう。

  1. 図解などの多い教材で初心者でもわかりやすい
  2. メンターのレスポンスがはやい
  3. 受講者限定の採用サービスがある

CodeCampと異なるのは、専属メンターが付く点ですね。ですので、TechAcademyの場合だと一人ひとりがっつりとサポートしてくれます。TechAcademyが良さそうと思ったら、まずは無料で体験してみてください。

Webデザインを学べるスクール⑤:デジタルハリウッドSTUDIO by LIG(デジタルハリウッドスタジオ バイ リグ)

最後に紹介するスクールは、デジタルハリウッドSTUDIO by LIG。業界では有名な、上野のWeb制作会社LIGと、デジタルハリウッド大学が運営するクリエイタースクールデジタルハリウッドSTUDIOが連携したスクールです。

デジタルハリウッドSTUDIO by LIGの主な特徴はこちら!

  1. Web制作会社LIGが運営しているので、Web制作のリアルがわかる環境を提供している
  2. Webクリエイターを多数輩出してきた『デジタルハリウッド大学』が作成しているコンテンツを利用
  3. 『デジハリxLIG』だからこそできる、就職、転職、独立に強い仕組み

実際に受講してみた感想ですが、とにかくコンテンツが良いのと、LIGの社員から業界の情報が聴ける点がGOODです。実際にLIG社員がいる教室では、月に数回現役のデザイナーさんや、LIG社員を呼んでイベントを開催しています。実際の業務の知見が得られるのが非常に大きなポイントとなります。

一方で、他のTechAcademyやCodeCampと比較すると、教室併用型になるので、受講料が少し割高になります。受講した体験についてはこちらの記事を参考にしてみてください。

≫デジタルハリウッドSTUDIO by LIGを受講して感じたこと一挙まとめてみた!

スクールの詳しい条件を知るためには、まず資料請求や説明会の予約をどうぞ。

デジタルハリウッドSTUDIO by LIGを見てみる

まとめ:Webデザインスクールは、目的と学習形態で選ぼう

以上、Webデザインやプログラミングを学べるスクールの紹介でした。

Webデザインを学べるスクールにも色々ありますが、

  • 何のためにWebデザインを学びたいのか?
    →転職したい・副業したい・フリーランスを目指したい
  • どんな環境でWebデザインを学びたいのか?
    →オンラインで学ぶ・教室に通って学ぶ・仕事をしながら学ぶ

上記のような、自分の目的や学習環境を軸に選ぶことをおすすめします。

最後に、おすすめのスクールをざっくりと3つまとめておきます。

  1. 色々なメンターの人にキャリアや技術を相談したいなら:CodeCamp
  2. 一人のメンターにマンツーマンで指導してもらいたいなら:TechAcademy
  3. 教室型でがっつり業界知識を身につけつつWebデザイナーとして独立、転職を検討するなら:デジタルハリウッドSTUDIO by LIG

より吟味したい人は、どんどん資料請求や無料カウンセリングに申し込んで、自分にあったスクールを見つけてください。