Logo white

ギークサロン ブログ
GeekSalon Blog

Webデザイナーには独学でもなれる?必要なスキルから学習方法まで解説!

入門編

2019年04月24日

Web design learn top

目次

1.Webデザイナーとは

2.Webデザイナーになるには

3.webデザインの基本HTML/CSSを学べるプログラミングスクール

Webデザイナーとは 

▼30秒で完了!GeekSalonの説明会に申込む▼

Webサイトやサービスを見ているユーザーに対して、いかに理解がしやすく見やすい目を引くWebサイトやサービスを制作するかについて必要となるものが、「Webデザイン」です。

デザインの質が悪い場合、せっかくの商品やサービスがどんなによくてもユーザーにとって理解しにくいデザインのために商品やサービスの良さを伝えることができません。
世の中に数多く存在する商品やサービスの中から、自社の商品やサービスの良さを伝えるためには、優れたデザインが不可欠であると言えます。そのためWebデザイナーの需要は近年高騰してきています。

Webデザイナーの仕事内容や働き方については自社サイトを運営している会社でWebデザイナーとして働く場合と、広告代理店として他社サイトのWebデザインを受託する会社、そしてフリーランスとして個人でWebデザインの仕事を受注する場合などで異なります。
それでは、Webデザインの主な仕事内容や、会社ごとのWebデザイナーとしての仕事内容や働き方の違い、そして年収についてご紹介します。

職務内容

Webデザイナーの主な仕事は、

  • Webサイトの構成
  • レイアウト
  • デザイン
  • プログラミングによるコーディング

が挙げられます。

構成の段階では、サイトを作る際に、ページ内にはどのような要素が必要かを考えます。お問い合わせをするための要素やサイトの購入ページに繋がる要素、商品の説明する要素、会社概要の要素などを考えます。そのWebページに必要な情報を要素として洗い出すことが構成の段階で行う作業です。

次はレイアウトです。レイアウトでは、構成の段階で洗い出した要素を、図形や簡単なテキストを用いて、どこに要素を配置するかを考えます。
こうして考えられたレイアウトを色やイラストなどを制作していき、テキストなどの本番のWebページで活用するものを考え、Webページをデザインしていきます。

Webデザイナーの仕事の多くは、ここで終了し、エンジニアがプログラミングにより完成させます。しかし場合によっては制作したWebデザインをWebデザイナー自身がプログラミングを行う場合もあります。
主にHTMLやCSSといったプログラミング言語を活用し、WebページのデザインをWeb上に公開できるようにコードを書いていきます。
▼30秒で完了!GeekSalonの説明会に申込む▼

働き方

次は、Webデザイナーの働き方についてご紹介します。先ほどご紹介したようにWebデザイナーの働き方には

  • 自社サイトを運営している「インハウス」のWebデザイナー
  • 他社サイトのWebデザインを行う「広告代理店」のWebデザイナー

大きく分けて2種類の働き方があります。まずはインハウスのWebデザイナーの働き方についてご紹介します。

インハウス

インハウスのWebデザイナーは、自社サイトのWebデザインを行います。

メリット

自社サイトのWebデザイナーとして働く際のメリットは

  • 「収入源の安定」
  • 「労働時間の安定」

が挙げられます。まずは「収入源の安定」についてです。企業に所属するWebデザイナーとして働くと、フリーランスのWebデザイナーより比較的に安定した収入を確保することが可能です。「Webデザイナーとして働きたいけど、安定した収入を得たい」という方は、まずは企業に属してWebデザインの仕事を行うのがおすすめです。

次のメリットは、「労働時間の安定」です。これは次に紹介する広告代理店と異なり、納期や過度な受託案件の量により、働き詰めになる機会が少ないです。もちろん事業目標などが達成できていない状況で、Webデザインを行うような戦略が実施された場合はこの限りではありませんが、比較的に波が少ない労働時間で勤務することができます。

デメリット

反対にインハウスのWebデザイナーとしてデメリットをご紹介します。インハウスのWebデザイナーとして働く場合、責任と高い技術力が求められることです。Webデザイナーは営業と比べて少ない人数でWebデザインを行います。そのため一人一人に責任が重くのしかかります。また、外注も一般的な仕事のため、広告代理店に外注せずにインハウスでWebデザインを行うと、それなりの技術力が必要となってくるのです。

