Webデザイナーは未経験でもなれる?必要なスキルと求人動向

こんにちは! Web制作ライターのナナミです。

「Webデザイナー」素敵な響きの職業ですよね!

かっこいいデザインのサイトを作りたい
クリエイティブな仕事をしたい

いろんな理由からWebデザイナーを目指している方がたくさんいると思います。

しかしそんなWebデザイナー、どうやったらなれるのでしょうか?

今回はWebデザイナーについてを徹底解説します!

  • どんな仕事をするのか
  • どんなスキルが必要なのか
  • どんな求人があるのか

などなど、Webデザイナーになるための知識をまとめてお伝えしていきます。

Webデザイナーの仕事とは?

画像:Shutterstock

Webデザイナーの仕事はただデザインを作るだけ、そんなふうに思っている方もいるかもしれません。でも、Webデザイナーの仕事はそれだけではありません。

WebデザイナーはWebサイトの見た目に関わるすべてに責任を持ち仕事をしています。そしてただおしゃれなデザインを作るだけでなく、クライアントの要望に沿ったデザインを作りあげることが大事です。

そんなWebデザイナーの仕事内容をちょっとだけ覗いてみましょう。

コンセプトの決定

デザインに必要なのは、まずは情報です。

クライアントがどんなデザインを求めているのか、どんなユーザーに向けたデザインなのかなどの情報を整理して、デザインのコンセプトを定める必要があります。

この作業はディレクターが行なうこともありますが、デザイナー目線での情報も重要です。Webサイトをただの情報の塊ではなく、素敵なデザインに落とし込むには、デザインのプロとして意見する必要があるのです。

設計図の作成

コンセプトが決まったら次は設計図です。絵を描く時に下書きをするように、小説を書くときにプロットを用意するように、Webデザインにもワイヤーフレームという設計図を用意する必要があります。

これもディレクターが行なうことがありますが、レイアウトに関してはデザイナーの方が専門です。そのため、ワイヤーフレームの作成からデザイナーが行なうこともあります。

デザイン

ここでようやく本命! デザイン作業です。

ワイヤーフレームを元に、枠をつけたりフォントを選んだり色を選んだり……様々なあしらいでWebサイトを美しくしていく作業になります。

ぶっちゃけここが一番楽しいですよね、デザイナーの醍醐味とも言える作業になります。

コーディング

デザイナーの作業はデザインまで、そんな時代は過去の話となりました。

現代のWebデザイナーは、作成したデザインをコーディングしてWebサイトの形に仕上げるまでが仕事になっています。

使うのはHTMLやCSSという言語です。これらを使って、作り上げたデザインをパソコンやスマホで表示し、リンクなどが繋がっている状態にしていきます。

ここがWebデザイナーのミソです。紙面のデザインはデザインを作り上げるまでで終わりですが、Webデザインは最終的な媒体にまで落とし込んでいく仕事があるのです。

Webデザイナーに必須のスキル

画像:Shutterstock

Webデザイナーに必要はスキルは大きく分けて3つあります。

  • デザインスキル
  • コーディングスキル
  • 提案スキル

それぞれ細かく解説していきましょう。

デザインスキル

当然必須なのはデザインスキルですね。色の組み合わせのセンスやレイアウトのセンスもさることながら、それを表現するためのアプリケーションを扱うスキルも必要になります。

主に使うアプリはAdobeのPhotoshopやIllustratorです。

Photoshopは写真の加工に優れているソフトなのですが、Webデザインに強い機能が色々備わっています

Illustratorはベクター画像という、滑らかな線の図形や画像を作ることができるアプリで、ロゴの作成などに大活躍してくれます。もちろんデザインデータ作成もできるので、デザイナーとしては覚えておきたいアプリです。

学習にオススメの書籍を下記の記事で紹介しているので、こちらも参考にしてみてください。

Photoshop学習本をレベル分け!入門、中級、上級全6冊
更新日 : 2020年7月29日
Illustrator(イラストレーター)の学習本をレベル分け!入門、中級、上級全6冊
更新日 : 2020年6月19日

