WEBデザインの勉強を始めたいけど、どこから手をつけて良いのか分からない…
こんなお悩みを解決します！
HPを作成したり、自分のブログサイトをカスタマイズしたい人にとっても、HTML・CSSの知識はとても役にたちます。
WEBサイトを構築する為の基礎なので、これから学習する方は是非最後まで読んで下さい！
こんにちは、Mia（@miatok_design）です！
Miaってこんな人
育休を活用してフリーランスWEBデザイナーになる為の勉強中。ママ専用のWEBデザインスクールに1ヶ月通ったあとは、独学で学んでいます。
現在はココナラでも出品中！
駆け出しのWEBデザイナー。
↓ WEBデザインにオススメのPCを選ぶなら、コチラの記事へ ↓
HTMLとCSSの学習方法〜スクールや無料サイトも紹介〜
WEBデザインの勉強を始めたいけど、どこから手をつけたらいいのか分からない…。
これから学ぶ方には、最初の入り口が1番難しいですよね。私の実践した方法を交えて解説します！
WEBデザイン初心者はHTML・CSSから学ぼう
WEBデザインの勉強を始めよう！と思ったら、先ずは『HTML・CSS』の学習から始めるのがオススメです。
何故なら、WEBデザイナーのお仕事に必要なWEBサイト(HP)を作る為の基礎知識だからです。
今回はそんなHTML・CSSの学習の手順について、基礎知識の部分から解説します。
プログラミング言語とは？
プログラミングやwebデザインの勉強を始めよう！
そう思って調べると
- HTML
- CSS
- JavaScript
- Ruby
- JQuery
- Bootstrap
- PHP
- WordPress
上記のような様々なワードが検索でヒットすると思います。
検索すると沢山出てくるけど、そもそも何これ？？
これらはプログラミング言語といって、PCと私たちが意思疎通する為に使う言葉なんです。
…ですがこれらはほんの一部で、現在は200を超える言語が存在すると言われています。業界の成長と共に更に新しいものが増えていくでしょう。
例えば
- 文字サイズを変更して
- 画像をスライドさせて
- テキストを赤色にして
- 画像を画面幅いっぱいに表示させて
- 〇〇〇〇って文章をページに表示させて
こういった私達の表現したい内容をプログラミング言語を使って指定する事で、普段目にしているようなwebサイト、アプリ、システムなどが作られています。
言語によってそれぞれ出来ることが違ってくるので、実際には複数の言語を組み合わせて使います。
HTML・CSSについて【初心者にも必須】
冒頭でもお話したように、これから学習をSTARTするのなら、先ずはHTML・CSSから学んで下さい。
簡単なWEBサイトであればこの２つを覚えるだけで作れますし、もっと深い知識をつけたいという方でも基礎の基礎になるのでかなり重要です。
WEBデザインだけでなくプログラミングを勉強したい人にとっても、必修科目と言えるでしょう。
次に、それぞれの働きです。
・HTML→文字、画像、URLのリンクといった要素。
・CSS→並べられた要素達を装飾する。
下の画像を見て下さい↓
上の画像はHTMLで見出しと画像を表示させただけの状態です。
見出しの文字も小さいですし、こんなWEBサイトは嫌ですよね？
ですがこれにCSSを加えてあげると↓
今回CSSで指定したのは
- フォント
- 文字サイズ
- 文字色
- 画像の縦×横のサイズ
- 要素の間隔
- 文字の表示位置
見本用にいじっただけなので、実際にはデザイン性を考慮しながらもっと沢山の調整を行います。
このようにHTMLのみだとただ要素が並ぶだけですが、CSSと組み合わせることによって様々な変化を持たせることが出来るのです。
WEBデザインの勉強にオススメの方法
早く学びたいけど、スクールと独学どっちがいいかな？迷っちゃう〜！
ご安心を！初心者にもオススメの学習法をご紹介します！
自分に合った勉強法を選ぼう
本格的に勉強を始める際に、独学？スクール？と悩む方も多いでしょう。
費用は
本だけで勉強する場合なら数千円
スクールに通うとなると10万円前後〜数十万円
選ぶ方法によってかなりの必要な費用に差が出ます。
どちらにするか決めるには
①スキル習得までの期間がどのくらいあるか→仕事で今すぐにでも必要なのか、趣味でのんびりやるからいつでも良いのか
②自分がどんな性格なのか→1人で作業するのが好きなのか、先生と対面で習う方が好きなのか
③いくらまで費用をかけられるか→5000円が限度の人と100万円が限度の人ではそもそもの選択肢の数が違います。
こういった項目に注意しましょう。
ですが、本を買ったりスクールを探す前に是非やって欲しいサービスがあるのでご紹介します。
初心者はまず「Progate」から始めよう
WEBデザインやプログラミングを学ぶ人で知らない人はいない！と言うくらい有名なオンライン学習ソフトです。
初級編(無料)から始まり、中級編(有料)→上級編(有料)とだんだん課題の難易度がアップしていきます。
ここでは初級のHTMLやCSSのコードの書き方を学ぶことが出来て、なんと費用は0円です。（※中級編以上は有料）
無料の学習をお試しで挑戦して、自分に合うか合わないかを判断することをオススメします。
試した上でもっと学習を進めたいなと思ったら、月額980円の有料会員になりましょう。
有料会員になると
- HTML&CSS
- JavaScript
- jQuery
- Ruby
- Ruby on Rails5
- PHP
- Java
- Python
- Command Line
- Git
- SQL
- Sass
- Go
- React
これだけの言語が学び放題です。
受講講座数は関係なく単純に月額費用のみなので、なるべくお金をかけたくない！と言う人は短期集中で気になる言語を学習するのが良いでしょう。
コスパ最高のソフトなので先ずはここから始めましょう！
動画派にはドットインストール
学習する時は動画の方が分かりやすい！って人にはドットインストールをオススメします。
動画を見ながら学習が出来る無料のオンライン学習ソフトです。
1本の動画が3分程なので隙間時間でも細かく学習を進められます。
こちらも無料会員と有料会員とそれぞれのサービスを提供しています。
↓公式サイトの比較画像↓
有料会員限定レッスン動画だけでなく、動画の音声の再生速度や文字起こしなどの機能面も有料会員の方が充実する仕組みになっています。
動画の数やレッスン項目がかなり多いのでここでの紹介は控えますが、どんなレッスンが受講出来るか気になる方は直接サイトでチェックしてみてください！
WEBデザインの学習にオススメのスクール
私はprogateである程度学んだあとスクールに通いました。
ある程度の基礎知識をつけたあとは、自分の深めていきたい知識に合わせてスクールに通うのも方法の一つです。
スクールをオススメするのはこんな人
- 独学に限界を感じている方
- 育児でまとまった時間が取りにくい方
- 1人でコツコツ勉強が苦手で、誰かと一緒に学習したい方
通ってみた感想としては『受講して良かった』と思っています。
お金がかかるというデメリットはありますが、それ以上に
- 子供を預かって貰えるので、集中して受講できた
- 先生と対面で授業を受けるので、質問がしやすくレスポンスも早い
- 授業の日が決まっているので、学習スケジュールを組み立てやすい
- 同時期に受講したママデザイナーの横の繋がりができた(◎ママ友としても)
- 実際に使っているツールや、クライアントとのやり取りの実体験の話を聞けたりする
このようにメリットも沢山あったと感じています。
やっぱり学習ソフトや本を読みながら進めるよりは、圧倒的に必要な項目をピンポイントに勉強出来るのがスクールの強みでしょう。
オススメのスクール一覧
私が通ったスクールと、その他オススメのスクールをご紹介。
famm(ファム)
1ヶ月間全４回の授業では、Photoshopの使い方から始まり、HTML/CSS/JQueryの学習→それらを使ってオリジナルサイトを作ります。
自宅での自主学習時には先生にチャットでの質問が可能。
ママ専用なので、受講者は全員子育て中のママ。授業の間保育士さんがついてくれるので、子供と一緒に通えます。（私の時は赤ちゃん５人に３〜４人の保育士さんがいました！豪華！）
しかし超短期コースなので学習する項目は少なめです。
コースのコンセプトもそうですが、子育てで集中する時間が取れないママにオススメです。
デジタルハリウッド
WEBデザインだけでなく、プログラミングやグラフィックデザイン、マーケティングなど学べる講座も多い大手のスクールです。（よくデジハリ生って言葉を聞きます）
こちらは実際にスクールに通うか、オンラインスクールにするかを選べます。
コースも豊富で最低３ヶ月から８ヶ月とかなりみっちりWEBデザインについて学ぶことが可能です。
コースは20万円〜43万円と内容によって価格が変わります。
実際に案件の紹介まで面倒を見てくれるようなので、費用はかかりますがとても人気のスクールです。
Tech Academy(テックアカデミー)
こちらはオンラインスクール専門でやっています。
１ヶ月プランから始まり最大で４ヶ月までのコースが選べます。（コースの内容は同じなので、メンターさんへの質問やチャットサービスの延長というイメージ）
WEBデザインだけでなくプログラミング系の講座も種類が沢山あります！
Graspy(グラスピー)
Graspyで無料プログラミング講座を受講する
こちらは少し変わってプログラマー系ではありますが、なんと無料でプログラミングを学べてさらに転職サポートまで行ってくれる会社です。
無料登録するだけで20万円相当のカリキュラムが受けられるようなので、プログラマーへ転職したい！って方は是非試してみてください！
現在は数多くのスクールがあるので、なるべくコスパが良くて質の良いサービスを選びましょう！
↓ 実践編！バナートレースの手順についてはコチラの記事も ↓
HTMLとCSSの学習方法〜スクールや無料サイトも紹介〜：まとめ
先ずはprogateから始めてみようかな！頑張るぞー！
頑張ってください！今は無料でもとても役立つサービスが沢山あるので上手に使いましょう！
HTML/CSSを学ぶ為の無料の学習サイトやスクールを紹介しましたが、如何でしたか？
WEBデザインと一口に言っても、学ぶことが沢山あってどこから始めていいのか迷ってしまいますよね。
迷っている時間で今日紹介した無料の学習ソフトを使ってみてください。
やっている間にどんどん自分の目指したい方向性が見つかってくると思います。
参考になれば嬉しいです。