Cntlog > スキルアップ・ノウハウ > ぼっちでも独学でWEBデザイナーのスキルを身につける学習方法(基礎編)

ぼっちでも独学でWEBデザイナーのスキルを身につける学習方法(基礎編)

最近他業種からWEBに参入する人が増えたなと感じています。 WEBと一言で言っても デザイナ、プログラマ、ディレクタ、マーケッターなど多種に渡ります。 この需要の高さはWEBサイト自体の需要とWEBサイトを作る敷居が低くなってきた事によるものでしょうか。 他業種とまで言わないにしても私も独学でWEBデザイナーになったので他の方の参考になれば幸いです。

WEBデザイナになる前の私

もともと携帯ゲームのデザイナをやっており、ドットやFLASHアニメーションを使ってゲームを作ってました。 なのでもともとデザイン知識は多少持っていました。 WEBデザイナを目指すきっかけになったのはiPhoneです。

スマートフォンの登場でFLASHやドットのお仕事が減り、このままだと将来危ないなーと思い、当時最先端だったスマートフォンサイトを作る勉強をしました。

始めた当時はCSSやJavaScriptは全然書けませんでした。
スマートフォンサイトを作り続けることで最先端の技術(HTML5/CSS3)に触れて早いスピードで需要のあるデザイナになれたと思ってます。

このWEB業界は意外に新しい技術に触れない人も多いのでスマートフォンサイトを作れるデザイナは少なく需要が高かったので割りと重宝されました。
その後PCサイト覚えていき、必要になったのでWordPressPHPなど動的なサイトも触れるようになって今に至ります。

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に限らずデザインの基礎としては下記の2冊がオススメです。
特になるほどデザインについては、デザイナ歴の長い人でも「これは良書」と答えるくらいしっかりした内容でかつわかりやすいです。
私もデザインのバイブル的な存在でもあります。

オススメ書籍

デザインの基礎

デザイン・デザインツール編

Webのデザインは紙のデザインと異なります。

Webサイトでは動きやデバイスでレイアウトが変わるなど、同じサイトの中でも様々な状態の変化があります。

慣れないうちは、たくさんWebサイトを見る事をオススメします。
初めはカッコイイサイトばかりに目が行くと思いますがそうではなく、よく見るレイアウトやデザインのものを見つけてください。
それは業界の基本になっているものなので、そこができれば応用のデザインができるようになります。

ただデザインを眺めているだけでは、中々気がつかない事も多いですので、毎日少しずつでもいいので、WEBサイトの模写をしてください。

参考記事

デザインは眺めるだけじゃ上手くなりません。

手を動かして、なぜこの配置・色なんだろうと考えて模写しながら感覚的に学んでいきます。 デザインに正解はないので、まずはシンプルなデザインから模写していき、それから自分が好きなデザインに進むと、基礎を抑えつつ自分の味を出せるデザインができるようになります。

WEBサイトの模写はデザインセンスだけでなく、他にも学ぶ所があります。
それはツールの使い方です。
本を一冊買って学ぶのも良いのですが、すぐに継続して実行できる環境がないとすぐに忘れてしまいます。 覚えたツールの使い方を模写をする間に利用して体に染み込ませて、効率的な作り方を見つけれます。一石二鳥ですね。

模写するなかでTOPビジュアルやバナー、フォントなど素材が必要になる事が多々あります。 そんな素材も自分で見つけれるようにもなれます。
オススメのサイトは幾つかありますが、初めての方はタダピクさんがオススメです。 練習用に使うのでしたら、PIXTAもオススメです。
スカシの入った状態でしたらデザインカンプを使うのに無料で利用でできます。

サイトを模写するときはまるごとキャプチャすると良いです。 Chromeの拡張機能のFull Page Screen Captureのようにページの上から下までのキャプチャが撮れるものを使ってそこからトレースをします。

お気に入りのWEBサイトがあればPinterestEVERNOTEなどのサービスにキャプチャを残して置くと自分の模写したいサイトをあとで見つけやすくなります。

模写するためのサイトを見つけるためのギャラリーサイト
  • MUUUUU
    縦長のページを集めているギャラリーサイトです。
    1ページの情報が多いので模写のやりごたえがあるサイトが見つけやすいです。
  • Responsive Web Design JP
    日本国内のレスポンシブで作られたサイトを紹介しています。デバイス毎のサムネイルで紹介しているので見やすいです。

