デザイナーになる方法 PR

【未経験でもなれる!】未経験の僕がWebデザイナーに独学でなった方法

【未経験でもなれる!】未経験の僕が独学でWebデザイナーになれた方法
記事内に商品プロモーションを含む場合があります。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。

Webデザイナーになりたいって思っても独学で転職できるのかわからない、本当になれるかどうかわからない。という声をよく耳にします。

僕は実際に約9年前に独学でWebデザイナーになって、現在ではWebディレクターをやっています。Webデザイナーは独学で十分なれる職業なので、実際に独学で勉強してWebデザイナーになるまでの方法をまとめました。

ずぼらなオッターはどんな人?

グラフィックデザイナー歴は12年で、現在Webディレクターとして働いていて9年前に独学でWebデザインを勉強し、スクールや学校に行くことなく、Webデザイナーとして現在では副業もやっています。Webデザインは大規模なコーポレートサイトデザインから、UIデザインや細かいものだとバナーのデザインは1,000本以上デザインしてきました。

この記事が役立つ人
  • 独学でWebデザイナーになりたいと思っている人
  • Webデザイナーになって転職したい人
  • Webデザイナーで副業を始めたい人
  • 実際に独学でWebデザイナーになった人の勉強法が知りたい人
【初心者にも!】Webデザイナー未経験者が副業で収入を得るまでに必要なこと
【初心者にも!】Webデザイナー未経験者が副業で収入を得るまでに必要なことこんにちは!現役のWebデザイナーのずぼらなオッター(@Otter_zubora)です。副業でWebデザインをやってみたい、Webデザイナーになって将来フリーランスになってみたい。という方は少なくないんじゃないでしょうか?そんな方に現役のWebデザイナーが副業で収入を得るまでに必要なことをまとめました。参考になれば嬉しいです。...

Webデザインを独学する前に準備するもの・必要なもの

パソコン(約12万円〜)

Webデザイナーになるためにはパソコンは最低限必要なものです。極端に言うとパソコンがあれば誰でもWebデザイナーにはなれるとも言えます。

OSはWindowsでも、Macでもどちらでも良いです。デザイナーはMacを使う人がかなり多いですがWindowsでも問題ありません。

しかし、私はMacをおすすめしています。なぜなら長持ちするし、シンプルなインターフェイスが心地良いからです。デスクトップ型でも、ノートブック型でもどちらでも良いですが、個人的には場所を選ばず使えるノートブックがおすすめで特にMac book Proを買っておけば後悔しないですよ。

デザインソフト(6,248円/月)

数多くのWebデザイナーが使うAdobe Creative Cloudが必要です。

Adobe Creative Cloudがあればデザインを作るPhotoshopやIllustrator、コーディングするためのDreamweaverや動画やアニメーション作成のAfter Effectsなど数多くのクリエイティブソフトが使い放題になります。

月々6,248円で20を超えるソフトを使い放題なのでトータルで見てみるとコスパは良いです。どうしても、費用がかけられないという方はPhotoshopのみを優先してPhotoshopだけのプランでもデザインは可能です。

Adobe Creative Cloudはこちらから

テキストエディタソフト(無料)

WebデザイナーはHTMLやCSSは最低限書ける様になっていたほうが良いのでテキストエディタは必要です。ただし、テキストエディタはフリーソフトで十分です。

私のおすすめはSublime Textというフリーソフトです。使い勝手がいいし、シンプルなUIがとても使い心地良いです。

インターネット回線の環境(約4,000円〜/月)

Webデザインをするにはインターネット回線はかならず必要になってきます。Webデザインをするのにネットにつながっていないっていうのはまずありえないので最低限インターネット回線は準備しておきましょう。

モバイルWiFiを使っている方もたまに見かけますが、回線が不安定なので光回線などを準備しておいたほうが良いです。

工事不要!インターネット使い放題【SoftBank Air】

マルチディスプレイ用モニター(なくてもOK)

独学でWebデザインを勉強し始めているうちに画面が1つだと効率が悪いことに気付きます。なぜならデザインを作りながらテキストエディタでコーディングしたり、デザインも色々同時に作成しているとウインドウだらけで画面がごちゃごちゃしてくるからです。

そのため別途ディスプレイを買っておくと、作業効率がぐんと上がります。一度マルチディスプレイを経験するとシングルディスプレイに戻ることができなくなりますよ。

マウス(なくてもOK)

