daily RAD

家電やガジェット、お酒の情報、副業でお金を稼ぐ方法を主に発信しています。

全くの未経験者がWebデザイナーになる方法まとめ!

f:id:iwataro:20190310220618j:plain

みなさん、こんにちは!いわたろです。

 

今の日本では政府が働き方改革を呼びかけており、そこいらの会社、企業でもだんだん副業が解禁になっていったりと、少しずつ環境が変わりつつあるかと思います。

僕もこの流れに乗って少しでも収入アップを目指して副業を始めようと思案をしています。といってもなかなか何をすればいいのか、方向性を定めるのも簡単ではなく、副業を始めようにも始められない、といった状態が長らく続いています。

 

そんな僕がいま目をつけているのがWebデザイナーという仕事です。

Webデザイナーはプログラミングスクールなどに通って知識、技術を磨いてからそのスキルを活かせる会社に就職する、というのが基本的な流れです。

ですがWebデザインは意外とフリーランスとして仕事をしている人が相当数いるようです。

また、さきほどプログラミングスクールに通ってスキルを得ると書きましたが、なんと独学で学んでいる人も多いみたいです。というのもWebデザインに必要な知識、技術を磨くためのWebサービスがたくさん存在するからです。

僕も右に倣ってWebデザインについて一から勉強をしています。

なのでこの記事から僕がWebデザインを独学していった軌跡や方法を書き残していきたいと思います!よければ是非参考にしていってください!

 

 

そもそもWebデザインとは?

ãWebãµã¤ãããã¶ã¤ã³ä¸­ã

さきほどから僕がいっているWebデザインとはどういった仕事なのか、簡単に説明します。

Webデザインとは、モニター画面に映るWebサイトのデザインを考案し、HTMLやCSSといった言語を用いてそのデザイン通りWebサイトを作成することを言います。そしてWebデザインをする人のことをWebデザイナーと呼びます。

例えば僕のこのブログはWebデザインのテンプレートを使わさせてもらっているのですが、こういったテンプレートを作る作業もWebデザイナーの仕事の1つです。

Webデザインをする仕事の流れはだいぶ大まかですが、

⓵デザインを考えて⓶HTMLやCSSでコーディングをする、という感じです。

つまりWebデザインの仕事にはプログラミングの知識と、デザインに関する知識が必須というわけですね。

僕は美術の成績がダントツで悪かったという過去があるため、ちょっと不安でした(笑)。

 

なんでフリーランスで働いている人が多いの?

f:id:iwataro:20190310221057p:plain

 Webデザインの知識を有している人はもちろんそのスキルを売りに会社や企業に就職するというのが王道かと思います。しかし、最近では個人で仕事を受注し、案件をこなして収益を得るという、いわゆるフリーランスのWebデザイナーが増えています。

なぜそんな傾向にあるのかというと考えられる理由としては

  1.  Webデザインは独学が可能なので副業にしやすい
  2.  クラウドソーシングで案件が大量にある

主にこの2点かと思います。

Webデザインを本業としている人はもともとそのスキルを持っているため勤め先とは別にクラウドソーシングなどで案件を受注して稼いでいる人は多いですし、本業が全く別の職種の人でもWebデザインは時間をかければ独学で十分に学ぶことができるので副業として収入アップを目指しやすいです。

そんな理由でフリーランスとして働いている人が多いというわけです。

 

Webデザイナーになるためには何を学べばいいの?

ãiPad ã« apple pencil ã§ã¡ã¢ãããã­ã¬ã¼ã®æåã

 ではWebデザイナーになるためには何をどう学べばいいのか、というのがこの記事を読んでいる人からすると一番気にされている点かと思います。

僕もまだ勉強中の身なのですが、ほかの方の記事や自分の実体験を踏まえて、全くの未経験者が学ばなくてはいけない項目をまとめてみました。

 

  学ぶ項目 学ぶ目的
プログラミング系 HTML&CSS  Webサイトに構造、配置、装飾をできるようにする
Javascript  Webサイトに動きをつけられるようにする
jQuery  Javascriptを効率よく使用する
デザイン系 デザインの基礎知識  色の配色や全体のバランスを知る
Adobe Comp  Webサイトのワイヤーフレームを作れるようにする
Photoshop  画像編集のために使い方を学ぶ
Illustrator  ロゴ等の作成のために使い方を学ぶ

 

まずWebデザインをする上で必要不可欠なのがHTMLとCSSです。ぶっちゃけてしまうとそれ以外のことを勉強しなくてもHTMLとCSSさえ書ければWebデザインはできてしまいます。

ただそれだと仕事を受注するうえで他のユーザーと差をつけられない、もしくは同じ土俵に上がれない、といったことが起きてしまうため、やはり上の表の項目は出来るだけ全部学んだほうが良いです。

JavascriptjQueryは動的なもので、例えばWebサイト上で画像をスライド表示していたりするものをよく見かけると思いますが、まさにあのような事をするために必要な言語です。必須ではないですがオシャレ感をだしたり、ちょっと凝ったWebを作るためにはむしろ必須といえます。

また、そもそもデザインとはなんなのか、見栄えの良いサイトが作るにはどうしたら良いのかを知らなければWebデザイナーになる事は出来ません。

そしてちょっと先に進むと今度はWebサイトに使う画像やロゴを作れるようにもならなければいけません。それらを行うツールとして有名どころなのはPhotoshopIllustratorといったAdobeのソフトです。つまりこれらの使い方も学ぶ必要があるわけですね。

 

