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デザイン入門オンライン講座

オトクなキャンペーン情報

Udemyでは、〜11/29 17:00まで年内最大の「BLACK FRIDAY SALE」が開催されています。凄い値引き率の1,200円となっていますので、ぜひこれを機に購入して、学習を始めてみてください。
購入ご学ぶのはいつでもできますので、このキャンペーン期間中に気になる講座は購入しておくのをオススメします。



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

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

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

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

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

関連記事

ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想... 何かを学ぶというと人に習うか、本で学ぶ事がわりと多かったのですが、最近は動画で学ぶ機会も増えました。 私はUdemy(ユーデミー)という動画学習サービスを利用しています。 今回は一年間ほど、使った感想とUdemyの紹介をしていきます。 世界最大級のオンライン学習サイトUdemy ...
デザイナーなら抑えておきたい著作権の勘どころ... 著作権って名称はよく聞くけど、実際はどんなものについているのかよくわからない。 私もそんな一人です。 デザインの仕事をしていると著作権関係の話が時々聞こえてきますのでちょっと調べてみました。 制作者には自動的に著作権がある。 小説、イラスト、写真、音楽などの著作物を制作した場合は自動...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
簡単にスクロールアニメーションが設定できるAOS(jQuery不要)... 最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロール...