気がつけばWEBデザイナー歴が10年を越えました。独学の未経験から始まり、気がつけば大手企業でUI設計し、今では当たり前のようにWEBサイトを作っています。少しだけ採用に関わっていた時期もあります。
本業はずっとフォトグラファーで、フリーランスで仕事をするならば写真と相性がいいことからWEBデザイナーやディレクターをやっています（大手企業に常駐するときはWEBデザイン一本になります）。そういう中途半端なスキルでもお声がけいただくので、現在売り手市場なのでしょう。
本気で勉強したならば、未経験の方でも１〜2年で私を抜き去っていくと思います。
そんな経験から未経験者が独学でWEBデザイナーになるために勉強すること、実践べきことを具体化してみましょう。
WEBデザイナーは資格ではありませんし勉強しているとキリがないので、時給1500〜1800円くらいの派遣社員に採用されるレベルをひとまずのゴールに設定します。残業代込みで手取り25万円くらいですね。
私が実践してきたことを今のWEB業界の事情を踏まえつつまとめます。
勉強にかかる金額
まずは勉強にかかる金額を明確化しなければいけません。
アプリケーション料金
WEBデザインの勉強をするにはまず３つのアプリケーションが必要です。
WEBデザインに必要なアプリ
- Photoshop
- Illustrator
- Dreamweaver or フリーのテキストエディタ
現在はAdobeクリエイティブクラウドとういアプリケーションを購入する必要があります。
- Adobe Creative Cloud コンプリートプラン 4,980円 / 月
- Adobe Creative Cloud 単体プラン 2,180円 / 月
コーディング（HTML / CSS /javascript等）をAdobe製品で行うならコンプリートプランで4,980円 / 月。フリーのテキストエディターを使うなら単体プラン x2の4,360円 / 月となります。
価格差がさほどないので、Dreamveaverを使わないとしてもコンプリートプランの方が今度のことを考えるとおすすめです。写真に強い人はLightroomが使えますし、動画編集できる人はPremiereやAfter Effectsがつかえます。勉強の選択肢が広がりますね。
WEBデザイン未経験者はフリーのテキストエディタよりもまずはDreamweaverで基本を覚えれることをおすすめします。
１年で習得するとすると、勉強にかかる費用は4,980円 / 月 x12ヶ月 =59760円
アプリケーションだけで年間6万円の出費となります。
最近はテックアカデミーのプログラミング 無料体験のように１ヶ月は無料で通えるオンラインスクールもありますのでコーディングってなんだろう？っていう人は最初に体験してから必要な物を揃えるのもよいかと思います。
Photoshop
WEBデザイナーに限らずデザイン業界の誰もが必須のアプリケーション。
WEBデザインに関してはいえば、デザイン関係の作業のほぼすべてをPhotoshopで行います。これが使えないとデザイナーとしてのスタートすら切ることができません。
デザイン未経験者が覚えることは大きく分けて２つ。WEBサイト全体のデザインとバナーデザインです。
ネットで情報検索するよりも、参考書を１冊買って勉強したほうが体系的に理解できます。WEBでTipsを探す前にまずは１冊の参考書を熟読したほうが成長は早いかと思います。
バナーデザイン
Photoshopの基本操作でできるレベルのバナーをまずは作ってみましょう。実はこのバナーデザインは初心者ほど大事です。どの企業もいきなり未経験者にHTMLなどのソースを触らせません。失敗しても問題ないバナー製作を任せて徐々にHTMLやCSSの編集などを教えていきます。
バナーデザインがキチンとできると「とりあえず入れても大丈夫かな」という評価を得やすいです。
バナーデザインの参考になるサイト
こちらのバナーをPhotoshop上で再現できれば合格点です。バナーはデザインのレイアウトが難しく、実際は考える時間がほとんどです。現役のWEBデザイナーならこれらのバナーを見て模倣することは簡単にできます。まずはこのレベルをめざします。
バナー制作の具体的なPhotoshop操作の手順を記事にしてあります。
ウェブサイトデザイン
バナーデザインが慣れてきたらいよいよウェブサイトのトップページのデザインをPhotoshopで行います。しかしどのような手順で作ればいいのかわからないと思います。
まずはフリーでダウンロードできるウェブサイトのトップページデザインのファイルをダウンロードして分析します。
シンプルでPhotoshopの操作を覚えるには最適なデザインです。右上の「Free Download」をクリックしPhotoshop（PSD）のファイルをダウンロードします。
こちらをPhotoshopで開いてみると、ホームページの元となるデザインが表示されます。
ここまでPhotoshopで作りこんでからDreamweaverなどのアプリケーションを使用してウェブサイトを作っていくことになります。
参考書なしでPhotoshopを使えるまで習熟させる
まずはバナーとウェブサイトデザインを参考書を一切見ずにサンプルを模倣できるまで覚えましょう。これができればひとまずはPhotoshopの基本操作は習得したことになります。
コツはショートカットキーを多様することです。WEB製作の現場ではショートカットキーを使わないと作業が進みません。WEBデザイナーとして仕事をしていくつもりならショートカットキーを暗記して極力使うように努力しましょう。
Illustrator
IllustratorはWEBではなくDTP（印刷）でよく使われるアプリケーションです。Photoshopとの違いは画像の拡大・縮小に寄って画質が劣化しないベクターデータというもの主に扱う点です。
未経験者のWEBデザイナーが使うことは少ないですが、デザインの現場ではIllustratorの画像データをPhotoshopに移して使うことがたくさんあります。
ボタンや装飾のフリー素材がIllustrator型式のものが多いことや、Illustratorのデータは拡大・縮小を繰り返しても劣化しないのでデザイン修正をしやすいからです。
Illustrator用のファイル （Ai・ESP・PDF）を開いてPhotoshopに移す作業程度は覚えましょう。Illustratorで画像を選択してCtrl+Cして、PhotoshopでCtrl+Vで貼り付ければいいだけです。
Illustratorファイルを使えるだけでデザインの幅はとても広がります。そういう意味でWEBデザイナーには必須のアプリケーションです。
素材の探し方
PhotoshopとIllustratorの勉強をするにも素材がないと勉強をすることが難しいものです。しかし最近は良質なPhotoshopやIllustratorのデータファイルはもちろん、フリー写真もたくさんあるので、それらを使用したり、分析したりして勉強しましょう。
PhotoshopやIllustratorのファイルを探すならPhotoshop VIP
フリーの写真素材を使うならぱくたそとpublicdomainpictures.net
フリー画像やパブリックドメインの画像ならば安心して使えます。最終的にサーバーにアップすることを考えるとこの２つのどちらかの写真を使っておいたほうが安全です。
パブリックドメイン (public domain) とは、著作物や発明などの知的創作物について、知的財産権が発生していない状態又は消滅した状態のことをいう。 日本語訳として公有という語が使われることがある。
Dreamweaver
フリーでSublime Textという優秀なアプリケーションがありますので必須のアプリケーションではありませんが、Dreamweaverはリアルタイムプレビュー機能が付いているので、初心者の勉強にはおすすめできます。
またWEB制作現場でDreamweaverを使えないという人は滅多にいません。Dreamweaverを置いていない会社も今まで経験したことがないので、他のテキストエディタを使う前に習得しておくのが無難です。
HTML5 / CSS3
Dreamweaverを使えばソースコードをボタン一つで挿入できますが、WEBデザイナーを目指すのであればすべてをスクラッチ（手書き）で書けることが最低条件です。
主要なタグはすべて暗記する必要があります。
WEBデザインの現場では必ずしもDreamweaverが使えるとは限りませんし、特殊なファイルに一部だけHTMLを記述するということも想定されます。
そして何より、アプリケーション頼りのソースコードは採用試験やポートフォリオ提出で自分の作品を見せるときに必ずバレます。採用担当者の心象がプラスに働くことは絶対にありませんので、HTMLとCSSは手書きできるようになるのが最低条件です。
レスポンシブデザイン
レスポンシブ・ウェブデザイン（RWD）とも呼ばれます。今のWEBデザインの業界を見ているとやっておいた方がいいでしょう。基本的なHTML５とCSSが書けるのであれば複雑なものでなければ難しいものではありません。
理由はスマホの閲覧率がWEB全体で高くなっていること。このブログも60％はスマートフォンからの流入です。WEBデザインはスマートフォン最適化のスキルの需要が高いことを意味します。
PCとスマートフォンを別デザインに分けることもできますが、レスポンシブデザインだと１つのHTMLとCSSでPC / タブレット / スマホの表示を最適化できますので勉強としてはこちらの方がオススメできます。
javascript（jQuery）
HTMLとCSSを理解していないとさっぱりわからないと思います。ざっくりいうとHTMLやCSSをブラウザ上でコントロールするプログラムです。
例えば「TOPに戻る」などを押すとスクロールしながら一番上まで戻るページがありますね。アレを制御するのがjavascrioptです。
これは基礎部分だけわかっていれば大丈夫です。レスポンシブデザインのちょっとした動作などで使用するくらいです。
最初は暗記する必要もありません。参考書をみながらコードを書ければ十分です。
WEBデザイナーなら一度は必ず手に取る良書「Web制作の現場で使う jQueryデザイン入門」1冊あれば十分です。書き方のルールや構造を理解できます。
WEB上で見つけることができるHOWTOやフリーのjavascriptはまずは参考書を一冊読んでから使用することをおすすめします。
自分のオリジナルのホームページを作成する
PhotoshopとIllustratorを駆使してホームページのデザインをしHTMLとCSSでウェブページにします。ちょっとした動作をjavascriptで行います。
友人がお店をやっていたりしていたらそのお店のホームページを自分ならどのように作るのかをイメージしてデザインするとよいでしょう。
最初はレスポンシブではなくPCのみ対応のウェブサイトで構いません。きっと上手くは作れないと思いますので最初から難しくすると挫折します。失敗するものとして、その反省を活かし何度かコーディングを行いましょう。
何度か繰り返していくうちにコツが掴めますのでそこからレスポンシブに挑戦するのが上達の近道です。
Google Chromeでソースコードを読む
HTML・CSSの技術を最速で向上させるには人の書いたコードを見ることです。これはGoogle Chromeで簡単に見ることが可能です。
自分の好きなウェブサイトを開きF12を押すことで検証ツールが表示されます。ここの一番右をクリックして、気になる箇所をクリックするとその箇所の左側にHTML・右側にCSSが表示されます。
サイトの作りがまるわかりになるので、自分の作るホームページの参考になります。といいますかほぼすべてのWEBデザイナーがこうしてデザインの優れるウェブサイトの分析を行います。
WordPressでブログを作る
「WordPressでブログを作れるレベル」これは採用担当の目に止まります。少し大きい会社のデザイン部門だとシステムエンジニアとのやり取りが発生しますので、PHPという言語に慣れていると重宝するからです。
自分のポートフォリオをWordPressで作れれば最高です。
PHPというのはサーバー側で動作する言語です。最終的には勉強する必要がありますが、とりあえずは無視しましょう。サーバーにインストールしてブログを作ることを最優先に考えます。
いきなり難易度が跳ね上がりますがこれは必須事項だと思っています。理由は簡単でWEBデザイナーでもないブロガーという人ですらWordPressを運用しているからです。
厳しい言い方をするとWordPress使えませんっていうのは採用担当から見ると甘えに見えてしまいます。グラフィックデザイナーは別ですが、WEBデザイナーとしては基本的なことはできるようにしましょう。
レンタルサーバーを借りる
ブログを始めるにはレンタルサーバーを借りる必要があります。私のオススメはエックスサーバー
です。WordPressの自動インストール機能があり、PHP７でを高速で動かすことができます。
WordPressでブログを開始する
WordPressをインストールするとデフォルトのデザインでブログを開始できます。まずはこちらでWordPressの使い方などを学びましょう。
自分でWordPressのテーマを作成できればそれ自体が立派なポートフォリオです。そのWordPressでポートフォリオサイトを作り、自分の作品（HTML静的ページやバナーデザインなど）を掲載できれば、WEB会社によっては即戦力要員として迎え入れられるかもしれません。
IT系の派遣・転職会社にポートフォリオを持ってい行く
自分がどのレベルかもわからない状況で、いきなりWEBデザインの求人に応募するのは勇気がいります。ここは転職サイトや派遣会社にエントリーして、自分のレベルを把握するのがおすすめです。
ITやWEBに強い会社ならば担当がWEB業界出身の人が多いです。運がいいと元WEBデザイナーやWEBディレクターの人に当たることも有ります。
ここで自分のポートフォリオを見せると、そのレベルに合わせて求人を紹介してくれます。社会人の転職の場合は、持っているスキルセットと組み合わせて採用率の高い企業を紹介してくれるかもしれません。
転職・派遣会社の社員の方の給料は成果報酬型が基本のため、ホンキで採用してくれそうな企業を出してくることが多いです。
ここで気に入った求人があれば採用試験を受けても良いですし、自分のレベルを把握してから自分で志望企業の求人に応募するのもいいでしょう。下調べしせずに突撃するよりも採用率は高くなります。
WEBデザインに強い転職・派遣
WEBデザイナーの仕事に関することはこちらにも赤裸々に語られています。
未経験者が独学でWEBデザイナーになるには
- Photoshop・Illustratorでバナー・サイトデザインを学ぶ
- HTML5・CSS３でコーディングを学ぶ
- レスポンシブデザインの学ぶ
- 自分のホームページを作る
- WordPressでブログ（自分の作品）を始める
- IT系の派遣・転職会社にポートフォリオを持ってい行く
未経験者の方がWEBデザイナーとして採用されるまでの流れをまとめてみました。学生なら１年、社会人の方なら２年くらいの学習期間でしょうか。センスのいい人なら半年でどうにかしてしまうかもしれません。
独学最短で実務レベルのデザインスキルを手に入れるには
オンラインのデザインスクールに加入するのが一番確実です。参考書などではどうしてもウェブサイトの制作の細かい部分で疑問点が残ったり、実際のWEBサイト運用方法について学ぶことが難しいです。コーディングの動画などをみたり、オンラインの指導員に添削してもらいながらの勉強がトライアンドエラーの数が多く実技が身につきます。
テックアカデミーなら1ヶ月間は無料でオンラインスクールを使用することができ、HTML・CSS基礎から実践的なスキルを学ぶことができるので、おすすめです。
テックアカデミーのプログラミング 無料体験
オンラインで実務レベルのWEBデザインが学べるサービス
社会人で最短でスキルを習得したいのでしたらこのサービスを使ってしまうのが確実です。勉強時間の短縮少しの投資で行えることからコストパフォーマンスが高いです。
オンラインでの勉強方法がどのような感じなのかはドットインストールなどの無料サービスで雰囲気をつかむことができます。
WEBデザインは現場に入ることで技術が一気に向上します。実際のワークフローを経験できたり、先輩のデザインを真似てみたりと学習環境が整っているからです。
できるだけ勉強期間を短くし、WEBデザインの現場に入ることを目標にしましょう。
スポンサーリンク
コメントを残す