Webデザイナーとは?将来性や仕事内容・なり方、必要なスキルや資格を解説!

Webデザイナーとは

「Webデザイナー」は、主にWebサイトの制作・Webサイトのデザインをするお仕事です。Webディレクター・エンジニアなどと協力しながら、クライアントや自社のWebサイトを作りあげていきます。
Web制作に置けるUI(ユーザーインターフェース)/UX(ユーザーエクスペリエンス)における設計や制作、見る人を惹きつけるグラフィック制作などを行います。

Web担当者との違い

一般的には、企業においてのWeb担当者とは、Webやデジタルを活用しあらゆる施策の実行などの担当をする人のことを指します。Webデザイナーは主にWebサイトの制作・Webサイトのデザインをするのがメインの仕事になりますが、Web担当者はデザインだけではなくデジタル領域全体を活用しながら企画や設計、施策の実行にまで落とし込んでいくことが多いです。会社規模や所属する部署によって、Web担当者が担当する領域は異なりますが、以下のような業務を行うことが多いです。


・Webサイトの更新・管理

・Webサイト等のディレクション

・Webプロモーション(マーケティング)


Webデザイナーの仕事内容は?

主な仕事内容は、ディレクターやクライアントの指示をベースにWebサイトのデザインを作り上げることです。Webサイトの構成やレイアウト、配色を考え、画像、ボタン等のパーツを作りこみます。デザイン性に富むだけでなく、Webサイトの使いやすさ、分かりやすさを意識した機能的なデザインが求められます。ディレクターやエンジニア等とやり取りすることが多いため、Web全体の知識やコミュニケーション能力が求められます。

1.Webサイトの構成とレイアウトをデザインする

ディレクターが作成した構成図を元に、各ページのコンテンツの配置など、レイアウトを線や枠で示したワイヤーフレームを作成します。ページを構成する情報をどのくらいのボリュームで、どこに配置するのか、テキストで見せるのか、イラストや画像を採用するかなど、ユーザーが必要な情報にたどりつくための導線にも配慮しながらレイアウトを決めていきます。ページ遷移やマウスオーバーなど、実際のサイト操作が確認できるプロトタイプを作成すると、より完成イメージが掴みやすくなります。クライアントや制作に関わるスタッフが、サイトの全体像を把握し、方向性や機能の共通認識を持って制作を進めるうえで欠かせない重要なWeb制作プロセスです。

2.Webサイト全体やページごとのデザインを行う

設計した「構成図」「ワイヤーフレーム」「トンマナ(トーン&マナー)」を元に、実際のサイトと同じ見た目の「デザインカンプ」や「モックアップ」といわれる完成イメージを作成します。Photoshop、Illustratorといったデザインソフトを使用して、デバイスごとの見た目、下層ページも全て作り込み、クライアントに確認、修正を行います 。Adobe XD、Sketch、Figmaなどのプロトタイピングツールを使用して、ページ遷移やアニメーションを再現したプロトタイプを作成し、実際のデバイスで完成イメージや操作性などUI(ユーザーインターフェース)/UX(ユーザーエクスペリエンス)をテストすることも増えてきました。

3.Webサイトのコーディングを行う

完成したデザインをWeb上に再現するために、「HTML(Hyper Text Markup Language/エイチティーエムエル)」、「CSS(Cascading Style Sheets/カスケーディング・スタイル・シート)」などのマークアップ言語を用いてソースコードを記述する作業、コーディングを行います。文章の見出しや段落といった文章構造や、リンクをHTMLで指定し、文字や装飾の色、サイズ、レイアウトなど見栄えをCSSでコンピューターに指示を出します。

関連リンク:

4.UI/UX設計をする

「UI」は「ユーザーインターフェース(User Interface)」の略語で、ユーザーが目的の情報にストレスなくたどり着くために、ページの見た目や画面構成、操作性を意味する「UI」を作る作業を「UI設計」といいます。一方、「UX」は「ユーザーエクスペリエンス(User Experience)」の略語で、ユーザーがWebサイトで直接見て操作できるものにあたる「UI」に対し、「UX」はユーザーがサイトを知った時から、利用している間、さらに閲覧後やサービスを利用した後までの体験や感情まで捉えたものをいいます。「UX設計」は、いかにユーザーが継続して利用したいと思える満足度の高い体験を得られるかという視点で、ユーザーのニーズを調査・分析した結果に基づいたデータを見た目だけでなく、問い合わせや購入などサービス全体に反映させます。

5.トンマナ(トーン&マナー)を設定する

