![](https://webdesign-mame.com/wp-content/uploads/2023/08/dcf2f6ea5c924b6cf7611a3f15762e8f-150x150.png)
Webデザイナーになりたい!でも、スクールに通えるお金はない…
![](https://webdesign-mame.com/wp-content/uploads/2023/07/f3639217afe0a10d0f4576849ee256e2-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2023/07/f3639217afe0a10d0f4576849ee256e2-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2023/07/f3639217afe0a10d0f4576849ee256e2-1-150x150.png)
美術は好きだったから、Webデザインも独学で習得できないかな…?
そんな悩みを解決します!
たしかに独学でWebデザインを習得出来たら、出費をグッと抑えられますよね。
独学でWebデザインを勉強する場合、「何を、どれくらい、どんな風に」実践するべきかを明確にする必要があります。
うやむやなまま始めると、大切な時間や労力をムダにしてしまうだけでなく、
![](https://webdesign-mame.com/wp-content/uploads/2023/08/dcf2f6ea5c924b6cf7611a3f15762e8f-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2023/08/dcf2f6ea5c924b6cf7611a3f15762e8f-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2023/08/dcf2f6ea5c924b6cf7611a3f15762e8f-150x150.png)
自分はWebデザインや自宅で働くスキルは身につかないのでは…
と自己肯定感が下がるきっかけになってしまうかもしれません。
この記事では、ほぼ独学でWebデザイナーになった主婦が「Webデザインの独学」について、オススメな勉強方法をお伝えします。
↑読みたい項目をクリックするとジャンプします。
【結論】独学でもWebデザインは出来る!
結論からお伝えしますと、独学でWebデザインのスキル習得は可能です
ただし、独学で稼げるWebデザイナーになるには、以下の課題があります。
- モチベーションの維持が難しい
- わからないことを質問できない
- 適切な方法で学ばなければ身につかない
Webデザインは、実は色んなスキルの組み合わせです。
デザイン業界のルールを理解している、デザインツールの操作ができる、クライアントの意図を汲み取ってデザインできる、デザインを実装できるなど、複数のスキルをそれぞれ養う必要があります。
養ったスキルが組み合わさり、初めて仕事にチャレンジできます。
この一連の勉強は、適切な勉強戦略と勉強方法をもって初めて身に付きます。
つまり、なんとなく勉強しているだけでは身につかないんです。
特に子育て中のママがWebデザインを身につけるには勉強時間の確保もひとつのハードルになります。
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
一人で勉強を継続するのは想像以上に大変…
以上のことから
Webデザインを独学で身につけるのは可能。ただし、超えるべき課題へのしっかりとした対策が必要
といえます。
Webデザインのスキルの習得までにかかる時間
Webデザイナーとして働くための前提として、「最低3ヶ月はかかる」ことを認識する必要があります。
ここでいう「働く前提のスキル」はオリジナルバナーの作成を指しています。
オリジナルバナー作成ができれば…デザインの基礎ができている+バナーから発展して、LINEのリッチメニュー・youtubeのサムネイル・LPのヘッダー画像など、活動の幅を広げていける基盤となるからです。
*制作会社への転職や就職は含まれていません
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
私自身、初案件はバナー作成でした!
この3時間という数字は、学習ペースや前提知識、使用するリソースによって変わりますが、根拠は以下の理由です↓
基礎知識の習得 (1ヶ月)
- デザインの基本原則: コントラスト、バランス、配色、タイポグラフィなどの基本概念を理解
- ツールの習得: Adobe PhotoshopやIllustratorの基本操作の学習
既存のデザインを真似して分析する (1ヶ月)
- 模倣とリバースエンジニアリング: 既存のバナーを模写・トレース
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
実際のデザインプロセスやツールの使い方に慣れることができます
オリジナルバナーの制作 (1ヶ月)
- オリジナルバナーの作成: 基礎知識とツールの操作に慣れた後、オリジナルバナーを作成します。
ここでは、自分のアイデアを形にする力を養います。
ポートフォリオサイトに載せるバナーを数点作成します。
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
ポートフォリオサイトは、案件に応募するために必要です。
以上の事から、「Webデザインスキルの習得には最低3ヶ月はかかる」と言うことが出来ます。
初心者がWebデザインのスキル習得までの独学勉強法5ステップ
それでは、独学でWebデザインを勉強するための具体的な5ステップを紹介します。
↑読みたい項目をクリックするとジャンプします。
デザインの基本を学ぶ
- 色の使い方
-
- 色の組み合わせ:どの色が一緒に使うと見た目が良くなるかを学ぶ
- 補色:お互いに引き立て合う色の組み合わせを理解する
- 類似色:似た色を使って統一感を出す方法を学ぶ
- 文字の選び方と使い方
-
- フォントの選び方:どんなフォントを使うと読みやすくなるかを学ぶ
- 文字の大きさ:文字のサイズをどのように決めるかを理解する
- 配置の仕方
-
- 配置のルール:デザインの要素をきれいに並べるためのルールを学ぶ
- 余白の使い方:デザインに適度な空間を作って見やすくする方法を理解する
デザインツールを習得する
- Photoshop : 基本的な操作、レイヤー、テキスト、画像編集の方法を学ぶ。
- Illustrator : ベクター画像の作成、シェイプ、パスの操作方法を学ぶ。
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
「ツールの使い方をマスターする!」より「このツールではこんなことができるんだ〜」くらいの気持ちでいてください。
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
PhotoshopもIllustratorも機能が無限♾️で使いこなそうとすれば年単位で時間が必要なほどなんです💡
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
プロのデザイナーもデザインで必要な機能だけしか操作は覚えていないですし、わからなければその都度調べながら進めるでオッケーです✨
まだAdobeに契約していない方はこちら
![](https://webdesign-mame.com/wp-content/uploads/2023/11/adobe-cc-100.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2023/11/adobe-cc-100.jpg)
既存のデザインを真似して分析する
- 良いバナーを選ぶ : インターネットで魅力的なバナーを見つける。
- 真似して作る : 同じバナーをPhotoshopやIllustratorで再現してみる。
- 分析する : なぜそのデザインが効果的か、どの要素が重要かを考える。
模写・トレースに特化!すぐに始められる💡
トレース&模写で学ぶ デザインのドリル
書面で使用されている素材(写真やイラストなど)がダウンロードできて素材を探す手間が不要、題材・フォント・カラーもまるッと掲載されているので、すぐに始められます✨
思わずクリックしたくなる バナーデザインのきほん
私の最推しの一冊。生涯忘れない!
伝えたいことがしっかり相手に伝わるデザインを学ぶことができます。
この本が好きすぎて1記事書いちゃいました…!
![](https://webdesign-mame.com/wp-content/uploads/2023/10/4092ed98e9035652d4c9ca9441701ed7-3.png)
![](https://webdesign-mame.com/wp-content/uploads/2023/10/4092ed98e9035652d4c9ca9441701ed7-3.png)
オリジナルバナーをデザインする
オリジナルバナーのお題を決めてバナーに載せるテキストを考えます。
テキストや画像を配置します。
あしらいを足したり、文字を読みやすく調整します。
バナーお題で迷ったらこちら
![](https://webdesign-mame.com/wp-content/uploads/2023/12/87dc4eef8e2ce22cfdd45ab811582cad.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2023/12/87dc4eef8e2ce22cfdd45ab811582cad.jpg)
フィードバックを受けて改善する
デザインコミュニティやSNSでバナーを共有し、意見を求める。
受けたフィードバックを基に、自分のデザインの強みと弱みを分析する。
フィードバックを反映して、バナーを再デザインする。
プロのデザイナーからデザインに対するフィードバックを受けることができるサイト
![](https://webdesign-mame.com/wp-content/uploads/2024/07/7c39337aa5ebaf6d3cfea920710b3be6-1024x560.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/7c39337aa5ebaf6d3cfea920710b3be6-1024x560.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
プロに添削してもらうことで自分の課題が明確になってスキルアップに直結します!
バナー作成後はポートフォリオ!
オリジナルバナーが数点作れたら、ポートフォリオサイトを用意します。
簡単にポートフォリオサイトを作れるforrioがオススメです◎
![](https://webdesign-mame.com/wp-content/uploads/2024/07/e66803219cf5fdd06bcabaa94d9759dc-1024x464.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/e66803219cf5fdd06bcabaa94d9759dc-1024x464.jpg)
forrioはデザインだけでなく、詳細を書けるのでバナーのコンセプトや制作時間なども伝えられます。
![](https://webdesign-mame.com/wp-content/uploads/2024/07/583d01840ca471a895a77fb9289371a0-1024x741.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/583d01840ca471a895a77fb9289371a0-1024x741.jpg)
ポートフォリオサイトが用意できたら、案件ゲットのために動き出します。
オススメはココナラ!
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
![](https://webdesign-mame.com/wp-content/uploads/2024/06/850c7612116999490846136e772ab7fd-1-150x150.png)
私も初案件はココナラでゲットしました!
ココナラについて詳しく書いてます
![](https://webdesign-mame.com/wp-content/uploads/2023/10/74b08d651b726b348755b8680417ef96-1.png)
![](https://webdesign-mame.com/wp-content/uploads/2023/10/74b08d651b726b348755b8680417ef96-1.png)
独学だと不安だ…と感じる方にオススメのスクール
![](https://webdesign-mame.com/wp-content/uploads/2024/07/c18e581b2cadb5004691835e03f910b1-1024x522.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/07/c18e581b2cadb5004691835e03f910b1-1024x522.jpg)
- 最短でWebデザイナーになりたい
- スクール選びに失敗したくない
- 独学だと不安…挫折したくない
- 仲間と一緒に学びたい
- 案件サポートもしてほしい
そんな人はSHElikes がオススメです。
こちらの記事もどうぞ
![](https://webdesign-mame.com/wp-content/uploads/2024/01/b7490454db9cbc52c0ac04e622f19a9b.jpg)
![](https://webdesign-mame.com/wp-content/uploads/2024/01/b7490454db9cbc52c0ac04e622f19a9b.jpg)
\ 無料体験レッスンの日程をみてみる /
まとめ
この記事では、Webデザインを独学で習得することについて以下の点からお伝えしました。
- Webデザインは独学で身に着けることが可能
しかし、適切な勉強法・時間の確保・モチベーション維持の問題を解決する必要がある - Webデザインが出来るようになるには、最低3ヶ月の勉強期間が必要
- 独学でWebデザインを身につけるには…
デザインの基本
ツールの使い方
既存のデザインの真似→分析
オリジナルバナーの作成
フィードバックを受けて改善
5ステップが効果的
Webデザインを独学で身に着けるのは確かに大変です。
しかし、適切な勉強法でしっかり勉強時間を確保出来れば、身に着けることが可能です。
もし一人でやりきる自信がない場合は、オンラインスクールなどでサポートしてもらうことのも一つの手段です。
あなた自身に最も合うと思ったやり方で、ぜひWebデザインを身に着けてくださいね。