以上を踏まえ、インハウスのWebデザイナーに向いている方は、「責任ある仕事にやりがいを感じることができる人」 であると言えます。自社サイトのために顧客の声がダイレクトに届く環境です。そのため責任をやりがいに変えられる方がおすすめです。

広告代理店

広告代理店のWebデザイナーは、クライアントに応じた幅広い業界のサイトのWebデザインを行います。クライアントが求めるデザインも幅広く、静的なデザインはもちろん、動的なデザインを求められる場合など、幅広い技術力が求められます。

メリット

広告代理店でWebデザイナーをするメリットは、こうした幅広い技術力が求められるために
「常に技術の学びを深めることができる」、また様々な仕事内容を請け負うために 「スキルアップが図れる などがあります。

デメリット

広告代理店のWebデザイナーとして働く際には、クライアントから求められる納期を求められるために、納期を守るために労働時間が長くなる点がデメリットとして挙げられます。インハウスのWebデザイナーとの大きな違いはこの点にあると言えるでしょう。

以上を踏まえ、広告代理店のWebデザイナーは、「幅広い仕事をこなして、経験を積みたい人」 がおすすめです。

▼30秒で完了!GeekSalonの説明会に申込む▼

在宅勤務・フリーランス

在宅勤務やフリーランスのWebデザイナーは、自分のスキルや経験を発揮できる働き方です。それは、顧客はWebデザイナー個人に仕事を依頼するために、そのスキルや経験を求めている場合がほとんどであるからです。

メリット

在宅勤務やフリーランスのWebデザイナーとして働くメリットは、「労働時間がフレキシブルである」 という点です。毎日決まった労働時間があるわけではなく、納期に間に合うようにWebデザインを行なったり、必要な会議に参加するだけで、自由な時間にどの場所で働くこともできます。

デメリット

「在宅勤務、フリーランスのWebデザイナーとして働くデメリットは、「収入源の不安定さ」 と言えるでしょう。
在宅勤務、フリーランスとして働くと、自分で仕事を獲得しにいかなけばなりません。また自分にWebデザインの仕事を依頼してもらえるクライアントを見つけても常に仕事をくれるわけではなく、月によって仕事があるときと、仕事が少ない時などの波があります。

以上のことから、在宅勤務やフリーランスとしての働き方に向いている方は、「自分の力でキャリアを切り開きたい人」 と言えるでしょう。自分のスキルや経験で、自由な働き方を実現できます。

年収

次は、Webデザイナーの年収についてご紹介をしていきます。

Webデザイナーの一般的な平均年収は400万円〜と言われています。実際に、リクナビなどの転職サイトを見ると、年収が400〜600万円で提示している企業が多いです。

Webデザイナーはスキルや経験に応じて収入に変動があります。例えば、デザインのスキルしか持っていない場合に比べ、プログラミング言語を活用したコーディングの技術、さらに動的なデザインを実装できる技術など、スキルの幅が広いことで昇給を見込むことが可能です。

さらにWebデザイナーとして収入を上げる方法があります。

Webデザイナーとしての職業は国境を越えることが可能という点にあります。
デザインに必要な言語能力があれば海外でのデザイン業務も受け持つことが可能であるためです。

実際に、英語圏で働いているWebデザイナーの平均年収は500万円〜と言われており、日本より100万円近く高い傾向にあります。しかし、だからと言って簡単に海外でWebデザイナーをすることは難しく、デザインだけのスキルでは採用してもらえない場合がほとんどです。一つのスキルしか持っていない人材は、市場価値が高い多くのスキルを持っている人材より希少性が薄いからです。海外のWebデザインの仕事をしたい場合は、積極的にコーディングやWebサイトの開発のスキルを得る努力が必要です。

2.Webデザイナーになるには


Webデザイナーになるには、いくつか身につけなければいけないスキルがあります。
そのスキルをあたらかじめ身につけておくことで、就職活動で周りに比べてリードをすることが可能です。しかし、Webデザイナーになるためには複数のスキルを身につけなければいけないため、しっかり学習をしておきましょう。
Webデザイナーになるためには、「デザインツール」と「HTML・CSS」、「プログラミング」のスキルを身につける必要があります。