ノートパソコンの場合は一応トラックパッドがありますがWebデザインをする上ではかなり使いにくいです。

キーボードで操作しながらトラックパッドはかなり使いにくいのでマウスがあったほうがうまく両手が使えるのでマウスはほぼ必須のアイテムです。僕のおすすめはMagic Mouseです。

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

Webデザイナーの勉強をしたい!と思っても実際には何を学べば良いのでしょうか?そこでまずはデザイナーの仕事範囲を元にどういうスキルが必要になるかまとめました。

Webデザイナーの仕事の範囲をまず知ることでどういうWebデザイナーを目指すか見えてきます。

にゃん助

Webデザイナーってデザインをしているだけじゃないの?

ずぼらなオッター

デザインだけじゃなくHTMLやCSSを書いたり、WebデザインでもWebサイト、バナー作成などデザインだけすればいいっていうわけでもないよ。

Webデザイナーの仕事範囲
  • Webデザイン(Photoshop,XD,Illustratorなど) ※必須
  • HTML/CSSのコーディング ※必須
  • PHPなどのプログラミング
  • WordPressの構築・運用・作成
  • SEOや数値分析のマーケティング
  • SASSを使ったコーディング
  • GitやGithubでのWebページの管理
  • FTPを使った管理
  • UI/UXデザイン
  • アプリデザイン

必須なのはWebデザイン、HTML/CSSの理解力です。コーディングができないWebデザイナーは少なくありませんが、出来たほうがいいですし正直必須だと感じています。

その他のPHP言語の知識やマーケティング、Gitの知識はあればより良いWebデザイナーになれますし、年収アップも見込めますが今回は未経験の方がWebデザイナーになるための独学の方法をテーマにしているのでまずは必須の2項目が必要なスキルです。

にゃん助

思ったよりもやることはいっぱいあるんだね…なんか無理そう…

ずぼらなオッター

そんなことないよ!一気にやらないと!と思うから大変なだけで1つずつゆっくり覚えれば独学でも十分覚えられるよ。

Webデザイナーになるために独学で勉強する方法

独学でWebデザイナーになる5つの勉強方法
  1. まずは基礎を書籍で学ぶ
  2. 自分の好きなWebサイトを10個リストアップする
  3. 好きなサイトを真似しながらWebデザインしてみる
  4. 自分でサイトをデザインする
  5. 学習サイトで更に深く学ぶ

独学する上ではまず最初に基礎はしっかり勉強しておきましょう。独学では書籍での学習方法が大きな味方になります。

まずはWebデザインの基礎を書籍で学ぶ

Webデザイナーになるために勉強しようと思ってもWebデザインとは何なのか、Webデザイナーになりたいけど何から手をつけたらいいかわからない状態になってしまいます。

そのためWebサイトの構造や仕組み、Webデザイナーとはどういう仕事なのかっていうことも書籍で基礎知識をとして知っておきましょう。

書籍によってまず広く知識をつけて、そのあと実践できる書籍でWebデザインを実際にする時に参考書として使うことをおすすめします。

にゃん助

本でも結構学ぶことができるもんなの?

ずぼらなオッター

そうだね!僕の場合は本を10冊くらい読んで勉強して実際にWebデザインをするようになったよ!本を見ながら実践するのが1番勉強になるね。

Webデザインの基礎を学べる本
Webデザインの仕組みを学ぶ本
HTMLとCSSを学べる本
created by Rinker
¥2,772 (2024/10/13 09:38:14時点 Amazon調べ-詳細)
Webデザインの実践に役立つ本

好きなWebサイトを10個見つける

Webデザインを勉強したいと思っている人の多くはWebデザインに興味があったり、Webデザインが好きな方ではないでしょうか?

まず様々なWebサイトを見て、自分はこういうサイトを作りたいと思うWebサイトを10個は見つけてください。

そのサイトのどこが好きで、どこが真似したいかというポイントを見つけましょう。本当に大好きなWebサイトなら「全部好き!」でも良いです。

僕も仲間のWebデザイナーの多くも様々なWebサイトを観察し、良いポイントを見つけることをしています。

にゃん助

現役のデザイナーも他のサイトを参考にしたりするの?

ずぼらなオッター

もちろんだよ!Webデザインは常に流行も変化していて、鮮度もあるよ。だから常に色々なサイトのデザインをみて参考になりそうなところを見つけているね!

Webサイトを真似してデザインする