「トンマナ」とは「トーン&マナー」の略語で、サイト全体を通しての一貫性あるテイストのことです。配色、フォント、見出しなどの装飾の形、文体など、Webサイトのイメージに影響する要素にルールを設けることで、サイトの世界観が生まれ、ブランディングイメージ、信頼感をユーザーに伝えることができます。クライアントや制作スタッフとは、一致したデザインの方向性を持てるようになります。
また、「トンマナ」を揃えることで、コンテンツの内容や所在がユーザーに理解しやすくなります。デザイナーは常にトンマナを意識しながら、見た目のためだけでなく、ユーザビリティ向上のために、一貫性あるデザインを目指します。

Webデザイナーになるには?

Webデザイナーには様々な働き方があり、今後も需要が高い職種といわれることも多く、これからWebデザイナーになりたいと考えている方も多いのではないでしょうか。Webデザイナーを目指す方法をいくつかご紹介します。

1:独学で勉強する

Webデザイナーは、一般的には全くの未経験からの求人は少なく、ある程度の知識・技術が必要です。

独学での学び方は、教本や動画学習などがあります。書籍などを参考にする場合、1冊2,000~3,000円が相場です。また、すでにデザインに使えるパソコンがあれば必要ありませんが、パソコン購入費も必要です。デザイン作業にはある程度のスペックが必要なため、PC購入も検討が必要となります。

タイポグラフィやレイアウト、色彩などをはじめとしたデザイン関連の本やWebメディアを読む、街に出て様々なデザインに触れることも大切です。また既存の優れたサイトを観察し、どの様な構造になっているか、なぜ優れているかなどを考えながらトレースを行なうなどを行うことで考える力とデザイン技術の両方を身につけていきます。
そのほかにも自分でサイトの企画を行い、コンセプトの設計やサイトマップの作成、ロゴ作成から始まり全てのデザインを行い、HTML5・CSS3・JavaScriptやWordPressを用いて実際にサイトを制作するとサイト作りの流れも理解でき、ポートフォリオに掲載して実力をアピールすることもできます。

自分のスキルを提示するために作品をまとめた冊子やポートフォリオサイトを作っておくと採用の際に企業に自分のスキルを示すことができて有利に働くこともあるため、作っておくことをおすすめします。

2:大学で学ぶ

Webデザイナーになるために大学に通う方法もあります。

大学では、4年間かけてじっくりWebデザインを学ぶことができます。Webデザインなどクリエイティブが学べる大学は美術大学等に限られてきます。大学で学ぶメリットは、デザインだけではなく一般教養など幅広く学べる点です。例えば、マーケティング・ビジネス・経営・発想力など、クリエイティブスキル以外も学ぶことが可能です。Webデザインに関連のない教養科目であったとしてもそれらの知識が魅力的な作品作りにつながる場合もあります。また、就職サポートもしっかりしている大学が多いです。
一方、デメリットとしては、なるべく早くWebデザイナーになりたい場合、通学期間が長かったり、学費が独学や専門スクールに比べて高かったりすることです。大学4年間の学費は、国公立大学で約240万~、私立大学では約400万~程度かかってきます。

3:スクール・専門学校で学ぶ

Webデザイナーになるために、専門のスクールで知識と技術をつけて企業に勤務するという方法もあります。Webデザインを学ぶ場合、知識と技術を同時につけて行くことが大切です。専門スクールに通うメリットとしては、独学よりも効率的に知識やスキルが身につき、自分のスキルレベルの把握もしやすくなる点です。
例えば、デジタルハリウッド専門スクールのWebデザイナー専攻の基本のカリキュラムでは、Illustrator・Photoshopなどのデザインソフト、HTML5・CSS3・JavaScript・jQueryの言語を学習します。

Webデザイン基礎スキルはUIデザイン・クライアントワークで、マーケティングの知識はSEO・Google Analyticsのライブ授業があります。また、必要な知識を学ぶ概論授業は、Web概論・著作権・ワークフロー・フォント概論・色の基本などの授業を用意しています。

一方、専門スクールに通う場合は、受講費用がかかります。相場としては、30万円~120万円前後が多いです。内容や期間によっても価格は変わってくるため、自分の目的やライフスタイルに合うスクールを選びましょう。
受講費用以外にかかってくる費用としては、PhotoshopなどのAdobe関連のソフトフェア使用料(全て使えるコンプリートプランで5,680円/月(税別)※学割あり)、インターネット費用(3,000~4,000円/月)です。また、ポートフォリオサイト等を公開するためのレンタルサーバー代(300円前後~/月)などがあげられます。

Webデザイナーの働き方は?

最近では、Webデザイナーとして様々な働き方があります。

