Webデザイン

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

office

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

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

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

>>おすすめのwebデザインスクールまとめはこちら

CONTENTS

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

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

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

また、データベースとして使うには、こちらのサイトが非常に参考になります。

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

以降はこちらのサイトの情報も利用しつつお話します。

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

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

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

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

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

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

サイトのリニューアル

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

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

キャンペーンサイト

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

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

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

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

芸術領域から入ったWebデザイナーには厳しい局面も…

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

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

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

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

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

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

Webデザイナーも数字を見る必要がある

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

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

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

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

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

>>おすすめのwebデザイン・プログラミングスクールはこちら

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

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

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

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

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とのデータの受け渡しとかのところだと思います。データベースとの連携は、セキュリティなども関係してくるので割愛します。

なお、現在20代でなおかつ一都三県在住の方向けには、未経験からでも完全無料でPHPを学べる【完全無料プログラミング研修&就活塾】0 - 20代未経験からWebデザイナーになる前に絶対に知っておいて欲しいことがありますので、そちらの利用を検討されてみるのも一手です。

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

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

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

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

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

4. 営業スキルをつける

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

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

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

ちなみに、今からWebデザイナーになりたいという方は、Webデザインをオンライン上で学べるデザインスクールやプログラミングスクールもおすすめです。

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

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

おすすめのデザインスクール比較へ

Webデザインを学んでWebデザイナーとしてサイトを作る時の心構え

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

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

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

ヒアリングシートを使う

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

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

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

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

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

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

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

カンプを作る

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

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

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

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

HTML・CSS形式で見せる

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

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

PHOTOSHOPなどの画像で見せる

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

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

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

などがあります。

手書きで見せる

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

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

表現方法を統一する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例)

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

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

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

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

言葉の統一をする

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

例えば、

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

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

カンプを作ってみせる

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

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

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

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

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

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

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

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

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

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

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

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

  • 紙とペン
  • タブレット

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

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

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

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

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

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

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

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

おすすめのデザインスクール比較へ