デザインツールによるデザインスキル

まずは、Webデザインに使われるUIデザインツール(ユーザーインターフェース)です。Webサイトを制作する際には、まずはどんなサイトを作るかのデザインを製作する必要はあります。
このデザインは、いくつかのツールを使って制作することができます。実際のWebデザイナーも活用しているツールですので、今のうちに扱い方を把握しておくのがおすすめです。

Adobe XD

Adobe XDは、ユーザープロトタイピングが可能なデザインツールです。

プロトタイピングとは、まだ公開されていない仮想のWebサイトを手でスクロールをしたり、ボタンをクリックすることができるプロトタイプを制作することです。

また、PCとスマホなどのデバイス別でのデザインに互換性を持たせることができるレスポンシブデザインをデザインすることが可能であったり、自動アニメーション機能、音声コントロールの制作をすることができます。

AdobeXDは、mac/Windowsの両OSで使用することができるために、ほとんどのPCで活用することができます。

AdobeXDについてはこちら

Sketch

sketchは、近年Webデザイナーにもっとも人気のデザインツールの一つと言えるでしょう。
多くの企業がsketchを採用し、デザイン制作を行なっています。そのためWebデザイナーになりたいのなら、扱えるようになっておいて間違いないツールと言えます。
では、なぜ多くの企業が近年Sketchをデザインツールとして活用しているのでしょうか。
それは、IT企業で採用している多数のデザインツールやコミュニケーションツールとの連携が可能であったり、デザインのスタイルやシンボル(スタイルやテキストをグループ化したもの)、アードボード、画像のマスクの機能が豊富である点です。

さらに、動作が非常に軽く、高解像度のデザインを制作する場合でも、スムーズに制作をすることができます。
しかし、Sketchのデメリットは、対応できるOSはmacのみであるという点です。お持ちのPCがwindoesの場合は、AdobeXDや次に紹介するfigmaでのデザイン制作の練習をしてみましょう。

Sketchについてはこちら

Figma

Figmaは、リアルタイムで複数人が同時にデザイン制作を行えます。

Figmaは、UI/UXとなどのユーザーインターフェイスを手がけることはもちろん、リアルタイムで複数人にフィードバックコメントをもらうことも可能なデザインツールです。また、Figmaは他のデザインツールと違い、ブラウザ上で動作させることが可能なために、アプリケーションをインストールする必要はありません。
しかし、Figmaは、AdobeXDやSketchと比べてまだまだ活用している企業の数は少ないのが現状です。そのため学習をするには、参考にする記事やFigmaでの制作物などが少なく、学習しづらいです。しかし、一部の企業ではすでにプロジェクトを推進していく上でなくてはならないツールとなっています。

Figmaについてはこちら

デザインスキルについて


ここまでデザイン制作ツールのご紹介をしていきました。

デザインのスキルを身につける際には、デザインツールを活用した上で

  • UI/UXのスキル、
  • トンマナ(トーンとマナー)
  • グラフィック制作のスキル
  • コーディングのスキル

以上のスキルを身につける必要があります。

新卒採用でWebデザイナーとして働きたいと志望する学生の中には、情報系や工業系の大学、美術や芸術、情報学やデザインなど様々な学生がいます。このような学生は2〜4年間学校でWebデザインのスキルを身につけた状態で、就職活動をします。そのため就職活動をする上で、事前にWebデザインのスキルの基礎だけでも身につけておきましょう。おそらくここまで読み進めている方の中には、「どうやってデザインのスキルを学べばいいのだろう。」と疑問に感じている方がいらっしゃるかと思います。また、現在企業で働いていないために、独学でどうやってデザインを学んでいこうか不安に感じている方もいらっしゃるでしょう。

前述したような学校に所属していない方がデザインのスキルを身につけるためには、書籍で勉強する方法と、ギャラリーサイトを参考に手を動かしてみるのが代表的な選択肢です。

書籍での勉強