・Web制作会社や自社サービスの制作を行う企業で働く

・フリーランス

・在宅ワーク

将来的にフリーランスや在宅ワークとして働くことを目指す人も多いです。在宅ワークの魅力は結婚、出産、子育て、介護を機にライフスタイルが変わった主婦ママの『子育て・家事と仕事を両立したい』という想いを実現出来ることです。 Webデザインのお仕事は自宅で仕事ができ、自分で仕事の量・時間・休日も決められ、スキルがあれば年齢や資格に関係なく働くことができます。また、パソコンとソフトウェアを購入すれば、すぐに自宅でのお仕事環境も揃えやすいことから、おすすめの職種です。

Webデザイナーの収入(年収・月収)は?

Webデザイナーの平均年収は300~400万円前後と言われています。Webデザイナー主な勤務先の制作会社には中小企業が多いため、高い年収であることはそこまで多くはありません。もちろん保有するスキルや経験年数によっても変動してくるため、企業に務めるWebデザイナーの場合はコーディングができたり、SEOの知識がある、ディレクションもできる、などのスキルによっても変動します。
また、デザイナーからWebディレクター、Webプロデューサーというキャリアを歩む事でも年収アップを目指せます。
フリーランスとして働く場合、単価は自分で提示することも可能なため、スキル次第で高い年収を目指すことが可能です。ただしフリーランス1年目から安定して仕事を獲得することは簡単ではなく、営業活動をするなどコミュニケーション能力も必要になります。

求人動向

ビジュアルの作成やUIデザインだけではなく、情報設計(IA)、体験設計(UX)など、制作会社から大手ゲームメーカー、ベンチャー企業など多岐に渡り求人があります。ニーズの増加により、Webデザイナーの求人も増加していますが、自分の経験や保有するスキルと照らし合わせ、今後進みたい道を考えながら希望や業務内容の合致する企業を見つけましょう。

Webデザイナーに必要なスキル・資格

デザインに使用するソフト、PhotoshopやIllustratorなどが実務レベルで扱えるスキルは必須となります。またデザインといってもただ作ればいいだけではなく、ビジネスの現場では売れるためのデザインを考えなければならないので、マーケティングやSEOなどの知識や、携わる業界に特化した知識などもあったほうが望ましいです。
また、仕事の領域はモバイルアプリなどを含め、とても進化が早く、求められる技術もどんどん増えています。一定のスキルを身につけて終わりではなく、常に新しい技術やトレンドをキャッチアップすることも大切です。

Webデザイナーにおいてもっておくとおすすめな検定試験・認定資格をいくつかご紹介します。

  • ウェブデザイン技能検定
    誰にでも受験資格がある3級、実務経験が必要な2級と1級があります。インターネットの一般的な知識から、設計、デザイン、管理運用などの実務能力が問われるため、取得を目指して学習すれば、ウェブサイト構築全般の知識とスキルを身に付けることができます。
    Webクリエイター能力認定試験
    制作環境、Webサイトの構成と設計、HTML、ビジュアルデザインと配色などを、実際にWebページを制作する実技試験でも問われるため、知識だけでなくスキルを証明することができます。受験資格はありません。
  • Webデザイナー検定
    企画から制作、デザイン、運用までWebサイト制作の一連のプロセスにおいて必要となる専門的な知識が筆記試験で問われます。受験資格はありません。
    コーディングやデザインソフトの操作のスキルを証明できる資格をご紹介します。
  • HTML5プロフェッショナル認定試験
  • Photoshop(R)クリエイター能力認定試験
  • Illustrator(R)クリエイター能力認定試験
  • アドビ認定アソシエイト(ACA) Visual Design using Adobe(R) Photoshop CC
  • アドビ認定アソシエイト(ACA) Graphic Design & Illustration Using Adobe Illustrator CC

関連リンク:Photoshopとは
関連リンク:Illustratorとは

どんなソフトウェアを使うのか

Webデザインを行うには、主に「Adobe Photoshop(アドビ フォトショップ)」を使用することが多いです。また、イラストやロゴの作成を行う「Adobe Illustrator(アドビ イラストレーター)」も使用します。この2つのツールは使用するシーンが多いため、マストで使える事が望ましいです。その他にもデザインツールとして「Sketch(スケッチ)」や、最近では「Adobe XD(Adobe Experience Design)」などもあります。
コーディングも行う場合は、「Sublime Text 3(サブライムテキスト)」や「Atom(アトム)」などのテキストエディタを使用します。

Webデザインに必要な機材

