HTML・CSSの独学でWebデザイナーになるためのステップ

2023.01.29
HTML・CSSの独学でWebデザイナーになるためのステップ

WebデザイナーとはWebサイトの見た目の美しさだけでなく分かりやすさ、使いやすさを含めたデザインを主に扱う職種のことです。

Webデザイナーになるために、どんなスキルが必要なんだろう!?
どうすればWebデザイナーになれるんだろう?

上記のように考えていませんか。
Webデザイナーになるためのスキルを独学で身につけるために、なんのスキルどうやって学習すれば良いのかを解説します。

そもそもWebデザイナーに必要なスキルって何?

そもそもWebデザイナーに必要なスキルって何?

Webデザイナーの仕事内容とは

Webデザイナーの仕事は、クライアントの求めるWebサイトのデザインを制作するために、ヒアリングしてサイト全体の構成を考える
ところから始まります。

全体の構成を考えてレイアウトを決め、サイト全体のイメージを決めたら、PhotoshopなどのグラフィックソフトでWebサイトのデザインを起こします。

サイト全体の配色やロゴやアイコンを決めるのもこの段階です。
デザインを起こすまではクライアントと密に連携し、相談しながら進めていくことが多いです。

その後、HTMLとCSS、jQueryを使ってデザインや必要な機能を実装していきます。

Webデザイナーに必要なスキル

Webデザイナーに必要な主なスキルは、以下の5つです。

  1. HTML/CSS
  2. jQuery(JavaScript)
  3. Photoshop
  4. Illustrator
  5. WordPress

また、サーバーの基礎知識や、SEOと呼ばれる検索エンジン最適化の知識も必要です。

SEOの知識まで必要なのかと思うかもしれませんが、SEOを意識してサイト全体を構成するのも、Webデザイナーの仕事の内です。

スキルを列挙すると、知らない単語ばかりで気後れしてしまうかもしれませんが、安心してください。

どれもWebデザイナーの必要スキルであり持っていた方が仕事が取りやすいものですが、これら全てが1から10まで必須というわけではありません。

❶HTML/CSS

HTMLはWebページを作成するために開発され、Webページ内の見出しや段落、画像など文書のどの部分が何の役割か印を付ける言語です。

CSSはHTMLで記述した文書に対して、文字の色や大きさ、背景色や配置位置の設定をするデザイン担当の言語です。
HTMLとCSSは一般的にセットで学習します。

❷jQuery(JavaScript)

JavaScriptは、HTMLとCSSで作成されたWebページに動きをつけることができます。
例えば、クリックしたらポップアップが出たり、画像が自動的にスライドしたりする機能を実装できます。

jQueryは、JavaScriptを便利かつ簡単に扱えるためのライブラリです。

Webデザイナーなら、まずはjQueryでよく利用される画面の切り替わり機能やWebサイトの左上や右上にある横三本線のハンバーガーメニューなどを実装できれば及第点と言えるでしょう。

まずはHTML/CSSに合わせてjQueryが最低限できれば、コーディングと呼ばれる仕事を行うことができます。
コーディングは、Webデザイナーの仕事のうち、デザインを起こした後の作業です。

コーディングのみを行う人をコーダーと呼びます。実務経験を積めることもあり、Webデザイナーを見据えてコーダーから入る人も少なくありません。

❸Photoshop

PhotoshopはWebページのデザインをする時に使う画像編集ソフトです。
Webバナーの作成や写真の加工・補正・切り抜きなど頻繁に使います。

Web制作会社のほとんどでPhotoshopが標準となっているため、基本操作はできるようにしておく必要があります。

❹Illustrator

Illustratorは主にロゴやアイコンの作成に使用するドローソフトです。
Illustratorはベクター形式という、拡大しても画像が劣化しない画像を作成できます。

そのため、大小様々なサイズで使いたいロゴやアイコン、文字フォントの作成などに使われます。

❺WordPress

WordPressは必須ではありませんがあった方が良いスキルです。
世界中のWebサイトのうち、4分の1がWordPressで作られていると言われています。

クラウドソージングで募集されている案件を見ても、既存のWebサイトをWordPressに置き換える仕事が多くあります。
WordPressをカスタマイズできるレベルまでになれば、Webデザイナーとして受注できる仕事の幅がぐっと広がります。

初心者でも実践的なスキルが身につく DMM WEBCAMP

「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】


✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

スキルを身につけるための4ステップ

スキルを身につけるための4ステップ

Webデザイナーに必要なスキルを理解したところで、次はスキルを自分のものにする方法を解説します!

以下では、4つのステップに分けて段階的に解説しています。
ぜひ参考にしてくださいね。

  1. 学習の順番や独学の方法を決める
  2. 学習サイトで学ぶ
  3. 本で学ぶ
  4. Webサイトの模写をする

❶学習の順番や独学の方法を決める

