【2024年】独学でWEBデザイナーになれる?

【2024年】独学でWEBデザイナーになれる? WEBデザイン
まめこ
まめこ

独学でもWEBデザイン学べるし、独学で学ぶことにしたよ!

まめしば
まめしば

今は情報があふれているし、WEBデザイナーは特に資格もいらないから

簡単になれるイメージだよね。

でも「企業で活躍できるデザイナー」になるためにはそれなりの経験が必要だし、

誰かからのフィードバックが必要だよ。

フィードバック?

プロからのフィードバックをもらわないと、自分のデザインが合っているのかわからないでしょ?つまり「なんとなく」で作ってしまっているなんちゃってWEBデザイナーになってしまうんだよ。

それは…恥ずかしいかも

結論からいうと、独学でWEBデザイナーにはなれるけど、プロからのデザイン添削は必須!ってことだね。

【2024年】独学でWEBデザイナーになれる?

近年、WEBデザインの情報があふれていて独学でもWEBデザインを勉強する人が増えています。SNSでも多くの駆け出しのWEBデザイナーの方がいます。

結論から言うと、独学でもWEBデザイナーにはなれます。

しかし中には残念ながら文字を並べただけのバナーやイメージと違う画像をあわせたデザインなどが多くみられます。

それはプロからのデザイン添削やフィードバックがなく、自分のイメージだけで作り上げられたものである可能性が高いです。

そのため、駆け出しのWEBデザイナーこそプロからのフィードバックや添削が必要です。そうでなければ、自分よがりのデザインになってしまい、間違いに気づかない場合があります。

独学でWEBデザインを学ぶには?

独学でWEBデザインを学ぶにはどうしたらよいのでしょうか。

まずはここまでやってみよう!という項目を以下にまとめました。

  1. 学ぶ環境を準備する
  2. ソフトの使い方を覚える
  3. バナーを模写する
  4. オリジナルバナーを作成する
  5. LPを模写する
  6. ワイヤーフレームを作成する
  7. デザインカンプを作成する
  8. コーディングする

バナーだけ作れたらいいんじゃないの?

バナーだけだと単価が低いから、疲弊する可能性があるよ…

1.学ぶ環境を準備する

まず、WEBデザインを学ぶにあたって、環境を整えましょう。

2.ソフトの使い方を覚える

パソコンや書籍を準備したら、Adobeのソフトである、illustrator、photoshopをダウンロードしましょう。(有料)

CANVAじゃだめなの?

最初はCANVAでもいいけど、プロとしてWEBデザインをやっていくならillustrator、photoshopはマストだよ!

\Adobeをお得に契約しよう!/

illustratorはロゴやチラシ、名刺などを作る際に使用することが多いです。初心者さんはillustratorから勉強するのも◎(まずはデザインを楽しむことから始めよう!でないと挫折する人多いです…)

3.バナーを模写する

バナーを模写してみよう!

ソフトの練習をしながら実際にあるバナーを模写していこう!

【参考バナーサイト】

・BANNER LIBRARY

【総数5894件】BANNER LIBRARY | デザインの参考に!おしゃれなバナーだけを集めたギャラリーサイト
バナーデザインの参考になる、おしゃれで良質なバナーデザインをまとめたギャラリーサイト、BANNER LIBRARYです。バナー広告から特集バナーまで、幅広いジャンルから収集しています。バナー作成の練習やWebサイトデザインのアイデアに繋がる...

・バナー広場

バナー広場 | バナーデザインのまとめサイト!デザイン制作の参考に活用してください
日本のバナーデザイン収集サイト

・ピンタレスト

Pinterest
Discover recipes, home ideas, style inspiration and other ideas to try.

バナーを模写することのポイントはただ綺麗に模写することだけが目的ではありません。

模写することでデザインの引き出しが増え、余白間やフォントの使い方、画像の選定などの勉強になるからです。

そのため多くのデザインを模写することでデザイン力がアップします!

4.オリジナルバナーを作成する

架空のワイヤーフレームを作成してオリジナルバナーを制作しましょう。

ワイヤーフレームを作るなら、figmaがおすすめです!現場でも使われています。

Figma: The Collaborative Interface Design Tool
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, ...

5.LPを模写する

LP(ランディングページ)を模写していきましょう!

【参考LPサイト】

・LP ACHIVE

LPの最新デザインまとめ参考サイト|LP アーカイブ
クオリティの高いランディングページ(LP)を集めました。リスティング広告や楽天市場、ヤフーショッピングでランキングに入っている様なハイクオリティのデザインまとめサイトです。毎日更新しているので、昔のLPから最新のLPまでデザイン制作の参考に...

・イケてるランディングページデザイン集めました

イケてるランディングページデザイン集めました
カッコいい、可愛い、イケてるランディングページのデザインを集めました。 ランディングページ制作をする前に参考ランディングページを見つけよう。

6.ワイヤーフレームを作成する

LPもfigmaでワイヤーフレームを作成しよう!

ワイヤーフレーム(wireframe)は、デザインのレイアウトやwebサイトのコンテンツの配置を定めた設計図のことです。「枠」「骨組み」という意味があり、ワイヤーフレームはシンプルな線や図で構成されています。

7.デザインカンプを作成する

デザインカンプとは、デザインの完成見本のことです。Design Comprehensive Layoutの略で「カンプ」と呼ばれることもあります。

デザインカンプは、デザインの構成案ワイヤーフレームを基に作られます。構成案やワイヤーフレームの段階では色や画像が決まっていなかったものを、デザインカンプでは完成までをイメージして詳細まで決定していきます。

photoshopでファーストビューは作成して、figmaで作成したデザインカンプに配置します。

左右の余白間や配置など気をつけて並べていきましょう!

8.コーディングする

あとはデザインカンプに合わせてコーディングしていきます。

ここまで出来たらあとは応用です。

ただし、やはりプロからのデザイン添削やフィードバックはデザインを仕事にしていくなら必ず必要になります。

まとめ

独学でもWEBデザイナーになれる!でもプロからのフィードバックやデザイン添削は必要です。

でないと、自分よがりのデザインになってしまう可能性があります。

コメント