Webデザインの独学は何からはじめる?無料でできるおすすめ勉強法

webデザイン、独学、何から1

Webデザイナーとして転職するために勉強をしたいけど、Webデザインってやることの領域も広そうだし、そもそも自分にデザインなんてできるのかな・・・?

お金もかかるから最初は独学で勉強したいけど何からはじめたらいいんだろう・・・?

考え事をする男性
考え事をする男性

こんにちは、キノシタです。

最近プログラミングって話題になっていますよね。

小学校からプログラミングの授業が始まり、フリーランスとして独立していつでもどこでも自由度の高い働き方が注目されています。

エンジニアと同じように自由度の高い働き方ができるWebデザイナーという働き方にも注目が集まっていて気になっている人も多いかと思います。

Webデザイナーとして働くために、未経験の方が独学でスキルを手に入れるには何からはじめたらいいのでしょうか?

Webデザインの基礎を独学で学習するには、大きく分けて3段階あるのではないかと思っています。

ステップ1:「HTML・CSS」をネットを使って効率よく学習する→現在ここ
ステップ2:お手軽に購入できる学習教材を購入して動画で学習する
ステップ3:専門書を購入して一人でサイトを作成してみる
ステップ4:実際に公開されているサイトを模写して作成してみる

 

以上になります。

実際に私がWebデザインスクールに通っている中で、「もし今からWebデザインを独学するならこのステップで学習するだろうな!」って勉強方法になります。

この記事では、『ステップ1』の「HTML・CSS」をネットを使って効率よく学習する方法についてご紹介したいと思います。

 

Webデザインの独学は何からはじめたらいい?

webデザイン、独学、何から2

Webデザインと一言で言っても、実はかなり領域が広いです。

具体的には、

・お客様に企画などを提案する人
・サイトのデザインを作成する人
・デザイン通りにコードを書く人
・仕様書通りにできているかテストする人

などなど・・・

Webデザインのメインと言えば「デザイン」ってイメージも強いため、まずは「デザイン」の勉強だ!って思うかもしれません。

しかし、いきなりデザインを独学すると言っても難しいと思うので、まずは「HTML・CSS」というマークアップ言語を勉強するのがおすすめです。

マークアップ言語「HTML・CSS」を覚えると、実際にサイト作成ができるようになります。

では、なぜWebデザインの独学を何からはじめるか問題で、「HTML・CSS」からはじめるのがいいのかという理由ですが、

・正解があるため学習しやすい
・デザインの勉強がしやすくなる

からです。

それぞれお話ししていきます!

 

マークアップ言語は正解があるため学習しやすい

「HTML・CSS」は、ホームページなどのサイトを作成するときに使うマークアップ言語で、「HTML・CSS」でコードを書いて画像の位置だったり文字に装飾をつけたりできます。

Webデザインと言ってもデザインだけをするクリエイターの方もいるのですが、「HTML・CSS」をある程度把握しておかないと、せっかくデザインしても再現ができないなんてならないように最初に覚えておくといいと思います。

また、デザインについては明確な正解ってありませんが、「HTML・CSS」には正解があるので、学習もしやすいです。

 

デザインの勉強がしやすくなる

「HTML・CSS」を最初に学習した方が良い理由の2つ目としては、サイトのデザインを学ぶ際にイメージがしやすくなるということです。

どのようなサイトを作るのかによりますが、特にホームページのデザインはある程度の型が決まっています。

そのため、「HTML・CSS」でサイトが作れるようになればサイトの構成を理解できるので、デザインを学ぶときに理解がしやすくなると思います。

デザインの学習をするにも、何度も何度もデザインをして手を動かすことが重要ですし、デザインをして実際にサイト作成をする際にコードが書けるとさらに学習が進むと思うので、まずは「HTML・CSS」を独学ではじめるのがいいと思います。

では、そんな「HTML・CSS」を何から独学すれば効率がいいのでしょうか?参考書や動画教材やブログで調べるなど色々あると思います。

次の章で「HTML・CSS」を無料で独学できる効率的な方法をご紹介します!

 

結論:無料でできるProgateをはじめよう!

webデザイン、独学、何から3

Progate(プロゲート)って聞いたことはあるでしょうか?

Webデザインの独学について色々調べている方なら聞いたことがあるかもしれません。

Progateはネットで無料でプログラミング言語を独学で学べるとても便利なサイトです。

下記に特徴を挙げてみたいと思います。

