Webデザイン

未経験からWebデザイナーになる前に絶対に知っておいて欲しいこと

office

Webデザイナーと聞くと、一見華やかな職種のように思われます。

ですが、一方でWeb界隈で最も将来設計で困難になると言われているのが、Webデザイナーかもしれません。なぜなら、体力的にも技術的にも、非常に努力が求められるからです。

そこで今回は、僕が実際に仕事していく中でデザイナーとして感じていたり、今後の方向性としてできたことが良いと思う内容などを紹介していきます。

※個人的な見解を含むことをご理解頂いた上でお読みください。

CONTENTS

現在のWebデザイナーの平均年収は?

まず、今のWebデザイナーの平均年収を見てみましょう。イーキャリアの調べによると、2010年時点で20代は258万円、40歳以上は483万円と出ています。

webdesign 1 - 未経験からWebデザイナーになる前に絶対に知っておいて欲しいこと

また、データベースとして使うには、こちらのサイトが非常に勉強になります。以降はこちらのサイトの情報も利用しつつお話します。

男性女性別のwebデザイナーの年収給料や20~65歳の年齢別・在宅フリーランス・独立デザイナーの年収|平均年収.jp

Webサイトの需要は多いし、今後も増えることは確実

実際、「仕事があるのに給与が低い」のが、Webデザイナー業界の恐ろしい部分です。

普段仕事をしていて感じることは、今もWebサイトを作ってほしいという需要は数多くありますし、これからも増え続けるだろうということです。

ベンチャー企業の新規サイト

まず、国として、創業支援を行っていたり、大学生向けのビジネススクールも数多く出てきて、ベンチャー企業が今後も増える見込みです。

今となっては、企業=Webサイトがあるみたいな印象がかなり強くなったので、純粋に企業数が増えれば必要になるWebサイトの数が増えると考えられます。

サイトのリニューアル

続いて、Webサイト自体も一度作ったら二度と手を加えないといった商品ではありません。

何年かに一回サイトのリニューアルが必要になるので、一度作った会社もお客さんの可能性が消えた訳ではないのです。

キャンペーンサイト

また最近は、映画のプロモーションなどのために一つのサイトを立ち上げることも増えてきました。

こういった案件もWebデザイナーの仕事場になっていきます。キャンペーンサイトの数だけ、誰かがデザインを行っているとも言えます。

こういう理由から、Webサイトの需要が全くなくなるといったことは考えにくいでしょう。

というよりむしろ、「サイトのリニューアル」の可能性がある限り、増え続けていくと考えてもいいですね。

芸術から入ったWebデザイナーはきついかもしれない

では、Webサイトの需要は多いのに、なんで労働待遇が酷いのでしょうか?

個人的には、Webデザイナーとクライアントの間に少しだけ溝があるのが問題を引き起こしていると思っています。

クライアントにとっては、Webサイトを作るのはビジネスで売上を上げるための手段であって、おしゃれなWebサイトそのものが欲しいわけではありません。

ですが、一般的に言われるWebデザイナーの仕事は、Webサイトやそのパーツを作ることです。

そのため、Webデザイナーが提供する技術と、クライアントのニーズとが少しズレているため、はっきり言ってただただデザインできるだけでは意味がないのです。

なので、「デザインがしたい!」と入ってきた方には、少し厳しい業界かもしれません。

数字を見る必要がある

まず、Webデザイナーでも、ある程度数字が見れないといけません。

費用や工数は当たり前ですが、どうすればサイトに訪問してきた人をコンバージョンさせられるのか?など、そういう話をできることも大切です。

将来的に求められるものが違う

また、最近のWeb開発の技術の発展に伴って、JavaScriptなどと連携してできることが、非常に増えてきた印象があります。

将来的にこういうものの設計を求められた場合、ただデザインができるだけでなく、プログラミングのコードも書ける必要が出てきます。

「デザインにお金を払う」という意識の無さ

他にも、そもそもデザイン自体が安く叩かれやすい業界だとも言えます。「デザインだったら、自社でも頑張ればできるでしょ」という感覚を持たれてるのでしょうか。

これに関しては、どれだけ文句があったり、論理的に正しいことを言っても、人間の感情的な部分なので難しい問題です。

「お金を出来る限りかけたくない」のは、どこの会社も当たり前です。

