2021/11/01 (更新日: 2022/10/07)

【初心者必見】Webデザインを独学で学ぶ3つのステップ

Webデザイン

2021_1101_1-3-steps-to-self-taught-web-design

Webデザインを副業で始めます「Webデザインのスキルをゼロから独学で学びたいのですが、学ぶべきスキルを習得するコツなどを知りたいです。また、独学で学習するメリット・デメリットを知りたいです…」このような悩みが出てきました。

今回は、このようなお悩みを解決するための、お手伝いをします。

本記事の内容

Webデザインを独学する3つのステップ
Webデザインを独学するメリット・デメリット

この記事を読むメリット

Webデザインを効率良く独学できるコツがわかる
Webデザインを独学するメリットとデメリットが理解できる

この記事を書いている僕は、2020年9月から副業を始めました。現在は本業と両立し、Webデザイナーとして活動しています。

そんな僕はWebデザインを始めた当初、独学で学習をしていました。全く無知の状態からパソコン1つでWebデザインを習得できるように学習をしました。しかし当時は、言葉の意味がわからず厳しい部分もありました。しかし、今は頑張って検索すればある程度答えは出てくる時代です。

そんななか、Webデザインを独学で習得するために理解しておくべき3つのステップについて解説します。どれだけ頑張ってもこの3つのステップが理解できていないとWebデザインのスキル習得はできません。

しかし、この3つのステップさえ理解し、この3つを抑えるための動きをすれば、ある程度のスキルは身につきます。基礎の部分は独学でも十分習得することは可能だということです。

しかも、最近はたくさん検索するとWebデザインの基礎部分を学ぶための動画やソフトは無料で使える範囲でも十分揃っています。最初からお金をかけて、Webデザインのスクールに通うのも良いですが、まずはどんなスキルや知識が必要なのかを知るため、また、経験をつけるという意味でも独学でやってみるべきです。

Webデザインにせよ何にせよ、基本は自分で考える能力がないと稼ぐことはできません。ただ、何度も繰り返しになりますが、この3つのステップを理解し、習得するために動けば何の問題もありません。

初心者のとき、日々どんなことを意識しWebデザインの基礎を身につけるための学習をしていたのかをシェアしていきます。参考になると嬉しいです。

結論

Webデザインを独学するには、以下でご紹介する3つのコツを押さえておくべき

上記のとおりです。
過去の僕と同じ悩みを抱える方へ、心を込めて深堀りします。

本記事の動画解説版

Webデザインを独学する3つのステップ

「Webデザインを独学する上で大切なポイントは何かな？具体的なコツなどを知りたいです…」

こちらのテーマでは、このような疑問を解消するため、深掘り解説をしていきます。

本テーマの内容

ステップ1：基礎知識の付け方
ステップ2：デザインソフトのスキル習得
ステップ3：学習ソフトでの学習方法

本テーマを読むメリットはこちら

独学でもレベルの高いWebデザインスキルを習得する方法が分かる

こちらのテーマでは、レベルの高いWebデザインスキルを習得するために必要な、基礎知識のつけ方とデザインソフトに関するスキルの習得方法を解説します。Webデザインを独学する上でとても重要な項目なので、しっかり読んで理解するようにしましょう。

ステップ1：基礎知識の付け方

こちらのパートでは、Webデザインを独学する際に、土台となる知識を解説します。近年は参考書の種類も豊富で、インターネットを活用すれば無料で学べるものなど、さまざまです。いくつか試して、自身に適したものを利用して学習しましょう。

書籍を使った学習方法

まずは書籍を使った学習方法です。Webデザインに関する知識が全くない場合は、初心者向けの書籍を使いましょう。Webデザインとは何か、Webデザインに必要なスキルやツールは何か、など根本的なものから、レスポンシブ、配色、UX（ユーザーエクスペリエンス） /UI（ユーザーインターフェイス）など技術的な知識を学ぶことができます。