近年UI/UXの重要度は日々増してきています。そのため、デザインに関する書籍も数多く書店で見られるようになりました。デザインの書籍は、基本的な知識や考え方のインプットをすることができます。
書籍で勉強する際には、SNSで現役デザイナーのアカウントを探してみて、どんな本を読んでいるのか調べてみてもいいかも知れません。
ここでは、デザインを勉強する上でおすすめの本3選を紹介します。

ノンデザイナーズ・デザインブック

レイアウトデザイン見本帳 レイアウトの意味と効果が学べるガイドブック

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

ギャラリーサイトでの学習

デザインのスキルを身につける上で、「優れたデザインを数多く体験する」ことが大切であるとされています。優れたデザインを体験することで世の中のトレンドはもちろん、どんなデザインがユーザーに直感的に理解しやすいデザインなのかを理解することが可能です。ギャラリーサイトを見て、デザインのアイデアやテクニックを勉強しましょう。
ここでもおすすめのギャラリーサイトを3選ご紹介します。

ピンタレスト

AWWARDS

siteInspire

▼30秒で完了!GeekSalonの説明会に申込む▼

実際にデザインしてみる

書籍ギャラリーサイトを見て、デザインの勉強をすすめたら、実際にデザインツールを活用しWebサイトをデザインしてみましょう。

デザインツールを体系的に学んだり、書籍でデザインの考え方などを体系的に学ぶのも良いですが、実際に手を動かして、どのようなデザインが見る人がわかりやすいデザインなのか、デザインツールはどのように扱うのかを、体系的に学んだ後に勉強をするのがおすすめです。
  

サイトのデザイン、レイアウトを行うHTML/CSSのスキル

次は、サイトのデザイン、レイアウトを行い、Webサイトとして機能させるためのスキルです。



HTML/CSSを活用することでデザインを製作することができます。HTMLは、ページの要素や構造をブロック要素やインライン要素を指定するタグなどでページ内の配置を形成する言語です。タグで囲い込むことで、ページ内に構造を作ることができます。

CSSは、HTMLで作成した要素や構造の文字や枠組みを装飾することが可能な言語です。私たちが普段見るWebサイトのデザインはほとんどこのCSSでデザインがされています。CSSを書くことで、要素に背景や幅、空白を指定したり、テキストのフォントサイズやカラーなどを指定することができます。



しかし、CSSだけではサイトのデザインが不十分な時があります。

例えば、スクロールに合わせて表示されるデザインを変えたり、スライド式に画像を変更ができるようにするなど、動的なデザインを製作するにはCSSだけでは表現することが難しい場合があります。
そのような場合はJavaScriptやJQueryを用いて、高度なデザインを表現することができます。Javascriptを活用することでHTMLの操作をすることができます。例えば要素名の変更などです。CSSであらかじめ操作後の要素名でCSSを作っておくことで、デザインを変更したりすることができます。また、条件に合わせて処理を行い、動きや機能を追加することができたり、ページ遷移をせずにWebサーバーと通信を行うことができます。
JQueryとは、Javascriptより、比較的に難易度の低いプログラミング言語です。JQueryは、すぐに使えるプラグインを活用することで、複雑なコードを複数行に渡り書く必要がなく、手軽に動的なデザインを実行することが可能です。
このような、HTML/CSS、JavascriptやJQueryのスキルを身につけることによって、デザインスキルの幅が多様化され、Webデザイナーとしてのキャリアアップを見込むことができます。

プログラミングスキルについて


ここまで読んだ方の中で、「デザインのスキルだけでなく、プログラミングのスキルを身につけられるか不安。」と感じる方もいらっしゃるでしょう。

このHTML/CSSを使ったコーディングは、プログラマーに依頼をする企業が多いのでご安心ください。しかしプログラミングのスキルは、基礎や基本が身につけいれば理想に近いデザインができ、今後のキャリアアップも望めます。

プログラミングスキルを身につけたいと思われている方は、まずは基礎や基本を身につけるということを心がけてみてはいかがでしょうか。複雑なプログラムまで独学で勉強をしようとすると、途中で挫折する場合も多く、基礎から身につけることを心掛けてみましょう。