まず、個人で仕事をするのであればパソコンは必要です。モバイルアプリデザインの需要増加や、Webサイトをスマートフォンから閲覧する人が増えているため、検証用にモバイル端末もあると良いです。Webデザイナーは大きな画面の方が作業がしやすく、27インチ程度の大型モニターを使用してデザインをすることが多いです。打ち合わせなど外出が多い場合はノートパソコン+外部モニターをおすすめします。また、解像度が高くデザインソフトの動作が重くならない程度のスペックは必要です。
その他にもサイトで使用する写真を自分で撮影するなら、一眼レフやミラーレスなどカメラも必要になります。

Webデザイナーに向いている人の特徴

デザイナーの役割として重要なミッションの1つである、「デザインでクライアントの課題解決をする」役割を担うことから、クライアントやチームメンバーと円滑なコミュニケーションがとれる人が理想です。新しい情報に敏感な人、デザインに興味がある人、コミュニケーション能力がある人、モノづくりが好きな人、社交的でヒアリング力や提案力の高い人がWebデザイナーに向いているでしょう。また、目的を達成するためのデザインを行い、デザインの意図を説明できる力も必要です。
制作スキルの面では、基本はPhotoshopやIllustratorなどのソフトを扱い幅広い手法を用いたデザインができるということです。コーディングもできると尚良いため、コードに対しての苦手意識がない方が望ましいです。

Webデザイナーになるための難易度は?

高いスキルを求められることもありますが、クリエイティブ業界のニーズは非常に高く、多くの企業で求人が出ており、就業未経験のスクール卒や、就業経験が浅めでも応募できるチャンスはたくさんあります。まずは先輩Webデザイナーのアシスタントにつくなどして実務をどんどんこなしていき、スキルを磨いてステップアップをしていくこともできます。

どのような職場がある?

一口にWebデザイナーと言っても、様々な職場があります。クライアントのWebサイトを制作するWeb制作会社や、Webサービスやモバイルアプリの開発を自社で行う企業、またECサイトなどのサービスサイトを運営する企業などがあります。
また、近年では個人でフリーランスとして働き、場所にとらわれない働き方をする人も増えています。先述の様な企業で勤務後、スキルを磨き人脈を広げ、独立をするデザイナーもいます。

業務例

Webサイトデザインの具体的な制作の流れとしては、クライアントの要望や情報をまとめ、必要なページを書き出し、トップページに表示させる内容を決めるワイヤーフレームの作成から開始します(ここまではディレクターが行うケースも多いです)。その後ラフスケッチなどを行い、Photoshopなどのデザインソフトでデザインを作り上げていきます。この作業の際に、Web用の画像素材にするため、スライス用のデータを作ることもあります。

その他にもバナー作成などのグラフィック制作もあります。企業やスキルによってはディレクションから関わることや、コーディング作業を行うこともあります。尚、フリーランスの場合は全体的に出来ることが望ましいです。

Webデザイナーの一般的なキャリアは?

Webデザイナーとして経験を積んだ後、UIデザイナーやUXデザイナー、アートディレクターやWebディレクターへと進むことが多いです。またデザインだけではなく、コーディングやプランニングなど幅広くWeb制作に携わる場合もあります。
将来のステップアップに向けて、企画力や数値の分析なども求められることもあります。経験が足りないと思った場合は将来のキャリア形成に向けて必要な経験や知識を身につけられるように勉強をしたり、Webデザイナーの経験があれば歓迎をしてくれる企業などに進むということも視野に入れましょう。


Webデザイナーの将来性は?

Web業界は常に進化しており、今後もWebデザイナーという仕事はなくならないと思いますが、AIやソフトの進化により素人でもある程度の品質のものを作れるようになってきています。そのため、誰でもできることやAIでもできるようなことだけではなく、その人にしか作れないものや、クライアントの要望の期待の上を行くレベルのものを作りあげることができる、相談にのりサポートができる、様々な業務をマルチにこなせるなど、自分の個性や強みも必要です。情報収集を怠らず、同時にスキルやセンスを磨き続けることが大切です。

まとめ

Webデザイナーの仕事について解説してきました。Webサイトを通じて提供される情報やサービスで、ユーザーが満足できる体験を得られる。そんな価値あるWebサイトが求められています。Webデザイナーは、幅広い専門的知識とスキルが求められますが、ビジュアルデザインとWeb制作技術を駆使してクライアントの課題を解決に導き、ユーザーにとって役に立つ、満足度の高いWebサイトを作りだすことがWebデザイナーの使命であり醍醐味と言えるでしょう。また、リモートで働ける、フリーランスとして独立するなど多様な働き方にも注目されています。

著者:デジタルハリウッド スクール 編集部