未経験から独学でWEBデザイナーになる！｜私の学んできた方法を紹介
2022.02.17
こんにちわ。当ブログを運営しているコバです。
この記事に辿り着いた人は少なからずWEBデザインの仕事に興味がある人でしょう。
やってみたいけどどうやって学んだらいいか分からない。そんな人のために実際に私自身が学んできた方法を紹介したいと思います。
目次
【結論】
いきなり金払うのはやめとけ！
まずは無料のツールや安価な本からスタートしよう！
WEBデザイナーってどんな仕事？
WEBデザイナーの仕事内容がふわっとしている人もいると思うので簡単に説明したいと思います。
WEBのデザイナーです。笑(そのまんま)
例えば、Googleで検索した時に表示されるWEBサイト(ホームページとも言う)を制作したり、商品やサービスの販売促進に使われるLP(ランディングページ)を制作します。
中には公式LINEのTOPページ(リッチメニューと言われてたりする)を制作したり、Instagramのプロフィールページをデザインしたりする人もいます。
WEBのデザイナーでは無いかもしれませんが、チラシや名刺のデザインをする人もいます。
要はWEBの見た目に関わる部分を担う人の事をWEBデザイナーと思ってもらえればいいかと思います。
WEBデザイナーってどんな働き方？
WEBデザイナーに興味がある時点である程度理解されているかもしれませんが、比較的自由な職種だと言えます。
会社員でサラリーマンと同じように通勤している人もいれば、完全リモートで仕事をするサラリーマンデザイナーもいます。フリーランスで時間や場所に縛られずに働いている人もいます(私はこちらの人です)。
一生会社員で職を全うする人もいますし、フリーで活動して法人化する人もいます。主婦で家事と子育てをしながら自宅の隙間時間を使って働いている人もいます。
一度手に職を付けてしまえば、色んな生活条件に適合しやすいので働きやすい職業だと言えるでしょう。
どんなWEBデザイナーになりたい？
一言でWEBデザイナーと言っても業務は多岐にわたります。クライアントとやり取りをして、目的を達成できる制作物を創り上げるディレクターから、デザインを可視化するデザイナー、デザインしたものをWEBで表現するコーダーと業務が分かれます。
ディレクターであれば制作から納品までの全工程を理解した上で、コミュニケーション能力が求められます。デザイナーであれば、配色やデザインの配置を論理的に説明する能力が必要になります。コーダーであれば、デザインをWEB上で表現するのでコンピュータが認識する言語でのマークアップスキル(HTML/CSSなど)が求められます。
それぞれの業務で必要なスキルが異なるので、自分の目指している働き方に合わせて学ぶものを選ぶと良いと思います。
デザインの学び方
まずはデザインの基礎について知る必要があります。WEBデザインは芸術ではなく商用デザインなので、特別な感性とかは必要ありません。デザインにおける原理原則やルールを学ぶことでデザインスキルを身につける事ができます。
学習方法としては、市販の教本やスクールへの入学、セミナーへの参加、コミュニティへの参加があります。市販の教本やコミュニティは比較的安価なので手を付けやすい分、自力で学ぶ必要があります。それに対しスクールやセミナーは費用がかかる分正しい知識を手早く得る事ができます。ご自身の現在の状況に応じて最適な学び方を選択してください。
コーディングの学び方
コードを書くと言ってもいきなりダラダラと書けるはずがありません。
まずはコーディングって何？といった概念から知る必要があります。まず最低限知っておく必要があるのが、HTML/CSSです。HTMLとは、Hyper Text Markup Languageの略でWEB上に情報を表示させるための言語です。CSSとは、Cascading Style Sheetの略でHTMLで表示した情報を装飾する言語になります。基本的な言語を習得した上で更に高度なアニメーションを加えられるJavaScriptやCMSで使われるPHPなどを覚えていくと良いでしょう。
ディレクションの学び方(ハードル高め)
ディレクションを学ぶのは少しハードルが高いです。前提知識が無い場合は先に基本的なデザインやコーディングを学ぶことをオススメします。
ディレクターとは、クライアントとデザイナー、コーダーを繋げるパイプ役になります。大抵の場合、クライアントはデザインに対して知識が無い場合が多いです。そんなクライアントに理解してもらえるよう伝える語彙力とプロジェクトを円滑に進めるコミュニケーション能力が必要になります。クライアントのニーズに加え、クリエイターたちが実現可能な制作物である必要があるので、制作における全工程と各業務の専門知識の理解が必要になります。
いきなりディレクターはハードルが高すぎるので、まずは各業務をこなせるように学ぶのが懸命と言えます。
私の学んできた方法
私の勉強過程を知ってもらう前に、どのような考え方で学び始めたかを知ってもらう必要があります。前提として、元々会社員で働いていて独立して自分でビジネスをやりたいという気持ちがありました。なので働き方はフリーランス一択で、業務範囲は全工程を網羅する事が必要と考えていました。
ということは、前述で紹介してきた業務内容の全てを学ぶ必要があったわけです。そうは言ってもいきなり全てを学ぶことはできません。一般企業に勤めていて大した資金もなく、スクールに通う余裕もありません。独学で学ぶ以外に選択肢はありませんでした。
独学で学ぶにしてもどこから学べば良いかとにかくググって調べまくりました。結果、「自由自在にWEBサイトを作れる」状態が学習過程のゴールと定義しました。
WEBサイトを制作し、納品するまでの大まかな過程は、「サイトをデザインする→コーディングする→納品して公開」なので、コーディングできればとりあえずサイトは作れる！と考えて「①コーディング」「②デザイン」の順番で勉強し、「③サイトを制作する」という流れで進めると決めました。
①コーディング
全くの未経験だった私は、divってなに？とハテナまるけの状態からスタート。基礎学習でお金を払いたくない私は、無料で使えるツールでスタートしました。実際に使っていたのは「プロゲート」というアプリを使って勉強しました。PCとスマホで内容が異なるので、両方やるのがオススメです。スマホ版は、タブレットがあると良いです。
↓プロゲートへのリンクはコチラ↓
基礎編は無料で使えるので無料版は一通り全てやりました。ただ、自分のゴールは「WEBサイト制作」だったので使わないプログラミング言語はやらなくても良かったと思います。
まずは「HTML/CSS」を理解できるまでやりましょう。divってなに？pタグってなに？が分かるレベルでOKです。
②デザイン
デザインはものすごく奥が深いのでここまで出来たらOKという定義が難しいですが、まずは基礎をしっかり押さえる事が大切です。そもそも私自身デザインのセンスは皆無に等しい状態だったので、「ノンデザイナーズデザインブック」を一通り読み漁りました。
↓ノンデザイナーズデザインブックの商品ページはコチラ↓
「デザインの４大原則」「配色のルール」をある程度理解できるようになりましょう。ある程度でOKです。明確な答えは無いので概念理解が大切です。
③とりあえずWEBサイトを作ってみる
実践あるのみです。教科書でひたすら学ぶよりも実際に作ってみるのが最も最速で学べる方法。教科書はそこそこにしてまずは「サイトを作れる状態」を目指しましょう。
制作するサイトのデザインを下書きする
まずはどんなサイトを制作するか明確にします。「デザインカンプ」を制作しましょう。実際に使ったツールが「Adobe XD」というツールです。(今でも使ってます。)
↓AdobeXDへのリンクはコチラ↓
使い方は簡単で直感的に使いやすいツールになっています。とにかくさわって覚えましょう。分からない事があってもYouTubeで紹介されているので調べて下さい。
コーディングしてWEB上に表示させる
自分でデザインしたものを実際にコードで表現していきます。コードを書くにはエディターツールが必要になります。私が使っているのは、「VSコード(Visual Studio Code)」というツールです。(その前に使っていたツールがありますが省略)
↓Visual Studio Codeへのリンクはコチラ↓
制作したWEBサイトをWEB上にアップロード
WEB上に公開するためには、サーバーを用意する必要があります。セキュリティなどもしっかりしておく必要があるのでレンタルサーバーをおすすめします。
私が利用しているのは、「エックスサーバー」で日本最大手のサーバー会社です。
↓エックスサーバーへのリンクはコチラ↓
サーバーへアップロードするには、「FTPソフト」が必要なので用意しましょう。
ちなみに私が使っているのは、「File Zilla」です。こちらも有名どころです。
↓File Zillaインストールページへのリンクはコチラ↓
まとめ
ここまでこれば、後は実践あるのみです！
PCさえ持っていればここまでの学習でかかる費用は本代(約1,000円)です。サーバー代は月々1,000円程度かかりますが、無料にすることも可能です。わざわざ基礎学習にお金を使う前に無料で学べる範囲は無料で学びましょう！
上記で紹介したツールへのリンクを下記にも残しておきます。
↓プロゲートへのリンクはコチラ↓
↓ノンデザイナーズデザインブックの商品ページはコチラ↓
↓AdobeXDへのリンクはコチラ↓
↓Visual Studio Codeへのリンクはコチラ↓
↓エックスサーバーへのリンクはコチラ↓
↓File Zillaインストールページへのリンクはコチラ↓
参考になれば幸いです。