WEBデザイナーになりたいです。でも色々覚えなくちゃいけないことがありそうで、何から手をつけていいかわかりません。WEBデザイナーに必要なスキルを教えてください。
では、初心者、中級者、上級者にわけて、ステップ別に身に付けるべきスキルを説明していきますね！
この記事は、WEBクリエイター歴15年、印刷物のデザイン歴24年のクリエイターの私が解説します！
当サイトで人気のプログラミングスクール
- TechAcademy
（オンラインで好きな時間に学べる）
- DMM WEBキャンプ
（3ヵ月でRubyエンジニアに）
- CodeCamp
（オンラインなのにマンツーマン指導。300社以上の大手IT企業が社員研修に導入する質実ともに評判が高い）
【レベル別】 WEBデザイナーに必要なスキル
STEP１
- HTML(5)・CSS（3）
- ワイヤーフレーム
- PhotoshopによるWEBデザイン
- スライスでパーツに分ける
- 用途別画像の保存形式（png,jpg)
- デザイン理論
- 色彩
STEP2
- JavaScript
- jQuery
- Webフォント
- レスポンシブWebデザイン＆コーディング
- OGP設定
STEP3
- オリジナルデザインからWordpressテーマを作る
- どんなジャンルのデザインでも作れるようになる
- PHPのカスタマイズができるようになる
STEP4
- GoogleAnalytics 解析ができるようになる
- GoogleAnalyticsから、修正すべき点がわかるようになる
- SEO
- Search Consoleで不具合の修正ができるようになる
- 競合調査
- キャッチコピースキル
WEBデザインに必要なツールやアプリ
基本的にはWEBデザイナーに必要なスキルとWEBデザイン時に使用する様々なアプリやツールをご紹介します。
デザイン
Photoshop
WEBデザインによく使われるAdobe社のソフト。もともとは写真画像処理のために開発されたものですが、WEB用の画像書き出しやレイヤーによる管理がしやすく、広く使われています。
Illustrator
特殊フォントにアウトラインをかけてロゴを作ったり、ペジェ曲線を使ってイラストを描いたりします。ペラものの印刷もイラレをよく使います。
フロントエンド
「フロントエンド」という言葉の定義は非常に曖昧ですが、一応WEB業界ではJavaScriptを含むWEB制作上最低限必要なプログラミング言語のことを指します。
HTML
HTML（HTML5）は、コンテンツに含まれる文章や画像をWEB上で見られるようにするためのマークアップ言語です。
CSS
CSS（CSS３）は、HTML５と共に使うもので、WEBデザインやレイアウトなどを行うための言語です。
JavaScript
JavaScriptはWEBサイトによく使われるスライドショーや画面トップに戻る動きを付け加えたり、動的な指令を与えるプログラミング言語です。UI/UXデザイナーやフロントエンジニアにも必須スキルです。
コーディング・UI/UX
Dreamweaver
コーディングを爆速で作れるAdobe社のソフト。CSSを書くときも選択肢が表示されるので便利。コーディングはDWがなくてもエディターがあればできるので、Atomなどを使っている人もいますが、企業ではDW、というところは多いと思います。数十社のサイト管理や切り替えも楽。
Adobe XD
ユーザーの使用ブラウザ環境に依存することなく表示させるレスポンシブデザイン。Webサイトやモバイルアプリ、音声インタラクション、タッチスクリーンのためのデザインやプロトタイプの作成ができるアプリです。UI/UXデザインには必須ツール。アプリ連携で他のデザイナーやフロントエンジニアなどと共同作業も簡単にします。
独学でやってみたい人におすすめの勉強方法や教材
色々記事にして詳しく説明しています。ご参考にしてください。
WEBデザインを仕事にしたい人はスクールへ
仕事になるレベルになりたいならスクールへ行きましょう。
独学は勧めません。理由はこちら。
WEBクリエイターの厳しい視点で厳選したWEBデザイナースクール
ここで紹介するスクールを選んでおけば大丈夫です。どのスクールもおすすめポイントがそれぞれ違うので、あなたに合ったスクールを選べばOKです。
あなたにぴったりのスクールの選び方を説明しています。こちらの記事もあわせてお読みください。
WEB業界で知らない人はいないデジハリと、ハイスペックWEBデザイナーが集まる制作会社LIGのコラボによってできた通学型スクール。特長は基本的なコーディングやプログラミングスキル習得に加え、デザイン理論、ライティング技術、魅せる写真技術、ユーザビリティなど、かなり本質的な部分をしっかり学べます。
卒業後はLIGへの転職の扉も開かれていて、未経験からWEBデザイナーに転身したい人にかなりおすすめです。
管理人イチオシ！ WEB系のコースは全9コース、未経験でもハイレベル・デザイナーをめざしたい志の高い人におすすめ。デザインはもちろん、PHP、Wordpress、MySQL、JavaScript、jQuery、さらにはディレクションやマーケティングも学べます。
おすすめコースは、フルスタックWEBデザイナーをめざす「WEBクリエイティブ総合コース」と、グラフィックデザインやエディトリアルデザインなどDTPもできるようになる「デジタルコミュニケーション総合コース」です。
フロントエンドエンジニアになれる、JavaScriptを徹底的に身につけるコースが人気。WEBデザインだけしかできず、将来に不安を抱えているデザイナーや、JavaScriptを深堀りして学び、海外の最先端のお洒落なWEBサイトを作りたい、という人におすすめです。
プログラミングスクールの中ではめずらしく、Webディレクション、Webマーケティング、UI/UXコースなど非エンジニア系のコースが充実しています。
プラスアルファのスキルを身に付けるためには、コスパの高い「ウケ放題」でフルスタックWebクリエイターに必要なスキルを全部習得するのがおすすめです。
WEBデザインだけでなく、フロントエンドエンジニアにもなれる充実の内容！ しかも、他のスクールだと別コースや追加料金になるWordpressやPHPもカリキュラムに入っています。
学習期間は6ヶ月、通学型スクールとしてはコスパが断トツ1位！ WEBクリエイターをめざす人は要チェックです。
Rubyで本格的なプログラミングを学べるテックエキスパートのWEBデザイナーコース。プログラミングスクールだけに、JavaScriptを深堀したエンジニア寄りのカリキュラムです。このコースで学べば、WEBデザイナーだけでなくフロントエンドエンジニアとしても働ける内容です。ただ、ちょっと受講料が高すぎるので☆3.5。
頑張っていきましょう！