![まめこ](https://www.mameshibadesign.com/wp-content/uploads/2023/04/c6b60a2e738d0e7296945d1ce2f6f603-150x150.jpg)
独学でもWEBデザイン学べるし、独学で学ぶことにしたよ!
![まめしば](https://www.mameshibadesign.com/wp-content/uploads/2023/09/cropped-mameshiba300-150x150.jpg)
今は情報があふれているし、WEBデザイナーは特に資格もいらないから
簡単になれるイメージだよね。
でも「企業で活躍できるデザイナー」になるためにはそれなりの経験が必要だし、
誰かからのフィードバックが必要だよ。
![](https://www.mameshibadesign.com/wp-content/uploads/2023/04/c6b60a2e738d0e7296945d1ce2f6f603-150x150.jpg)
フィードバック?
![](https://www.mameshibadesign.com/wp-content/uploads/2023/09/cropped-mameshiba300-150x150.jpg)
プロからのフィードバックをもらわないと、自分のデザインが合っているのかわからないでしょ?つまり「なんとなく」で作ってしまっているなんちゃってWEBデザイナーになってしまうんだよ。
![](https://www.mameshibadesign.com/wp-content/uploads/2023/04/c6b60a2e738d0e7296945d1ce2f6f603-150x150.jpg)
それは…恥ずかしいかも
![](https://www.mameshibadesign.com/wp-content/uploads/2023/09/cropped-mameshiba300-150x150.jpg)
結論からいうと、独学でWEBデザイナーにはなれるけど、プロからのデザイン添削は必須!ってことだね。
![](https://www11.a8.net/0.gif?a8mat=3ZJVN1+8ZAF16+2F9E+C1TA9)
![](https://www17.a8.net/0.gif?a8mat=3ZJVN1+8ZAF16+2F9E+BZGEQ)
【2025年】独学でWEBデザイナーになれる?
![](https://www.mameshibadesign.com/wp-content/uploads/2024/01/98f3808b665f68a4a73f74d6389b94e9.jpg)
近年、WEBデザインの情報があふれていて独学でもWEBデザインを勉強する人が増えています。SNSでも多くの駆け出しのWEBデザイナーの方がいます。
結論から言うと、独学でもWEBデザイナーにはなれます。
しかし中には残念ながら文字を並べただけのバナーやイメージと違う画像をあわせたデザインなどが多くみられます。
それはプロからのデザイン添削やフィードバックがなく、自分のイメージだけで作り上げられたものである可能性が高いです。
そのため、駆け出しのWEBデザイナーこそプロからのフィードバックや添削が必要です。そうでなければ、自分よがりのデザインになってしまい、間違いに気づかない場合があります。
独学でWEBデザインを学ぶには?
![](https://www.mameshibadesign.com/wp-content/uploads/2024/01/140f92454b997980fd86080166ddca72.jpg)
独学でWEBデザインを学ぶにはどうしたらよいのでしょうか。
まずはここまでやってみよう!という項目を以下にまとめました。
- 学ぶ環境を準備する
- ソフトの使い方を覚える
- バナーを模写する
- オリジナルバナーを作成する
- LPを模写する
- ワイヤーフレームを作成する
- デザインカンプを作成する
- コーディングする
![](https://www.mameshibadesign.com/wp-content/uploads/2023/04/c6b60a2e738d0e7296945d1ce2f6f603-150x150.jpg)
バナーだけ作れたらいいんじゃないの?
![](https://www.mameshibadesign.com/wp-content/uploads/2023/09/cropped-mameshiba300-150x150.jpg)
バナーだけだと単価が低いから、疲弊する可能性があるよ…
1.学ぶ環境を準備する
まず、WEBデザインを学ぶにあたって、環境を整えましょう。
2.ソフトの使い方を覚える
パソコンや書籍を準備したら、Adobeのソフトである、illustrator、photoshopをダウンロードしましょう。(有料)
![](https://www.mameshibadesign.com/wp-content/uploads/2023/04/c6b60a2e738d0e7296945d1ce2f6f603-150x150.jpg)
CANVAじゃだめなの?
![](https://www.mameshibadesign.com/wp-content/uploads/2023/09/cropped-mameshiba300-150x150.jpg)
最初はCANVAでもいいけど、プロとしてWEBデザインをやっていくならillustrator、photoshopはマストだよ!
![](https://www11.a8.net/0.gif?a8mat=3ZJVN1+8ZAF16+2F9E+C1TA9)
![](https://www17.a8.net/0.gif?a8mat=3ZJVN1+8ZAF16+2F9E+BZGEQ)
illustratorはロゴやチラシ、名刺などを作る際に使用することが多いです。初心者さんはillustratorから勉強するのも◎(まずはデザインを楽しむことから始めよう!でないと挫折する人多いです…)
3.バナーを模写する
バナーを模写してみよう!
ソフトの練習をしながら実際にあるバナーを模写していこう!
【参考バナーサイト】
・BANNER LIBRARY
![](https://design-library.jp/wp-content/themes/original-banner/assets/img/og_image.png)
・バナー広場
![](https://banner-hiroba.com/wp-content/uploads/2018/05/ogp.png)
・ピンタレスト
![](https://s.pinimg.com/images/facebook_share_image.png)
バナーを模写することのポイントはただ綺麗に模写することだけが目的ではありません。
模写することでデザインの引き出しが増え、余白間やフォントの使い方、画像の選定などの勉強になるからです。
そのため多くのデザインを模写することでデザイン力がアップします!
4.オリジナルバナーを作成する
架空のワイヤーフレームを作成してオリジナルバナーを制作しましょう。
ワイヤーフレームを作るなら、figmaがおすすめです!現場でも使われています。
![](https://cdn.sanity.io/images/599r6htc/regionalized/f1571b24788ba2f22638c19dabb1f8d13adcd64c-2400x1260.png?w=1200&q=70&fit=max&auto=format)
5.LPを模写する
LP(ランディングページ)を模写していきましょう!
【参考LPサイト】
・LP ACHIVE
![](https://rdlp.jp/lp-archive/wp-content/themes/lparchive/img/lp-archive_bnr.jpg)
・イケてるランディングページデザイン集めました
6.ワイヤーフレームを作成する
LPもfigmaでワイヤーフレームを作成しよう!
ワイヤーフレーム(wireframe)は、デザインのレイアウトやwebサイトのコンテンツの配置を定めた設計図のことです。「枠」「骨組み」という意味があり、ワイヤーフレームはシンプルな線や図で構成されています。
7.デザインカンプを作成する
デザインカンプとは、デザインの完成見本のことです。Design Comprehensive Layoutの略で「カンプ」と呼ばれることもあります。
デザインカンプは、デザインの構成案やワイヤーフレームを基に作られます。構成案やワイヤーフレームの段階では色や画像が決まっていなかったものを、デザインカンプでは完成までをイメージして詳細まで決定していきます。
photoshopでファーストビューは作成して、figmaで作成したデザインカンプに配置します。
左右の余白間や配置など気をつけて並べていきましょう!
8.コーディングする
あとはデザインカンプに合わせてコーディングしていきます。
ここまで出来たらあとは応用です。
ただし、やはりプロからのデザイン添削やフィードバックはデザインを仕事にしていくなら必ず必要になります。
まとめ
独学でもWEBデザイナーになれる!でもプロからのフィードバックやデザイン添削は必要です。
でないと、自分よがりのデザインになってしまう可能性があります。
![](https://www16.a8.net/0.gif?a8mat=3ZJVN1+8ZAF16+2F9E+C1TA9)
コメント