先日の記事で、独学スキルがいかに重要かについてお伝えしました。
独学は優秀さでもなんでもなく、そういうスキルなのです。
独学スキルを身につければ、どんなスキルでも自分で学べます。
何かに支払う教育コストも、最小限で済ませることも可能でしょう。
放っておいても成長し、問題を解決して仕事も終わらせてくれる。
そんな力が育てられた人材が、求められないはずはありません。
でも、疑問なのは、具体的なスキル習得をどうすればいいかですよね。
STARTOUTではWEBデザインやプログラミングのスキル習得も扱っています。
たとえば、WEBデザイナーやエンジニアになるには、どう独学すれば良いのか。
具体的な方法について、知りたい方もいらっしゃると思います。
そこで、今回は、独学でWEBデザイナーになるための方法をお伝えします。
WEBデザイナーとは、今やデザインをするだけの仕事ではありません。
HTMLやCSS、JavaScriptなど、基本的なプログラムもできる必要があります。
WEBサイトを1人で作れて、初めてWEBデザイナーと言っても良いでしょう。
また、WORDPRESSのようなシステムやPHPも使えたら、なお良いです。
メールフォームや会員登録システム、簡易的なWEBサービス。
これからのWEBデザイナーには、システムの知識も必要になってきます。
少しずつ、WEBデザイナーとしての領域は拡大しているのです。
また、デザイナーとしてはUI・UXも詳しければ良いですね。
ただUI・UXデザイナーはWEBデザイナーとはまた違った領域です。
UXやUIデザイナーになる方法については、また改めてお伝えしますね。
また、本気で習得したい方は、記事の内容を、必ず実践してください。
大事なのは知っていることではなく、実践です。
記事は実践して学んでいくための「地図」として参考にしましょう。
何を学んだとしても「実践しなければ」なんの役にも立ちません。
読んで、理解した気になって終わり、というのが何より、最悪です。
では、進めていきましょう。
学習の流れを把握しよう
WEBデザイナーとしての勉強と言っても、何から始めれば良いのでしょうか。
何を、どんな順序で学ぶべきか、見当がつきづらいとは思います。
一言で学ぶと言っても、たくさんの項目がありますからね。
今回は、WEBデザイナーになるための、学ぶべき最低限の順序を提示します。
WEBデザイナーを目指すなら、下記の順序で学んでみてください。
- WEB制作の基本的な流れ
- Photoshopの使い方
- WEBデザインの基本方法
- HTML×CSS
- JavaScript
- WORDPRESS
- WEBディレクション
- PHPなどバックエンド
まず、全体の流れが分からなければ、何も始まりません。
WEB制作の全体の流れを知りましょう。
そのあとは、デザインするための「ツール」を学びます。
基本的にWEBサイトはPhotoshopで作られることが多いです。
よくWEB制作を学ぶ時にHTMLやCSSから始める方も多いと思います。
しかし、通常の仕事では、いきなりソースコードを打ち始めることは、ほぼありません。
デザインデータをまず作ってから、HTMLやCSSを使ってコーディングするのです。
そして、デザインに使われるツールが何か。
多くの場合、デザインに使われるツールがPhotoshopなのです。
まずphotoshopを使えるようになりましょう。
Photoshopの使い方を把握したら、次はデザインの方法を学びます。
どうやってWEBデザインは作られるのか、手順はどうするのか。
気をつけるポイントは何で、知っておくべき知識は何か。
WEBデザインの方法を学んでください。
そして、デザインを学んだら、やっとHTML×CSSです。
デザインデータがあって、初めて本格的なコーディングを実践できます。
あとは、画面に「動き」を持たせるJavaScript。
クリックしてナビゲーションを開いたり。
スライドショーをつけたり。
WEBサイトがアプリのように「動く」のはJavaScriptのおかげです。
ここまでが、フロントエンドと呼ばれるスキルとなります。
フロントエンドとは、WEBサイトの「見た目」を構築する作業になります。
次にWEBサイトにブログ的な更新機能を持たせるWORDPRESS。
CMSと呼ばれる、WEBサイトを更新管理するための仕組みですね。
あとは、仕事をうまく進めるためのWEBディレクション。
作れても、仕事運びが下手なら、トラブルも起きやすいです。
仕事に繋げるにはディレクションの知識も必要です。
そして、興味があればPHPなどのバックエンドも学んでみてください。
バックエンドとは、データを保存したり、書き出したりする役割を持ちます。
会員登録システムやショッピングサイトなどは、バックエンドのスキルが必要です。
WEBデザイナーの場合、このような流れで習得を進めてみてください。
なお、STARTOUTには、これらの知識が全て入っています。
学習だけでなく実践もまとめて全てできるので、習得しやすいはずです。
よければ使ってみてくださいね。
>>Python入門講座【IT初心者やプログラミング未経験者におすすめ】どんな言語？メリットは？
学習サービスやブログ、動画などで一通り学習する。
なんとなく、習得の流れは把握して頂けたでしょうか。
ただ、問題なのは「どうやって学ぶか」ということです。
本を読んだり、実際に作ってみたり。
習得方法は色々あります。
しかし、今は非常に習得しやすい世の中になりました。
たくさんの学習サービスや情報がネット上に存在しているからです。
Progateやドットインストール、そして僕たちのSTARTOUT。
Youtubeなら無料で動画がありますし、Udemyもあります。
こうした教材やサービスを、まず活用しましょう。
ただ、学習サービスを利用するにせよ「学び方」があります。
単純にサービス内容をなぞれば良いだけではありません。
義務教育の学習と同じような学び方だと習得できないでしょう。
では、一体、どうやって習得すべきなのか。
それは常に「本番に近い環境で実践」することです。
例えばphotoshopを覚える時、Photoshopの教材を読むだけだと無駄です。
実際にphotoshopを動かしながら作ってみる必要があります。
一通り勉強したはずの人が、実践である失敗に陥ることがあります。
学習はしたはずなのに、実践になると「何するんだっけ？」となるのです。
結局、実践で何から初めていいか分からず、また勉強しなおします。
どれだけ学んだとことで、実践無しには何も報われません。
HTML×CSSの場合も同じです。
Progateのようなサービスの場合、すべてブラウザ上で学べます。
しかし、ブラウザ上だけで学んでも、実際に使えるようになりません。
実践になった途端「何すればいいの？」となります。
Progateのような学習教材は「実践と併用」しなければなりません。
WEB上で学んだら、すぐに自分のパソコン上でも試すのです。
テキストエディタを開き、Progate上で出来たことが、パソコンで再現できるか試します。
学習サービスで学んだことが実践で出来るか、即座に試すのです。
WEBで学習し、実際の環境で実践する。
実践がうまくいったら、WEBで学習に戻る。
この繰り返しで実践をしながら学ぶことが出来ます。
Progateのようなサービスを使う時は、気をつけてください。
また、最初から全てを完全に把握しようとしないことです。
完璧を目指さないことが、学習を続ける秘訣と言っても良いでしょう。
最初にすべきことは、概要を抑えることです。
全体的に学び、実践してみて、なんとなく把握することです。
知識としての情報がなければ、何を練習することも出来ません。
photoshopの使い方を知りたければ、まずざっくりphotoshopの概要を知ること。
最初から完全にマスターしようとする必要はありません。
全体を把握し、なんとなく使える程度になるくらいでOKです。
あとは、実践経験を積みながら成長していきましょう。
完全に全てを把握しようと思ったら、膨大な時間がかかります。
モチベーションも続かず、やめてしまう可能性が増えるでしょう。
>>J Career SchoolでWebデザインやPhotoshopをスキマ時間で学習
実践して出来たものをアレンジしてみよう。
よくある失敗として「教材をなぞるだけ」という失敗があります。
本当に「なぞるだけ」で理解できるとしたら奇跡でしょう。
技術は「自分の意思」で動かしてみて、初めて理解が深まるのです。
例えば、学習サービスでサンプルがあったとします。
多くの人は、そのサンプルをサンプル通りに作ります。
でも、これだと覚えることはできません。
習得できる人は、作ったサンプルをさらに自分の手で改造します。
一部変えてみて、それでも動くかどうか検証してみるのです。
また、自分なりにアレンジもします。
サンプルを少し変えたり、アレンジして別のものを作ったり。
繰り返し自分で改良し、使うことで、初めて理解が深まります。
パソコンの使い方を学ぶのと一緒です。
指示通りに動かしてみたところで、使えるようにはなりません。
指示されたことを参考に自分なりに使うから、使えるようになるのです。
Photoshopのサンプルがあったら、少し自分で改良した図形を描いてみる。
デザインのサンプルがあったら、自分でサンプルを変えてみる。
プログラミングで参考を真似したら、ちょっと変化を加えてみる。
使ってみて、いじってみて、中がどうなっているのか把握する。
自分の手で改良することが、何よりも大切なのです。
また、なかなか理解できなかった時の対処も重要です。
最初に理解仕切れない箇所は、飛ばしましょう。
先ほどもお伝えした通り、最初から完璧に理解する必要はありません。
なぜなら、理解できる箇所を学ぶうちに、理解力が上がるからです。
わかる箇所から進めて、理解できない箇所は飛ばして進む。
すると、経験を重ねるうちに、徐々に理解力があがってきます。
わかるところから、理解できる範囲を少しずつ増やすイメージです。
理解力が上がった後で、もう一度試してみると、理解できたりします。
なんでこんな簡単なことを理解できなかったのかと思うかもしれませんね。
プロの仕事を観察して自分と比較しよう。
ある程度、学習が進んできたら、今度は「プロから吸収」します。
どんな学習サービスや教材でも、すべては網羅できません。
実践の中で学ぶ、細かい知識や技術を含めると、膨大な数になります。
到底、1つの学習教材やサービスで賄えるものではありません。
例えば、ショートカットをどのタイミングで使っているかとか。
Photoshopのグラデーション機能をどこで使うかとか。
それは、ケースバイケースとしか言いようがありません。
全てのケースを残さず掲載しようとしたら、学習なんて仕切れないでしょう。
そうしたプロのスキルは、学習ではなく観察して真似します。
学習というよりも「そういう時はそうするのか」と体得する必要があります。
だからこそ、観察して自分に取り入れることに慣れなければなりません。
基本をある程度覚えたら、大事なのは観察です。
一定以上の知識やスキル以上は、観察して吸収することで伸びます。
例えばデザインの場合。
プロのデザインと、自分のデザインを比較しましょう。
そして、何の違いが完成度の差を生み出しているのか分析してみてましょう。
ショートカットキーはどう使っているのか。
デザインの作り方は、どのようなツールをどう使って作っているのか。
作業を効率化するために、どんな作り方をしているのか。
プロの横で作業をみる機会を作ったり、デザインデータをもらったり。
Youtubeで作業している動画を探してみたり。
プロの仕事を観察し、盗める機会はたくさんあります。
プログラミングでも同じです。
どんな書き方をして、どんなツールを使っているのか。
既存のWEBサイトのソースコードを見れば、一目瞭然です。
プログラミングの場合、コードを読む力も観察力です。
とにかくプロのコードを読み、どんな書き方をしているか学んでください。
HTMLやCSS、JavaScriptはサイトさえあれば、だれでも見れるはずです。
既存の制作物や仕事を観察して、スキルを盗むこと。
これこそ、初心者を脱出し中級者になるために必要なスキルです。
観察し、吸収することができれば、教えてもらわなくても効率よく学べます。
>>Pythonの資格の種類や初心者向けの資格について｜Pythonは国家資格？｜難易度や合格率は？
評価とレビューをもらって改善する
WEBサイトを実際に作れるようになったら、レビューをもらいましょう。
実際にプロに見てもらい、改善点を出してもらうのが、一番の練習です。
しかし、プロに見てもらうと言っても、そう簡単なことではありません。
実際にレビューしてもらうには、まずプロに会う必要があります。
また、すでに仕事をしている人は、基本、忙しいです。
忙しい仕事の合間で見てもらうのですから、有料でもない限り難しいでしょう。
では、どうやってレビューをもらえば良いのか。
もっとも簡単な方法は、Twitterに投稿してみることです。
まずはサーバーにアップロードしたり、Gitに公開。
URLをTwitterに掲載して、みてもらう。
作品を共有する手段は、いくらでもあります。
公開しレビューを求めれば、運がよければレビューをもらえるでしょう。
しかし、それでも難しい場合。
作ったWEBサイトを作品として、就職するのが手っ取り早いです。
就職すれば、プロがたくさんいる環境で仕事ができます。
もちろん作ったWEBサイトをレビューしてもらうこともできるでしょう。
>>キャリア形成について必要な考え方｜これから求められる5つのスキル｜スキルを身につける方法とは
レビューを求めて、断られるようであれば、その職場は良くありません。
良い職場や会社には、必ずレビューの文化があります。
何が良くて何が悪いか、しっかり確認して技術レベルをあげています。
そうでなければ、いつまでも社内の技術力は上がらないでしょう。
もっとも、仕事として作るなら、必ずレビューはされます。
初心者が作ったものを、クライアントに出すことはしません。
必ずチェックし、クオリティを向上させてから提出するでしょう。
大抵の場合、職場でレビューしてもらうことで、スキルは大きく向上します。
可能な限り、レビューを受けられる環境に自分を置いてください。
それで初めて、プロレベルのスキルアップができるのです。
独学とあわせて、プロからのレビューは必要です。
自分の作品を見せて、改善点のアドバイスをもらってください。
まとめ
学校に行くと、大きなお金がかかります。
しかし、学校で身につけられるスキルは独学でも習得できます。
昔は、WEB学習サービスなんてありませんでした。
ネットで調べても、情報さえ確かなものは少ない状況です。
そんな中だったら、学校も役に立ったのでしょう。
ところが今は、知識や技術ならオンラインで学べます。
先生の代わりに動画があり、教材があり、コンテンツがあります。
調べればすでに、豊富なインプットが可能になったのです。
学校で得られるものは、すでに技術や知識そのものではありません。
一緒に勉強する仲間とのコミュニティ。
大きなお金を払いました、という覚悟。
プロからレビューをもらえること。
この3つなのです。
しかし、この3つもまた、学校である必要がありません。
WEBを学ぶコミュニティは、すでにいくつもあります。
覚悟はお金を払わなくても、自分で決めればいいだけです。
なんなら機材にでも投資したら良いでしょう。
プロからのレビューは就職すればもらえます。
就職なら実践経験も実績も詰めます。
学校でレビューをもらうよりも、明らかに就職すべきでしょう。
さらに、独学で勉強できる独学思考の持ち主は仕事でも役立ちます。
何しろ誰に教えてもらわなくても、勝手に成長するのですから。
放っておいても仕事の問題を解決し、完了させてくれるのですから。
独学で学べるスキルは、問題解決力の高さに他なりません。
自分で学べるスキルは、技術を独学で学んだ経験からしか手に入りません。
WEBデザインやプログラミングの習得は、独学思考を得るチャンスなのです。
WEBデザインに限らず、何かを学ぶ際、独学に挑戦してみてください。
それでどうしても無理だったら、学校という選択肢もあります。
自分の力で習得し、成長する力を、ぜひ養ってみてください。