ツールを使うためのオススメの書籍

デザインツール
プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド

HTML・CSS(コーデイングスキル)編

Webデザイナーたるもの、HTMLやCSSも手を動かさないと覚えないと思います。
HTMLやCSSの仕様は多いですが、実際に良く使う部分は限られているのでよく使う所から少しづつ覚えていけばいいと思います。

一番最初は何から手をつけて良いかわからないと思いますので、デザインの学校 これからはじめるHTML&CSSの本 のようにHTMLとCSSが一緒に学べるような本を一冊買ってみて、その通りに作ってみると良いです。

流行りだからと言って最初にHTML5やCSS3に縛られて手を付けると何がなんだかわからなくなると思います。
最初は基礎を固めましょう。その後にHTML5やCSS3を覚えても遅くありません。

本を見てわからないときはググって調べるのも良いですし、基礎を調べてたいとWebで学ぶ事もできます思ったらこちらがオススメです。

HTMLクイックリファレンス

本で学ぶのに抵抗がある人は動画で学ぶ方法もあります。

ドットインストールは1講座約3分で終わるので継続的に学びやすいです。

あと無料で使えるのも嬉しいポイントですね。

なるべく自分の手を動かしてコーディングを覚えたい人はProgateもオススメです。
ドットインストールでは動画を見てから、自分の環境でコーディングをしますが、Progateでは課題毎のスライドを見てからブラウザ上でコードを書いて正解不正解を見てくれます。

ドットインストールもProgateも月額課金のプランがありますが、2つとも1000円いかないくらいなので、一ヶ月だけ契約して短期集中で覚えるのがオススメです。(コーディングはダラダラやっても覚えないので。)

ただコーディングって一度で覚えれるものでもないので、何度も何度も反復で練習する必要があります。

学んだコーディングスキルを活かす方法

本や動画だけでは学べる幅も狭いので、模写したサイトをそのままコーディングするのをオススメします。
ここでも、模写の成果が生きてきます。

きっと知らないHTML・CSSの書き方があったりもっとこうしたいという気持ちが出てくるので、その時はGoogle先生に聞いて探しましょう。
どうしてもわからないときは、そのサイトで実際にどう実装されているかを見てカンニングすれば、作業が止まりにくいかと思います。

他の方法として、質問サイトに投稿するというのも手ですね。
Web業界のyahoo知恵袋的な存在としてteratailというサイトがあります。

こちらに質問すれば答えてもらえるかもしれません。(プログラミングの質問が多いですが、CSSやJavaScriptの質問も大丈夫ですよ)

このように着実に進めていって5サイトも作れば結構なコーディングスキルが身についているでしょう。

JavaScript・jQuery(プログラミングスキル)編

プログラムも初めは本や動画を見て学ぶのが良いです。
余談ですが、コードを移し書きしていく場合模写ではなく写経と言います。

jQueryはJavaScriptを使ったライブラリなのでJavaScriptを先に学ぶかjQueryを先に学ぶかで悩む事も多いかと思いますが、私はjQueryからを勧めます。

jQueryは簡単かつ便利に扱えるので初めて触ってもプログラムがとても楽しくなります

jQueryはライブラリも豊富で読み込むだけでリッチな演出が可能になります。
jQueryを覚えれば覚えるほどJavaScriptの事を覚えないといけないので自然とJavaScript学んでいたりしますので難しく考えなくてもよいでしょう。

プログラミングは苦手で嫌だなと思われるかもしれませんが、まだまだJSを扱えるWEBデザイナは少ないので他の人と差をつけるチャンスですし、jQueryができるWEBデザイナーは重宝されるので就職の際もグンッと需要が上がります。

オススメの本
Web制作の現場で使うjQueryデザイン入門
一度でプログラミングを覚えれるものでもないので、何冊も本を買うよりも同じ本で何度も繰り返し覚えるほうが身になりやすかったです。
オススメの動画

情報収集編

WEBデザイナーはツールの流行り廃りもあれば、デザインの流行り廃りもあったりします。

この辺の情報を日頃から集めれるようになると時代に合わせたWEBデザイナーに着々と成長できます。 逆にデザインばかりして情報収集を疎かにしていると時代に取り残されたWEBデザイナーになっている可能があります。