基本的にはどのスキルが絶対に最初、というわけではありませんが、JavaScriptやjQueryはHTML/CSSの事前知識が必要なため、HTML/CSSを身にけてから学習するべきです。

順序を逆にしてしまうと、本や動画を見ても理解できず、挫折してしまいます。

独学の方法は、大きく分けて本とオンラインの学習サービスや公開されている動画の2通りです。
あれもこれもと手を広げてしまうと、結局どれも中途半端に終わってしまいます。

本なら1つのスキルに対して1冊ずつ学習サービスも1つのスキルの講座に対して1つずつ、着実に進めていくのがおすすめです。

❷学習サイトで学ぶ

HTML/CSSを学べるオンライン学習サイトは年々増えてきています。
有名なところでは、ドットインストールProgate、海外のサイトではCodeacademyが挙げられます。

学習サイトは本よりも比較的とっつきやすく、学習の始めやすさや続けやすさがあるのが利点です。
ただし学習サイトでは細かいところやあまり使われないスキルは省かれることが多いため、学習サイトで一通り学んだあとは、本を復習や知識の穴埋めとして使うのをおすすめします。

Progate

Progate
Progateの評価
学習のしやすさ
(5.0)
学習の幅(どれくらいマスターできるか)
(4.0)
総合評価
(4.0)

Progateはブラウザ上でコードを書きながら学べるサービスです。
最初にスライドで簡単な説明があり、実際にその場でコードを書いて動かすことができます。

環境構築せずにコーディングやプログラミングを学べるため、最初の環境構築が分からずに挫折ということがありません。

HTML/CSSは応用まで無料で学べます。JavaScriptやjQueryについては、基礎部分を無料で学ぶことが可能です。
月額980円で応用や他の言語を学ぶことができます。

ドットインストール

ドットインストール
ドットインストールの評価
学習のしやすさ
(4.0)
学習の幅(どれくらいマスターできるか)
(4.0)
総合評価
(4.0)

ドットインストールは3分前後の動画で学べるサービスです。
Progateと違い、動画を見ながら自分で1から環境構築、プログラミングをしていくスタイルになります。

HTML/CSS、JavaScript、jQuery、WordPressの基礎を無料で学ぶことができ、有料版は月額980円です。

❸本で学ぶ

オンラインの学習サイトの方が最初のハードルが低いため、まずは学習サイトで学ぶことをおすすめしています。
しかし、本の方がより体系的な知識を学ぶことができるため本だけでも独学は可能です。
特に理論より実践派の人なら、学習サイトで実際にコードを触って「このコードを書けばここが動く」「説明はできないけれどなんとなく分かった」レベルにしてから、本を読んで理論を学ぶと理解しやすくなるでしょう。

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版
この本の評価
学習のしやすさ
(5.0)
学習できる幅
(どれくらいマスターできるか)
(4.0)
総合評価
(4.0)

Web制作入門におすすめの1冊です。
HTML/CSSを全く知らない初心者にも分かりやすく、丁寧に解説されており、タイトル通りスラスラ読めます。

他の本で挫折した人でも、この本を読んで理解できたという人も少なくありません。
読むだけでなく、本と一緒に実際にコードを書いていけば、着実に1つのWebサイトが完成させられます。

スラスラ読める JavaScript ふりがなプログラミング

スラスラ読める JavaScript ふりがなプログラミング
この本の評価
学習のしやすさ
(5.0)
学習できる幅
(どれくらいマスターできるか)
(3.0)
総合評価
(4.0)

プログラミング全くの初心者におすすめできる、分かりやすさに定評のある入門書です。
このコードは何を意味しているか、をきちんと説明してくれています。

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

ノンデザイナーズ・デザインブック
この本の評価
学習のしやすさ
(5.0)
学習できる幅
(どれくらいマスターできるか)
(4.0)
総合評価
(5.0)

紙・Web問わず、デザインの入門書として高い評価を受けています。
Webデザイナーになるなら読んでおいて損はありません。
デザインの基本的な知識や考え方を学べる本です。

Photoshop しっかり入門 増補改訂版

Photoshop しっかり入門 増補改訂版
この本の評価
学習のしやすさ
(4.0)
学習できる幅
(どれくらいマスターできるか)
(3.0)
総合評価
(4.0)

Photoshopの基礎を分かりやすく丁寧に解説している入門書です。
初心者がつまずきやすい箇所や、前に紹介された方法との違いなどがきちんと説明されるため、読んでいて迷子になりません。

Illustrator しっかり入門 増補改訂 第2版

Illustrator しっかり入門 増補改訂 第2版
この本の評価
学習のしやすさ
(4.0)
学習できる幅
(どれくらいマスターできるか)
(3.0)
総合評価
(4.0)

初心者向けに書かれた、丁寧な解説と見やすい図解で書かれた入門書です。
これを1冊終えれば、Illustratorの基本が身につきます。

❹Webサイトの模写

一通り基礎を学習したあとは、ひたすらWebサイトの模写しましょう。