Webデザインを独学で学ぶにはどうすればいいの?

先ほどの項目別にどうやって学習していくのかをご紹介します。あくまで僕の場合ではありますが、いまのところ順調に進んでいるのでどうぞ参考にしてください。

 

プログラミング系(HTML&CSS、Javascript、jQuery)

ãMBAã¨ã¿ã¤ãããæã

 プログラミング言語に関しては本とWebサービスで学ぶのが良いと思います。

特にHTML&CSSに関して書いてある本が豊富にあるため、一冊は買っておきたいです。HTML&CSSはWebデザインに関する言語なので、本を一冊買えばそれだけで言語とWebデザインに関する知識も得られるのでお勧めです。

 

↓Webデザインに関して全く知識がない人用の本↓

 

上記の中から1冊を買えば最初はそれで充分です。買いすぎてもあまり意味がないので、kindleの無料サンプルや実際に本屋で手に取ってみて自分がわかりやすいと思ったものを買うと良いかと思います。

 

↓ちょっと先に進んだら買いたい本↓

一通り基礎について学び終わったら今度はさらに詳しく書いてある本を買えばさらなるスキルアップが目指せます。またHTMLやCSSには要素やプロパティと呼ばれるものがたくさんあり、それらはネットで検索すれば見つけることはできるのですが、大事典を持っておくことで効率よく、また自分の知らないものを簡単に見つけることができます。僕のような全くの未経験者からすると、あるとほんとに役に立つので絶対買いたい一冊です。

 

Webサービスで学ぶ方法も有力!

f:id:iwataro:20190310221458p:plain

 ぼくは上記のような本とは別にProgateというWebサービスでHTML&CSSとJavascript、jQueryを学びました。

このサイトはプログラミング言語をネット上でコーディングしながら学習できる素晴らしいサービスです。

基本月額1000円がかかるのですが、各言語の初級編は無料で受講できるので、それらを学習して自分に合っていると思ったら月額登録すればいいし、合わなければその後は本で学習を進めていくというのもアリだと思います。

 

ちなみに僕はプログラミング言語はProgateですべて学びましたが、その場合はHTMLとCSSについては先ほど紹介した「Webデザインに関して全く知識がない人用の本」は買わなくてもいいかなって思いました。

 

 

デザインの基礎知識

ãæ£ãã°ã£ãçµµã®å·ã¨ãã¬ããã

 Webデザインは仕事の発注者の意向に沿って構成を考えていかなければなりません

ここがセンスを問われるところで、デザインに関する知識が無ければ自分のイメージを表現する術がありませんし、発注者の満足のいくものを作ることは難しいです。

ここで、美術の成績が5段階中の2だった僕が勉強した方法をご紹介します。

デザインに関しては本はもちろんのこと、意外とネットで検索すれば相当な知識が得られます。

たとえばこんなサイトを僕は参考にしました。

このサイトを隅々まで読むだけで基礎としては十分すぎるほどです。移動中や暇なときに見ておくとよいかと思います。

また、本としてはこちらが有名どころで、たしかにとても勉強になりましたので是非手に取ってみてください。

 

 Adobe Comp

Adobe Comp CC

Adobe Comp CC

  • Adobe
  • 仕事効率化
  • 無料

 これはiPad向けのアプリで、必須ではないですが使い方は簡単ですので少しいじって覚えておくと後々便利です。

Webデザインを進めていくとき、まずはどんなイメージで行くのか方向性を決めて、実際にWebの構成を考えて、その構成通りにプログラミングをしていくというのが一般的な流れです。

Adobe Compはこのうち、「Webの構成を考える」ためのツールです。

Webのサイズはどのくらいにしようか、画像をどこに配置してどんな色にしようか、などなどをリアルに表現することができます。

こういった下書きがないとコーディングは絶対にできません

また、さきほど必須ではないと言ったのは、Webの構成を考える方法としては別にアプリを使わなくても紙に書いてしまう方法もあるからです。実際、現場のWebデザイナーの方で紙を使って下書きをしている人はたくさんいます。

なのでiPadを持っていない人はわざわざ買う必要はありません。

使い方についてはアプリ内のデモを見るだけでOKです

 

PhotoshopとIllustrator

f:id:iwataro:20190310224639p:plain

 画像編集のための2つのソフトの使い方ですが、これについてはその時その時で必要に応じてYoutubeやネット検索で調べるというのが一番効率がいいです。というのもこれらのソフトの全機能を使うなんてことはまずないからです。

画像編集を進める上で「こういったことって出来ないかな?」となにか疑問に感じたら、そのときに調べるだけで僕は良いと考えています。ちなみに僕らが考える大抵のことはできます。

 

さいごに:まずはHTMLとCSSから覚えましょう!

 今回はWebデザインをする上で何を勉強するべきか、どう勉強するべきかを紹介しました。

今現在僕も勉強の身ですが、とりあえず何から始めたらいいのか迷っている人もいるかもしれません。

僕はHTMLとCSSをProgate、もしくは本を1冊買って学んでいくことをお勧めします

人には何事も得意不得意があると思います。Webデザインをする上でプログラミングは避けて通れない道なのですが、といってもプログラミングが苦手な人って結構いると思います。

なので僕としては最初にHTMLとCSSを学んでみて、特に躓くことがなければそのまま次の項目を学習すればいいし、もしプログラミングが厳しそうであれば早い段階でスパッと諦めてしまうほうが賢いかもしれません。副業なんて他にいくらでもありますので新しくほかの勉強をしましょう。

 

では今回はこのへんで!