UXデザイナーとWebデザイナーとの違い

そして、最近急激に増えてきているUXデザイナーという存在です。

UXは「ユーザーエクスペリエンス(ユーザー体験)」ですが、彼らは一体何をやるのでしょうか?

UXデザイナーはWebデザイナーの上位互換のような存在

あえて辞書から引用せず、僕の言葉で表現すれば「デザインの観点から、UXを向上する担当者」です。

つまり、UXデザイナーは、デザインもやるし、システムにも触れるし、数字も売上も見るし、テストもする人々なのです。

このような存在がいてしまうと、Webデザイナーの入る余地ははっきり言ってありません。

UXデザイナーの就職状況

UXデザイナーとして本当に求められるのは「ユーザー体験の向上」ですから、今のデザインスキルがどれくらいというよりも、どれだけユーザーのための設計ができるか?という点が重視されます。

具体的な話しをすれば、どれだけアンケートの満足度をあげられるか?、回遊率を上げられるか?、リターン率を高められるか?などが重要です。

※これらの数字が、ユーザー体験の向上を意味するのかは微妙ですが、企業もビジネスのために行っていることをご了承ください。

そのため、実はあまり現場では「デザインスキル」が必要とされていません。

むしろ、たまにオフィスにいらっしゃる話しが通じない「Webデザイナーよりも、数字を見てビジネスの話ができるUXデザイナーの方が好まれます。

だからこそかもしれませんが、デザイナー募集には、経験不問・学歴不問のところも多くあるのかもしれません。

将来的にWebデザイナーとして活躍するためには

こうやって考えると、Webデザイナーという仕事は結構やばいのでは?と感じます。

ただ、Webデザイナーという仕事が消えるというよりは、求められる業務内容が変わっていくのでしょう。

そこで、良く年収を上げる方法と称して、「フロントエンドエンジニアを目指せ!」「Webディレクターを目指せ!」と言われますが、ここで本当に具体的には何をすべきか?といった話しをお伝えします。

1. JavaScriptの勉強をする

まず、JavaScriptを書けるようになるのがおすすめです。

とは言っても、書けるか書けないかの判別は難しいので、せめてライブラリの一つくらいは使いこなせるようになるのがおすすめです。

  • Angular.js
  • Backbone.js
  • React.js

例えば、こういったライブラリを使えると、あなたのスキルが示しやすいと思います。もちろん他にも最近有名なライブラリはあるので、どれでもいいので選ぶといいですね。

JavaScriptの知識がつくと、デザインだけでなく、システムの方に手が回せるように成るので仕事の幅が広がります。

2. PHPの勉強をする

続いて、PHPも書けるようになると良いです。JavaScriptとPHPのセットでシステムが構成されることがありますので、この2つの言語をセットで覚えておくのがおすすめです。

今のところ、PHPのフレームワークまで使いこなせる必要はあまり無いと思いますが、JavaScriptとの連携はできるべきです。

なお、躓きやすいポイントとしては、JavaScriptとのデータの受け渡しとかのところだと思います。データベースとの連携は、セキュリティなども関係してくるので割愛します。

3. アクセス解析系・SEO周りに強くなる

最後に、GoogleAnalyticsやSearchConsoleなど、最低限のSEO関連ツールは使いこなせるようになる必要があります。

SEO周りのディスクリプション設定などもできるべきですし、どのような記事を書いたら良いのかが分かることなども、最低限必要な知識と言えるでしょう。

SEOの観点からアクセス数を向上させたり、より良いユーザー体験を届けるためには、自分が良いなと思うデザインを捨てるべき時もあるかもしれません。

しかし、このようなビジネス感覚を持てると、担当できるクライアントの幅もぐっと広がるでしょう。

4. 営業スキルをつける

最後に、自分で営業ができるようになるだけでも、かなり仕事を失うリスクを減らすことができます。なぜなら、仮に会社に見放されても、自分で営業すれば良いだけだからです。

ただ、僕はWebサイトを作る人が、直接営業をすること自体にも意味があると思っています。その場で工数も計算できますし、クライアントの意向も汲み取れるからです。

Webデザイナーになりたい方におすすめのスクール

ちなみに、今からWebデザイナーになりたいという方は、Webデザインをオンライン上で学べるWEBCAMP ONLINEがおすすめです。

