Cntlog

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

スキルアップ

投稿日

最近他業種からWEBに参入する人が増えたなと感じています。 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デザイナーのスキルアップする上で気をつけていること
Webデザイナーがデザイン以外のあると良いスキルと学び方

独学で進めるオススメの勉強方法

まず前提としてレイアウトや色などツールを使う前の段階で覚えておかないといけないデザインの基礎知識みたいなものがあります。

最初にツールを触って形にしたい気持ちは共感しますが、基礎を最初に学んでおくと覚える・気づく効率が非常に高くなり効率的に学べます。

デザイナのオススメのサイトとしては以下のものがあります。
すぐに目を通せると思いますので、こういった事をデザインをするときに気をつければ良いんだと思っていただければ。

オススメサイト

デザインの基礎

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

オススメ書籍

デザインの基礎

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

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

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

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

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

参考記事

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

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

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

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

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

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

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

模写では無いのですが、UIの気づきというか、デザイナーはこういうところに気を使ってるというテストができるサイトがあります。
cantunsee

こちらで細かなところですが良いデザインというのが確認できます。

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

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

自分でデザインを考えてレビューをもらう

模写ではなく、ユーザーの状態・課題に対してデザインをしていくという流れで学びたい場合はcocodaというサービスがあります。

イメージとしてはUI版のprogateみたいな感じです。
まだ2018年9月に公開されたばかりのサービスなのでまだまだ作り込んでる途中ですが、コンセプトというかやろうとしてることは、デザインを覚えたいあなたに役立つものだと思います。

cocoda

HTML・CSS（コーデイングスキル）編

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

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

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

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

HTMLクイックリファレンス

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

ドットインストールは１講座約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業界は３年も経てば制作環境やツールなどガラリと変わってこれまでの知識が役に立たないケースがよく有ります。（これ、冗談じゃなくて本当です）

私の情報収集ですが、基本的には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デザイナーになるスクールが多かったのですが最近は2ヶ月など短期のスクールも増えてきました。

短期集中型で評判が良いのは、TECH::EXPERTとCodeCampですね。

CodeCampがどんなところかはについては下記の記事にまとめていますので良かったらご覧ください。

独学で挫折したときの選択に。マンツーマン指導のオンラインスクールCodeCamp

パソコンも触ったことがない…みたいな人だと厳しいかもしれませんが自分で勉強出来る人であればオンラインスクールで学ぶのはそれほど難しいものじゃないです。

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

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

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

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

予算や時間がない場合

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

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

実際に未経験で勉強されてる方も良かったと評価されますので、内容のレベルも初心者の方向けにちゃんと合わされています。

未経験からプロのWebデザイナーになる！ の講座

[dfads params=’groups=165&limit=1′]

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

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

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

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デザイナーとして続けていくためにやっていることは下記にまとめています。

Webデザイナーとして成長し続けるために気をつけている事
30代のWebデザイナーが仕事を続けるために意識してること（メンタル編）

最後に

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

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

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

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

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

[dfads params=’groups=169′]

カテゴリ:スキルアップの記事