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デザイナーだけが必要なスキルというわけではありませんが、流行り廃りが多い業界なので日々アンテナを立てていなければいけません。
デザインをする中で効率的に必要な情報を取得することが求められます。

(私がやった)勉強の仕方

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

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

オススメサイト

デザインの基礎
デザインの原理原則がわかる8つの記事
伝わるデザイン

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

WEBサイトの模写をたくさんしました。

参考記事
WEBデザインが短期間で上達した方法
Webデザインのスキルを磨こう!Webサイト模写のススメ

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

手を動かして、なぜこの配置・色なんだろうと考えて模写しながら感覚的に学んでいきます。 デザインに正解はないので、まずは自分が好きなデザインから始めてこういうのが自分の好き!と理解することから始めると良いと思います。

自分が嫌いなデザインを人が受け入れてくれる可能性は低いです。

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

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

サイトをトレースするときはまるごとキャプチャすると良いです。 Chromeの拡張機能のFull Page Screen Captureのようにページの上から下までのキャプチャが撮れるものを使ってそこからトレースをします。 お気に入りのWEBサイトがあればPinterestEVERNOTEなどのサービスにキャプチャを残して置くと自分の模写したいサイトを見つけやすくなります。

模写サイトしたときに参考にしたサイト
MUUUUU 縦長のページを集めているギャラリーサイトです。
1ページの情報が多いので模写のやりごたえがあるサイトが見つけやすいです。

オススメの書籍

デザインの基礎
ノンデザイナーズ・デザインブック
デザインツール
プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド

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

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

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

流行りだからと言って最初にHTML5やCSS3に縛られて手を付けると何がなんだかわからなくなると思います。
最初は基礎を固めましょう。その後にHTML5やCSS3を覚えても遅くありません。 本を見てわからないときはググって調べるのも良いですし、基礎を調べてたいと思ったらこちらがオススメです。

HTMLクイックリファレンス 本で学ぶのに抵抗がある人は動画で学ぶ方法もあります。
ドットインストール
HTML入門 (全16回)
CSS入門 (全18回) こちらは約

1講座3分で終わるので継続的に学びやすいです。 あと無料で使えるのも嬉しいポイントですね。

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

本や動画だけでは学べる幅も狭いので、模写したサイトをそのままコーディングするのをオススメします。 きっと知らないHTML・CSSの書き方があったりもっとこうしたいという気持ちが出てくるので、その時はGoogle先生に聞いて探しましょう。

10サイトも作れば結構なコーディングスキルが身についているでしょう。

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

プログラムも初めは本や動画を見て学ぶのが良いです。 jQueryはJavaScriptを使ったライブラリなのでJavaScriptを先に学ぶかjQueryを先に学ぶかで悩む事も多いかと思いますが、私はjQueryからを勧めます。

jQueryは簡単かつ便利に扱えるので初めて触ってもプログラムがとても楽しくなります
ライブラリも豊富で読み込むだけでリッチな演出が可能になります。
jQueryを覚えれば覚えるほどJavaScriptの事を覚えないといけないので自然とJavaScript学んでいたりしますので難しく考えなくてもよいでしょう。

少しjQueryに慣れた頃にJavaScriptに触れても遅くはありません。
まだまだプログラミングを覚えるWEBデザイナは少ないので他の人と差をつけるチャンスですし、jQueryができるWEBデザイナーは重宝されるので就職の際もグンッと需要が上がります。

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

情報収集編

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

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

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

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

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

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

SEO・アクセス解析編

正直言うと他のスキルは業務の中でも比較的学びやすいですが、SEOとアクセス解析についてはなかなか難しいです。

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

自分でブログを持つと自然とアクセス解析やSEOに興味を持つことができますし、本などで学んだことをすぐに自分のブログに反映できます。

同様に使ってみたいサービスを導入したり、試しに新しい技術をサイトに取り入れてみたりもできます。 仕事だとこういう事なかなか難しいです。

ブログを作るにあたってはWordPressがオススメです。
理由はWordPress自体がブログ用のCMSでカスタマイズし易い事と情報がWEB上にも多く非常に学びやすいからです。

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

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

オススメの書籍

アクセス解析
無料でできる! 世界一やさしいGoogle Analytics アクセス解析入門
WordPress
WordPressデザインブック3.x対応

全部独学だと不安な人は


全部独学でやるって自分のやり方があっているかすごく不安になると思います。 といっても学校に通うのはお金がかかりすぎるし、身近に相談に乗ってくれる人がいないっていう人は、メンター(相談役)がつくようなサービスもあるのでおススメです。
Webデザイン講座(オンラインスクール) 基礎を学び始めたら、自分の方法があってるのか、より効率的なやり方がないかなど自分だけの悩みの相談に乗ってくれるので不安はかなり払拭されると思います。 私が学んだ頃にこんなサービスあったら使ってましたね…。

無料のオンライン説明会を動画で公開されているので、それを見ると内容がわかりやすいですよ。
TechAcademy Webデザイナーコース

他にも最近は動画コンテンツで学ぶものもあります。
本を見て手を動かすのは、慣れないとかって人は動画コンテンツがおすすめです。
動画コンテンツは通勤時などPCがないときでも見るだけで情報を得れますので、気軽に学べます。

私はデザインにかぎらずですが、私はUdemyというサイトをよく利用しています。
価格は結構するのですが、時々びっくりするくらい安いときがあるのでそのときはチャンスですね。

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

スキルに伸び悩みが出てきた人は一度試してみてはいかがでしょうか?

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

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

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

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

お知らせ

Webデザイナーになりたい人向けに就職支援と称して、オンラインでサポートをするグループを作りました。 ご興味がある方はご参加ください。

関連記事

Webデザイナがアフィリエイトを始めて学べること... 去年から少しずつアフィリエイトを始めました。 きっかけはこのブログに広告を貼ってほしいを言われたのがきっかけです。 タイミングと商材との相性がよかったせいか、すぐに成果は出てきましたので、それで興味を持ちました。 もともとブログを書くのは苦ではなかったので、アフィリエイトをやることに抵...
現役WebデザイナーがデザインツールをSketch一択にした理由... 転職を期に制作環境がmacに変わったのもあって二ヶ月前からsketchを導入しました。 ちょっと感動とか恋に落ちるとかのレベルを超えて衝撃的を受けています。sketchまじヤバイ。 以前使っていたデザインツール もともとはFireworksをメインに使っていました。 ただ開発...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
これからの始めるWebデザイナーにオススメ。脱Adobeという選択... この記事はSketch Advent Calendar 2016の15日目の記事になります。 皆さんAdobe製品は使ってますか? 私は使っていません(CCの契約はしているけど)。 理由は単純でAdobe以外のツールを使ったほうが私は効率が良かったからです。 私はSketchに出...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...