目次
比較
特集
【2020年9月限定】TECH::CAMP(テックキャンプ)Amazonギフト券を5万円分プレゼント

WEBデザイナーに必要なスキルは?業界歴15年のプロがレベル別に解説

この記事は約3分で読めます。
ツグミ
ツグミ

WEBデザイナーになりたいです。でも色々覚えなくちゃいけないことがありそうで、何から手をつけていいかわかりません。WEBデザイナーに必要なスキルを教えてください。

では、初心者、中級者、上級者にわけて、ステップ別に身に付けるべきスキルを説明していきますね!

この記事は、WEBクリエイター歴15年、印刷物のデザイン歴24年のクリエイターの私が解説します!

当サイトで人気のプログラミングスクール

  • DMM WEBキャンプ  (3ヵ月でRubyエンジニアに)
  • TechAcademy  (オンラインで好きな時間に学べる)
  • CodeCamp  (オンラインなのにマンツーマン指導。300社以上の大手IT企業が社員研修に導入する質実ともに評判が高い)

【レベル別】 WEBデザイナーに必要なスキル

STEP1

  • HTML(5)・CSS(3)
  • ワイヤーフレーム
  • PhotoshopによるWEBデザイン
  • スライスでパーツに分ける
  • 用途別画像の保存形式(png,jpg)
  • デザイン理論
  • 色彩
まずは、デザインを作れるようになり、それをパーツにわけてHTMLとCSSでコーディングができるようになるまでを目標にします。

STEP2

  • JavaScript
  • jQuery
  • Webフォント
  • レスポンシブWebデザイン&コーディング
  • OGP設定
ここまで身につけたら、転職活動OK!ただし転職活動にはポートフォリオは必須。実績がない場合は、架空サイトを色んなジャンルで作ってポートフォリオにしよう!

STEP3

  • オリジナルデザインからWordpressテーマを作る
  • どんなジャンルのデザインでも作れるようになる
  • PHPのカスタマイズができるようになる
WordPressやPHPスキルは採用担当に重宝がられます。実際、現場では静的サイトよりもWordpress案件が圧倒的に増えています。

STEP4

  • GoogleAnalytics 解析ができるようになる
  • GoogleAnalyticsから、修正すべき点がわかるようになる
  • SEO
  • Search Consoleで不具合の修正ができるようになる
  • 競合調査
  • キャッチコピースキル
マーケティングスキルを身につけます。STEP4のスキルを深堀すると、強いWEBサイトが作れるようになります。

WEBデザインに必要なツールやアプリ

基本的にはWEBデザイナーに必要なスキルとWEBデザイン時に使用する様々なアプリやツールをご紹介します。

デザイン

Photoshop

PhotoshopWEBデザインによく使われるAdobe社のソフト。もともとは写真画像処理のために開発されたものですが、WEB用の画像書き出しやレイヤーによる管理がしやすく、広く使われています。

Illustrator

Illustrator特殊フォントにアウトラインをかけてロゴを作ったり、ペジェ曲線を使ってイラストを描いたりします。ペラものの印刷もイラレをよく使います。

フロントエンド

「フロントエンド」という言葉の定義は非常に曖昧ですが、一応WEB業界ではJavaScriptを含むWEB制作上最低限必要なプログラミング言語のことを指します。

HTML

html5HTML(HTML5)は、コンテンツに含まれる文章や画像をWEB上で見られるようにするためのマークアップ言語です。

CSS

css3CSS(CSS3)は、HTML5と共に使うもので、WEBデザインやレイアウトなどを行うための言語です。

JavaScript

JavaScroptJavaScriptはWEBサイトによく使われるスライドショーや画面トップに戻る動きを付け加えたり、動的な指令を与えるプログラミング言語です。UI/UXデザイナーやフロントエンジニアにも必須スキルです。

コーディング・UI/UX

Dreamweaver

Dreamweaverコーディングを爆速で作れるAdobe社のソフト。CSSを書くときも選択肢が表示されるので便利。コーディングはDWがなくてもエディターがあればできるので、Atomなどを使っている人もいますが、企業ではDW、というところは多いと思います。数十社のサイト管理や切り替えも楽。

Adobe XD

ユーザーの使用ブラウザ環境に依存することなく表示させるレスポンシブデザイン。Webサイトやモバイルアプリ、音声インタラクション、タッチスクリーンのためのデザインやプロトタイプの作成ができるアプリです。UI/UXデザインには必須ツール。アプリ連携で他のデザイナーやフロントエンジニアなどと共同作業も簡単にします。

独学でやってみたい人におすすめの勉強方法や教材

色々記事にして詳しく説明しています。ご参考にしてください。