・ゲーム感覚で独学できる
・無料でいつでもどこでも学習できる
・学習効率がいい

それではそれぞれお話ししていきたいと思います!

 

ゲーム感覚で独学できる

Progateはプログラミング言語をはじめて学習する人向けに作られたプログラミング言語学習のサイトです。

ゲーム感覚で学習でき、一から始める人でも挫折せずに学習を進めることができます。

そのため、独学でやる場合何から勉強したら良いのか迷うと思いますが、Progateでお題をクリアしていけばいいため、効率的に学習を進めることができておすすめです!

 

無料でいつでもどこでも学習できる

プログラミング言語やマークアップ言語が無料で学習できて、かつ効率よく学習ができるって魅力的ですよね。

また、Progateはスマホアプリもあるため「いつでも」「どこでも」学習を進めることができます。

例えば、通勤中の電車の中や会社のお昼休み、やろうと思えばお風呂の中でも学習することができます。

隙間時間で学習を進めることができるのでとても効率的ですよ!

 

HTML・CSSの専門書を買って独学するのは?

「HTML・CSS」の専門書を買って独学するのとProgateで学習する場合の比較をちょっとしてみたいと思います。

初めての方が専門書とProgateどちらで学習した方が良いのかというと、最初の頃は確実にProgateで学習した方がいいです。

理由はこちら。

・本の代金がかかる
・Progateの方がすぐに学習を進めることができる
・本よりもサクサク学習を進められる

 

ちょっと深掘りしてみます。

 

本の代金がかかる

まず1から始める方がいきなり本を購入するのはリスクがあります。それは「本の代金がかかる」ということです。

本の代金なんてたかが知れているかも知れませんが、専門書は読むのにも体力を使いますし全く初めて「HTML・CSS」を勉強する人がいきなり読んでもかなり難しく挫折する人もいるみたいです。

(私はWebデザインスクールに通う前に本を買って独学しましたが挫折しました・・・)

初心者用の本と言っても読んでみるとわかりますが、意外と難しいんですよね・・・

対してProgateは無料で学習ができるので、余計な経費をかけずに学習ができます。

最初はProgateで学習して独学の勢いをつける方がやる気も出ると思います!

 

Progateの方がすぐに学習を進めることができる

Progateの方がすぐに学習を進めることができるとはどういうことかというと、本を買って独学をしようとすると学習をはじめるまでに学習環境を整える必要があります。

コードを書くエディタ(メモ帳でもできると言えばできます)を準備したり本を購入したりですね。

今すぐに学習をはじめたいと思ってもすぐに開始することができません。

その点Progateであれば、ネット環境があればサイトにログインしてすぐに学習をスタートすることができるので効率的です。

 

本よりもサクサク学習を進められる

Progateは本で学習するよりも学習スピードが速いという特徴があります。

プログラミング学習のサイトのため、どうやればプログラミング言語の基礎を効率よく学習できるか考えられて構築されています。

もちろん専門書もそのように作られていますが、ネットと違い自分で読んで進めていかなければいけないので内容を読解するまでに時間がかかります。

Progateである程度の基礎知識を身につけてから初心者用の専門書購入して学習の理解度を深めるという手順の方が効率的なので、独学でスキルアップしようと考えている方にはおすすめです。

一応Progateのリンクを貼っておくので、Webデザインの学習をしようと思っている方は独学する際のツールの一つとして登録しておいてください。

 

無料でProgateを学習する→Progate

 

まとめ:Webデザインの独学はProgateがおすすめ

webデザイン、独学、何から4

今回は、Webデザインを独学するのに何からはじめればいいのかについて、Webデザインスクールに通っている経験から独学の手順についてお話ししました。

まとめるとこちら

ステップ1:「HTML・CSS」をネットを使って効率よく学習する
ステップ2:お手軽に購入できる学習教材を購入して動画で学習する
ステップ3:専門書を購入して一人でサイトを作成してみる

 

今回はステップ1:「HTML・CSS」をネットで学習するにはについてお話しました。

「Progate」を使えば「いつでも」「どこでも」独学で学習できます。

また、何からはじめたらいいのかわからない方にもおすすめで、「HTML・CSS」の基礎を順序よく学べるので、「何からはじめよう・・・」という時間を省くことができ効率的です。

独学をしようと思っていて、何からはじめたらいいのかわからない方は、Progateで「HTML・CSS」を学習してみてくださいね!

また別の記事で「ステップ2」「ステップ3」とお話しできればと思います。

 

それでは、ありがとうございました。