Webデザイナーって興味あるけどどんな仕事なんだろう？
どうやったらなれるの？
今後Webデザイナーの仕事をしたい、また副業でチャレンジしてみたいと思っている方向けに、Webデザイナーの仕事内容やWebデザインの勉強法を説明します。
筆者は現職でWebディレクターとして、Webデザインやアプリデザインといった内容の改善について、日々Webデザイナーとやり取りをしている立場にありますので、最新の現場の有益な情報を提供します。
Contents
Webデザイナーとは
Webデザイナーは、企業や個人などのクライアントから依頼されたWebサイトのデザインを担当・制作するというのが主な仕事になります。
Webサイト制作の企画段階から携わり、クライアントの目的やコンセプトに沿ってワイヤーフレームの作成、コーディングなどの作業を通してWebサイト全体のデザインを作成します。
クライアントにとって、Webサイトやアプリは収益につながる最も大事なプロダクトといっても過言ではありません。
そのデザインを作るということはとてもやりがいのある仕事です。
次の章ではWebデザインの具体的な制作工程を説明します。
Webデザインの制作工程
Webデザインはただデザインをするというだけでなく、さまざまな工程があります。
多くのWebデザインやアプリのデザイン制作はこの工程を行なっていくことになるので、しっかり把握しておきましょう。
UI・UXを設計する
デザイン（design）は日本語に訳すと「設計」という意味になります。
このデザインは私たちが日常目にするところにも使われています。
例えば、電車に乗る時に必ず通る改札機。
何気なく毎日使っている改札機ですが、ここにも下記のようなユーザーが使いやすいデザインが施されています。
・改札機の幅 ：いろいろな体型の方に合わせて通りやすい幅を確保しています。
またベビーカーや車椅子を利用される方向けに横幅の広い改札機を作っている駅が多いです。
・ICタッチする位置：身長差も人によってもちろん違います。
どんな身長の方にもタッチしやすい位置を設計して配置しています。
・認識スピード ：多くの方はスマホやSuicaなどのIC機能を利用している方が多いと思いますが、
タッチしてから認識されるまでの時間がかなり早く利用者のストレスを軽減しています。
（切符の場合もほぼ変わらない速さで処理しています）
デザインとは「見た目」だけではなく、ユーザーがストレスなく使いやすい設計をすることが大事です。
Webサイトのデザインを作るうえでも、まずこの設計を行うことが必要になります。
サイトに訪問したユーザーが迷うことなくメニューや申し込みのボタンを見つけられたり、見やすいフォントやレイアウトにすることでユーザーのストレスを軽減させる良質なWebサイトを作ることができます。
このようにユーザーの目に触れる部分全てをUI（ユーザーインターフェース）と呼びます。
またサイトの「読み込み速度が速い」「申し込み導線がわかりやすい」などユーザーの体験に関わることをUX（ユーザーエクスペリエンス）と呼びます。
評価の高いWebサイトやアプリを作るうえで、このUI・UXの観点は非常に大事になります。
ワイヤーフレームの作成
ワイヤーフレームとは、Webサイトの本デザインを作る前に大まかなレイアウトやページを構成するコンテンツの配置を決定するための設計図を指します。
ページのタイトル、メインメニュー・サブメニューなどのナビゲーションメニューから、各コンテンツの適切な配置の枠組みを作成していきます。
本デザインの下地となるのがワイヤーフレームなので、この設計でクライアント側とコンセプトの認識が合っているかをしっかりと確認しておくことが必要です。
作成ツールはAdobe XD、Figmaといったツールが最近では主流で使われています。
上記のツールにはプロトタイプとして、簡易的にそれぞれの画面を繋げて導線の遷移を確認することもできるので、ぜひ使い慣れておくと便利だと思います。
デザインの作成
ここからいよいよ本格的なデザイン制作に入ります。
メインビジュアルやロゴのデザイン、テキストのフォントなどサイト全体のデザインを作っていきます。
サイト内で写真を使用する際には、その選定もデザイナーの仕事となります。
サイトの世界観に合った内容に整える必要があります。
デザインの制作ツールはPhotoshopやIllustratorを使って制作するのが主流です。
PhotoshopもIllustratorもAdobe（アドビ）が提供しているグラフィック編集ソフトです。
Photoshopは画像を補修、修正することを得意としており、写真を加工・合成したり、美しいグラフィックを作ったりすることができます。
Illustratorはロゴやポスターなどの印刷物のデザイン制作が得意としており、さまざま図形、ロゴ、絵の作成を行うことができます。
Photoshopは「フォトショ」、Illustratorは「イラレ」と略されることがよくあります。
コーディング
デザインのグラフィックが完成したら、コーディングを行います。
コーディングはHTML（プログラミング言語）やCSS（スタイル指定言語）を記述してWebサイトの実装を行うことを指します。
コーディングはフロントサイドエンジニアが担当し、グラフィック制作を担当したデザイナーと協議をしながら進めていきます。
テスト
コーディングを終えたページについては、想定していた通りに動作するかのテストを行います。
まずは検証環境で基本的な動作のほか、外部リンク・ページ間リンクのチェック、誤字脱字、動作不良や誤りがあれば修正します。
その後は本番と同じ環境にデータをアップし、同様のチェックを行なっていきます。
Webデザイナーに求められるスキル
Webデザイナーになるには下記のようなスキルが求められます。
UI・UXを考えたデザイン設計
制作過程でも説明した通り、デザインを考えるうえで一番大事なのが、UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）を考えた設計になります。
例えばWebサイトとスマホアプリとでは求められるUI・UXは異なります。
Webサイトに比べてスマホアプリは全体の画面領域が狭いので、その限られた領域での操作性などを考慮しなければいけません。
ヘッダーメニューをスマホアプリの場合、ハンバーガーメニューにするなどもこの考慮の一つです。
それぞれのプロダクトでユーザーが目的とするアクションがすぐ取れる操作性があるか（UI）、ストレスなく目的を果たせたか（UX）、ここをうまく設計できるデザイナーが「出来るデザイナー」と呼ばれる証だと思います。
デザインツールを使うスキル
デザインを作るうえで、ツールの利用は避けて通れません。
これは会社員として働くとしても、フリーランスで働くとしても必ず使うことになるので、Webデザイナーを目指すのならまず使い方を覚えましょう。
納品するクライアントにもよりますが、Adobe XD、Figma、Photoshop、Illustratorはメインとしてよく使われるツールなので、覚えておくと良いと思います。
HTML・CSSの知識
HTMLはWebページを表示するためのマークアップ言語です。
タグ指定して表示方法を命令する記述方法のことです。
CSS（Cascading Style Sheets）はページの装飾などのスタイルを定義するための言語です。
クライアントによって世界観やこだわりなどがあるので、このCSSを使ってよりイメージに近いデザインを実現します。
HTMLやCSSの記述（コーディング）はフロントエンドエンジニアが担当することが多いですが、小規模サイトの構築やフリーランスで案件を受託する場合などはデザイナー自身が行うケースもあります。
そのため基本的な知識として、習得しておくことはとても大事です。
コミュニケーションスキル
デザインを組み上げていくうえで、クライアントやWebディレクターからその「目的」や「意図」を汲み取ることは非常に大事です。
「なんでこのプロダクトを作るのか？」
この部分をしっかりと認識しておかないと、求められているものとの乖離が起きてしまいます。
そのため、クライアントへの丁寧なヒアリングやWebディレクターへの細かい確認出しなど、Webデザイナーには積極的なコミュニケーションを要求される場がたくさんあります。
考えを端的にわかりやすく伝えるように意識するなど、コミュニケーションのスキルを向上させましょう。
Webデザイナーになるメリット
ここからはWebデザイナーになるメリットを説明します。
転職・副業に有利
IT人材については年々需要が高まっており、これはこの先も続くと予想されています。
この表は経済産業省調べによる、今後のIT人材の動向を表したグラフになります。
こちらのグラフでも分かる通り、今後IT人材のニーズはより高くなってくるのは事実です。
そして、エンジニアと同じく、サイト構築やアプリ開発に欠かせない存在がWebデザイナーとなります。
現在も非常に多くの企業がWebデザイナーの採用を強化しています。
転職という観点で見ても、他職種よりも有利な点が多いです。
スキルや経験を積めば引く手数多の存在になれる職種ということですね。
下記の記事では「IT業界に強い」という観点から、筆者のおすすめの転職サイトと転職エージェントを紹介しているので、ぜひ参考にしてください。
そして、昨今のリモートワークの拡大により、本業をやりながら副業として、Webデザインの仕事を受けるという人も増えています。
Webデザイナーは一度スキルを身につけてしまえば、その経験やスキルをすぐ他で活かしやすいというメリットがあります。
現在は副業OKの企業も増えていますし、Webサイトの構築やスマホアプリの制作などを外注する企業も増えているので、かなりチャンスの幅が広がっています。
キャリアアップを目指しやすい
Webデザイナーとしてある程度経験を積んでいくと、上位レイヤーの職種にキャリアップをすることができます。
アートディレクター
アートディレクターは、Webサイトやスマホアプリなど、さまざまな制作物をリリースするにあたって、そのビジュアル面の進行や品質の管理をすべて取り仕切る総責任者です。
UI・UXの基本設計はもちろん、競合調査や直近のトレンドの反映など、デザインの深い知見が求められます。
デザイナーとしてのこれまでの経験の長さや高いスキルが求められますが、とてもやりがいのある仕事です。
Webディレクター
Webディレクターはクライアントからの要望を具現化する上流工程を担当する職種です。
クライアントの目的やコンセプトを理解して、現在課題となっていることの洗い出し、そのうえでより効果が期待できると判断した内容を要件定義として定義していきます。
Webサイトやスマホアプリなど作るうえでの基本設計を担当することになるので、成功の可否を左右する責任のある仕事ですが、その分とてもやりがいのある仕事です。
上記の職種になるには、ある程度の経験や知見が必要になってきますが、Webデザイナー出身のディレクターはたくさんいます。
年収も大きく上げることができるので、チャレンジするメリットは大いにあります。
フリーランスを目指せる
制作会社などで、ある程度経験や実績を積むとフリーランスの道も目指せます。
上記の表はITフリーランスの人口推移を表したグラフです。
2022年には26万人を超える勢いです。
エンジニアと同様にWebデザイナーも手に職を付けるという意味ではフリーランスとしての相性はとても良い職種です。
もちろんフリーランス＝個人事業主となるので、案件をもらうために自身で営業をしたり、会社員と違い、毎月固定の給料が入るというわけでもないので、大変な側面もあります。
ただし、しっかりとした実績をもとに結果が出せればリピートで案件をもらえたり、個人で直接受注することになるので、収入面でも会社員時代よりも上がっている人は少なくありません。
会社に縛られない働き方を選べるという意味で、Webデザイナーとしてのスキルを磨くメリットは十分にあると思います。
Webデザインの勉強法
Webデザイナーになるための具体的な方法を説明します。
Webデザインスクールを利用する
Webデザイナーになる一番の近道は「Webデザインスクール」を利用する方法です。
WebデザインスクールはWebデザインの基礎から設計の仕方、またツールの使い方まで幅広く知識を得ることができます。
現場で活躍している多くのWebデザイナーはWebデザインスクールで基礎を学んできている人が多くいます。
下記の記事では現職でWebディレクターとして、一緒にさまざまなサイトやスマホアプリのデザイン設計を行なっているWebデザイナーが実際に利用していたおすすめのWebデザインスクールを紹介しているので、ぜひチェックしてみてください。
ほとんどのスクールでは無料説明会を開いているので、まずは登録して話を聞いてみることをおすすめします。
書籍を購入する
Webデザインについての書籍はたくさん発売されています。
全体像を把握するための基礎を学ぶうえでは書籍を購入するというのも一つの手です。
基礎を学ぶためにおすすめの書籍を一つ紹介します。
この書籍ではWebデザインの基礎からHTMLやCSSといったマークアップ言語の基礎についても学べます。
入門編としてはとても良い書籍だと思います。
まとめ
Webデザイナーという職種は今後も大きい可能性を秘めている職種だといえます。
この記事を読んで少しでも興味が湧いたり、目指してみたくなった方はぜひ今日から一歩ずつ行動していきましょう。
Webデザイナーとして今後活躍する方が1人でも増えたら嬉しい限りです！