Webデザイナーとは?なるには?仕事内容・スキル・年収・将来性
Webサイトの新規構築やリニューアル、運用改善などのプロジェクトで活躍する職業が「Webデザイナー」です。クリエイティブ系職種として、制作会社や広告代理店、Webメディア企業などで活躍するイメージですが実態はどうなのでしょうか。
この記事では、Webデザイナーの仕事内容やスキルセット、年収、勉強方法などを紹介します。未経験から独学やスクールを経て就職を目指す転職方法についても解説します。
Webデザイナーとは
Webデザイナーとは、Webサイトの制作・デザインを主に担当する職業です。クライアントの要望やディレクターの指示にそってレイアウトや配色など見た目に関するデザインはもちろん、操作性や機能性などユーザー体験(UX)に配慮したUIの検討や提案、画像加工、コーディングまでを行うこともあります。
グラフィックソフトの操作やマークアップなどWeb制作技術のほかに、情報設計や心理学、Web関連の幅広い知識、最新の技術・トレンドに合わせたデザイン力も必要とされる職業です。
Webデザイナーの仕事内容
次に、Webデザイナーの仕事内容をみていきましょう。Webサイト制作のプロジェクトにおいて、デザイナーはディレクターやプロデューサー、コーダーなど他のスタッフとも協力して作業をおこないます。デザイナーが担当する業務範囲は、Webデザインに関するタスクですが、その役割分担については組織により様々です。事業会社のデザイナーは、マーケターや事業部門の担当者などとも協力して作業を進めます。
新規のサイト制作では、クライアントへのヒアリングに始まり、企画、設計、デザイン、コーディング、システム構築、検証・テスト、納品といった工程を経てサイトが完成します。新規だけでなく、既存サイトの改修やサイト公開後の更新や運営に関するデザイン業務をメインで担当するケースもあります。
そんなWebデザインの業務について、より具体的な仕事の流れを以下で紹介します。
要件を整理する
企画段階で重要なことは、サイトの要件を整理し、コンセプトを固めることです。制作会社や広告代理店などにおいてプランニングや要件定義は、デザイナーではなくプロデューサーやディレクターが担当することが多い仕事ですが、事業会社で働くデザイナーはこのフェーズから関わることも多いでしょう。
事業部門の担当者や経営層、クライアント担当者などへのヒアリングを行い、Webサイトの目的・目標、予算・納期、ターゲット設定、コンテンツ、デザインのイメージ、欲しい機能など具体的な要望を聞き出し、マストとベターを切り分けながら要件を整理していきます。
構成とレイアウトを決める
提案した企画やサイト要件に対して事業責任者やクライアントの承認がおりたら、具体的なサイトの設計をおこない、Webサイトの構成とレイアウトを検討します。サイトマップやワイヤーフレームなどの成果物を作成して、制作内容やデザインの方向性をメンバーで共有します。案件の規模によっては、Webディレクターが担当することも多いフェーズですが、デザイナーとして意見を出すこともあります。
Webサイトを訪れたユーザーに与える印象や使いやすさ、見やすさを左右する重要な工程となるため、ひとつのページで扱う情報量やわかりやすいラベルの名称、探している情報がすぐに見つかるといったことに配慮しながら、サイトの階層構造やデータ構造も決めていきます。
デザインする
Webデザイナーという職種で、担当することの多い領域が「Webデザイン」です。サイトのコンセプトやレイアウトを基にWebサイト全体の配色を決め、グラフィックを作成します。PhotoshopやIllustratorなどのソフトウェアを使用して、写真の加工やアイコン、ロゴをデザインしていきます。
デザイン案やモックアップなど途中途中の成果物で確認をとりながら、クライアントのイメージを具体化していく工程になります。
実際に業務で使用する代表的なソフトウェアやツールについても以下で紹介します。
Photoshop (フォトショップ)
Adobe Photoshopは世界で最も有名な画像編集ソフトで、写真の加工や合成、編集を得意としています。Webサイトに載せる写真の明るさや色あいの調整、切り抜き、写真をベースにしたメインイメージやバナーなどグラフィックの作成、手書きイラストの色付けなど幅広い用途で活用されています。
Illustrator(イラストレーター)
Adobe Illustratorはイラストはもちろん、ロゴやアイコン、平面的なグラフの作成を得意とする描画ツールソフトです。Webサイトに載せる文字の縁取りや影、変形、グラデーションなどWebサイトのイメージに沿ったあらゆるデザインを作り出すことが可能です。また、平面的なイラストやテキスト、オブジェクトを3Dで作成することもできます。
XD (エックスディー)
Adobe XDは、WebサイトやアプリのUIデザインやプロトタイプの作成を得意とするデザインツールです。ワイヤーフレーム(Webサイトのレイアウトを定める設計図)やデザインガンプ(クライアントに見せる完成形のデザイン)の作成ができ、Webブラウザ上で動きを再現することも可能です。クライアントとWebサイトのイメージのすり合わせをする上で便利なツールです。
Sketch(スケッチ)
Sketchは、Mac向けのWebサイトやアプリのUIデザインに特化したデザインツールです。XDと同様にプロトタイプの作成が可能ですが、Sketchはよりシンプルな作りになっています。動作の速さやベクターデータでファイル容量が小さいこと、IllustratorやPhotoshopなど様々なデザインツールと連携できることが特徴です。
コーディングする
Webデザインを実際のページとして公開するために行う開発作業がコーディングです。サイトのUIをブラウザで表示できるように、レイアウトや枠組みをHTMLで記述し、色や装飾をCSSで指定します。
小規模なサイト制作では、この工程もWebデザイナーが担当しますが、大規模サイトでは「マークアップエンジニア」や「コーダー」のように役割を細分化することが一般的です。
単にサイトを表示するだけでなく、PCのほかスマートフォン、タブレットなどにも最適化したページを表示するレスポンシブ対応や表示スピードの向上、更新性の確保、SEO(検索エンジン対策)などにも配慮して開発をおこなうことが求められます。
コーディングで使用される言語としては、HTMLとCSSがあります。
HTML
HTMLとは「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」の略で、Webサイトの骨組みとしての役割を持つマークアップ言語です。マークアップ言語とは、文章の構造を明確にする言語のことで見出しや段落、リンク、画像等の配置を決定し、Webブラウザ上に表示させます。
CSS
CSSは「Cascading Style Sheets(カスケーディング スタイル シート)」の略で、HTMLの要素を装飾する役割を持つスタイルシート言語です。文字の色やフォントの種類、大きさ、配置などを指定し、表示させる役割があります。
更新や運営
完成したWebサイトは、その後必要に応じて掲載情報の修正や更新作業を行います。コーポレートサイトやサービスサイトのような静的ページで更新箇所の少ないサイトもあれば、ECサイトや求人サイト、メディアサイトなど日々運用が必要なサイトもあり、Webページの種類や規模により求められるデザイナーのスキルセットにも違いがあります。
新しく入荷した商品の掲載や新サービスの告知、求人情報の更新、会社のお知らせ更新、セミナーやイベントなど特設ページの開設、広告用のバナー作成、公式SNSアカウント用のクリエイティブ制作など用途や役割に応じたデザインをおこないます。
小規模サイトのWebマスター、Web担当者の役割を担って、新規コンテンツの追加やサーバー、ドメインの更新作業、メルマガ配信などサイト運営業務全般をデザイナーが行うこともあります。
Webデザイナーの収入
Webデザイナーの収入は、所属する会社の種類や雇用形態、個々のスキルによって異なります。企業に勤めるWebデザイナーであれば、ある程度収入は安定しますが、フリーランスで働く場合には自身の能力やスキルレベルによって大きな差が生じます。
Webデザイナーの平均年収
Webデザイナーの平均年収は、350万~400万円ほどです。職場別に見てみると、インハウスの場合は350万円~、広告代理店では450万円~、制作会社では380万円~、在宅勤務・フリーランスでは250万円~となっています。
年収をアップするには
Webデザイナーとして働き、年収をアップさせるためにはたくさんの案件をこなしてスキルアップを目指したり、ある程度の能力があれば独立してフリーランスとして働く方法もあります。フリーランスとして働く場合には、幅広いニーズに対応できるようなスキルを身につけることはもちろん、人脈づくりも大切です。
Webデザイナーの職場
Webデザイナーと一口に言っても、様々な働き方や職場があります。自身に最適な職場を選ぶことも能力やスキルを活かすために大切なことです。
インハウス
インハウスは内製組織で活躍する社内の専門デザイナーを意味し、インハウスデザイナーと呼ばれます。他社から依頼された仕事を請け負うのではなく、所属する会社の扱う商品・サービスのWebデザインを担当する人のことです。
企業によって仕事内容は多少異なるものの、自社ホームページやLPの制作・デザインのみならず、アクセス解析や改善などサイト運営全般を担うこともあります。
広告代理店・制作会社
広告代理店や制作会社では様々な業種、目的のWebサイトを制作、デザインします。大手企業のWebサイト制作を担当する会社や一つの業種に特化した制作会社などもあり、今後に活かせる経験や専門性を身につけることができます。
分業でデザインやコーディングを制作する会社を選べば、デザイン、コーディングそれぞれの業務に集中でき、Webデザイナーとしてのスキルアップを目指せます。
SOHO・フリーランス
在宅ワーカーやフリーランスのデザイナーでは、案件の獲得から納期管理やお金の管理等も全て自分自身で行います。ある程度のスキルや能力がないと収入には繋がりませんが、フリーランスエージェントやクラウドソーシングに登録すると簡単に案件を獲得することができます。
フリーランスのWebデザイナーは自分で仕事を選ぶことができ、働く場所や時間にとらわれずに自分の好きなスタイルで働くことができるのが魅力です。
Webデザイナーのスキル
Webデザイナーとして働くのに、学歴や資格、経験等は基本的に必要ありません。持っていると有利な資格はいくつかありますが必須ではなく、必要なのはWebデザインをする上でのスキルそのものです。
ここでは、プロのWebデザイナーが具体的にどのようなスキルセットを必要とするのかご紹介します。
デザイン力
デザイン力はWebデザイナーには欠かせない力です。クライアントのイメージを具体化するためには、良い悪いを見分ける審美眼に加え、幅広い表現力を持つことが大切です。芸術大学やデザイン専門学校などでデザイン理論に関する体系的な教育を受けた経験や、グラフィックデザインなどの実務経験は評価されることも多いです。
コーディング力
Web技術が高度化するなか、最新のトレンドにそったWebサイトを構築するためのコーディング力が求められています。コーディング力は始めてすぐに身につくものではありません。たくさんコードを書いたり、参考書を読んだり、勉強会やセミナー等に通ったりしながら地道に案件を納品して身につける必要があります。
企画力
いくら見た目に美しいWebサイトを作れたとしても、ユーザーのニーズや目的を満たすものでなければ意味がありません。クライアントへの丁寧なヒアリングで詳細な要件を理解し、世の中のトレンドやユーザーへのインタビューなどで得たたくさんのアイデアの中から目的達成に近いものを選別して企画の中に落とし込みます。情報収集力や過去の成功例からの応用力も企画力に繋がります。
Webデザイナーになるには
Webデザイナーになるのに、特別な資格は必要ありません。未経験者歓迎の求人やデザイン技術を学べるスクールも多いため、未経験の状態からでもWebデザイナーになることは十分可能です。
ここからは、今からWebデザイナーを目指す人がやるべきことについてご紹介します。
基本的なスキルを身につける
Webデザイナーとして働くためには、まずWebデザインの基本的なスキルを身につける必要があります。Webデザイナーの多くが使用するPhotoshopやIllustrator、Webサイトを構成する要素であるHTMLやCSSに関する知識を習得しましょう。基本的なスキルの習得には、独学で学ぶ方法やスクールに通う方法があります。
独学する
Webデザインに関する書籍やオンライン講座、無料でWebデザインを学習できるサイトを使って学んでいきます。ソフトウェアを使って自分の作品を作ったり、気になるWebサイトのソースコードを確認して真似をしてみたりと、楽しみながら学習することでどんどんスキルを身につけることができるでしょう。
スクールに通う
Webデザインを学べるスクールには、通学制とオンラインの2種類があります。通学制では分からないことがあれば講師にすぐ質問でき、オンラインであれば、自身のライフスタイルに合わせて、好きな場所や好きな時間に学習を進められます。独学に比べて効率的にWebデザインの知識を深めることができるでしょう。
ポートフォリオを準備する
ポートフォリオとは、企業の面接の際に使用する自身のWebデザインの制作実績をまとめた作品集のことです。これは未経験者の就職・転職活動でも用意する必要があります。
自分が「こんなデザインが作れます」「こんなこともできます」といったことをアピールするためのもので、履歴書より大切なものです。
ポートフォリオの作り方に厳格な決まりはありませんが、プロフィールやスキルレベル、得意なことなどを記載すると出来ることが伝わりやすくなります。
求人に応募する
中途採用の場合、即戦力を求める企業も多く、正社員のデザイナー求人は実務経験ありの人に限定されている募集がほとんどです。
正社員求人に応募してなかなか内定が得られない場合は、未経験でも採用のハードルが低いアルバイトや派遣社員、在宅ワーク等の求人の中から選んで応募すると良いでしょう。
また、クラウドソーシングではロゴ作成やコーディングといったWebデザインに関する単発の仕事も多くあります。実務経験のない初心者は、このような仕事からチャレンジしてみるのもオススメです。
Webデザイナーの将来性
スマートフォンの普及や働き方が多様化している中で、Webデザインの仕事は更に需要が増えていくことが予想されます。しかし、将来性の高い仕事といえど、世の中のトレンドを把握し、常にスキルアップを目指して努力していくことが大切です。
UI/UXデザインの需要は高い
あらゆる業界でユーザーとのコミュニケーションにおけるオンライン上の接点が重要となりつつあり、デザイナーの役割はWebサイトに留まりません。
ユーザー目線でのサイトの使いやすさや見やすさ、ユーザーの心地よい体験を実現するUI/UXデザインは他サイトとの差別化を図る上でも欠かせない要素です。
そのように、クライアントからの需要が高いこともあり、制作会社や広告代理店等のWebデザイナーを募集する企業も採用条件としてUI/UXデザインを挙げることが増えています。
プログラミングなどの開発力がより求められる
JavaScriptとPHPは、動きのあるWebサイトを制作するために使われるプログラミング言語です。従来これらの言語は、主にプログラマーやエンジニアが使用する言語と認識されており、WebデザイナーはHTML、CSSが使用できれば問題ないという会社も多くありました。
しかし、Web開発でJavaScriptを使用した動的な処理を利用することが増え、WordPressなどCMSが一般化する昨今のWeb開発では、デザイナーにこれらのスキルを期待する会社も増えているのです。
淘汰されないよう独自の強みを持つ
Webデザインの仕事の需要が増えれば、それに伴ってWebデザイナ-を目指す人も増えていきます。たくさんのWebデザイナ-がいる中で、ごく限られた知識やスキルしか持ち合わせていない人はいずれ淘汰されてしまうでしょう。
そうならないように独自の強みを持つ必要があります。基礎となるスキルの底上げやデザイン力、企画力を磨いたり、UI/UXデザインやJavascript、PHPなど自分の得意分野や幅広い業務に対応できるスキルを身につけましょう。
AIを仕事にするためのキャリアノウハウ、機械学習・AIに関するTopics、フリーランス向けお役立ち情報を投稿します。