私の肌感ですが、WEB業界は3年も経てば制作環境やツールなどガラリと変わってこれまでの知識が役に立たないケースがよく有ります。(これ、冗談じゃなくて本当です)

私の情報収集ですが、基本的にはTwitterやfacebookなどSNSが中心です。
日頃から高い感度を持った人をフォローしておくとオススメです。

私もTwitterをしていますが、あまり感度の高い事はつぶやかないですが自分が気にいった記事は良くシェアしてるので刺激になるものが見つかるかもしれません。 よかったらフォローしてくださいね。

具体的な私の情報収集の方法は別記事にまとめていますのでこちらを参考にしてください。
社畜系Web屋が実践してる時短の学習法

SEO・アクセス解析編

これまで紹介したスキルは業務の中でも比較的学びやすいですが、SEOとアクセス解析についてはなかなか難しいです。

というのも仕事の中でWEBデザイナがSEOとアクセス解析に携われる機会は少ないですし、そもそも教えてくれる人もいないです。
なので私がオススメするのは、自分のブログを作ることでそれを試行錯誤して学ぶことです。
私の場合今見ていただいてるこのサイトもその一つです。

自分でブログを持つと自然とアクセス解析やSEOに興味を持つことができますし、本などで学んだことをすぐに自分のブログに反映できます。
最近ではブログをやっているとSNSで声をかけてもらえたり、記事をシェアしてもらえたりして嬉しいです。

自分で自由に出来るWebサイトをもっていると情報収集しているなかで気になったサービスを導入したり、試しに新しい技術をサイトに取り入れてみたりもできます。 仕事だとこういう事なかなか難しいであるとアウトプットの量が断然変わります。

他にもブログを持っているとそれがポートフォリオの一つの作品にも使えたりしますので、便利です。
ブログは履歴書や面接では伝えられないあなたの良さを見つけてもらえる可能性がありますので、口下手であったり自分に自身のない人にはオススメです。

ブログはどこで書くのが良いのか聞かれますが、やっぱりWordPressがオススメです。
理由はWordPress自体がブログ用のCMSでカスタマイズし易い事と情報がWEB上にも多く非常に学びやすいからです。

また、WordPressは色々なサイトで利用されていて、仕事/就職にもつながりやすいのでWordPressを覚えておくのが強みにもなります。

別の記事でWebデザイナーがブログを持つと良いよって記事を書いたのでご興味あれば見てください。
未経験WEBデザイナーはブログを持ったほうが良いと思う私なりの理由

オススメの書籍

アクセス解析入門のオススメの本
わかばちゃんと学ぶ Googleアナリティクス
WordPress入門のオススメの本
世界一わかりやすいWordPress 導入とサイト制作の教科書

自分に自身がない人


全部独学でやるって自分のやり方があっているかすごく不安になると思います。
私もそうでした。

そう言った場合はお金はかかってしまいますが、短期集中でスクールに通ってみるのも一つの手です。
昔は半年〜1年通ってWebデザイナーになるスクールが多かったのですが最近は3ヶ月など短期のスクールも増えてきました

短期集中型で評判が良いのは、WebCampProさんですね。

転職保証付きプログラミングスクール「WebCamp PRO」

就職率で98%というのは結構気になる数字です。

他にもWebCampProさんは就職できなかった場合の全額返金制度があるので、そのへんも自信の現れなのかなと思います。

本当に3ヶ月の勉強でWebデザイナになれるの?と思われるかもしれませんが、何から手を付ければ…のような迷子にならずに勉強すればそのくらいの期間でそれだけのスキルは身につきます。
実際私も何人も就職させることができました。

もちろんパソコンも触ったことがない…みたいな人だと厳しいかもしれませんが自分で勉強出来る人であればそれほど難しいものじゃないです。

誤解の無いように言っておくと受け身な感じの人だと難しいかもしれません。
どんどん意欲的に自分で相談/吸収出来る人だとって話ですね。

私も就職したいと相談を受けた方にアドバイスを幾つかしてたのですが、何か理由をつけてやらなかった人は結局就職できたと言う連絡は来ませんでした。

スクールの良いところは自分だけの悩みの相談に乗ってくれるのと一緒に頑張れる仲間が見つけられるところですね。
もしいま不安を抱えている方はかなり払拭されると思います。