コーディングスキル

コーディングスキル、つまりプログラミングスキルということですね。前述の通り、Webデザイナーはコーディングスキルが必須になってきます。

Webデザイナーが最低限覚えておきたいプログラミング言語は、下記の3つです。
※厳密にはプログラミング言語ではないものも含まれていますが、まとめてご紹介しています。

HTML

画面に表示する文字や画像、リンクなどを設定する言語。ロボット(Googleが検索結果を作るためのデータ収集の仕組み)が理解できるよう「タグ」を使って情報を整理する役割を持っている。

CSS

Webサイトの見た目を整える言語。文字の色や大きさ、画面の背景など様々なデザイン・レイアウトを表現することができる。簡単なアニメーション作成も可能。

JavaScript

Webサイトに動きをつけることができる言語。画面をスクロールしたら画像がふわっと出てくる機能や、お問い合わせフォームの入力チェックなどで活躍する。HTMLやCSSを書き換えたりしていろんな動きを実現することが可能。その他、アプリ作成なども実現できる。

下記の記事でさらに詳細な解説をしているので、併せてご覧になってみてくださいね。

WEBデザイナーにプログラミング言語の知識が必要な理由と必須言語3選+α
更新日 : 2019年8月27日

提案スキル

「なぜこの色なのか、この配置なのか」説明して改善案を提案する能力はデザイナーとしてとても大切なスキルです。

デザイナーはとてもクリエイティブな職業です。そして数あるクリエイティブな職業の中でも、感覚だけではない、説得力のある理由が重要になります。

例えばクライアントが「青をベースにしたサイトにしてほしい」と要望を出してきたとします。しかしそのサービスはもっと温かみのある色のほうがイメージとマッチしている場合、それを提案してより効果的なサイトに仕上がるようにフォローする必要があります。

ただ言われたことを鵜呑みにするのではなく、意見を出してより良いものを作り上げることが、デザインのプロとして求められます。その提案ができることこそ、レベルの高いデザイナーであると言えるのです。

Webデザイナーの求人状況

画像:Shutterstock

必要なスキルがわかっても、需要があるのかわからないと不安ですよね。ということで、各リクルートサイトの求人状況を比較してみました!

検索条件:Webデザイン 東京都
※2019年8月時点

リクルートサイト名 求人数 未経験求人数
Indeed 20,494件 2,450件
doda 344件 16件
マイナビ転職 83件 39件

各サイトごとにばらつきはあるものの、意外と数は多いですね! 未経験OKを条件に含めるとかなり数は減ってしまいますが、無いことはありません。

さらに未経験求人に注目してみると、本当に何もわからないところから研修をしてくれる企業もちらほら。ゼロから学び、スキルアップできる環境も増えてきている様子です。

つまり、今からWebデザイナーを目指しても遅くはないのです!むしろ今はチャンスと言ってもいいでしょう。

ポートフォリオを作るメリット

画像:Shutterstock

デザイン系の就職・転職活動をしていると、面接で絶対に聞かれることがあります。

「ポートフォリオはありますか?」

このポートフォリオ、いったい何のために必要なのでしょうか?

Webデザイナーの就活に必須!

ポートフォリオは自分の作品などをまとめた資料のことです。今まで作ったもの、どんなスキルを持っているのか、それにどれくらい時間をかけたのかなどを一つのファイルにまとめて作成します。

このポートフォリオ、Webデザイナーに限らずデザイン系の就活に必須の資料です。履歴書や職務経歴書よりも重要と言っても過言ではないでしょう。

面接でスキルをアピールする際、言葉だけではどうしても伝わらないことがあります。そしてそのアピールが口だけでないことを証明する必要もあります。

百聞は一見にしかずという言葉の通り、あれこれ説明するよりもまずは見てもらう環境を用意することが大事なのです。

自分の実力アピールになる