Webデザインを始めたばかりの人の多くが失敗するのが自分の作るWebデザインにオリジナル性を求めすぎるところです。

まるっとWebデザインを真似するのはあまりよくないですが、新人Webデザイナーの頃は世の中にある良いWebデザインを参考にしてWebデザインをたくさん作ることが1番の勉強になります。

実際にスクショを取って、Photoshopなどでトレースしてデザインを起こしてみるのもとても良い勉強になります。文字の位置やレイアウトが実際に作ってみることで多くの「気付き」を得ることができます。

ふだん何気に見ていたWebサイトもこんなところに気を遣っていたんだっていう発見もありますよ。

にゃん助

真似ってパクっちゃってもいいの?

ずぼらなオッター

本当に使うWebデザインじゃないからまずは3くらいWebサイトをトレースしてみるとかなりいい勉強になるよ。

自分でWebサイトをデザインする

真似してデザインしたあとは実際に自分で1からWebサイトをデザインしてみましょう。

自分を紹介するWebサイトでも良いですし、自分のポートフォリオになるようなサイトでも良いです。特にコンテンツが決まっていないというなら架空の会社やサービス、商品でデザインしてみるのも楽しみながら勉強できますよ。

にゃん助

どんなWebサイトデザインを作るか悩むなあ。

ずぼらなオッター

そういうときは自分の好きな服のブランドや好きなレストランのWebサイトを作ってみるのが楽しいしおすすめだよ!

Photoshopの役立つ本
created by Rinker
エクスナレッジ
¥2,640 (2024/10/13 09:38:16時点 Amazon調べ-詳細)

オンラインの学習サイトでさらに独学して伸ばす

現在はプログラミングやコーディングをオンラインで学ぶことができます。今でも私がよく使っているのはUdemyとProgateです。数千円から学ぶことができるのでお手軽でおすすめです。

初心者からプロまでカバーできるとっても優秀なWebサービスなのでぜひ利用してみてください。

一通りWebデザインを作ってみてから基礎がわかった上でオンライン学習サイトなどでさらに学ぶと実践力も高めることができるのでおすすめです。

>/div>

\UdemyならWebデザイン学習も数千円からしっかり学べる!/

Udemyで詳しくみてみる

Webデザイナーになるために独学で勉強するメリット

にゃん助

そもそもオッターくんのように独学でWebデザインを勉強するのはメリットがあるの?

ずぼらなオッター

独学のメリット・デメリットを知った上で自分に合わせた学習プランを組むのがおすすめだよ!だからメリットをまず一覧にしました!

Webデザインを独学で勉強するメリット
  • 低コストで始められる
  • 仕事をしながらでも空き時間に勉強できる
  • 自分のしたいことから始められる
ずぼらなオッター

低コストでどんな人でも生活リズムに合わせて学ぶことができるのが最大のメリットだね!それぞれ詳しく解説するよ!

低コストで始められる

独学の最大のメリットは低コストで始められる点です。パソコンやデザインソフトがあればあとはネットで勉強するだけで最低限の知識はつけられます。

学校やレッスンを受けるとかかってしまう受講料も抑えることができるためコスパはとても良いですね。

すでにパソコンを持っている方はデザインソフトを契約するだけなので6,000円で始めることもできるため、かなり気軽にはじめることができます。

にゃん助

もうすでにパソコンを持っている人も多いのでその場合は数千円〜勉強を始められるんだね!

ずぼらなオッター

そうだね!勉強だけならぶっちゃけ書籍だけでも始められるし、独学だけで不安ならUdemyをうまく使えば数万円でプロのデザイナーになれるよ。

仕事をしながらでも空き時間に勉強できる

専門学校などに通わない場合は、通学などのスクーリングがないため仕事をしている社会人の人でも始められます。

仕事前の朝活に取り入れたり、仕事終わりに勉強する時間を作ったりできます。平日が難しい人は平日に本でインプットして週末にアウトプットとしてWebデザインを作ったりしてみることをおすすめします。

にゃん助

家の近くにまず学校がないから通うのは無理かな。

ずぼらなオッター

そうだね!その場合はオンラインスクールもおすすめするけど、まずは独学でミニマムにはじめてみるほうがコスパもいいかなって感じだね。

自分のしたいことからはじめられる

Webデザインを学ぼうと思っても人それぞれ目指すWebデザイナーの姿が違います。例えばWebサイトを作りたい人、Webバナーを作りたい人、Webのプログラミングスキルをつけたい人など。

