2016年1月27日

独学でWebデザイナーを目指す人のためのノウハウ

Webデザイナーになりたい人必見!未経験からWebデザイナーになる為の実践的フロー

Webデザイナーになりたい人必見!未経験からWebデザイナーになる為の実践的フロー

Webデザイナーになりたいけれど、未経験からWebデザイナーになるのは難しいと考えていませんか?特に、30代からの未経験スタートではもう遅いと考えている人は多いのではないでしょうか?
実務経験がない分、経験者より不利になることは否めないものの、未経験からWebデザイナーになった人はたくさんいます。
独学でWebデザイナーになることも決して不可能ではないのです。
 
Webデザイナーへの転職を目指している方のために、未経験でもWebデザイナーになるための実践的フローを解説します。
Webデザイナーになるために揃えておくべきもの、Webデザインやツールの勉強方法、身につけておくべきスキル、転職活動をする前に作成しておくべきポートフォリオサイトなどについてまとめました。
 


(この記事を読んだ人は、こちらの記事もよく読んでいます)
  1. 僕は独学でイラストレーターになった!素人→プロになるまでの絵を見せます
  2. 独学でWebデザインを学習できる!デザイナー初心者が絶対に押さえておきたいサイト・記事14選
  3. 知らなきゃ損! Webデザインの作業効率がアップするチートシート13選

1.必要なものを用意する

まずは、Webデザイナーになるために揃えておくべきものを解説します。
ある程度の費用が必要ですが、自分への投資だと考え、最初に必要なものを揃えておきましょう。

 

PC(パソコン)

PCがないことにはWebデザインができませんので、なにはともあれPCの用意が必要です。
デスクトップPCでもノートPCでもどちらでも構いませんが、WindowsかMac(OS X:オーエステン)かによって使えるソフトや使い勝手に違いがあるので、OSを最初に決めた方がよいでしょう
 
Macはフォントの質が高い、グラフィック性能が優れているといった特徴があるため、Macを使うWebデザイナーは多いですが、Windowsでも問題ありません。
ただ、後ほど紹介するPhotoshopやIllustratorといったソフトは、MacとWindowsで別なので、Mac用のPhotoshop・IllustratorをWindowsに使用することはできませんし、逆もまた然りです。
あまりないケースだと思いますが、先にソフトを買ってしまっている場合は、ソフトに合わせてOSを選ばなければなりません。
 
※MacのOSは、かつて Mac OS Xという名称でしたが、現在の正式名称はOS X(オーエステン)になっています。

 

Photoshop(フォトショップ)

Adobe Photoshop CC

画像編集、加工ソフトのPhotoshop CC | Adobe Creative Cloud
 
Photoshopは、Adobe(アドビ)社が販売している画像編集ソフトです。
無料、または価格が安い画像編集ソフトもありますが、Webデザイン業界ではPhotoshopを使うのが一般的であるため、Photoshopは購入しておいた方が間違いありません。
 
現在、パッケージ版の販売は終了しているため、ダウンロード版のAdobe Photoshop CC、または総合パッケージのAdobe Creative Suiteで購入します。
単体のPhotoshop CCもCreative Suiteも月額制となっており、プランによって使えるソフトと月額料金が異なります。
一部の機能を制限し、価格を抑えたAdobe Photoshop Elementsという製品もありますが、プロのWebデザイナーを目指すならPhotoshop CCを購入しておいた方がよいでしょう。
 

Illustrator(イラストレーター)

Adobe Illustrator CC

グラフィックデザインソフトのIllustrator CC | Adobe Creative Cloud
 
Illustratorは、Adobe社のグラフィックデザインソフトです。
こちらもPhotoshopと同じく、パッケージ版は販売終了しており、ダウンロード版のみの販売となっています。
 
Illustratorは拡大縮小しても画質が粗くならないベクター画像を扱うソフトであるため、ロゴデザインやアイコンなどのイラスト作成を得意としています。
Photoshopはピクセル(画素)を用いたビットマップ画像(ラスター画像)を扱うソフトで、画像加工が得意です。
IllustratorとPhotoshopはそれぞれ扱う画像や機能が異なるため、用途に応じて使い分けます。
 

テキストエディタ

HTMLでWebサイトを作成するには、テキストエディタが必要です。
HTMLファイルやCSSファイルは、OSに標準搭載されているテキストエディタ(Windowsはメモ帳、OS Xはテキストエディット)でも編集はできますが、必要最低限の機能しかないため、機能が充実しているテキストエディタを使いましょう。
 
使えるテキストエディタはWindowsかOS Xかによって異なりますので、それぞれの代表的な無料テキストエディタをいくつか紹介します。

 
Windowsの無料テキストエディタ

・サクラエディタ
Sakura Editor - A Japanese text editor
 
・TeraPad(テラパッド)
TeraPad
 
・Notepad++(ノートパッドプラスプラス)
Notepad++ Home

 
 
Mac用の無料テキストエディタ

・mi(ミ)
mi - テキストエディタ
 
・CotEditor(コットエディター)
CotEditor -Text Editor for macOS

 
Windows・Mac両対応の無料テキストエディタ

・Sublime Text(サブライムテキスト)
Sublime Text: The text editor you'll fall in love with
 
・Atom(アトム)
Atom
 
・Emacs(イーマックス)
GNU Emacs - GNU Project
 
・Vim(ヴィム、ヴィアイエム)
welcome home : vim online

 

書籍

Webデザインを独学で勉強するなら、いくつか書籍を揃えておきましょう。
PhotoshopとIllustratorの使い方、HTML・CSSの基礎、Webデザイン、JavaScript・JQuery、タイポグラフィ、できればWordPressも勉強しておいた方が仕事の幅が広がります。
 