では、プログラミングの基礎を身につけるにはどうしたらよいでしょうか
基本的には独学で学ぶか、プログラミングスクールに通うという選択肢になるかと思います。これからWebデザイナーになる方は、なるべく効率的に勉強を進めて、就職活動に望みたいものです。
独学とプログラミングスクールのそれぞれのメリット、デメリットをご紹介していきます。

独学でプログラミングを学習


独学でプログラミングを学ぶ場合は、目的に合わせた参考書や基本書などで勉強を行う必要があります。
例えば、HTMLやCSSの技術を学びたいと思い、書籍を探す際には注意をしなければいけないことがあります。それは、単にHTML/CSSを学ぶための本といっても未経験向けの書籍から上級者向けの書籍まで様々です。

書籍で学習するメリット

プログラミングを本で独学で勉強するメリットは、「予算が少なくて済む」という点です。学生であるうちは、中々勉強に対してお金を払うのが難しいという方が多いかもしれません。そのような方は、まずは書籍で勉強をしてみましょう。

書籍で学習するデメリット

しかし本で勉強する際のデメリットとして挙げられるのは、

  • 「エラーの対処に時間がかかってしまう」
  • 「疑問点の解消に時間がかかる」
  • 「学習スケジュールを立てるのが難しい」

という点です。プログラミング学習における一番のハードルはエラーの対処やバグの修正です。思った通りの処理ができなかったり、正しいコードを書いていたつもりが、エラーが発生してしまったりします。そのような時に教えてもらう方がいないと、自分でエラーやバグの発生原因を調べ原因を解明しなければいけません。

未経験ですと、この調査方法やどう修正していけばよいのかわからないことがあります。そうすると、時間がかかってしまったりします。また、就職活動までに自分のWebサイトを製作したい方などは、学習スケジュールを立てる必要があります。いつまでに基礎を学び、自分のWebサイトを製作するかなどのスケジュールを立てます。その際に、書籍だと中々継続的に勉強をできなかったり、途中でモチベーションが維持できなくなってしまい、挫折をしてしまうというパターンが考えられます。

プログラミングのおすすめ書籍3選

前述した内容を頭に入れた上で、書籍で学習をされる方におすすめの書籍3選をご紹介します。

HTML&CSSとWebデザインが 1冊できちんと身につく本

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

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

プログラミングスクールで学習する


次は、プログラミングスクールでの勉強についてご紹介します。近年プログラミングを勉強したいという方が増え、プログラミングスクールも数多く開校されています。

多くのスクールでは、Webサービスやアプリ開発コースと同様に、Webデザインコースも開校されているスクールがあります。まずは、Webデザインを勉強するにあたり、スタートはプログラミングスクールで勉強をしたいという方はぜひチェックしてください。

プログラミングスクールで学習をするメリット

プログラミングスクールで学習をするメリットは

  • 「エラーの対処に時間がかからない」
  • 「疑問点の解消が簡単にできる」
  • 「学習スケジュールが立てやすい」
  • 「目的に応じた指導を受けることができることで、効率的な学習ができる」

という点です。前述した通り、プログラミングを独学で勉強する上で一番のハードルがエラーやバグの解消です。どうしても詰まってしまうエラーに対処するのは、未経験だと非常に難しいです。そのためプログラミングスクールでエラーやバグが発生した場合の対処法や原因の解明方法などを教えてもらうことで、今後の対処もスムーズに行うことができます。またいつまでにどれくらいの学習進捗を得たいなどの目標がある方は、それをスクールのメンターに相談をすることで、目標を逆算したカリキュラムを計画してもらうことが可能です。そのため、就職活動などを控えた学生でも、スケジュール通りに進めることができます。

プログラミングスクールで学習をするデメリット

プログラミングスクールに通う際のデメリットをご紹介します。

それは

  • 「受講費用が高い」
  • 「通学に時間がかかる」

という点です。プログラミングスクールの受講費用は数十万円かかるスクールがほとんどで、アルバイト代で賄うには非常に高額となっています。そのため、いくらプログラミングスクールに通いたいと考えていても、料金が高く通うことができないという方も非常に多いです。また、多くのスクールでは、通学して学習するスタイルを採用しているために、通学時間がかかってしまうという点もあります。東京では渋谷や新宿などを中心に繁華街にスクールが存在するケースが多いですが、地方出身だと東京まで通学しなければならず、通学の時間に対するコストがかかってしまいます。