それぞれ目的が違ってくるので自分が今欲しいスキルだけをさくっと先に学ぶことができるため独学なら自分が学びたいことだけをカスタマイズしてスキルとして身につけられるため、これも独学のメリットの1つです。

にゃん助

Webデザインを学びたい人、CSSやHTMLなどのコーディングを先に学びたい人とかもいるのかな?

ずぼらなオッター

もちろん!人によってWebデザイナーといっても色々なパターンがあるから独学の場合自分の進むべきスキルセットが決まっていると学習プランも組み立てやすいね。

Webデザイナーになるために独学で勉強するデメリット

にゃん助

Webデザイナーになるために独学するメリットはわかったけどデメリットもあるの?

ずぼらなオッター

そうだね!デメリットもあるからしっかりデメリットもわかった上で始めるのをおすすめするよ。

独学でWebデザインを勉強するデメリット
  • 疑問点があっても気軽に教えてもらえない
  • 挫折する人が多くモチベーションが続かない
  • 基礎を間違えて覚えてしまうことがある
ずぼらなオッター

それぞれ詳しいデメリットの内容を解説していくよ!

疑問点があっても教えてもらえない

Webデザインを独学で勉強していると、これってどうなんだっけ?とかPhotoshopの操作でわからないことなど出てくることがあります。

そういう時に学校などと違い先生や友達に聞くことができないため独学のデメリットポイントです。

しかし、現在ではオンラインサロンなどで質問に答えてくれる方が多く居るのでそういうコミュニティに入っちゃうと仲間が出来て良いかと思います。

質問があれば僕にお問い合わせフォームからメッセージいただいても返信してなるべくお答えするようにしていますよ。

にゃん助

オッターくんに質問してもいいの?

ずぼらなオッター

もちろん!メッセージが面倒ならTwitterのアカウントへDMをくれれば答えられる範囲で答えてるよ!

挫折する人が多くモチベーションが続かない

独学で1番多い悩みの1つはモチベーションが続かないというデメリットです。

これはWebデザイナーに限ったことではなく独学というのは孤独との戦いでもあります。私もかつてWebデザインを独学していた頃はなんでここのデザインが思うように表示されないの!?とかなり悩んでしまって挫折しかけたことはあります。

この対策としてはWebデザイナーの友人や仲間を作っておくことです。最近ではオンラインサロンのリベシティなどをはじめとする副業をみんなではじめよう!というオンラインサロンもあるのでそういうところでWebデザイナーの人と知り合うのも良いでしょう。もしくはTwitterなどで仲間を見つけるのも良いでしょう。

にゃん助

オンラインサロンは副業でWebデザイナーを目指す人も多いもんね!

ずぼらなオッター

そうだね!最近ではオンラインサロン内で副業のための案件も募集しているので一石二鳥かも。

基礎を間違えて覚えてしまうこともある

Webデザインは基礎がとても重要です。基礎を誤って理解して身につけられていないと後々、Webデザインをする上で障害になってしまうことがあります。

コーディング、プログラミングをする時も僕は基礎がうまく学べていなかったおかげで実務で障害になったことがあります。

こういうコードの書き方は汚いからよくない。など、基礎をしっかり学んでいれば犯さないミスや、基礎を知らないがために効率の悪い方法をやってしまうこともあります。その点注意して基礎はしっかりと学ぶように心がけましょう。

にゃん助

基礎のうちに変な癖はつけないほうがいいって言うよね!

ずぼらなオッター

そうそう!変な癖がついてしまうとなかなか効率悪く作業することになるから基礎はしっかり!

やっぱり独学は難しいと思った時はスクールがおすすめ

やっぱり独学では難しい!もっとスキルを実務で使えるように短期でWebデザイナーになりたい!という方はスクールをおすすめします。

短期のものもあるし、社会人の方が多く利用しているので仕事をしながらでも十分Webデザインを勉強し、Webデザイナーになるためにジョブチェンジや副業にすることが可能です。

にゃん助

独学で勉強できるか不安になったらどうしよう…

ずぼらなオッター

そんな時は通学、スクーリングもない短期のWebデザインを学べるオンラインスクールがおすすめだよ。低価格だし、しっかりプロの知識を得られるからね!