※JQueryは、JavaScriptを簡単に記述できるように設計されたJavaScriptライブラリです。
※WordPressは、個人ブログから企業サイトまで幅広く活用されているオープンソースのCMS(コンテンツマネジメントシステム)で、難しい知識がなくても簡単に機能に優れたサイト・ブログを作成することができます。
 

Photoshop関連書籍

世界一わかりやすいPhotoshop 操作とデザインの教科書
 
Photoshop 10年使える逆引き手帖
 
プロの現場で使われている Photoshopの「超速」テクニック
 

Illustrator関連書籍

Illustrator 10年使える逆引き手帖
 
Illustrator 10年使える逆引き手帖【CC/CS6/CS5 対応】【Mac OS X & Windows 対応】 (ああしたい。こうしたい。) | 高野 雅弘
 
10倍ラクするIllustrator仕事術

 
HTML・CSS関連書籍

作りながら学ぶ HTML/CSSデザインの教科書 | 高橋 朋代, 森 智佳子
 
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる) | エビスコム
 

Webデザイン関連書籍

プロとして恥ずかしくない 新・WEBデザインの大原則 | 大藤 幹, 窪木博士, 久保知己, 小西春輝, 小浜愛香, 坂本邦夫, 佐藤 裕, 原 一宣。, 原田学史, 前川昌幸, 三留裕介, こもりまさあき
 
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL) | 菊池崇
 
フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。
 

JavaScript・JQuery関連書籍

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) | 狩野 祐東
 
Web制作の現場で使うjQueryデザイン入門

 
タイポグラフィ

タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック

 
WordPress

WordPressレッスンブック HTML5&CSS準拠 | エビスコム
 
WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) | 中島 真洋, ロクナナワークショップ

 

2.本業の傍ら、コツコツ勉強する

仕事をしながらWebデザインの勉強をするのは大変ですが、スクールに通わず独学でWebデザイナーになることは十分可能です。
ネットで検索すればHTML、CSS、JavaScript、JQuery、WordPressなどのチュートリアル・ノウハウはたくさんヒットするので、独学でもWebデザインの勉強法はたくさんあることがわかります。
 
書籍ではなかなか勉強が進まないという方には、無料動画でプログラミングが学べる「ドットインストール」がおすすめです。
HTML、CSS、JavaScript、WordPressなど、Web制作初心者向けのレッスンが充実しています。
各動画は3分以内に収められているので、毎日コツコツ勉強しやすいです。
 
ドットインストール

HTML入門 (全24回) - プログラミングならドットインストール  

 

3.ひとつWebサイトを作ってみる

まずは、ひとつWebサイトを作ることを目標にし、徐々にステップアップしていきましょう。
短期で結果を求めるのではなく、中長期でコツコツ勉強していき、力を蓄えていきます。
 
モチベーションを維持するために、ブログに勉強したことを書き溜めていくのもおすすめです。
アウトプットをすると知識が定着しやすいですし、ブログ自体があなたのポートフォリオのひとつとなります。何より、ブログとはいえ実際にサイトを運営するのは貴重な経験となります。
 

 

4.未経験からWebデザイナーになるためのスキルの上げ方

未経験からWebデザイナーになるには、何か武器となるスキルが必要です。
HTML、CSS、JavaScript、JQueryなどの基礎スキルを身につける傍ら、スマートフォンサイト作成のスキルを上げていきましょう。
今はスマートフォンが主流の時代で、Webサイトのスマートフォン最適化がほぼ必須となっています。
スマートフォンに対応しているHTML5とCSS3、単一のファイルでPCとスマートフォンの両方に対応するレスポンシブウェブデザインあたりのスキルは押さえておきたいところです。
 
iPhoneもAndroidもFlashに対応していないため、今学ぶなら、動きのある実装ができるHTML5とCSS3が有力です。
JavaScriptはHTMLより難易度が上がるため、挫折しそうだという方はHTML5とCSS3に力を入れて学ぶのがよいかと思います。
 

 

5.ポートフォリオサイトを作成する

未経験からWebデザイナーに転職するには、ポートフォリオサイトを作っておきましょう。
ポートフォリオサイトは、Webサイトやイラスト、写真などの自分の作品をまとめたサイトのことです。
未経験では実績がありませんので、その代わりに自分で作成したWebサイトやイラストをポートフォリオサイトで公開し、どんなデザインができるのか、どれぐらいのスキルを持っているのかを可視化します。
 
ポートフォリオサイトは、いわばWebデザイナーにとっての名刺代わりですので、未経験であるか経験者であるかに関わらず、転職活動をするなら作っておくべきです。
ポートフォリオサイトで公開した作品に興味を持ってもらえれば、採用のチャンスが広がります。
 

 

今回紹介したような実践的フローを踏めば、未経験・30代からであってもWebデザイナーになることは可能です。
実務経験がない点や、独学の場合は専門学校やスクールで学んだ経験がない点が不利に働きますが、しっかりとしたポートフォリオサイトさえ用意できれば実力の証明ができます。
また、未経験からスキルを身につけた姿勢もアピールできるポイントになるでしょう。


クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績 自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った/参考になったと思ったら、シェアをお願いします。

この記事に関連する案件

Webデザイナーの案件を見る

いきなり相談に行くのは不安な方へ

フリーランスになった時、どんな案件を提案されるのかメールでわかる!

人気のスキルの求人・案件情報

レバテッククリエイター
おすすめコンテンツ

レバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。