順番に学習を進めれば、HTML/CSSのコーディングスキルやIllustratorのデザインスキルなど基本的なスキルを身に付けることができ、学習のベースを作ることができるでしょう。

※レスポンシブルとは、ユーザーがどのデバイスを利用しても、Webサイトの画面が各画面の適した表示になる技術です。

※配色とは、ユーザーのアクションを誘導する色をリンクや文字に装飾することです。例えば、リンクボタンは「進む」を意味する緑色（信号の色が関係している）が使われやすいなどになります。

※UX（ユーザーエクスペリエンス）は、人がモノやサービスに触れて得られる体験や経験のことを指す言葉です。

※UIは、（ユーザーインターフェイス）は、人とモノ（主にデバイス）をつなぐ入り口のようなものを指す言葉です。

YouTubeを使った学習方法

最近はYouTubeでもWebデザインの基礎知識を独学することができます。現役のWebデザイナーが技術について解説している動画も有益ですが、初心者が知っておくべき知識を解説している動画もあり、入門として最適です。

特にコーディングに関しては、書籍ではできない「見ながら実際に手を動かす」ができるため、直感的な理解に繋がります。手を動かして勉強するのが得意な人は、YouTubeを利用して基礎知識を身に付けましょう。

ステップ2：デザインソフトのスキル習得

こちらのパートでは、デザインソフトのスキル習得について解説します。「デザインソフトには何があるのか分からない」「なぜデザインソフトのスキルが必要なのか？」などの疑問を解消するので、ぜひ参考にしてください。

Illustrator

Illustratorは、名前の通り「イラスト」の作成や加工に適したツールです。Webデザインでは「バナーデザイン」と呼ばれる、ユーザーの目を引く広告リンクを作成することがあります。Webサイトのデザインに合った配色、イラストを作成するのに必要なツールで、数十種類のエフェクトから切り取り機能など、さまざまなことを実現できます。

Photoshop

Photoshopは画像を加工するのに便利なツールです。Webサイトでは直感的に理解できるよう企業のイメージ画像を掲載することがあります。Webサイトにマッチするデザインに加工したり、ユーザーが興味関心を持ちやすい配色やフレームを付けたりと、Webデザインを行う上で欠かせないツールです。

デザインサービスで「Canva」というものがありますが、こちらはすでに用意されているデザイン（テンプレート）をカスタマイズしてデザインを作成するツールです。IllustratorやPhotoshopは、イチからデザインを作成するもので、自由度の高いオリジナルのデザインを作成できる点で異なります。

また、IllustratorやPhotoshopを安く購入したい方は「【44%OFFで同じクオリティー】AdobeCCを安く購入する方法」こちらの記事をご覧になってください。かなり格安でソフトを手に入れることができます。

ステップ3：学習ソフトでの学習方法

こちらのパートでは、学習ソフトについて解説します。学習ソフトでは、動画やスライドで学習し、実際にコードを書いて学べる機能があり、「参考書を読んで学習するのが苦手」という方におすすめです。以下でご紹介するサービスはそれぞれ特徴があるので、あなたが利用しやすいサービスを選んで学習しましょう。

ドットインストール

ドットインストールは、3分ほどにまとめられた解説動画を視聴して学習できるサービスです。Webデザインに必要なコーディングスキル「HTML/CSS」や「JavaScript」などを実際に手を動かしながら学習できるので、より実践に近い知識・スキルを習得できます。

無料版と有料版があり、無料版では基礎的な部分（HTMLとは何か、コードの書き方など）を学習できますが、応用的な部分（レスポンシブデザインのやり方、カラムについてなど）を学ぶには有料版にする必要があります。また、有料版では、動画の速度や現役エンジニアへの質問サポートが利用できます。

【無料版】会員登録はこちらをクリック

プロゲート

プロゲートは、シンプルで分かりやすいスライド活用した学習サービスです。Webデザインに必要なHTML/CSSなどをコースに分けて学ぶことができます。コースも初心者コースから中級、上級とあり、レベルに合わせて学習内容を変えることが可能です。