ポートフォリオには書式や項目の決まりが存在しません。なので、自分の作品を自由にアピールすることができます

特にWebデザイナーの場合、コーディングのスキルも求められます。そんなときコーディングまで出来上がっているサイトを見せたら、それだけで十分スキルのアピールになりますよね。

それまでなにか案件を獲得していたとしたら、それも記載することで「デザインの仕事ができる」ということもアピールできます。

このように、ありとあらゆる自分の経験、魅力を詰め込むことができるのが、ポートフォリオなのです。

作ること自体が勉強になる

そもそもポートフォリオ自体にも見やすさや美しさなどのデザイン性が問われるものです。なのでポートフォリオを作るという行為自体がデザインの勉強になります。

Webデザイナーの場合、ポートフォリオは紙よりもWebサイトとして作ることをオススメしています。そうすることで、コーディングのスキルをアピールすることができるからです。

そのWebサイト自体も自分でコーディングしていれば、それも売りになりますよね!

さらに、ポートフォリオに掲載する作品は実際の案件じゃなくてもOKです。いろんなサイトを作って、ポートフォリオサイトに掲載して……この繰り返しそのものが、デザインの学習にもつながってくるのです。

そんなポートフォリオの作り方は、下記の記事で詳細に解説しています。こちらも併せてご覧ください!

未経験からWEBデザイナーに転職できるポートフォリオの作り方
更新日 : 2019年8月23日

Webデザイナーになるための学習方法

最後に、Webデザイナーになるためにはどんな方法で学習するのが近道なのかをご紹介していきましょう!

時間があるなら:書籍で学習

じっくり時間をかけて、基礎から流れ、細かいテクニックまでしっかり学ぶならば、複数の書籍を活用して学習するのがオススメです。

Webデザインの学習書籍は、ただテクニックを解説しているだけでなく、一つのサイトを作り上げる実戦形式での学習ができるものが多くあります。それらを複数こなしていくことで、しっかり土台を作りながら学ぶことができます。

下記の記事などで自分にピッタリの書籍を探してみてくださいね。

Photoshop学習本をレベル分け!入門、中級、上級全6冊
更新日 : 2020年7月29日
Illustrator(イラストレーター)の学習本をレベル分け!入門、中級、上級全6冊
更新日 : 2020年6月19日
【保存版】初心者におすすめ!ホームページの作り方がわかる本15選
更新日 : 2019年6月11日

ポイントをおさえていく:学習サイト

HTMLやCSS、そしてデザインスキルそれぞれの知識をピンポイントで学ぶならば、学習サイトを活用してみましょう

最近は無料で使える学習サイトもたくさん!気軽に始められるのも魅力的ですね。

下記の記事で、オススメの学習サイトを紹介しているので、ぜひ参考にしてみてください!

コーディング初心者必見!練習に最適な学習サイト5選【チェックシートあり】
更新日 : 2020年5月8日
【HTML/CSS入門】これから学習を始めるための基礎を解説!学習のコツも
更新日 : 2020年5月8日

短期間でスキルアップ:スクール

とにかく早く、集中して短期間でスキルを手に入れるならば、スクールを活用するのが一番!

スクールに通うことで時間を定期的に確保するクセをつけられるほか、わからないところは講師に質問できるという大きなメリットがあります。つまづいた時に長時間立ち止まることがないので、効率的に学習をすすめる事ができるというわけです。

そんなスクールは、下記の記事でたくさん紹介しています。各スクールごとに特徴があるので、自分にピッタリのスクールを探してみてくださいね。

まとめ

Webデザイナーになるためには、

  • デザインスキル
  • コーディングスキル
  • 提案スキル

など、様々なスキルが必要になります。これら複数のスキルを学んでいくのは、一筋縄ではいかないでしょう。

しかしその分、Web制作のあらゆる場面で活躍できる人材になれること間違いなしです! この記事で興味を持った方は、まずは無料の学習サイトから始めてみてはいかがでしょうか?

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー