この記事はこんな方におすすめです
・Webデザイナーに独学でなりたい方
・独学でWebデザイナーを目指す勉強法を知りたい方
この記事では、独学でWebデザイナーになるための勉強法について解説します。
「独学でもWebデザイナーになれるの？」
「独学でWebデザインを学びたいけど、何から手をつけたらいいかわからない」
そんな方はぜひご覧下さい。
ざっくりと当記事の内容をまとめると以下です。
- 独学でもWebデザイナーはなれるけど大変ということ
- Webデザイナーになるために学ぶべきスキル
- 独学でWebデザイナーになるための勉強法
「独学でもWebデザイナーになれますか？」→なれるけど道は険しい
「独学でもWebデザイナーになれますか？」
そんな疑問を頂くことがちょこちょこあります。
そして、答えとしてはこう。
独学でもWebデザイナーはなれるが、人一倍の努力が必要。
独学のなにが大変かというと、圧倒的に挫折率が高いことにあります。
つまり、Webデザインを学ぶモチベーションが保ちにくいということです。
その一方で、たとえばスクールに通った場合の勉強法を考えてみると
- Webデザイナーを目指す同志がいる
- 講師が熱心に教えてくれる
- スクールによっては就職サポートがある
と、至れり尽くせり。
しかし、一般的にプログラミングやWebデザインのスクールは授業料が高額です。
「Webデザインを学びたい。でもスクールに通うお金はない」
そんな方はこの記事で書いている勉強法で独学で進めることになります。
Webデザイナーになるために学ぶべきスキル
勉強法を解説する前に、Webデザイナーに求められるスキルについておさえておきましょう。
Webデザイナーといっても幅広いですが、0から1人でWebサイトを作ると考えた場合、必要なスキルは以下の通りです。
- デザインスキル
- デザインツールのスキル
- HTML、CSS（コーディング）のスキル
これらに加えて、Webデザインの中でもとくにプログラム関係をしたい人はJavaScript・PHPといった言語のスキルも必要です。
では、さきほどあげた3つのスキルをどのようにして独学で勉強するのか。
次より解説します。
独学でWebデザイナーになるための勉強法
- デザインスキル
- デザインツールのスキル
- HTML、CSSのスキル
Webデザイナーになるには、最低でもこれら3つのスキルを学ばなければいけません。
どれから勉強しても大丈夫ですが
「何からしたらいいのかわからない」
という人は、上から順に勉強を進めていくとよいでしょう。
デザインスキルについて
ここでいうデザインスキルとは、Webサイトを1からデザインするスキルのことを言います。
デザインスキルが身につけば、以下のようなことが出来るようになります。
- ロゴ・バナーの作成
- 配色
- Webサイトのレイアウト
デザインスキルの勉強法
- 参考書を読む
- 実際にあるWebサイトを参考にする
これら2つがデザインを独学する主な勉強法です。
とはいえ、デザインのスキルというのはなかなか身につくものではありません。
多くのデザインに触れる。
たくさんWebサイトを作る。
実践を積むことがスキル向上への最短ルートです。
デザインスキルについては「勉強しよう！」と意気込まずに、
Webサイトをつくっていくと自然に身についていくスキルだと認識しておきましょう。
デザインスキルの勉強に役立つ参考書・サイト
▼ジャンルごとのデザイン、トレンドのデザインについて学べます。Webサイトを作るときのお手本に
▼デザイン4つの原則がわかりやすくまとまった参考書。デザイン未経験の方に最適です
▼実在するサイトから印象・ジャンルごとに探せる便利サイト
デザインツールのスキルについて
Web業界にといて、デザインツールといえば以下2つが代表格です。
- Photoshop（フォトショップ）
- Illustrator（イラストレーター）
それぞれフォトショ・イラレと略されて呼ばれるのが一般的です。
僕の経験談として「フォトショやイラレは使えますか？」という質問を面接の中でよく受けました。
ですので、基本操作だけでも勉強しておくとよいでしょう。
また、制作の現場ではワイヤーフレームやデザインカンプと呼ばれる資料を作成するさいにフォトショ・イラレを使います。
「ワイヤーフレーム」
Webサイトのレイアウトを示した資料のこと。会社によってはディレクターが作成する場合もある。
「デザインカンプ」
Webサイトの見本デザインのこと。デザイナーが手掛けたカンプを元にしてエンジニアがWebサイトを作るケースが多い。
デザインツールの勉強法
ツールの勉強については、実際に使ってみることが一番です。
基本操作がまとめられた参考書・ネットを片手にどんどん触ってみましょう。
また、イラストを描く・ロゴを作るといったこと以外は基本的にフォトショで可能です。
フォトショ・イラレはどちらも有料ツールですが、まずはフォトショから始めてみてはどうでしょうか？
ちなみに、フォトショ単体であれば価格はお手頃です。
- 実在するサイトのデザインカンプを作る
- 自分で考えたサイトのデザインカンプを作る
ある程度ツールの操作になれたら、上のような演習をしてみましょう。
デザインツールの勉強に役立つ参考書・サイト
▼Photoshop・Illustratorどちらも網羅した基本操作の参考書。実際にツールにふれながらスキルアップできます
▼Photoshopの画面の見方や基本操作が学べるサイト。まったくさわったことない人向け
HTML・CSSのスキルについて
WebサイトはHTML・CSSとよばれるコードによって書かれています。
家でたとえるなら
- 基礎や土台、柱：HTML
- 壁紙や塗装：CSS
という感じ。
Webサイトの構造を決めるのがHTML、見た目のデザインや装飾を行うのがCSSと覚えておくとよいでしょう。
「Webサイトを作ること = HTML・CSSを書くこと」といっても過言ではないため、力を入れて勉強すべきスキルです。
HTML・CSSの勉強法
まず、構文の書き方やHTML・CSSのルールを知る必要があります。
そういった基礎学習はサイトや参考書でおこないましょう。
見るだけではなく、実際に手を動かして勉強できる環境がよいですね。
また、基礎学習が進んできたら
- 存在するWebサイトの模写をしてみる
- 自分で仮のサイトを作ってみる
といった演習にうつるのがおすすめです。
「文字を上下左右中央に配置するにはどうしたらいいんだろうか？」
「3つの要素を等間隔で1行に並べたい」
実際にサイトを作っているとそういった場面になんども出くわします。
参考書をみながら、ネットで検索して解決策を調べることでよりスキルアップにつながりますよ。
また、自身のWebサイト作成は就職活動で絶対に必要なポートフォリオ作成に役立つのでぜひ挑戦して下さい。
HTML・CSSの勉強に役立つ参考書・サイト
▼HTML・CSSの基礎からWebデザインの基本までおさえられる良参考書です
▼よく使う構文・テクニックを初心者向けに解説しています
▼月額1,000円ほどで学び放題のサイトです。無料で勉強できる部分もあります
▼動画をみながら学べるサイトです。高レベルなテクニックまで学べます
▼実際にProgate（プロゲート）を使ってみた感想をまとめた記事もあります
Webデザインの独学は結局何からしたらいい？
Webデザイナーになるために必要なスキル、そしてそれらのスキルの勉強法については理解頂けたかと思います。
最後は
「で、結局何から手をつけたらいいの？」
という疑問にお答えします。
結論からいうと、興味のあるスキルから学んでいきましょう。
その方が楽しいですし、モチベーションが保ちやすいからです。
ただ、将来的になりたい職種を思い描けると力を入れて独学すべきスキルがはっきりしてきますよ。
重点的にのばすべきスキルが明確になっていると、勉強は効率的に進むためいいことづくめです。
Webデザイナーは細かくわけると3つに職種がわかれますが、
これについては以下の記事で解説していますので知らない方はご覧下さい。
-
-
完全未経験からWebデザイナーになるには？やるべきことを解説【筆者経験談】
続きを見る
デザイナーになりたい人
Webサイトのデザインやレイアウトのデザインを考えるのがデザイナーの仕事です。
「HTML・CSSといったコードを書くよりデザインをしたい」という方はデザイナー志望ということになりますね。
デザイナー志望の人、つまりデザイナーになりたい人は以下のスキル・知識を重点的に伸ばしていきましょう。
- デザインツール
- Webでよく使われるデザイン
- トレンドのデザイン
たとえばトレンドのデザインでは、レスポンシブデザインやハンバーガーメニューが流行りです。
未経験者として就職するさいにも、トレンドのデザインは知らないでは通用しません。
ですので、しっかり学んでおきましょう。
また、ハンバーガーメニュー1つをとっても
- メニューが上から出てくる
- メニューが左、もしくは右から出てくる
- メニューが画面全面に出てくる
など、さまざま。
そういったときは「なんとなくこうした」ではなく、しっかりデザインの根拠をもって取り組めるとよいですね。
ココがポイント
・デザイナー志望の人はPhotoshop、Illustratorをマスターしよう
・「なんとなく」「見た目がカッコイイ」からという理由ではなく、説得力のあるデザインが出来るようになろう
エンジニアになりたい人
「HTMLやCSSを使ったコーディングがしたい」
「WebアプリやWeb開発をいずれはしてみたい」
そんな方はWebデザイナーの中でもフロントエンドエンジニア・バックエンドエンジニアという職種を目指すことになります。
エンジニアの仕事としては、デザイナーが仕上げたデザインを起こし、実際のWebサイトにするのが主な業務。
また、ときにはWebの予約システムをつくったり、ショッピングサイトの仕組みをつくったりもします。
エンジニア志望の人がのばすべきスキルは以下。
- HTML、CSS
- JavaScript
- PHP
- Webサイト作成用ツール（Dreamweaverなど）
まずは、HTMLとCSSを完璧にしましょう。
そして、かんたんなWebサイトを作れるレベルになったら、JavaScript・PHPといったプログラミング言語も学ぶとよいですよ。
JavaScriptを学べば、高度なアニメーションをWebサイトに組み込めます。
PHPを学べば、データベースと連携して、AmazonのようなECサイトを作れます。
HTML・CSSだけであれば、デザイナーの人でも出来る人は多くいます。
ですから、それ以外のスキルを身につけて自身の強みにしておく必要があるのです。
ココがポイント
・エンジニア志望の人はまず、HTMLとCSSを完璧にしよう
・HTML+CSSだけではスキルが不十分。JavaScriptやPHPなどのプログラミング言語にも挑戦しよう
・コードはとにかく手を動かして勉強するのが大切！
まとめ：Webデザイナーは独学でもなれるけど大変です
繰り返しになりますが、独学だけでWebデザイナーを目指すのはとても大変です。
モチベーションを自分で保ちながら、勉強できる環境を自分でつくらないといけません。
普段から自宅で勉強できる人はいいでしょうが、そうでない人は十中八九挫折してしまうことでしょう。
ちなみに僕の場合は、独学＋プログラミングスクールに通うことで効率的に勉強を進めました。
結果、ちゃんとWebデザイナーに転職もできています。
お金はかかりますが、Webデザイン経験者から教えてもらえるスクールはとても貴重です。
ぜひ一度、スクールに通うことも検討して下さいね。
以上「【何からしたらいい？】未経験者が独学でWebデザイナーになるための勉強法！」でした！
人気の関連記事
▼おすすめのプログラミングスクールについてまとめた記事です
-
-
大阪でおすすめのプログラミングスクール5つ！現役スクール生が厳選
続きを見る