WEBCAMP ONLINEのWebデザインコースは、未経験・初心者の方でも短期間で、ホームページやWebサイトが制作できるスキルを習得する、オンライン完結型のプログラミング学習サービスです。

独学では、何から学んだらいいのか分からなかったり、不明点を解決することができなかったりで、挫折してしまう例が数多く見られます。

一方で、WEBCAMP ONLINEなどのプログラミングスクールを使うことで、基礎から効率よくデザインを学ぶことができ、かつ学習の継続も可能となります。

WEBCAMP ONLINEの公式サイトへ

Webデザイナーと働いていく上で資格は必要?

また、Webデザイナーとして働くならば、資格は必要なのでしょうか?

これは多くの方が持つ疑問だと思います。結論を先に言っておくと、Webデザイナーとして働くために資格は必要ありません。

Webデザインに関する仕事をやっていれば、Webデザイナーであると名乗ることができます。

ですが、資格を持っていると「自分はこれだけのスキルや実績があるんだ!」と具体的にアピールできます。

そこで今回は、Webデザインに関する資格を3つピックアップして紹介します。

Webデザインの資格で必要となるスキルとは?

be creative 2111029 640 - 未経験からWebデザイナーになる前に絶対に知っておいて欲しいこと

Webデザインに関する資格といってもデザインの資格だけではありません。

知的財産権など法律に関することやWebサイトの運用、Webマーケティングに関する知識を必要とする資格など幅広い分野にわたっています。

実際にWebデザインの仕事をしている方であればわかると思いますが、デザインの仕事だけをしていれば良いというわけではありません。

Webサイトをたくさんの人に見てもらえるようにするための運用の仕方やマーケティング、安全にWebサイトが利用できるようにするための管理などの知識も必要とされることが多いです。

なので、「Webデザイナーだからマーケティングの知識は不要!」という考えは間違っていますむしろ知っていれば知っているほど役に立つことが多いです。また、幅広い知識を持っているということで仕事の案件も取りやすくなります。

Webデザインの資格はどんな資格があるの?

frustration 1241534 640 - 未経験からWebデザイナーになる前に絶対に知っておいて欲しいこと

ここからはWebデザイナーが持っていると良い資格を紹介していきます。

数が大きくなるにつれて難易度が上がる資格に並べていますので、それを参考にしながら取得する資格について考えてみると良いでしょう。

1.ウェブデザイン技能検定

http://www.webdesign.gr.jp/index.php

この資格は、Web業界でただ1つの国家資格になります。3級から1級までの等級が用意されています。年に4~5回、全国で実施されています。

出題範囲としては、Webデザインの技術だけでなくインターネットの仕組みや知的財産権、Webサイトの運用・管理技術が挙げられています。また、実技試験としてWebサイト構築が出題されます。

3級は基礎的なことを幅広く問われるので、これからWebデザインに関する勉強をしたいと思っている人やWebデザインについてある程度勉強しているという人にはぜひ取得してもらいたい資格になります。

2.Webデザイナー検定

http://www.cgarts.or.jp/kentei/about/web/

Webデザイナーに必要とされるWebサイト制作のデザイン能力やWebページのコーディング能力を認定する資格になります。

出題範囲としては、デジタルやインターネットの基礎、コンセプトメイキング、Webサイトを実現するための技術や運用、知的財産権が挙げられています。

この試験では、効率的な作業方法や実務でも使用する知識が必要になるので、WebデザインだけでなくWeb関連の仕事する人にはぜひ取得してもらいたい資格になります。

3.HTML5プロフェッショナル認定資格

http://html5exam.jp/

この資格は、HTML5が導入された2014年から始まった新しい資格になります。新しい資格とはいえ、他の資格に比べて実力を証明するのに有効な資格とされています。

出題範囲としては、HTMLやJavaScript、レスポンシブなど見た目やデザインに関する知識だけでなく、グラフィックスや効率よく動作させるためのパフォーマンスについても問われます。

最新のHTML5、CSS3、JavaScriptや作成したデザインを忠実にWeb上に反映させるためには必ず必要な知識になります。だからこそ、これからWebサイト制作の仕事をしようと思っている方には受けても損になることは絶対にないような資格になります。

おまけ:ウェブ解析士

https://www.waca.associates/jp/

