スキルアップ・ノウハウ最近他業種からWEBに参入する人が増えたなと感じています。デザイナ、プログラマ、ディレクタ、マーケッターなど多種に渡ります。この需要の高さはWEBサイト自体の需要とWEBサイトを作る敷居が低くなってきた事によるものでしょうか。他業種とまで言わないにしても私も独学でWEBデザイナーになったので他の方の参考になれば幸いです。最後にWEBデザイナになる前の私もともと携帯ゲームのデザイナをやっており、ドットやFLASHアニメーションを使ってゲームを作ってました。デザイン知識は多少持っていました。WEBデザイナを目指すきっかけになったのはiPhoneです。スマートフォンの登場でFLASHやドットのお仕事が減り、このままだと将来危ないなーと思い、当時最先端だったスマートフォンサイトを作る勉強をしました。始めた当時はCSSやJavaScriptは全然書けませんでした。スマートフォンサイトを作り続けることで最先端の技術(HTML5/CSS3)に触れて早いスピードで需要のあるWebデザイナになれたと思ってます。このWEB業界は意外に新しい技術に触れない人も多いのでスマートフォンサイトを作れるデザイナは少なく需要が高かったので割りと重宝されました。その後PCサイト覚えていき、必要になったのでWordPressやPHPなど動的なサイトも触れるようになって今に至ります。WEBデザイナーとして働くために必要なスキルWEBデザイナーとして働くために必要なスキルはコミュ力から始まり、タスク管理、デザインスキルなど上げればきりがありませんが、それでもWEBデザイナ限定として考えると必須となるスキルは以下のようなものがあります。デザインスキルデザイナとしてこれがないとかなり苦しい。逆に言えばこのスキルが高ければ他が足りなくても何とかなる。なんでも出来るより自分の得意なデザインのジャンルを持っている人は強いです。デザインツールスキル仕事を効率的に素早く終わらせるために必須のスキル。どんなにデザインスキルが高くてもツールが上手く使えないと仕事が遅くなってしまいます。覚えるツールの選択肢は少なくほぼ、PhotoShop・Illustratorのいずれかを使いこなすようになるはずです。私のおすすめはsketchなのですが、初めは使ってる人が多いPhotoShopが良いと思います。価格もお手頃で月額1,000円で初められるプランもあります。HTML・CSS(コーディングスキル)IEやChromeなどブラウザでデザインを見えるようにするスキル。WEBデザイナはデザインツールを使ってデザインするまでが仕事で終わるケースは少ないです。(分業制のところは別ですけど)デザインからコーディングまでできるようになって初めて自分でWEBサイトを作ったと名乗れます。JavaScript・JQuery(プログラミングスキル)WEBサイトの動きに関わる所です。本来は専門とするプログラマがいる場合もありますが最近はWEBデザイナーもこのあたりのスキルを習得している人も多いです。プログラミングが少しでも出来るとプログラマと連携が取れやすく、最終的に良いホームページが出来上がる可能性が高いので敬遠せずに覚えておくと他のWEBデザイナと差をつけることが出来て優秀なWEBデザイナに一歩近づけます。SEOとアクセス解析SEOとアクセス解析ってWEBデザイナーの仕事なの?と思われるかもしれませんが覚えておくべきスキルです。言うと、WEBサイトは作って終わりではなく、改善することが求められます。改善をするにはSEOとアクセス解析の知識がないと当てずっぽうな提案しかできなかったり、言われた事しかできない受け身のWEBデザイナになってしまいます。情報収集スキルWEBデザイナーだけが必要なスキルというわけではありませんが、流行り廃りが多い業界なので日々アンテナを立てていなければいけません。デザインをする中で効率的に必要な情報を取得することが求められます。Webデザイナーと基礎力のアップやデザイン以外のスキルアップについては下記で紹介していますので、興味あれば御覧ください。独学で進めるオススメの勉強方法まず前提としてレイアウトや色などツールを使う前の段階で覚えておかないといけないデザインの基礎知識みたいなものがあります。最初にツールを触って形にしたい気持ちは共感しますが、基礎を最初に学んでおくと覚える・気づく効率が非常に高くなり効率的に学べます。デザイナのオススメのサイトとしては以下のものがあります。目を通せると思いますので、こういった事をデザインをするときに気をつければ良いんだと思っていただければ。伝わるデザインWebに限らずデザインの基礎としては下記の2冊がオススメです。デザインについては、デザイナ歴の長い人でも「これは良書」と答えるくらいしっかりした内容でかつわかりやすいです。私もデザインのバイブル的な存在でもあります。オススメ書籍デザインの基礎なるほどデザインノンデザイナーズ・デザインブックデザイン・デザインツール編Webのデザインは紙のデザインと異なります。Webサイトでは動きやデバイスでレイアウトが変わるなど、同じサイトの中でも様々な状態の変化があります。慣れないうちは、たくさんWebサイトを見る事をオススメします。初めはカッコイイサイトばかりに目が行くと思いますがそうではなく、よく見るレイアウトやデザインのものを見つけてください。それは業界の基本になっているものなので、そこができれば応用のデザインができるようになります。デザインを眺めているだけでは、中々気がつかない事も多いですので、毎日少しずつでもいいので、WEBサイトの模写をしてください。参考記事WEBデザインが短期間で上達した方法Webデザインのスキルを磨こう!Webサイト模写のススメデザインは眺めるだけじゃ上手くなりません。手を動かして、なぜこの配置・色なんだろうと考えて模写しながら感覚的に学んでいきます。デザインに正解はないので、まずはシンプルなデザインから模写していき、それから自分が好きなデザインに進むと、基礎を抑えつつ自分の味を出せるデザインができるようになります。WEBサイトの模写はデザインセンスだけでなく、他にも学ぶ所があります。それはツールの使い方です。本を一冊買って学ぶのも良いのですが、すぐに継続して実行できる環境がないとすぐに忘れてしまいます。覚えたツールの使い方を模写をする間に利用して体に染み込ませて、効率的な作り方を見つけれます。模写するなかでTOPビジュアルやバナー、フォントなど素材が必要になる事が多々あります。そんな素材も自分で見つけれるようにもなれます。オススメのサイトは幾つかありますが、初めての方はタダピクさんがオススメです。練習用に使うのでしたら、PIXTAもオススメです。スカシの入った状態でしたらデザインカンプを使うのに無料で利用でできます。サイトを模写するときはまるごとキャプチャすると良いです。Captureのようにページの上から下までのキャプチャが撮れるものを使ってそこからトレースをします。お気に入りのWEBサイトがあればPinterestやEVERNOTEなどのサービスにキャプチャを残して置くと自分の模写したいサイトをあとで見つけやすくなります。模写するためのサイトを見つけるためのギャラリーサイトMUUUUU縦長のページを集めているギャラリーサイトです。1ページの情報が多いので模写のやりごたえがあるサイトが見つけやすいです。JP日本国内のレスポンシブで作られたサイトを紹介しています。デバイス毎のサムネイルで紹介しているので見やすいです。模写では無いのですが、UIの気づきというか、デザイナーはこういうところに気を使ってるというテストができるサイトがあります。cantunseeこちらで細かなところですが良いデザインというのが確認できます。実践で役立つPhotoshop&Illustrator徹底ガイド自分でデザインを考えてレビューをもらう模写ではなく、ユーザーの状態・課題に対してデザインをしていくという流れで学びたい場合はcocodaというサービスがあります。イメージとしてはUI版のprogateみたいな感じです。2018年9月に公開されたばかりのサービスなのでまだまだ作り込んでる途中ですが、コンセプトというかやろうとしてることは、デザインを覚えたいあなたに役立つものだと思います。cocodaHTML・CSS(コーデイングスキル)編Webデザイナーたるもの、HTMLやCSSも手を動かさないと覚えないと思います。HTMLやCSSの仕様は多いですが、実際に良く使う部分は限られているのでよく使う所から少しづつ覚えていけばいいと思います。ようにHTMLとCSSが一緒に学べるような本を一冊買ってみて、その通りに作ってみると良いです。流行りだからと言って最初にHTML5やCSS3に縛られて手を付けると何がなんだかわからなくなると思います。最初は基礎を固めましょう。その後にHTML5やCSS3を覚えても遅くありません。本を見てわからないときはググって調べるのも良いですし、基礎を調べてたいとWebで学ぶ事もできます思ったらこちらがオススメです。HTMLクイックリファレンス本で学ぶのに抵抗がある人は動画で学ぶ方法もあります。(全18回)ドットインストールは1講座約3分で終わるので継続的に学びやすいです。あと無料で使えるのも嬉しいポイントですね。自分の手を動かしてコーディングを覚えたい人はProgateもオススメです。ドットインストールでは動画を見てから、自分の環境でコーディングをしますが、Progateでは課題毎のスライドを見てからブラウザ上でコードを書いて正解不正解を見てくれます。ドットインストールもProgateも月額課金のプランがありますが、2つとも1000円いかないくらいなので、一ヶ月だけ契約して短期集中で覚えるのがオススメです。(コーディングはダラダラやっても覚えないので。)ただコーディングって一度で覚えれるものでもないので、何度も何度も反復で練習する必要があります。本や動画だけでは学べる幅も狭いので、模写したサイトをそのままコーディングするのをオススメします。ここでも、模写の成果が生きてきます。知らないHTML・CSSの書き方があったりもっとこうしたいという気持ちが出てくるので、その時はGoogle先生に聞いて探しましょう。してもわからないときは、そのサイトで実際にどう実装されているかを見てカンニングすれば、作業が止まりにくいかと思います。他の方法として、質問サイトに投稿するというのも手ですね。いうサイトがあります。こちらに質問すれば答えてもらえるかもしれません。(プログラミングの質問が多いですが、CSSやJavaScriptの質問も大丈夫ですよ)このように着実に進めていって5サイトも作れば結構なコーディングスキルが身についているでしょう。JavaScript・jQuery(プログラミングスキル)編プログラムも初めは本や動画を見て学ぶのが良いです。余談ですが、コードを移し書きしていく場合模写ではなく写経と言います。jQueryはJavaScriptを使ったライブラリなのでJavaScriptを先に学ぶかjQueryを先に学ぶかで悩む事も多いかと思いますが、私はjQueryからを勧めます。jQueryは簡単かつ便利に扱えるので初めて触ってもプログラムがとても楽しくなります。jQueryはライブラリも豊富で読み込むだけでリッチな演出が可能になります。jQueryを覚えれば覚えるほどJavaScriptの事を覚えないといけないので自然とJavaScript学んでいたりしますので難しく考えなくてもよいでしょう。プログラミングは苦手で嫌だなと思われるかもしれませんが、まだまだJSを扱えるWEBデザイナは少ないので他の人と差をつけるチャンスですし、jQueryができるWEBデザイナーは重宝されるので就職の際もグンッと需要が上がります。一度でプログラミングを覚えれるものでもないので、何冊も本を買うよりも同じ本で何度も繰り返し覚えるほうが身になりやすかったです。(全25回)情報収集編WEBデザイナーはツールの流行り廃りもあれば、デザインの流行り廃りもあったりします。この辺の情報を日頃から集めれるようになると時代に合わせたWEBデザイナーに着々と成長できます。逆にデザインばかりして情報収集を疎かにしていると時代に取り残されたWEBデザイナーになっている可能があります。私の肌感ですが、WEB業界は3年も経てば制作環境やツールなどガラリと変わってこれまでの知識が役に立たないケースがよく有ります。(これ、冗談じゃなくて本当です)私の情報収集ですが、基本的にはTwitterやfacebookなどSNSが中心です。日頃から高い感度を持った人をフォローしておくとオススメです。私もTwitterをしていますが、あまり感度の高い事はつぶやかないですが自分が気にいった記事は良くシェアしてるので刺激になるものが見つかるかもしれません。よかったらフォローしてくださいね。具体的な私の情報収集の方法は別記事にまとめていますのでこちらを参考にしてください。独学で始めるSEO・アクセス解析これまで紹介したスキルは業務の中でも比較的学びやすいですが、SEOとアクセス解析についてはなかなか難しいです。いうのも仕事の中でWEBデザイナがSEOとアクセス解析に携われる機会は少ないですし、そもそも教えてくれる人もいないです。私がオススメするのは、自分のブログを作ることでそれを試行錯誤して学ぶことです。私の場合今見ていただいてるこのサイトもその一つです。自分でブログを持つと自然とアクセス解析やSEOに興味を持つことができますし、本などで学んだことをすぐに自分のブログに反映できます。最近ではブログをやっているとSNSで声をかけてもらえたり、記事をシェアしてもらえたりして嬉しいです。自分で自由に出来るWebサイトをもっていると情報収集しているなかで気になったサービスを導入したり、試しに新しい技術をサイトに取り入れてみたりもできます。仕事だとこういう事なかなか難しいであるとアウトプットの量が断然変わります。他にもブログを持っているとそれがポートフォリオの一つの作品にも使えたりしますので、便利です。ブログは履歴書や面接では伝えられないあなたの良さを見つけてもらえる可能性がありますので、口下手であったり自分に自信のない人にはオススメです。ブログはどこで書くのが良いのか聞かれますが、やっぱりWordPressがオススメです。理由はWordPress自体がブログ用のCMSでカスタマイズし易い事と情報がWEB上にも多く非常に学びやすいからです。WordPressは色々なサイトで利用されていて、仕事/就職にもつながりやすいのでWordPressを覚えておくのが強みにもなります。別の記事でWebデザイナーがブログを持つと良いよって記事を書いたのでご興味あれば見てください。独学でやるのが不安な人は...全部独学でやるって自分のやり方があっているかすごく不安になると思います。言った場合はお金はかかってしまいますが、短期集中でスクールに通ってみるのも一つの手です。昔は半年〜1年通ってWebデザイナーになるスクールが多かったのですが最近は2ヶ月など短期のスクールも増えてきました。CodeCampがどんなところかはについては下記の記事にまとめていますので良かったらご覧ください。独学で挫折したときの選択に。マンツーマン指導のオンラインスクールCodeCampパソコンも触ったことがない...みたいな人だと厳しいかもしれませんが自分で勉強出来る人であればオンラインスクールで学ぶのはそれほど難しいものじゃないです。誤解の無いように言っておくと受け身な感じの人だと難しいかもしれません。意欲的に自分で相談/吸収出来る人だと向いてるって話ですね。私も就職したいと相談を受けた方にアドバイスを幾つかしてたのですが、何か理由をつけてやらなかった人は結局就職できたと言う連絡は来ませんでした。スクールの良いところは自分だけの悩みの相談に乗ってくれるのと一緒に頑張れる仲間が見つけられるところですね。いま不安を抱えている方はかなり払拭されると思います。私も当時独学でやってたときにこのサービスがあれば使ってたんじゃないかなと思います。予算や時間がない場合スクールはある程度まとまった時間がないと難しいと悩む方は、Udemyで学ぶのがオススメです。いうサイトをよく利用しています。価格は結構するのですが、時々びっくりするくらい安いときがあるのでそのときはチャンスですね。Webデザインを学ぶのでしたらこちらのコースがボリュームと網羅感があってオススメです。実際に未経験で勉強されてる方も良かったと評価されますので、内容のレベルも初心者の方向けにちゃんと合わされています。講座オトクなキャンペーン情報Udemyでは、かなり大きなセール「新春セール」が開催されており、かなりの数のコースが1200円〜購入できます。購入したら講座を始めるのはいつでもできますので、このキャンペーン期間中に気になる講座は購入しておくのをオススメします。※このキャンペーンは1月9日(木)までの開催のようです。キャンペーンを見に行くなぜ、Udemyが良いかというと、実は講座を購入すると講師に質問ができます。本だとわからないときのググり方がわからないという事もありますが、その講座の内容であれば質問できるのでこの方法でも不安は解消出来るのではないでしょうか。Udemyが良いのかは別の記事で感想を書いているので良かったらごらんください。動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想udemyはデザイン以外の講座も豊富なのでスキルに伸び悩みが出てきた人は一度試してみてはいかがでしょうか?独学で学ぶときのコツはっきり言って独学で全部学ぶというのは結構キツイです。私がオススメする方法は自分の得意と苦手を早い段階で知ることです。私の場合デザインはWebデザイナーになる前からデザインはやっていたのでスタート時は得意でした。今は逆転してコーディングのほうが得意になりました。こんな事が起きたかというと、「デザイン→作るのが楽しい→コーディングをする機会を増やせる」という好循環を作れたからです。私の周りにJSの事を相談できる人もいたので、自分のできるところは自分で覚えていって、わからないところはきちんと「何がわからない」かを理解して相談をしていました。わからないことがわからないみたいな状態で質問をする人もいますが、基本的にこれは成長につながらないので辞めたほうが良いです。答えだけ知っても応用ができず、ずっと理解できないままになりやすいです。相談相手としてはMENTAで見つけるのが確実かと思います。MENTAはメンター(教える人)とメンティー(教わりたい人)をつなげるサービスです。月額や一回だけの契約など人によってサービスも価格もまちまちですので、自分に合った方見つけてみたら一度相談してみてはいかがでしょう?ちなみに私もメンターになってます。コンチ|MENTAこのサイトを見て実際にWebデザイナーになった方をインタビューしたことがあります。グラフィックデザイナで活躍されていた方ですが、実際にどうやって勉強をして就職したかまでの流れが見えますので、あなたの今後の参考になるかもしれません。2019年に独学でWebデザイナーになった方に本音のインタビューをしましたモチベーションの維持する方法すごい技術に触れたり、自分で思っていた以上のものが出来たときは嬉しいものですが、なかなかそのモチベーションを維持するのは難しいですね。勉強会に参加してモチベーションアップモチベーションをあげたいとき、私は勉強会に参加したり同業者と話したりします。私はぽっちで開発しているので他人の言葉がとても刺激になったりするのです。頑張ってる人を見ると自分ももっと頑張らないとってなります。勉強会はconnpassやtechplayで見つけられます。関東方面が圧倒的に多いですが。IT系の勉強会はなぜか他業界に比べて圧倒的に安価で行われるものが多いです。(3000円くらいのものでも十分業界の最前線の人の話が聞けます。)もちろん数万円するような講座もありますが、Webデザイナーとして学ぶものとしては高いと思います。(よくWordPressとか結構高額なやつがありますが、そんなに凄いことはやれないはずです。)勉強会に参加したときに、懇親会があれば是非参加してみてください。「自分がいても...」みたいに不安に思うかもしれませんがWebっていつ共通言語があるので普通に話せます。初心者の方も一定数いますので、ぼっちになることは少ないはずです。Twiterでつながってモチベーションアップ最近はSNS(主にTwitter)でWebデザイナー同士で繋がってる姿をよく見かけます。Webデザイナーとかで検索すると簡単にユーザーが見つかります。Webデザイナー用のアカウントを作って、こういった方たちの苦労や頑張りを見て、「自分と同じだ」「私もこうなりたい」みたいなツイートを見るだけでもやる気が出ます。あとちゃんと作ったものをアウトプットできるようになると、褒めてもらえたりするので、そういった面でもモチベーションアップに繋がります。※ちゃんとあなたも他のユーザーさんの作品を褒めたりすると良いサイクルになりますよ。ブログを書いてモチベーションアップ勉強って本を読んでるだけだと、本当に身になってるとかの自覚って難しくないですか?そういったときは自分の理解を整理するためにも、ブログなどで自分の言葉にまとめておくと理解力がぐんと上がって、自分の成長を実感できるのでモチベーションのアップに繋がります。学び始めの頃は覚えることも多いので、小さな事でもアウトプットを続けるくせをつけておくとその積み重ねがあなたの財産になります。ブログだと読んで良かった!この記事良い!あなたのブログ読んでます!とか言われると嬉しくなります。私の場合この記事を読んでくれた方が就職できたとツイートしてくれて嬉しかったです。この記事のやり方で勉強して、制作会社さんから内定を頂けました。本題のモチベーションと少し外れますが、ブログをやっているとこういった嬉しい出会いがあるのも楽しいのでブログやるのオススメです。勉強の仕方は色んな方法がありますがに継続できるやり方を見つけるのが一番大事だと思うので、自分なりの刺激を見つけてください。Webデザイナーを続けるために必要な事あなたが独学で勉強してWebデザイナーになることはそれほど難しいことではありません。Webデザイナーを10年続けようとすると結構大変です。いくつか紹介したものと重複しますが、個々最近はデザイン・プログラミスキル以外でも下記を求められます。Webマーケティングのスキルマーケティングの基礎スキルSEO、SEM、ログ解析などのスキルコピーライティング広告運用スキルなぜこれらがWebデザイナに求められるかというと、これらが出来ると「webサイトの価値」をデザインを通じて高められるからです。以前ですと、これらは他の専門職の方か、ディレクターの方が行っていました。年々開発速度が上がっているのもあってWebデザイナ自身が行ったほうが、コミュニケーションロスが減るので成果が上がりやすいとされてるからです。これらを学ぶのは正直実践(仕事じゃなくても良いので)でないと言うのが私の結論です。本のような座学では私はただの頭でっかちで業務に役立てるまでには行けなかったので、自分でサイトを作って学びました。私はブログやアフィリエイト、自分でサービスを作ったりしてユーザーの反応を見ることで、自分のスキルに軌道修正をかけていきました。私と同じように始めたいと思われる方は、下記に方法をまとめていますので興味あればごらんください。Webデザイナー初心者がWordPressでブログを始める手順Webデザイナがアフィリエイトを始めて学べること他にも制作スキル以外でも下記のような部分が求められます。Webデザイナとしての価値が高まります。私がずっとWebデザイナーとして続けていくためにやっていることは下記にまとめています。Webデザイナーとして成長し続けるために気をつけている事30代のWebデザイナーが仕事を続けるために意識してること(メンタル編)最後にWebデザイナになりたいって言う人は今すごく増えています。需要もどんどん高まっているのですが、とにかく覚える/期待されることが増えていて一人でWebデザイナになるのが少しずつ難しくなっています。情報を整理して自分がどんなWebデザイナになりたいのかを決めて、そのためには何が必要なのかを見極めれれば最短距離でWebデザイナになれます。(極端な事を言うと名乗ったらすぐにWebデザイナになれますがw)もし今あなたが就職を意識してるのでしたら、Webデザイナとして就職するためにやっておいたほうが良いことをまとめてあります。Webデザイナーが転職するために初めにやっておくこと早めに就職したいという方はこちらが参考になるかと思います。独学この記事を書いた人conti大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。運用ノウハウ開発cntlog。