私も当時独学でやってたときにこのサービスがあれば使ってたんじゃないかなと思います。

予算や時間がない場合

スクールはある程度まとまった時間がないと難しいと悩む方は、Udemyで学ぶのがオススメです。
デザインにかぎらずですが、私はUdemyというサイトをよく利用しています。
価格は結構するのですが、時々びっくりするくらい安いときがあるのでそのときはチャンスですね。

Webデザインを学ぶのでしたらこちらのコースがボリュームと網羅感があってオススメです。
Webデザイン入門オンライン講座

なぜ、Udemyが良いかというと、実は講座を購入すると講師に質問ができます。
本だとわからないときのググり方がわからないという事もありますが、その講座の内容であれば質問できるのでこの方法でも不安は解消出来るのではないでしょうか。

なぜUdemyが良いのかは別の記事で感想を書いているので良かったらごらんください。

動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想

udemyはデザイン以外の講座も豊富なのでスキルに伸び悩みが出てきた人は一度試してみてはいかがでしょうか?

モチベーションの維持する方法

すごい技術に触れたり、自分で思っていた以上のものが出来たときは嬉しいものですが、なかなかそのモチベーションを維持するのは難しいですね。

モチベーションをあげたいとき、私は勉強会に参加したり同業者と話したりします
私はぽっちで開発しているので他人の言葉がとても刺激になったりするのです。 頑張ってる人を見ると自分ももっと頑張らないとってなります。

勉強会はconnpasstechplayで見つけられます。
やっぱり関東方面が圧倒的に多いですが。。。

IT系の勉強会はなぜか他業界に比べて圧倒的に安価で行われるものが多いです。(3000円くらいのものでも十分業界の最前線の人の話が聞けます。)
もちろん数万円するような講座もありますが、Webデザイナーとして学ぶものとしては高いと思います。(よくWordPressとか結構高額なやつがありますが、そんなに凄いことはやれないはずです。)

勉強会に参加したときに、懇親会があれば是非参加してみてください。
「自分がいても…」みたいに不安に思うかもしれませんがWebっていつ共通言語があるので普通に話せます。
もちろん初心者の方も一定数いますので、ぼっちになることは少ないはずです。

勉強の仕方は色んな方法がありますがに継続できるやり方を見つけるのが一番大事だと思うので、自分なりの刺激を見つけてください。

最後に

Webデザイナになりたいって言う人は今すごく増えています。需要もどんどん高まっているのですが、とにかく覚える/期待されることが増えていて一人でWebデザイナになるのが少しずつ難しくなっています。

ただ、ちゃんと情報を整理して自分がどんなWebデザイナになりたいのかを決めて、そのためには何が必要なのかを見極めれれば最短距離でWebデザイナになれます。(極端な事を言うと名乗ったらすぐにWebデザイナになれますがw)

もし今あなたが就職を意識してるのでしたら、Webデザイナとして就職するためにやっておいたほうが良いことをまとめてあります。
Webデザイナーが転職するために初めにやっておくこと

早めに就職したいという方はこちらが参考になるかと思います。
未経験の人が最短でWebデザイナーになる方法

参考になれば幸いです(*ゝω・*)

関連記事

簡単にスクロールアニメーションが設定できるAOS(jQuery不要)... 最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロール...
デザイナーなら抑えておきたい著作権の勘どころ... 著作権って名称はよく聞くけど、実際はどんなものについているのかよくわからない。 私もそんな一人です。 デザインの仕事をしていると著作権関係の話が時々聞こえてきますのでちょっと調べてみました。 制作者には自動的に著作権がある。 小説、イラスト、写真、音楽などの著作物を制作した場合は自動...
ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
これからWebデザイナーを始める人にオススメ。脱Adobeという選択... この記事はSketch Advent Calendar 2016の15日目の記事になります。 皆さんAdobe製品は使ってますか? 私は使っていません(CCの契約はしているけど)。 理由は単純でAdobe以外のツールを使ったほうが私は効率が良かったからです。 私はSketchに出...
スマートフォンサイトを作るときによく使うhead内のタグ... スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。 スマホサイトを作り慣れていない人の参考になれば嬉しいです。 目次 viewport ...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...