この資格は、Webデザインとは少し異なった分野になります。

この資格は、実務で活躍できるウェブ解析士を育成し、ウェブ解析ができる人材を育成するための資格になります。マーケティングやコンサル、ウェブ解析士育成の講師を行う3つのパターンが用意されています。

基本的には、一般社団法人ウェブ解析士協会より用意されているウェブ解析士認定講座を受け、該当する認定試験を受験し、試験に合格することでウェブ解析士に認定されます。

Webデザイナーにデザインだけでなく、Webの管理をすべて任されることも少なくありません。だからこそ、マーケティングなどの知識を身につけていることで仕事の受注をする際に大きなアピールになります。

Webデザインを学んでサイトを作るときの心構え

ちなみに、いざWebデザインを学んで、初めて他人のサイトを作る時、いろいろと不安も出てくることがあります。

そこでまず大切なのは、相手の要望を汲み取るパートです。というのも、このパートをないがしろにしてサイトを作った場合、ほぼ100%の確率で大きな修正が入るからです。

すると、「今まで時間をかけて作った部分が全て必要なくなった」なんてことも起こってしまいます。初めての場合は、以下のポイントを守ってみてください。

ヒアリングシートを使う

paper - 未経験からWebデザイナーになる前に絶対に知っておいて欲しいこと

まずは、ヒアリングシートを使います。

行き当たりばったりで、クライアントのニーズや要件を聞こうとしたくなりますが、最初は基礎に忠実に行くべきです。

僕が普段、仕事をしている際に聞くようにしている項目を説明します。

  • クライアント情報(個人情報)
  • 必ずおいて欲しいコンテンツ・パーツ
  • サイト全体で出したい雰囲気
  • メインカラー(あれば)
  • 訪れるユーザーのターゲット層

このあたりは確実に聞きます。もちろん、応用的により細かく聞くこともあります。

サイト全体で出したい雰囲気というのは「明るさ」「清潔さ」「高級感」などにあたります。

カンプを作る

カンプとは「完成見本」「デザイン案」のことです。たまに、ラフスケッチと混同して表現されることが多いです。

似たようなものとして「モックアップ」「モック」「ワイヤーフレーム」「ラフ案」などがあります。

正直このあたりはどれで呼ぼうといいと思うのですが、厳密にはカンプは完成見本なので、完成形に近いデザインになっているはずです。

そのカンプの作り方ですが、細かく分類すると3パターン程あります。

HTML・CSS形式で見せる

これは、ベタ打ち(ファイルに全てのコードを直接入力、PHPなどを使わない)でHTMLとCSSを書き、クライアントに見せる方法です。

その後の制作に移る際に、かなり使いやすいですが、作成に時間がかかりやすいのがデメリットです。

PHOTOSHOPなどの画像で見せる

次は、画像編集ソフトを使います。最近は、このスタイルが一般的になります。

カンプを作るのにオススメな編集ソフトとしては

photoshop - 未経験からWebデザイナーになる前に絶対に知っておいて欲しいことcomp - 未経験からWebデザイナーになる前に絶対に知っておいて欲しいこと

などがあります。

手書きで見せる

あとは、手書きで描く方法があります。クライアントの目の前でささっと描けるので、速くて柔軟性があるのがメリットです。

ただ、最近のサイトは画像の見栄えも影響してくるので、画像のイメージを出せないのが手書きのデメリットと言えます。

表現方法を統一する

最後に、相手の要望を汲み取る際に重要なポイントとして、表現方法を統一することです。

あなたが、余白のことをある時は「余白」と言い、ある時は「空白」と言うと、知識の多いクライアントは察してくれますが、ほとんどの場合は

「余白と空白って別物なのか…」と勘違いされてしまいます。

「ラフスケッチ」「ワイヤーフレーム」なども同じ事が起きます。クライアントが混乱しないように、表現方法はそれぞれ定めておくといいでしょう。

クライアントの要望を形にしていく

feedback - 未経験からWebデザイナーになる前に絶対に知っておいて欲しいこと

次は要望を形にするパートです。

週1回程度では連絡を入れる

往々にして、僕たちは作成中のWebサイトに触れる機会が多いために、どこがどう変わって、どこまで進んでいてというのが理解できています。

ですが、だからといって何も連絡せずにいると、クライアントは「本当に進めてくれてるのかな…?」と不安になってきます。