美しいデザインのランディングページ(LP)やWebサイトの模写を繰り返すことによって、自分の中にレイアウトやデザインのストックができますし、よく使われているjQueryの練習にもなります。

以下は模写をはじめ、有名な優れたデザインのギャラリーサイトです。

模写した作品がいくつも溜まったら、次はポートフォリオを作成しましょう。
簡単にポートフォリオが作成できるツールもたくさんあるため、最初はそれらを使ってもいいかもしれません。

ただし、Webデザイナーはサイトの専門職とも言える職種なので、ある程度経験値ができたら、ポートフォリオサイトは1から自作することをおすすめします。

実際に独学して難しかった点とその乗り越え方

実際に独学して難しかった点とその乗り越え方

エラーが解消できない・モチベーションを保てない

独学での学習中に辛い・難しいと考えるのは、

  • モチベーションを保つこと
  • エラーでつまずいて解決できないこと

の2点です。

エラーの原因は、単純なスペルミスだったり、本や動画の情報が古かったり、アレンジとして組み合わせたプログラムと干渉してしまったりと様々ですが、独学の場合その原因を自分で突き止めなければいけません。

つまずいた時に乗り越えた体験談

実際に独学していた時は、

  • Photoshopが思い通りに動かない
  • CSSの拡張言語(Sass)の導入でエラーが起きる
  • CSSをイメージ通りに実装できずに頻繁につまずく

などで挫折しました。

Google検索して解決すれば良いですが解答になかなかたどり着けないと、モチベーションが大きく下がりました。

解決方法
一旦違う勉強に移るか、違う解決法を考えたり、もう一度最初からやり直したりすることで再起しました。

具体的には、CSSのGrid Layoutという機能が上手くできずググっても解決しなかった時にはFlexboxという違う方法での解決を試みたり、JavaScriptの応用でつまずいたら、基礎の理解が甘かったのかもと1に戻ったりしました。

WordPressの勉強中分からなくて投げ出したくなった時には、Photoshopの学習に移るなどもしました。

モチベーションを保つ方法

独学学習で挫折した人の話を聞くと、大体は分からないことにつまずいて、調べても解消せずに嫌気がさして投げ出してしまうことが多いです。

他にも、1人で勉強しているからモチベーションを保てない人も少なくありません。

解決方法
この解決方法は、ブログやSNSで学習状況を発信することです。

学習の忘備録としてはもちろん、つまずいたことやエラーが起きたこと、解消したことを書けば、未来の自分や同じエラーを起こした人の役にも立ちます。

また、SNSで発信することで同じような学習者と繋がりができ、分からない部分を教え合うことも可能です。

画像に alt 属性が指定されていません。ファイル名: 7a7cc06bbc89b48d02b88b72121b1ced.png

「HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】


✔受講生の97%が未経験
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能
通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

webデザイナーになるためにスクールで学習することと独学で学習することの違い

webデザイナーになるためにスクールで学習することと独学で学習することの違い

スクールで学習するのと、独学で学習することの最大の違いは、大きく2つあります。

メンター(先生)がいるかどうか

1つ目は、分からない時にすぐに教えてくれる人がいるかどうかです。

スクールでは基本的にメンターと呼ばれる指導者が常駐していることが多く、答えやヒント、思考方法を教えてくれます。

独学の場合オンラインで質問できるサービスはありますが、答えを得るまでに時間がかかったり、質問の仕方が分からず伝わらなかったりすることも少なくありません。

独学で挫折する人が多い原因の1つです。
またスクールで学習する場合、受講生同士の交流があるため、お互い励みになったりモチベーションを保つ要因になります。

スクールには就職支援があることが多い

より重要なのは転職・就職です。
スクールで学習すると、多くの場合転職・就職支援を得ることができるのが1番のメリットです。

DMM WEBCAMPは、転職・就職保証型のプログラミングスクールです。

就職支援のあるスクールは多くありますが、受講完了後3ヶ月以内に転職・就職できなかった場合は全額返金するという業界初の「保証」システムとなっています。

未経験者や初心者にももちろん適用されますので安心してください。

スクールでの学習にはお金がかかりますが、就職するまでの期間を考えると、独学で節約するよりも、その分早く就職してスクールにかかったお金を稼ぐ方がコストパフォーマンスが良く、おすすめです。

まとめ:HTML・CSSをマスターしてWebデザイナーになろう!

今回「WEBCAMP NAVI」では、以下の内容について解説しました。

  • Webデザイナーに必要なスキル
  • スキルを身につける4つのステップ
  • 学習する際の注意点や挫折した際の乗り越え方

Webデザイナーになるためには、HTML・CSSをマスターすることが始めの一歩です。
今回紹介したサイトや参考書で学習を進めてみてください。

もちろん、誰かに頼ることも選択肢の一つです!
独学は難しいな…と思ったら、学習を諦めずにスクールへ通うことも検討してみてください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5