独学でWebデザインを勉強する完全マスターガイド【2020年度版】
独学でWebデザインを勉強したい、という人におすすめの勉強法をお伝えします。
Webデザインにおすすめ本、厳選6冊をプロWebクリエイターが紹介
ここで紹介するのは非デザイナーや美大を卒業していないWebデザイナー向けの本です。何事も基本がとても大切。しっかりと基本を身につけてください。すでに独学からWebデザイナーになっている人も、美大卒者よりも知識が薄い可能性もあるの...【続きを読む】
Kindle Unlimitedで読める無料のおすすめWeb関連本14冊
Webデザイナーとして仕事をしているけど、独学で新しい知識をインプットしたいできるだけ費用を抑えて勉強できないかなぁそれなら、に月額980円で登録して、無料で読めるWeb関連本を読みま...【続きを読む】
【2019年度版】古いSEOやってない!?最新SEO対策におすすめの本6選
SEO対策はGoogle対策と同義語。Googleの鶴の一声で「昨日までOKだったSEOが今日からダメ」ということもあるのです。昔の対策のまま放置している人は最新SEOで対策し、アクセスを一気に伸ばしましょう!
【収入アップ】Webマーケティング力をつける!売上アップの必読本
WEBデザイナーはデザインだけできても収入は伸びません。非エンジニアが高額収入を狙うには、デザイン+アルファのスキルが絶対に必要!業界歴15年のWEBクリエイターが解説します。
アフィリエイトで成約させる文章力をつける厳選6冊
Webクリエイターとして、価値あるWebサイトを作るにはSEOと同等に重要なのがコンテンツです。現在のSEOはかつての小手先対策は通用せず、Googleは「コンテンツ」重視、つまり中身で勝負せよ、と言っています。Webクリエイターと...【続きを読む】

WEBデザインを仕事にしたい人はスクールへ

仕事になるレベルになりたいならスクールへ行きましょう。

独学は勧めません。理由はこちら。

WEBクリエイターの厳しい視点で厳選したWEBデザイナースクール

ここで紹介するスクールを選んでおけば大丈夫です。どのスクールもおすすめポイントがそれぞれ違うので、あなたに合ったスクールを選べばOKです。

あなたにぴったりのスクールの選び方を説明しています。こちらの記事もあわせてお読みください。

デジタルハリウッド STUDIO by LIG

WEB業界で知らない人はいないデジハリと、ハイスペックWEBデザイナーが集まる制作会社LIGのコラボによってできた通学型スクール。特長は基本的なコーディングやプログラミングスキル習得に加え、デザイン理論、ライティング技術、魅せる写真技術、ユーザビリティなど、かなり本質的な部分をしっかり学べます。
卒業後はLIGへの転職の扉も開かれていて、未経験からWEBデザイナーに転身したい人にかなりおすすめです。

東京デザインプレックス研究所

管理人イチオシ! WEB系のコースは全9コース、未経験でもハイレベル・デザイナーをめざしたい志の高い人におすすめ。デザインはもちろん、PHP、Wordpress、MySQL、JavaScript、jQuery、さらにはディレクションやマーケティングも学べます。
おすすめコースは、フルスタックWEBデザイナーをめざす「WEBクリエイティブ総合コース」と、グラフィックデザインやエディトリアルデザインなどDTPもできるようになる「デジタルコミュニケーション総合コース」です。

Code Village(コードヴィレッジ)
フロントエンドエンジニア

フロントエンドエンジニアになれる、JavaScriptを徹底的に身につけるコースが人気。WEBデザインだけしかできず、将来に不安を抱えているデザイナーや、JavaScriptを深堀りして学び、海外の最先端のお洒落なWEBサイトを作りたい、という人におすすめです。

TechAcademy【オンライン完結型】

プログラミングスクールの中ではめずらしく、Webディレクション、Webマーケティング、UI/UXコースなど非エンジニア系のコースが充実しています。
プラスアルファのスキルを身に付けるためには、コスパの高い「ウケ放題」でフルスタックWebクリエイターに必要なスキルを全部習得するのがおすすめです。

.Pro ドットプロ フロントエンドコース

WEBデザインだけでなく、フロントエンドエンジニアにもなれる充実の内容! しかも、他のスクールだと別コースや追加料金になるWordpressやPHPもカリキュラムに入っています。
学習期間は6ヶ月、通学型スクールとしてはコスパが断トツ1位! WEBクリエイターをめざす人は要チェックです。

テックエキスパート・デザイナー転職コース

Rubyで本格的なプログラミングを学べるテックエキスパートのWEBデザイナーコース。プログラミングスクールだけに、JavaScriptを深堀したエンジニア寄りのカリキュラムです。このコースで学べば、WEBデザイナーだけでなくフロントエンドエンジニアとしても働ける内容です。ただ、ちょっと受講料が高すぎるので☆3.5。

頑張っていきましょう!

コンテンツのコピー・流用は著作権上禁止しています。
タイトルとURLをコピーしました