Webデザイナーの仕事内容！実際のデザイン業務を現役 Webデザイナーが解説
Webデザイナーの仕事内容をバナー作成、Webサイトのデザイン、Webサイトのコーディングに分けてそれぞれ紹介しています。未経験でもこれからWebデザイナーを目指している人は、ぜひ参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Webデザイナーの仕事内容についてまとめています。
Webデザイナーは未経験からでも働いている人が多くいます。スキルを身につければ環境に左右されずに働くことができるので、これから目指したいと思っている人は、ぜひ知っておきましょう。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回は、Webデザインに関する内容だね！
どういう内容でしょうか？
Webデザイナーついて詳しく説明していくね！
お願いします！
目次
Webデザイナーとは
Webデザイナーとは、主にWebサイトのデザイン業務をメインに行う職種です。
Webサイトの制作業務は多岐に渡ります。
- クライアントとの打ち合わせ
- 進行管理
- 企画
- 設計
- デザイン
- コーディング
- システム構築
- マーケティング
など様々な業務がありますので、所属している会社の方針や、個人の能力によって、業務の範囲が異なります。
細かく分けた場合には、およそ下記のように職種が分けられます。
- Webディレクター：打ち合わせや進行管理、企画、カメラマンやライターの手配
- Webデザイナー：デザイン
- コーダー（フロントエンドエンジニア）：コーディング、Javascriptの実装など
- Webエンジニア：WordPressなどのCMS構築、その他システム構築
- Webマーケター：Webマーケティング、広告運用など
会社によっては、完全に分業のところもあったり、WebデザイナーがコーディングやCMS構築まで担当したりなど、業務の範囲は働く場所や、自分の能力次第で大きく変わります。
Webデザイナーの仕事概要
Webデザイナーは、Webサイトのデザインを作ることが主な仕事です。
Webサイトのデザインは
- サイトの目的やターゲットに合わせた全体の印象や
- 見やすさや使いやすさ
- ユーザーの興味を惹きつけるようなビジュアル作り
- Webサイトとして（予算の範囲内で）実装可能か
など様々な要素を考慮しながら作成していきます。
また、アニメーションを取り入れる場合の動きの設計なども含まれます。
仕事内容には実際のところホームページ作成だけではなく、運用していく上で必要なバナーの作成など様々です。
以下では、主な仕事である
- Webサイトのデザイン
- バナーや画像の作成
- Webサイトのコーディング
について紹介しています。
Webデザイナーの仕事がどんなものなのかイメージが湧かない人は、知っておいて損はないでしょう。
Webサイトのデザイン
Webサイトをデザインしていくためには様々なツールを使用していきます。
そこで主なツールを4つ紹介します。
Photoshop（Adobe）
Photoshopは、画像の編集・加工、デザイン、イラスト制作など様々な用途で活用されています。
Webサイト全体のカンプデザインの作成から、Webサイトに載せる写真の加工、例えば、写真に映り込んだ余計なものを削除したり、商品の写真を切り抜いたり、色調を変えたりなど、非常に多彩な調整ができます。
Illustrator（Adobe）
Illustratorは、特に紙媒体のチラシや広告、ロゴデザイン、イラスト制作などに用いられます。
Photoshopでは、主にラスタ形式（1px角のドットの集合体で画像を描画する）の画像を扱いますが、Illustratorではベクター形式（複数の点とそれをつないだ線の数値の集合体で画像を描画する）の画像を扱うことができ、拡大縮小にも耐えられる画像を作成することができます。
いろんなサイズで展開の必要があるロゴの制作や、Webサイトで使用するSVG形式のアイコン画像などはIllustratorを使って作成していく場合が多いです。
XD（Adobe）
XDは、Webサイトやアプリ等のデザインに適したツールです。
ワイヤーフレーム制作、デザイン制作、プロトタイプ化、プレビュー、共有などWebサイトやアプリの制作に特化した機能があるのが特徴です。PhotoshopやIllustratorに比べて機能が絞り込まれているため、比較的学習コストが低く、動作が軽量です。
アドオンで機能の拡張が可能です。
Sketch（Bohemian Coding）
Mac用のWebサイトやUIデザインに特化したツールです。
基本的にはXDと同じように、機能がWebデザイン、UIデザインに必要なものに絞り込まれていてシンプルなつくりです。
プラグインで機能を拡張することも可能です。
バナーや画像の作成
Webサイトは、完成して終わりではなく運用していくものです。
Webサイトの更新に必要なバナーの作成や、掲載する写真の加工、ネット広告に使う画像の作成なども行います。
小さい枠の中でユーザーに効果的にアピールできるよう、画像や文字などを組み合わせて作成します。
Webサイトのコーディング
コーディングとは、仕上がったカンプデザイン通りに、Webサイトを組み上げていくことです。
基本的なWebサイトの見た目はHTML・CSSによって作られています。
下記のような簡単なページを例に説明してみます。
See the Pen
vYLxZQM by marihashimoto (@mari877)
on CodePen.
HTML
Webサイトにおける内容（文書）を構成するのがHTML（HyperText Markup Language）です。
基本的には文書にHTMLのタグ（<h1>や<nav>など）をつけて構造的な意味合いをつけていきます。
上記のページのHTMLは以下のようになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Webデザイナーの仕事とは？</title> </head> <body> <h1>Webデザイナーの仕事とは？</h1> <nav> <a href="#c1">仕事の概要</a> <a href="#c2">Webデザイナーになるには</a> <a href="#c3">Webデザイナーの年収</a> </nav> <section id="c1" class="js-a"> <h2>仕事の概要</h2> <p>Webデザイナーは主にWebサイトのデザインを担当する職種です。また、コーディングまでを行う場合も多いです。働く環境や、職場によっては、ディレクション、CMSなどのシステム構築まで行うこともあります。</p> </section> <section id="c2" class="js-a"> <h2>Webデザイナーになるには？</h2> <p>Webデザイナーになるには・・・・・</p> </section> <section id="c3" class="js-a"> <h2>Webデザイナーの年収</h2> <p>Webデザイナーの年収は・・・・・</p> </section> </body> </html>
CSS
HTML（文書）に対して装飾をつけていくのがCSSです。
CSSでは、HTMLのタグごとに色をつけたり、サイズを指定したり、配置方法を指定することによりWebサイトの見栄えを整えていきます。
上記ページのCSSは以下のようになります。
body{
margin:0;
background:#eee;
font-family:sans-serif;
text-align:center;
}
h1{
margin:2em 0 1em 0;
}
nav{
max-width:600px;
display:flex;
justify-content:space-between;
margin:0 auto;
}
nav a{
background:#ccc;
color:#000;
padding:1em;
margin:0 .5em;
border-radius:5px;
text-decoration:none;
transition:.2s;
}
nav a:hover{
background:gold;
}
section{
max-width:600px;
margin:2em auto;
padding:2em;
background:#fff;
border-radius:.5em;
}
p{
padding:2em 0;
line-height:2em;
text-align:left;
display:none;
}
.js-a{
transition:.3s;
}
.js-a:hover{
background:tomato;
}
このようにして、HTML・CSSによって作成したデザイン通りのページを組み上げていくことになります。
また、HTML・CSSとあわせて、Javascript（jQuery）などでマウスの操作に対する動きを追加することができます。
上記のWebサイト例の「仕事の概要」部分をクリックすると、内容がヌルッとでてきます。
このようなマウスの操作に対する動きの部分や、Webサイトでよくみる画像がスライドして次々表示されるような動きを追加する場合にはJavaScriptなどの言語が使用されています。
上記の例では、下記のようなJavascriptを書いています。
$('.js-a').click(function(){
$(this).find('p').slideToggle();
});
このような仕組みでWebサイトは作られています。
働く環境や会社によっては、Webデザイナーがコーディングを行わない場合もありますが、このような仕組みを分かっていることは、Webサイトをデザインしていく上でも重要です。
特にフリーランスで活動したい場合には、Web制作案件を一人で完結できるので、必要なスキルと言えるでしょう。
Webデザイナーの魅力
Webデザイナーの仕事の魅力は人それぞれですが、現役のWebデザイナーの話では以下の3つは必ず挙げられる内容です。
- 多種多様の仕事に関われる
- 自分の作ったものが多くの人の目に触れる
- 働き方を自分で選ぶことができる
詳しく解説していきます。
多種多様の仕事に関われる
Webサイトは多くの場合、企業やお店などの広告として、また商品やサービスのプロモーションとして活用されています。
Webデザイナーは、Webサイトをデザインするために、その企業やお店、商品について熟知し、どのようなデザインするか考えていく仕事です。
仕事を通して、様々な業種や商品、サービスに出会う機会がたくさんあります。
自分の作ったものが多くの人の目に触れる
またWebサイトは全世界に公開されます。
自分が携わったものが世にでていくという楽しみや責任感もあります。
良い反響は素直に嬉しいですし、あまり芳しくないときには、改善の策を調べたり考えたりします。
またWeb業界は進歩が早く、どんどん新しい技術やトレンドが生まれるので、勉強することが尽きないのも楽しいところ。
働き方を自分で選ぶことができる
パソコンとネット環境があればできる仕事でもあるので、仕事の場所も選びません。実力次第では、場所や時間に縛られず働くこともできるでしょう。
Webデザイナーになる方法
Webデザイナーは、必須の資格はありません。就職するにしても、フリーランスで活動するにしてもまずは、Webサイトのデザインやコーディングの基本的なスキルを身につけ、作品を作る必要があります。
就職・営業活動では、自分のスキルをアピールする材料として、ポートフォリオ（作品集）を作って採用担当者に見せたり、営業したりすることになります。
いきなりフリーランスもいなくはないですが、まずはWeb制作会社などに入り、実際の仕事を通してWebデザイナーとしての経験を積んでいくのが良いでしょう。
周りにいる経験豊富な先輩から学べることもたくさんあります。
デザイン会社、Web制作会社、広告会社、企業のWeb担当などWebデザイナーを募集している会社は様々です。
自分のやりたいこと、伸ばしたいスキルや目標を踏まえて、自分のキャリアアップを検討してみましょう。
Webデザイナーの仕事環境
Webデザイナーには大きく分けて、
- 制作系の会社に所属する場合
- 一般企業のWeb担当の場合
- フリーランスで活動する場合
があります。
会社に所属する場合には会社の方針によって、Webデザイナーはデザインだけを担当するのか、コーディングも担当するのかなど、業務の範囲は異なります。
制作系の会社に所属する場合
制作会社の場合は、多くは様々な業種のWebサイトの制作に携わることになり、周りには経験豊富な先輩社員がいるので経験やスキルを積むのにはぴったりの環境といえるでしょう。
決まった業界に特化したWebサイトを制作している会社もあるので、自分がやりたいことやできることも踏まえて就職先を検討するのが良いでしょう。
一般企業のWeb担当の場合
一般企業のWeb担当の場合なら、自社サイトの運用（更新、修正やページの追加、リニューアルなど）がメインになるでしょう。
フリーランスで活動する場合
フリーランスで活動する場合には、全ては自分次第なので、取引先も業務範囲も自由ですので、副業としてWebデザイナーをすることも可能です。
能力次第ではWebサイトの制作全般を請け負うことも可能ですし、逆にデザインだけを担当したい場合であれば、信頼できるコーダーなどを探しておく必要があります。
働く場所も時間も自由ですが、仕事がなければ収入はありません。
安定した収入を得るには、ある程度のスキルが必要でしょう。
また、会社に所属する場合とちがって、仕事を探してくるところや経理などの業務も自分でやらなければならないという側面もあります。
年収
Webデザイナーの年収に関する省庁実施など信頼のおける調査は見当たりませんでした。
そのため、求人票やWebデザイナーとしての筆者の知見などを元に解説します。
会社に所属した場合の一般的な年収は、250万円〜500万円程度。
大きな会社のWeb担当であれば、年収400万円〜800万円程度で求人が出ていたりするので、能力次第で大きく変わりそうです。
制作系の会社では、未経験でも入りやすい分、特に最初は月収20万程度〜等、収入が低めなことが多いかも知れません。
そこで経験を積んで、スキルを蓄えて、転職や独立をするケースも多いです。
フリーランスの場合は、一般的には300万円〜500万円程度が平均的。
最初のうちは月に20万円〜程度でも、経験を積むことやスキルUPで収入増につながるでしょう。
働き方
近年では、会社に所属していたとしても必ずしも出社しなくていいスタイルの会社も増えてきています。
また他の業種に比べてリモートワークやフレックスタイム制などを積極的に取り入れている会社も多いです。
ずっとパソコンに向かっているイメージが強いかも知れませんが、打ち合わせでデザインの提案をしたり、撮影（必要な写真の指示）、デザインの参考のために現場の見学などを行ったりすることもあります。
フリーランスの場合は、自宅、事務所を借りる、コワーキングスペースを借りる、など働く場所も時間も人によってそれぞれです。
たくさん働いて、たくさん稼ぐ人もいれば、最低限稼いで、ゆったり働く人など自分の目標やライフスタイルに合わせて仕事量を調節することも可能です。
Webデザイナーになるための勉強方法
まずは、Webデザインとコーディングの基本を学んでみましょう。
本を読んだり、最近ではネットで勉強できるサービスもたくさんあります。
独学でも、スクールに入って勉強するのでも良いので、まずは見様見真似でも良いので作ってみましょう。
作ってみて、次はこんなのを作りたい！とか、もっとこんな風にするにはどうすればよいだろう？という欲が湧いてきたら、Webデザイナーの素質ありです！
また世の中にはたくさんのWebサイトがありますので、たくさん見て研究して、参考にしてみてください。
実際の仕事では、クライアントがいるので、自分の思い通りに作ることはありません。
まずは一つ思う存分自分をアピールできる作品づくりにトライしてみてください。
監修してくれたメンター
| 橋本真理
web/グラフィックデザイナー |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。
現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