こちらも無料・有料版があり、無料版はコースの一部まで、有料版は全てのコースを学習することができます。スマホでも学習することができるので、隙間時間を有効に活用したい方におすすめです。

【無料版】会員登録はこちらをクリック

CODEPREP

CODEPREPは、ブラウザ上で穴埋め問題を解いたり、アプリ開発の体験をできるサービスです。独学で難しい開発過程の経験ですが、CODEPREPなら問題を解きながら開発の流れを学ぶことができます。

CODEPREPは現在、全てのブックが無料公開されています。基本的な知識から応用的な知識まで学習することができ、独学でWebデザインを学ぶ方にはおすすめのサービスです。

【無料版】会員登録はこちらをクリックそれぞれ特徴が異なるので、あなたの学習スタイルに適したサービスを利用すると良いでしょう。

こちらのテーマでは「Webデザインを独学する3つのコツ」について深掘り解説をしてきました。こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】90分無料相談

Webデザインを独学するメリット・デメリット

「スクールか独学をするかで迷っています。判断する基準として、Webデザインを独学するメリット・デメリットを知りたいです！」

こちらのテーマでは、このような疑問を解消するため、深掘り解説をしていきます。

本テーマの内容

Webデザインを独学するメリット
Webデザインを独学するデメリット

本テーマを読むメリットはこちら

自分が独学かスクールを選ぶべきか選べるようになる

こちらのテーマでは、Webデザインを独学するメリットとデメリットを解説します。メリット・デメリットを知ることで、自分は独学すべきかスクールに通うべきか判断できるようになり、最適な学習ステップを進むことができるでしょう。これからWebデザインの学習を始める方はぜひ参考にしてください。

Webデザインを独学するメリット

こちらのパートでは、Webデザインを独学するメリットを詳しく解説します。一番大きなメリットは「自分のペースで学習できる」ことですが、この他にもさまざまなメリットがあります。独学するか検討中の方はぜひご覧ください。

学習コストを抑えられる

Webデザインを独学することで、学習コストを抑えることができます。参考書は一冊だいたい1500円∼3000円の価格で、学習サイトは月額1000円前後のものがほとんどです。また、YouTubeなど無料で利用できる学習サービスも多く、学習コストを抑えてWebデザインを習得することができるでしょう。

自分の好きな時に好きな場所で学習できる

独学をする一番のメリットは、自分で学習時間や場所を選ぶことができる点です。自宅や図書館、カフェなど場所を問わずに学習できるので、モチベーション維持がしやすい環境を選ぶことができます。時間も早朝や夜遅い時間など、制限されることがないので、生活リズムに合わせて学習計画を立てることが可能です。

学習ペースを管理できる

スクールに通うとカリキュラムに沿って学習を進めますが、独学の場合、学習ペースを自身で決めることができます。そのため、バイトや仕事が忙しい時期は空き時間だけを使って学習、時間に余裕がある時期は朝から夕方まで集中して学習をするなど、その時に最適なペースで進めることが可能です。

Webデザインを独学するデメリット

こちらのパートでは、Webデザインを独学するデメリットを解説します。独学にはメリットだけでなく、「モチベーション維持が難しい」「分からない問題でつまづく」といったデメリットも存在します。良い面悪い面どちらとも知ったうえで、自身の学習スタイルを決めるようにしましょう。

モチベーション管理

Webデザインを独学することで、集中して学習できる点は魅力的ですが、自分が目標にする相手や鼓舞してくれる講師がいないため、モチベーション維持が難しいです。

途中で辞めたくなった時、周りに人がいると「もう少しだけ頑張ろう」となりますが、独学の場合、誰にも指摘されることがなく、挫折してしまう人が多くいます。ただこの部分を解決するために僕は、毎日「もくもく作業会」を開催しています。「コミュニケーションをとりましょうというサービスではなく、無言でもくもく作業を一緒にしましょう。」という環境の提供です。もしご興味のある方はこちらの記事をご覧になってください。もちろん無料です。