Webデザイナーとは


Webデザイナーとは

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

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デザイナー専攻の基本のカリキュラムは、Illustrator・Photoshopなどのデザインソフト、HTML5・CSS3・JavaScript・jQueryの言語を学習します。 Webデザイン基礎スキルはUIデザイン・クライアントワークで、マーケティングの知識はSEO・Google Analyticsのライブ授業、 必要な知識を学ぶ概論授業は、Web概論・著作権・ワークフロー・フォント概論・色の基本などがあります。独学よりも効率的に身につき、自分のスキルレベルの把握もしやすくなります。

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

一般的には全くの未経験からの求人は少なく、ある程度の知識・技術が必要です。
スクールで勉強をするか、独学で勉強をしておくことが必要です。また、自分のスキルを提示するために作品をまとめた冊子やポートフォリオサイトを作っておくと採用の際に企業に自分のスキルを示すことができて有利に働くこともあるため、作っておくことをおすすめします。

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

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

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

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

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

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

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

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

求人動向

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

Webデザインをする上で必要なスキルは?

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

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

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

Webデザインに必要な機材

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

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

Webデザイナーになるためのおすすめ勉強法

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

Webデザイナーになるための適正は?

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

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

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

Webデザイナーになるためにかかるお金は?

専門のスクールに通う場合、30万円~120万円前後が多いです。内容や期間によっても価格は変わってくるため、自分の目的やライフスタイルに合うスクールを選びましょう。書籍などを参考にする場合、1冊2,000~3,000円が相場です。
また、PhotoshopなどのAdobe関連のソフトフェア使用料(全て使えるコンプリートプランで5,680円/月(税別)※学割あり)、インターネット費用(3,000~4,000円/月)、またポートフォリオサイト等を公開するためのレンタルサーバー代(300円前後~/月)などがあります。
すでにデザインに使えるパソコンがあれば必要ありませんが、パソコン購入費も必要になります。デザイン作業にはある程度のスペックが必要なため、この辺りも検討が必要となります。

どのような職場がある?

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

業務例

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

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

その他のお仕事

まとめ

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