Webデザイン
3DCG・映像
グラフィックデザイン
Webマーケティング
Webプログラミング
アナログスキル
その他
「Webデザインを勉強したいけど何から始めたら良いの？」「どのように勉強するべきなの？」と悩んではいませんか？スクールに通って勉強する方法もありますが、工夫次第では独学でスキルを付けることも可能です。
今回は、Webデザインを独学で勉強する方法を4つのステップに分けてご紹介します。ゆくゆくはプロのWebデザイナーとして働こうと考えている方は、ぜひ参考になさってください。
- これからWebデザインを学ぶ方
- 将来的にWebデザイナーとして仕事をしたい！と少しでも考えている方
Webデザインとはどんなもの？
Webデザインとは、その名のとおり、スマホやPCで閲覧するWebサイトのデザインをする仕事。
Webサイト制作を通じて、企業や個人の届けたい情報を最適な形で届けます。コーポレートサイト、サービスサイト、ECサイト、LP（ランディングページ）などなどWebサイトの種類はさまざまです。
グラフィックデザインとの違いは？
同じデザインと名のつく「グラフィックデザイン」と「Webデザイン」はどのような違いがあるのでしょうか。両者の違いは、「媒体」の違いに着目するとわかりやすいでしょう。
グラフィックデザインは、「グラフィック」＝ポスターや広告など、紙媒体が主であるのに対して、「Webデザイン」はWebサイトのデザインを指します。すなわち、HTMLやCSSによる「コーディング」があるかどうかで判断するとよいでしょう。
しかし、デジタル・トランスフォーメーションが進む現在はWebサイトでの情報発信は欠かせませんし、グラフィックデザインとWebデザインの両者のスキルが問われることも多いです。ですから、どちらか片方ができるだけでなく、両方のスキルを持っておくと、デザイナーとして市場価値が高く重宝される人材になれるでしょう。
UI/UXデザインとの違いは？
Webデザインにおいて、近年「UI」「UX」という考え方がよく使われるようになってきました。WebデザインはWebサイトのデザイン全般を指すのに対して、UIはユーザーインターフェース＝ユーザーがサービスを利用する上での「接点」のこと、UXはユーザーエクスペリエンス＝ユーザーがサービスを利用する上での体験のことを指します。
UIUXを具体例を出して説明すると、以下のようなものです。
UI：フォントの読みやすさ、ボタンの色の見やすさなど
UX：Webサイトの読み込みのはやさ、導線のわかりやすさなど
近年のレスポンシブWebデザインとは？
Webサイトを運営する上で「レスポンシブWebデザイン」という考え方はマストで知っておきたいところです。
レスポンシブWebデザインとは、Webサイトのデザインを「閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザイン」のことを指します。
PCからアクセスしても、Andoroidのスマートフォンからアクセスしても、iPadからアクセスしても、自動で最適な形でWebサイトが表示される仕組みです。
Webサイトにアクセスする媒体がPC、スマートフォン、タブレットと多様化し、かつては「PC用サイト」「携帯用サイト」のように別々で作っていたものが現在では1つのサイトをレスポンシブ対応させることで柔軟に対応できるようになりました。
UIUXはもちろん、SEOの観点でも重要な要素と言われることが多いです。
Webデザイナーはどんな仕事をするの？
Webデザイナーの仕事と聞くと、コーディングのパートだけを想像する人もいるかもしれませんが、企画から実装まで幅広い業務を担当します。
まずは、Webサイトを制作するにあたっての要件定義です。クライアントや社内向けにWebサイトで解決したい課題について深くヒアリングを重ね、調査します。
続いて、サイトのコンセプトや構成を固めていき、基本となるワイヤーフレームを作成します。ワイヤーフレームが固まったら、実際にカラーリングやレイアウトを含めてデザインしていき、コーディングへと移ります。
コーディング後はサイトのチェックを入念におこない、リリースとなります。
これらの流れをおこなっていくのがWebデザイナーの基本的な仕事になります。
Webデザイナーの将来性ってどうなの？年収は？
まず、Webデザインの勉強をこれから学ぶにあたって、Webデザイナーという職業の将来性や年収のリアルについてお伝えします。
転職サイトDODAの2018年版「平均年収ランキング 最新版【職種別】」によると、Webデザイナーの平均年収は347万円。男性は391万、女性は327万円とのことでした。
全体平均が408万円であるのと比較すると、年収は低めとなっています。
一方で、業界としては今後も伸びるであろうというデータも発表されています。
電通の「2018年（平成30年）日本の広告費」によると、インターネット広告媒体費は1兆7,589億円となり、テレビCM広告費に迫る勢いで年々成長しています。
インターネット広告において、ランディングページのデザインやWebサイトのデザインは不可欠なもの。最近は教育の中で子どもたちにプログラミングを習わせるのがスタンダード化してきていることもあり、今後ますますWebデザイナーの仕事のニーズが高まることが予想されます。
仕事のニーズが高まるということは、そのぶんライバルも多く、いかに自分（自社）の優位性をアピールし、SNS等で情報発信をしていくかというマーケティング的視点を持つことは今後さらに重要となってくることでしょう。
Webデザインを独学で勉強するのに向いている人
Webデザインをスクールではなく、独学で学ぶメリットとしては、スクール費用がかからない点と自分の好きな時間・方法で勉強ができる点があります。
すなわち、自分で学び方を設計し、自分で時間を作り、自分で自分自身をモチベートして学んでいける人は独学向きであると言えるでしょう。
反対に自分を律するのが難しい人や、ある程度の強制力を求める人は独学ではなくスクールの方が向いていると言えます。
お金を払ったほうが「勉強するぞ！」という覚悟が生まれ、途中で投げ出さずに続けられるからです。
趣味で勉強するのか、本気でWebデザインによってお金を稼いで食べていくのかによってもおすすめの勉強方法は異なります。
もし、本気でWebデザイナーの道を歩みたいのであれば、初期費用はかかりますが、スクールでプロの講師のフィードバックを受けながら勉強することをおすすめします。
特に、スクールの中でも、特に転職や就職のサポートをおこなっているところが中長期で見ておすすめです。
Webデザインを独学で勉強する前に準備するもの
Webデザインを独学で学びたい！と思った際に、用意する基本的なグッズをまとめます。
まずは、教本です。独学で学ぶ場合は基本的に教本をベースに学習していくことになります。おすすめのWebデザイン本は以下の記事が参考になるでしょう。
続いて、PCです。
Webデザインは仕事柄たくさんの画像やイラストなどの重いファイルデータを扱います。また、デザインソフトもいかに直感的に使えるかが非常に重要です。
・15インチ以上
・できればMac
・メモリは16GBはほしい
・CPUはCore i5以上
これらの条件を満たすものがオススメです。ディスプレイや腕に負担のかかりにくいマウス、キーボードなどの作業環境も用意できるとベターです。
Webデザインを独学で勉強する方法とは？
Webデザインを独学で学習したい場合、前述したように、基本的に教本をベースに学習を進めるのが王道です。
教本を購入し、フローチャートに沿って学習していく。基礎を学んでから、徐々に実際にWebサイトを作ってみる。存在するWebサイトを自分の手で真似して作ってみる。そして、オリジナルの自分のWebサイトを企画からデザイン、集客までの工程を実際にやってみる。
これがよくある教本の学習フローです。教本学習のデメリットは、フィードバックを受けにくい点にあります。Webデザインはいかにプロフェッショナルや、ユーザーの目線を持った人からアドバイスや忌憚なき意見を受けるかが上達のポイントになります。書籍やWebサイトベースだと、意識的に知り合いのデザイナーなどにフィードバックの機会を作ってもらわないと、なかなか上達しにくい点も認識しておきましょう。
基礎がかたまったタイミングで、知り合いやクラウドソーシングなどでライトな案件を受けてみて、そこから実績を作って、また新たな仕事を見つけて…というのがよくある流れです。
Webデザインを独学で勉強する流れ
Webデザインを独学で学ぶ際の流れは以下のようになります。
- HTMLとCSSを学ぶ
- IllustratorとPhotoshopを学ぶ
- デザインの理論を学ぶ
- 実際にWebサイトを制作してみる
基本的に上記のような流れでWebデザインのスキルや理論を身に着け、その後Web制作会社などの企業に就職したり、フリーランスとして案件を取得することでWebデザイナーとしてデビューできます。
中には、Webデザイナーとして箔をつけるために資格を取得する人もいます。
関連記事：【✍初心者Webデザイナー向け】Webデザインに役立つ資格3選
それでは、各ステップについて具体的に説明していこうと思います。
これからWebデザインを学ぶ人向けのおすすめの書籍はこちらでまとめています。
【2020年版】初心者向け Webデザインを独学で勉強するのにおすすめの本12選
ステップ1：HTMLとCSSを学ぶ
Webデザインを勉強するなら、まずはWebサイト制作の基本である2つの言語、HTMLとCSSを習得しましょう。
HTML・CSSに関する初心者向けの参考書はたくさんありますが、初めてWebデザインを学ぶ場合は参考書を1冊読破するだけでも大変です。Webデザインに関して全くの初心者の方は、本を読むことも良いですが、実際にコードを打ちながら基本を学ぶことをおすすめします。
👉コーディング初心者が覚えておきたいHTML・CSS・JavaScriptの役割
試行錯誤しながらコードを打ち込む経験は、本を読み進めていく際も理解の助けとなるでしょう。また、本だけでなく、実際に作業の流れが分かったり、よく使うHTMLタグやCSSの概要を説明したりしている動画を繰り返し見ることもおすすめです。
ステップ2：IllustratorとPhotoshopを学ぶ
「Illustrator」と「Photoshop」は、Webデザインの場で最もよく利用されているAdobe社製のソフトです。Webデザインを志すなら、IllustratorとPhotoshopのスキルは必ず身に付けておくべきでしょう。
👉Illustrator（イラストレーター）とは？｜チュートリアル｜基本的な使い方について初心者向けに解説
Adobe社の公式ホームページからは、7日間の体験版ソフトをダウンロードできます。まずは実際のソフトに触れて、機能や使用感に慣れることが大切です。
体験版の期間が終了したら、製品版を購入するか、他のフリーソフトなどを使用することになります。とはいえ、IllustratorやPhotoshopは関連書籍の数も充実しており、現場で使用されている割合も圧倒的に高いソフトであるため、購入しても損はないソフトです。学生や教職員の方はソフトを安く購入できますが、一般の方もオンラインスクールなどに登録することによって学生と同じような特別価格でIllustratorやPhotoshopを使うことができます。
👉Photoshop（フォトショップ）とは？機能や作成時の注意点を解説
ステップ3：デザインの理論を学ぶ
デザインを仕事にしたいと考える場合にはまず、デザインの理論を学ぶことが重要です。「センスがあれば理論は必要ない」と考える方もいるかもしれませんが、デザインにはいくつかの基本的なルールがあります。センスももちろん重要ですが、理論的に配置・配色などを学ぶことにより、デザイン力が飛躍的に向上するのです。
デザインの理論を頭に入れた後で、さまざまなWebサイトを見ることにより、効率良くセンスを養うことができるでしょう。
Webデザイン系のブログを読んで、実践的な知識やノウハウを学ぶことも有効です。
デザインの理論を学ぶのであれば、グラフィックデザインと並行して勉強すると、より立体的にデザインの基礎をかためることができるでしょう。
ステップ4：実際にWebサイトを制作してみよう
ステップ3までに得た知識や技術を最大限に活用し、実際にWebサイトをデザイン・構築しましょう。必要に応じて「JavaScript（HTMLとCSSで作られたWebページに動きや機能を付加する言語）」や「WordPress」「Google Analytics」などのツールの使い方をその都度調べながら取り入れてください。学びと実践を繰り返すことによって、技術が体に染みついていきます。
可能であれば、ブログなどの個人サイトを立ち上げてポートフォリオ（作品集）を公開し、サイトを継続的に運営できたら理想的です。クオリティが高いポートフォリオサイトは、Webデザイナーとして起業・就職を目指す場合の「名刺」代わりにもなります。長く利用できるような、しっかりとした個人サイトの構築を目指してください。
ステップ5.Webマーケティング・ライティングを学ぶ
Webデザインをする上で大事なのは「売れるWebサイトをつくること」です。ある程度Webサイトを構築するのに慣れてきたら、Webマーケティングの勉強をすることをおすすめします。
せっかくかっこいいサイトデザインを作っても、人が訪れないサイトには価値が生まれません。
Googleに評価されるためのSEOのスキルや、SNSで評価されるようなコンテンツの制作など、どうやったらWebサイトを人に届けるのかという視点を持っているWebデザイナーは、お客さんからも信頼されやすいです。
また、ライティングやマーケティングはもちろん、カメラマンスキルも持っておくと、一人で多くの領域を一気通貫でできる市場価値の高いデザイナーになれます。（もちろん、一番重要なのはWebデザインのスキルです）
ステップ6.Webデザインの仕事の見つけ方
スキルアップをして実際に仕事にとりかかれるレベルまで成長したら、以下のような方法でWebデザインの仕事を見つけて、実践の中で勉強するとよいでしょう。
- クラウドソーシングなどで仕事を見つけてやってみる
- ポートフォリオを名刺代わりに転職・就職活動をする
- スクールに通っている場合は、学校を通じた転職・就職サポートを受けてみる
- SNSで情報発信をして、仕事を募集する
これからWebデザインを勉強したい人にとっては少し先の話かもしれませんが、今後Webデザインで食べていきたいのであれば、このあたりの方法も知っておくとよいでしょう。
👉Webデザイナーは副業でもできるの？仕事を獲得する方法と収入の目安
👉フリーランスWebデザイナーとしてWeb制作の仕事を獲得していく方法
Webデザインを独学で学ぶ上でのポイント
Webデザインを独学で学ぶ上での大事なポイントをいくつかまとめておきます。
・目的と目標を決める
人間は基本的に怠惰な生き物です。なんのために勉強するかの理想状態と目的、そこに到達するための目標を決めておかないと、モチベーションは続きません。
学校や仕事の合間に勉強するとなると、なおさらです。ですから、勉強を始める前に、自分のなりたい姿をくっきりとイメージすることが大事です。
・計画を立てる
独学で勉強する上で、いつまでにどうなっていたいかという計画を立てておかないと、ズルズルと勉強をするのをやめてしまい、ソフト代や教本代が無駄になります。ガチガチにスケジュールをかためろとは言いませんが、自分にとって無理のない範囲で勉強のやり方やペースを決めておくとよいでしょう。
・勉強に集中できる環境を作る
独学で勉強する際は、ほとんどが家かカフェなどで学ぶことが多いと思います。ネットやゲームなどの誘惑にいかに打ち勝つかが鍵となるので、しっかりと作業に集中できる環境を作りましょう。
・他の人を巻き込む
独学の場合、自分ひとりで勉強しようとすると、どうしても緊張感がなく、だらだらと勉強してしまいがちです。だからこそ、他の人に作品を見てもらってフィードバックをもらう、いつまでにサイトを作るなどを宣言して約束しておくなど、他の人を巻き込むことで自分の逃げ道をなくすことができます。
人間は誘惑に弱いので、「やろう！」とマインドを変えようとすることにはほとんど意味がありません。仕組みと環境を作って計画を立てて、コツコツやっていくこと。それが一番むずかしいのですが、自分を律して勉強することが独学には不可欠です。
・形から入る
Webデザイナーを目指す覚悟を決めたなら、書籍をすぐに買う、Webデザイン勉強用のソフトをすぐに買う、周りの人に宣言するなど、まずは形から入ることをおすすめします。
「やりたいなぁ」ではいつまで経っても物事は進まず、一生Webデザイナーにはなれません。まずはすぐに、何かしらの一歩を踏み出すことを心がけましょう。
決断力が道を切り開きます。
👉Webデザインをこれから学ぶあなたにおすすめのオンラインスクール
Webデザインを独学で勉強するメリット
Webデザインをスクールやインターンなどではなく、独学で学ぶのはどのようなメリットがあるのでしょうか。主に以下の3つだと考えます。
自分のペースで学習できる
スクールなどだと、どうしても通学するなどの時間が必要となりますが、教本をベースとした学習の場合は、自分の好きなタイミングで学習しやすいというメリットがあります。それゆえに、子育て中や介護の合間にも勉強ができます。
反対にいえば、強制力はないので、いかに自分を律して学習できるか、三日坊主にならないかが非常に問われます。
カリキュラムを自分なりに考えて学習できる
スクールなどだと基本的なカリキュラムが決まった中で進みますが、どうすれば効率的に学習できるかを独学の場合はスケジュールから学習内容まで自分で自由に決められます。
自分なりの学習スタイルで最適なやり方を設計して進めるのが好きな、こだわりが強い方には良いでしょう。
費用をおさえやすい
これが最も大きな理由かもしれません。スクールだと、どうしても学習にかかる費用がかかってしまいますが、自分で学んでいく独学スタイルはその分、費用は浮かせられます。
以上がメリットです。
Webデザインを独学で学んでから独立できるまでの平均期間
Webデザインを学んでから独学をするまでにはどのくらいの期間がかかるのでしょうか。
定量的なデータや調査結果があるわけではありませんが、筆者の周囲のWebデザイナーを見ていると、ベースの知識や技能の習得に半年から1年、実践として仕事の中でWebデザインの基礎力を高める下積み期間が2年ほど、ある程度のレベルのWebデザイナーとして活動するのに2年ほど、合計4~5年ほどかかったタイミングから独立を志す方が多い印象です。中には、10年以上働いた末に、独立する方もいます。
しかし、独立はゴールではありませんし、学習は長さよりも濃度です。独学の場合、ダラダラ学んでしまう人は2,3年かけてなんとか基礎をおさえる人もいますし、3ヶ月ほどで集中的に学習する人もいます。ペースと学習の濃度はそれぞれというわけです。
独立前提でWebデザイナーを目指す人には1年ほどで独立する人もいます。ただ、独立をする前にある程度、組織でのハイレベルな実践経験を積んでおいたほうが、独立した後でも勘所がわかって、働きやすくなるのではないかと考えます。Webデザインは、すべての工程を自分一人でやる仕事ではないので。
フリーランスは、個人事業主の開業届を出すだけで誰でもなれます。ただ、問題は開業した後にどう働くか。「独立すること」自体よりも、「独立して、どんな価値を世の中に届けたいか」を明確にした上で、レベルアップしてから独立するようにしましょう。
そのほうが長い目で見たときに、仕事が舞い込みやすくなります。
Webデザイナーを独学で目指す上でよくある疑問
続いて、独学でWebデザイナーを目指す人が、勉強していく上で気になるであろう「よくある疑問」に答えていきます。
どれくらい勉強すれば基本的なWebデザインのスキルは身につく？
勉強方法にもよりますし、基本的なWebデザインスキルがどこまでを指すかにもよりますが、集中的に勉強すれば3~4ヶ月ほどで基礎は固められるでしょう。
しかし、独学であったり、勉強する時間があまりとれない場合は、半年〜1年以上かかっても不思議ではありません。
デザインは、頭で考えるのももちろん重要ですが、基礎を学ぶにはとにかく手を動かして体で基礎を覚えていくのが重要です。自動車学校や受験勉強と同じように、だらだらと時間をかけて学ぶよりも、ガガッと時間をおさえて勉強を短期間で集中的に学ぶことをおすすめします。
Webデザインの情報収集はどうやったらいい？
基本的な学習方法については、教本やカリキュラムを参考にすればいいですが、実際にプロのWebデザイナーがどのような思考を持って、どのようなアウトプットをしているのかを学んでいくのはすごく重要です。
最新の情報収集はデザインの現場ナレッジや今のデザイントレンドをとらえられるだけでなく、自身の理想とするデザインを考えたり、視座を高めるのにも重要です。
デザイン関連の雑誌の定期購読や、TwitterやInstagramでデザイナーのアカウントを30~50名ほどフォローするなど、強制的に情報が入る仕組みづくりを進めることをおすすめします。
Webデザインだけに閉じず、広くデザインの領域に関わっている人や、Webマーケティングに関わる人などもあわせてフォローすると、広くインプットできます。
独学でデザインの勉強が続くか心配…
独学で学ぶのであれば「飽きない仕組みづくり」が非常に重要です。仕事や学校、プライベートもある中で、勉強の時間を設けるのは簡単ではありません。
先程、「形から入るのが大事」と伝えたように、一緒に学べる仲間をつくるのは飽きずに勉強するためにも重要です。
SNSでデザイン勉強用アカウントを作って、同じようなデザイナーの卵の方たちと応援しながら勉強していくのもひとつでしょう。
独学が苦手なあなたにはデジハリ・オンラインスクールがおすすめ
独学は自律してWebデザインを学んでいける人にはおすすめですが、毎日の仕事や学校に通う中でセルフマネジメントをして勉強していくのって、なかなか難しかったりします。
「ある程度の強制力を持たせて、しっかりとWebデザインを学んでいきたい！」
「それでもプライベートの時間は大事にしたい！」
「近所にスクールがない、スクールに毎回通うのは正直しんどい…」
という方におすすめなのが、デジハリ・オンラインスクールのWebデザイナー講座です。
デジハリ・オンラインスクールのここがすごい
・オンライン講義なので、場所や時間にとらわれずに勉強できる＝続けやすい！
・就職や転職、フリーランスとしての独立に強い！実績多し！
・自分一人ではなく、仲間やスタッフとのSNSやサポート体制が充実している
・講義に通わなくても自宅で勉強できる
以上のような強みを持っています。
まずは、以下のリンクからどのような講義やコースがあるのかをチェックしてみてください。
きっとあなたの背中を押してくれるはずです。
👇デジハリ・オンラインスクールはこちら
この記事におすすめのオンライン講座