3.2Webデザインの基本HTML/CSSを学べるプログラミングスクール

世の中には数多くのプログラミングスクールが存在します。いざどのプログラミングスクールに通おうか検討されている方の中には、「数が多すぎてどのスクールに通えばよいのかわからない」という方もいるのではないでしょうか?
では、最後におすすめのプログラミングスクールをご紹介します。

GeekSalon

この記事でおすすめするプログラミングスクールは、大学生限定プログラミングコミュニティのGeekSalonです。

GeekSalonの公式ホームページはこちら

GeekSalonで学べるプログラミングスクールは4種類あり、Webデザイナーを学びたい方でしたら、「Webサービス開発コース」 がおすすめです。Webサービス開発コースでは、HTML/CSS、JavascriptはもちろんRubyなどのWebサービスを開発できる言語を3ヵ月で習得できるコースとなっています。
ここで、「プログラミングスクールは受講料が高いのでは...。」と不安に感じる方がいらっしゃるのではないでしょうか。GeekSalonの受講料は、月額29,800円 となっており月額10万円する他のプログラミングスクールに比べて格段に安いのも特徴です。

GeekSalonは、プログラミング独学で勉強する時にありがちな挫折パターンを防げる学習環境が整っています。

①専属メンターと学べる

GeekSalonでは、一人一人に専属のメンターがつきます。スケジュールやカリキュラムの管理を一緒にしてもらえるために、就職活動を控えている学生でもきちんとWebデザインの基礎を学習することができます。
また、教材はオンライン教材となっています。そのためいつでもどこでもオンラインで勉強を進めることができます。オンラインで学習を進めていく際に発生した疑問点やエラーは、専用のオンラインチャットツールでメンターに質問をすることも可能です。そのため効率的にWebデザインの基礎を身につけることも可能です。

②オフィスの勉強スペースが使い放題

前述でも記載をしましたが、オンライン教材のためにいつでもどこでも学習を進めることができます。しかし、一人で勉強を進めるとモチベーションの維持や本当にWebデザインの基礎が学習できているのか不安になることがあるでしょう。そのような時は、GeekSalonのオフィスをいつでもどこでも使用することができます。スペースを利用している方は、同じくWebデザインやプログラミングを学びたい学生が集まっており、一緒に勉強を進めることができます。そのため自分と同じ夢を持った学生を見つけることができるでしょう。勉強を進めるにあたり、モチベーションの維持をすることができ、集中して勉強を進めることが可能です。

③Webサービスを学習し学習成果を発揮できる

教材を一通り学習し終えたら、自分で企画したオリジナルのWebサイトやサービスを開発することができます。自分で制作したサイトやサービスのリリースまでメンターと二人三脚でサポートをしてもらえるために、作りたいものを作りながら学習した成果を思う存分発揮することができます。またオリジナルのWebサービスは、自身のポートフォリオにもなるために、就職活動でアピールすることもできます。

いかがでしたでしょうか?
Webデザイナーになりたい方は、まずはWebデザインのスキルを書籍やスクールで学習するようにしましょう。基礎をしっかり身につけておくことで、就職活動や実際に仕事の現場で働く際にも役に立ちます。
Webデザインの学習を始めてみてください。

説明会のお申込みはこちらから

その他、気になることなどございましたら、お気軽にGeekSalon公式LINEからお気軽にお問合せください。

友だち追加


無料体験会概要

持ち物

PC(Mac/Windows)
※iPhoneアプリ開発コースはMacのみ
※貸出PCのご用意ございます。ご希望の方はお申込時にご連絡ください。

費用

無料

服装

自由

会場 / アクセス

GeekSalon 東京教室
烏山恵比寿ビル 2F
代官山駅徒歩5分 / 恵比寿駅徒歩8分

GeekSalon 京都教室
國友ビル 4F
河原町駅より徒歩3分 / 祇園四条駅より徒歩6分

お問合せ

GeekSalon公式LINEからお問合せください!

友だち追加