1位 デジタルハリウッド STUDIO by LIG
就職や転職、副業にも実際役立つWebデザインに関するスキルをまるっと身につけることができます。転職を有利にすることに特化しているのでより実践よりの授業内容が魅力的です。
Webデザイナーとして転職したい!
スキルを身につけキャリアアップしたい!
フリーランスとなり自由に働きたい!

という人にはおすすめです!
2位 インターネット・アカデミー
インターネット・アカデミーは転職や就職の際のサポートも手厚く評判が高いスクールです。また、インターネット・アカデミーのメリットとして最も大きいのは卒業生に多くの実績ある人財が多い点です。全体的なカリキュラム構成やシラバスが最も体系的であり、実務において役立つ知識が得られそうに感じた事も入学の決め手という声も多いです。
3万人を超える卒業生が居ることと、オンラインでも通学でも選べるので学校が近くにない人でも安心!
3位 Udemy.Inc
Udemy.Incは私もよく使っているサービスでITパスポートの資格を取得する時に利用しました。様々な学習コースがプログラム毎に販売されているので身につけたいスキルだけ買えるので数千円から気軽に始めることができます。
Webデザインやコーディング、プログラミングもスポットで講義を購入するだけで学ぶことができるのでここだけどうしても自分ひとりじゃむり!っていうところだけ買えるのが魅力的です。
詳細ページ
公式ページ

Webデザイナーは将来性があるの?

私はデザイナーとしては12年目になりますが、Webデザイナーは10年前にくらべて遥かに将来性があります。

広告業界も現在ではWeb広告がメインで、テレビ広告よりも現在ではディスプレイ広告などのWeb広告がメインです。そのためWebデザイナーの求人は増える一方で基本的に実績があれば仕事に困る心配はないでしょう。

また、フリーランスとしてもかなり働きやすい職業です。数多くのフリーランスデザイナーが存在し、働く場所を選ばないのでライフワークバランスもコントロールしやすいです。Webデザイン未経験の社会人にとっては強い副業スキルとしても役立ちます。

ランサーズ、ココナラを始めネット上で膨大な数のWebデザイン案件が存在しているので副業からフリーランス、副業から個人事業として会社を持つ人も少なくありません。Webデザインのスキルを持っていることでこれから先仕事の範囲が広くなるため将来性はかなり高いと言えます。

まとめ

今回は独学でもWebデザイナーになれる方法をまとめました。

Webデザイナーと聞くとなんか専門職だから難しそう、センスがないとできなさそう、もう若くないから無理そう。と言われます。

しかし、どんな方でもWebデザイナーになるチャンスはあるので興味を持ったなら一度独学ではじめてみることをおすすめします。副業にもとても向いている職業なのでこれからの時代にもおすすめです。

よかったらWebデザイナーのためになる情報を発信しているのでTwitter(@Otter_zubora)のフォローも宜しくおねがいします!

今回の記事のまとめ
  • Webデザインの独学に最低限必要なのはパソコンとデザインソフトだけ
  • Webデザイナーの仕事範囲を知ることが大切
  • 仕事範囲の中から自分がどんなWebデザインスキルを身につけたいか考える
  • Webデザインの基礎を書籍で学ぶ
  • 好きなWebサイトを10個見つける
  • Webサイトを真似してデザインする
  • 自分でWebサイトをデザインする
  • オンラインの学習サイトでさらに独学して伸ばす
  • 独学のメリットは低コストで始められる
  • 仕事をしながらでも空き時間に勉強できる
  • 独学なら自分のしたいことからはじめられる
  • 独学のデメリットは疑問点があっても教えてもらえない
  • 独学は挫折する人が多くモチベーションが続かない
  • 独学の場合基礎を間違えて覚えてしまうこともある
  • Webデザイナーの将来性はかなり高い
【WEBデザイナーの転職に必要なもの】これがあれば転職準備OK!
【Webデザイナーの転職に必要なもの】これがあれば転職準備OK!元グラフィックデザイナーでWEBデザイナーに転職し、現在デザイナー歴12年目のずぼらなオッターです。今回は転職経験5回ある僕が転職する時に必要だったもの、これがあれば転職がスムーズというものをまとめました。転職活動を考えている方やジョブチェンジを考えている人に役立つ内容で詳しくまとめました。参考にしてもらえると嬉しいです。...

ずぼらなオッターのつぶやき
お問い合わせ

    必須 お名前

    必須 メールアドレス

    任意 題名

    任意 メッセージ本文

    ※Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。

    COMMENT

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    CAPTCHA