初めてサイト制作の依頼をする方程、これはよく心配されるので、週1回程度で進捗報告をするようにしましょう。

この進捗報告は、あなたに2つのメリットをもたらしてくれます。

  • クライアントが安心する
  • 修正時の手戻りが防げる

クライアントが安心するのに加えて、修正で何度も何度も手戻りするのを防げるのです。

作っては壊し、作っては壊しということをやっていると、制作側としても滅入ってしまうのでこれは大きなメリットです。

確認したい部分を明確にして聞く

せっかく連絡をいれるのであれば、現時点でのサイトについてのフィードバックをもらえるといいですね。

ただし、その際には「どうですか?」という抽象的な質問はやめましょう。

「どうですか?」と聞かれた場合、クライアントはどこを見たらいいのかわからないため、何を答えればいいのかと困惑します。

その結果、何のフィードバックも帰ってきません。

出来る限りクライアントがフィードバックしやすくなるように、「このメニューバーについては、イメージと違う部分はありますか?」などと聞くようにしましょう。

また、聞くだけでなく、「お任せします」と言われることを想定して、その場合はどうするかの対応策を記載しておくといいですね。

例)

「スマホで見た際のメニュー項目がデフォルトでは隠れるようにしてあります。これは、特に問題がなければハンバーガーメニュー(これも説明します)を押すと表示されるようにする予定なのですが、最初から表示しておいて欲しいなどの希望はありますか?」

相手が要望を言葉にできない時の対処法

実際には、クライアントが「こんな感じ!」といって、全然言葉が通じない時があります。

そんな時にまず行ってほしいことを紹介しておきます。

言葉の統一をする

先程も言いましたが、まずは言葉の統一をすることです。

例えば、

  • グローバルナビ
  • ハンバーガーメニュー(ハンバーガーか何か?と言われました)
  • サイドバー
  • メインビジュアル
  • paddingとmargin

などです。この当たりは、しっかり表現を統一しておきたいです。

カンプを作ってみせる

他には、カンプをさっと作ってみせるという方法があります。一度目に映りイメージできるようになると、要望が具体的になってきます。

「ここのスペースをもっと広げて欲しい」など…このカンプが作れるのであれば、準備しておくと一気に説明が楽になります。

他のサイトをいくつか見せる

カンプを作る時間まではない…といった方のために他のサイトをクライアントに見せるといった方法もあります。

これなら、カンプを作る手間は省け、完成品のイメージもお互いに掴みやすいのでオススメです。

クライアントはイメージを表現できない

これはずっと心に刻んでおいてほしいことです。

「クライアントは、あなたに具体的にしてもらえない限り、Webサイトのイメージが表現できない」ということです。

基本的なスタンスとしては、ヒアリング→具体化→ヒアリング→具体化であると考えてください。

Webデザイナーとして持っておきたいもの

最後に、Webデザイナーとしてクライアントと会う際に、持ち合わせておきたいものについて話します。

今回は、要望を聞く瞬間なので、制作前だけに絞って言うと、大体この2つのどちらかがあればいいでしょう。

  • 紙とペン
  • タブレット

紙とペンを持っておいたほうが良いのは、その場でラフスケッチが描けるからです。これだけでも、随分話が前に進むことが多いです。

このように、デザイナーが最初にやるべきなのは「要望を聞く」というよりも「具体化させる」というお手伝いみたいなものです。

手戻りの少ない、楽しいサイト制作ができるように、Webデザイナーとしても出来る限りのことをしていきましょう!

未経験からWebデザイナーになるには?のまとめ

以上、最後まで読んでいただき、ありがとうございました。

今回紹介した以外にもWebデザインに関する資格は数多く存在しています。資格を持っていることで、就職や転職だけでなく、仕事を受注するときにも大きなアピールになります。

また、Webデザイナーという仕事が無くなっても、Webサイトが必要なことには変わらないので、とにかくWebに関する勉強を辞めないことが大事です。

これからWebデザイナーの勉強をしたいという初心者の方は、まずはWEBCAMPONLINEなど、プログラミングスクールの利用を検討されてみてはいかがでしょうか?

WEBCAMP ONLINEの公式サイトへ0 - 未経験からWebデザイナーになる前に絶対に知っておいて欲しいこと