Webデザイナーは電子書籍や動画サイト、ECサイトなどの普及に伴って2000年代以降、需要が高まっている職業の一つです。また在宅やフリーランスなどライフスタイルに合わせて仕事がしやすいことから、Webクリエイターを目指す方に人気があります。
しかし、未経験からWebデザイナーになろうと思っても、世の中にはスクールや動画、書籍などさまざまな学び方があって迷ってしまう方も少なくありません。
ここでは、Webデザインに関するオンライン講座を200以上公開しているSchooが実際の講座内容を交えながら、Webデザインを勉強したい方やこれからWebデザイナーを目指す方に向けて、必要な情報をまとめてお届けします。
「デザイン」とは、機能や見た目のよさ、分かりやすさなど「何らかの目的を実現するための創意工夫や、その工夫を施したモノ・コト自体」を意味します。
デザインの対象は、物理的な物から概念的な思考まで広く及び、前者の例としては、ファッションデザイナーが作る洋服やその図面などが該当します。また、キャリアデザインやライフスタイルデザインなどのように、目的を達成するための考え方やコンセプトを設計・計画することが、後者の例にあたります。
Webデザインとは、このような「目的を達成するための創意工夫」を、ホームページやアプリなどWeb上のコンテンツの見た目やレイアウトを対象に行うことを指します。
ここからは、Webデザインを行う目的と制作フロー、他の類似用語との違いを見ていきましょう。
Webデザインの目的は、伝えたい情報を分かりやすく伝えることです。そのために、Webデザイナーはサイトや広告に掲載する情報を整理し設計します。Webにおけるユーザーの使いやすさのことを「Webユーザビリティ」と呼びますが、Webデザインはこれを高めるために必要です。
また、Webユーザビリティの重要度は環境の変化に伴って高まっています。今や私たちはWebを通じて世界中から情報にアクセスすることができ、またそのデバイスは、パソコンだけではなくスマートフォンやタブレットなど様々です。
このような多様なアクセスに対応できるデザインが必要とされています。加えて、2008年にW3C勧告と呼ばれる国際的なガイドラインが制定され、高齢者や障がい者にも利用しやすいWebデザインの需要も高まっています。
これらのことから、Webデザインとは、世界中からどのような人でも情報にアクセスできるようにWebサイトや広告ページを作ることとも言えるでしょう。
Webデザインの仕事は「企画」「デザイン」「コーディング」「サイト・ページ公開」のフローで進みます。 企画の部分はWebディレクターが担当することが多く、Webデザイナーはディレクターが作成した企画（ワイヤーフレーム）からサイト全体のイメージを考えて実際にサイトのデザインを作ります。
WebデザインとUI/UXデザインの違いとして、デザインの対象範囲の差が挙げられます。UI/UXデザインがWebブラウザに限らず、アプリや家電など様々なモノをユーザーが快適に操作できるような体験を提供するデザインであることに対して、WebデザインはWebブラウザ上での画面表示に特化しています。
UI/UXデザインとWebデザインの関係について、詳しく解説していくと以下のようになります。
まずUI（User Interface）デザインとは、ユーザーがモノを操作する接点のデザインを指し、ユーザーが「使いやすい」「分かりやすい」と思えるデザインを実現することを目的とします。Webサイトの場合はユーザーが利用しているパソコンやスマートフォンの画面に表示されているボタンの大きさや位置、色、ユーザーの主要な動線（画面遷移）の設計などがUIに当たります。つまりWebデザインはWebブラウザ上での画面表示に特化しているため、HTMLやCSS、JavaScriptなどのコーディングを使った、UIデザインだと言うこともできます。
一方、 UX（User Experience）デザインとは見た目のデザインを指すUIデザインに対して、利用するユーザーの体験を設計することです。例えばユーザーがWebサイトで商品を購入する場合、UXデザインには「欲しい情報に迷わずたどり着き、ストレスなく購入し、到着も早くて満足した」という体験をつくることが求められます。
つまりユーザーインターフェース（UI）は、ユーザーエクスペリエンス（UX）を向上させるためのひとつの要素であり、Webデザインを包括しているのがUI/UXデザインです。
Webデザインとグラフィックデザインの違いはデザインの対象と方法にあります。
Webデザインではパソコン・スマホなどの機器をとおしてブラウザ上で表示されるコンテンツをデザインします。またスマートフォンやパソコンのユーザーが利用するコンテンツを手がけるため、基本的にタテ幅の決まりはなく、使用する色もユーザーの負担にならないよう、濃い色合いは避けられる傾向があります。
一方でグラフィックデザインでは、ポスターやチラシなどの印刷物をデザインするため、A4やB5サイズの用紙に印刷することがあらかじめ決まっており、Webデザインとは逆に生活者の目に留まるよう、濃い色合いでデザインされる場合があります。
このように、同じ「デザイン」の領域であっても必要な知識や使うツールが異なるので、デザインの仕事に興味があるけれど、Webかグラフィックで迷っている方はそれぞれの特性やツールの使いやすさを基準に選んでも良いでしょう。
Web制作とWebデザインはWebサイトを作る中で担当する工程が異なります。Web制作はクライアントとの折衝や企画のヒアリング、デザインやコーディングなどWebサイトを作る際に必要な業務全般を指しますが、Webデザインはその中のデザイン制作を主に意味します。
そのため、求められるスキルもWeb制作の方が幅広いと言われており、Webデザインはユーザーに向き合い、使いやすいWebサイトを実際につくる工程に特化したスキルが求められる傾向があります。
ここまでWebデザインの定義やWebデザインと他のデザインとの違いについて見てきました。
Webデザインとは「HTMLやCSS、Javascriptなどのブラウザ技術を使って作られた、ユーザーが使いやすいデザイン」のことであり、Web制作の行程の中でWebデザインを専門に担当する職種がWebデザイナーです。
続いてWebデザイナーの仕事内容や将来性、年収などWebデザイナーを目指す方のためになる情報をまとめてご紹介します。
Webデザイナーの役割はコーポレートサイト、キャンペーンサイト、ECサイトなど各サイトの目的を達成するためにデザインを企画・制作することです。 企業や組織が求める要件や担当するサイトによって多少異なりますが、主な仕事内容は以下のとおりです。
自社サイトの場合は社内の担当者からの要望をヒアリングした後、デザインカンプ（デザインの完成図）を作成します。
一方で、制作会社のWebデザイナーはクライアントの要望を汲み取り、クライアントがサイトに求める効果が出せるようなデザインカンプを作成します。デザインカンプはサイト全体の設計図であるワイヤーフレームと異なり、あくまでデザインの完成図なのでデザイナーの意見が反映されやすい工程です。
またデザインカンプを作成する前にはサイトの目的に合ったターゲットやデザインのトーンを設定するため、企画の工程には競合他社のサイトのデザインをリサーチすることも含まれます。
デザインの企画が通ったら、各パーツのデザインを制作します。メインビジュアル、写真素材の選定や加工、使用するフォントなど、サイト全体のデザインを作り上げていきます。 具体的にはワイヤーフレームや、デザインカンプを参考にしながらPhotoshopやIllustratorなどのツールを使用してグラフィックを作成します。
Webサイトにデザインが表示されるようにHTMLやCSSなどのプログラミング言語を使ってコーディングをします。分業化されている企業では、Webデザイナーとは別にコーディングのみを担当するWebコーダーがいる場合もあります。
コーディングに必要なプログラミング言語については後の「Webデザインに必要な知識とは？」で解説しているので、気になる方は合わせてチェックしてみてくださいね。
Webサイトを公開した後は定期的にサイト全体のアクセス数やページに設置したボタンのクリック率などをチェックします。 それぞれの数値をチェックした上で「改善の必要がある」と判断した場合はユーザーの要望を改めてリサーチしてボタンの大きさや位置、色などユーザーが使いやすいデザインに変更します。
分業が行われている場合、進行管理はWebディレクターが担当しますが、Webデザイナーがチームメンバーやクライアントと打合せを行って予算やスケジュール調整をする場合もあります。
まれな場合ではありますが、デザインに必要な写真やイラストなどの素材を外部のクリエイターに依頼することもあります。 その場合は予算やデザインイメージから、適切なカメラマンやイラストレーターをWebデザイナーが選定して、素材（写真、イラスト、アイコン、ロゴなど）の制作を依頼します。
デザインに必要なイラストや写真を外注している場合はWebデザイナーが納品物の品質チェックをすることがあります。 具体的にはデザインのUIや装飾に統一感があるか、企画の段階でまとめたコンセプトに合った色やフォントが使われているかなど、クリエイティブ全体の品質を確認することもWebデザイナーの仕事です。
前の項目でご紹介した主な仕事内容の他にも、企業やチームの体制によっては以下のような業務を担当する場合があります。
Webサイトや広告バナーのデザインを2種類作成し、どちらがクリック率が高いか検証するテストを「ABテスト」と言います。 Webサイトやアプリ、広告ページなどのアクセス数が減少した場合や、クリック率が減少した場合など、改善が必要だと判断されたタイミングでABテストが行われます。 ABテストを実施する際に自社の担当者やクライアントの要望に合わせてテストで使うデザインを作成することもWebデザイナーの仕事です。
リテンション施策はアプリをインストールした人に長くアプリを使ってもらえるように、改善する施策のことで、アプリのデザインを担当するWebデザイナーが関わる業務です。 例えば、飲食店の予約アプリ内で予約する際に入力する項目が多くて離脱してしまうユーザーがいる場合は、フォームの入力項目を減らす施策が考えられます。
また記事コンテンツを掲載しているアプリやWebサイトでは、SNSでコンテンツを共有できるように共有ボタンを追加する施策などが考えられます。
SEO施策とはGoogleやYahoo!などの検索エンジンにおいて、Webサイトのページを検索結果の上位に表示させて、より多くのユーザーを集客する取り組みのことです。 SEOの評価項目には、例えばページスピードや、画面のスマートフォン・タブレット対応などのユーザビリティ（使いやすさ）に関する指標があります。
そのため、Webページが検索結果の上位に表示されるには、WebマーケターやWebライターだけではなく、Webデザイナーの力が必要になります。
フリーランスまたは制作会社のWebデザイナーは納品物を納品した企業や組織に対して見積書や請求書を作成する業務も発生します。
フリーランスのWebデザイナーが見積書を作成する場合はまず、自分の時給を設定した上でクライアントの要望に対して必要な工数と時間を把握する必要があります。
サイトのフルリニューアル、コーディングなしのデザイン作業など工程ごとの金額を設定しておくと良いでしょう。またクライアントにも予算があるため、金額交渉が必要になる場合もあります。
制作会社またはフリーランスのWebデザイナーがクライアントから制作を受注するには、クライアントの要望に合ったデザインを可視化した提案書を作成する必要があります。
提案書ではサイト制作の目的やクライアントの要望をまとめた上で、制作方針やワイヤーフレーム、制作のポイント、見積とスケジュール案を記載する場合が多いようです。
ここまでWebデザイナーの仕事内容についてご紹介しましたが、自社サイトを担当するインハウスWebデザイナーと他社のサイトを担当する制作会社のWebデザイナーでは仕事の範囲が異なります。
インハウスデザイナーの場合は自社サイトの状況に応じてデザインの改善に関われる上、Webだけではなく、イベントに使うポスターやチラシのデザインに関われる可能性もあります。そのため、制作会社に比べてサイトの状態を踏まえて改善提案しながらデザインができると言えるでしょう。
InstagramやTwitterの普及によって、ビジュアルを用いた発信の機会も増えたことで、今ではさまざまなデザインツールが手軽に使えるようになっており、Webデザインのプロとノンプロの境界線が曖昧になってきているのも事実です。
そのため、インハウス・制作会社に関わらず、Webデザイナーに求められる仕事の範囲はデザインを「作る仕事（制作職）」だけではなく「企画する仕事（企画職）」まで広がってきていると言えるでしょう。
厚生労働省が発表している「産業別労働者過不足判断DI」では正社員等の社員が不足している一方で、情報通信業の景気予測は上向きになっているため、Webデザイナーの仕事は将来性があると言えるでしょう。
その一方で、変化の多いWeb業界でWebデザイナーとして活躍するには、デザインの知識やスキルだけではなく、前の項目でご紹介したようなディレクションやマーケティングの知識があると安心です。
特に企業の中でキャリアを積みたい場合は、各所との調整スキルを身に付けて、Webディレクターの役割も兼任できていると将来性が高いWebデザイナーになれるでしょう。
フリーランスとしてキャリアを積みたい場合は、クライアントの要望を汲み取り、利益に貢献するデザインを制作する必要があるため、営業やマーケティングの知識やスキルを身に付けると良いでしょう。
厚生労働省「令和3年賃金構造基本統計調査」によるとデザイナー（グラフィックデザイナー含む）の年収は478.6万円で、求人サイト「求人ボックス」に掲載されている求人の情報を参考にしたWebデザイナー（正社員）の平均年収は444万円でした（※出典：求人ボックス 給料ナビ）。
Webデザイナーの平均年収をさらに詳しく見ていくと、正社員で働くWebデザイナーの年収は270〜749万円と幅広いため、仕事内容や勤務先企業によって年収にバラつきがあると考えられます。
前の項目でもご説明したように、ユーザーの生活スタイルが変化したことで、ECサイトやサブスクリプション型のオンラインサービスが急激に増加しており、それらの作り手であるWebデザイナーの需要が高まっています。
そのため、アパレルや飲食店の接客業や事務職などの異職種からWebデザイナーに転身しようと考える方も増えており、それに伴って未経験者向けのスクールや教材も増えています。つまり、今は未経験からでもWebデザイナーとして経験を積みやすい状況なのです。
しかしながら、Webデザインの経験が積みやすくなった一方で、Webサイトのユーザーや企業は単にデザインを制作するだけではなく、ユーザーの使いやすさを踏まえたデザインができるWebデザイナーを求めるようになっています。
UIに特化したUIデザイナーや、アニメーションを付けることができるモーションデザイナーなど特定の分野に特化したデザイナーがその例です。
ここでは、Webデザイナーに求められることを踏まえて、これらからWebデザイナーを目指す方に必要な知識をまとめてご紹介していきます。
Webデザイナーはグラフィックデザイナーと異なり、見た目だけではなく、ユーザーの使いやすさを設計する仕事です。そのため、Webサイトを構築するために必要なHTMLやCSSなどのプログラミング言語の知識が求められます。
コーディングはWebデザインをブラウザ上で見える形にするためにソースコードを記述することで、HTML（エイチティーエムエル）やCSS（シーエスエス)、JavaScript（ジャバスクリプト)などのプログラミング言語を使用します。
次でそれぞれについて説明します。
HTML（HyperText Markup Language）とは、Webサイトを構成するために開発されたプログラミング言語で、タグで囲む（マークをつける）ことで構造を表現します。 Webサイトにあるコンテンツの見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを検索エンジンに示します。例えば、HTMLには以下のようなタグがあります。
CSS（Cascading Style Sheets）とは、HTMLで書かれたページをWebブラウザやメーラーにどのように表示するかを定義するためのプログラミング言語です。
Webサイトの文字の色やサイズ、フォントに加えて背景の色や余白など主に見た目の装飾に関することを検索エンジンに示します。 HTMLがブラウザ上にデザインを表示させる指示を出し、CSSがそのデザインの見た目を定義するため、HTMLとCSSは常にセットで使われます。
JavaScriptはHTMLやCSSなど、他のプログラミング言語と組み合わせて使うことで、ブラウザ上でアニメーションを動作させることができるプログラミング言語です。
JavaScriptによってポップアップウィンドウの表示や、グローバルメニューの下層メニューの表示ができるようになります。
サイト設計とは、具体的な目的やコンテンツなどを明確にしてWebサイトの骨組みを作る作業のことです。
分業が進んでいる企業の場合はWebディレクターが担当する場合もありますが、ユーザーが使いやすいWebサイトを考えながらデザインを制作するためには必要な知識です。
Webデザインをする上で必須とも言えるツールにAdobe社の提供するPhotoshopとIllustratorがあります。Photoshopとは、写真の編集（ぼかしや切り抜き、背景の変更など）やデザインまたはイラストを作る際に使われるツールです。
具体的な利用シーンはデザインカンプからパーツを切り出すときです。Photoshopの画像を複数に分割する「スライス」機能が使われます。
一方でIllustratorは、Webデザインのテキストや図形などの各パーツをデザインする際に使われるツールです。
ここまでご紹介してきたように、Webデザインは単に造形の美しさを叶えるためのものではなく、ユーザーがサイトを使いやすいように設計する役割があります。
ユーザーの使いやすさを叶えるデザインをつくるために役立つのがデザイン理論です。
デザイン理論とは、ユーザーがWebサイトで初めて目を留める箇所には「何を提供しているか」「何のためのサイトか」をシンプルにまとめる、サイトイメージの色は増やしすぎないなど、デザインをする際の基礎を指します。
クライアントや自社がWebサイトで達成したいことをデザインでサポートするWebデザイナーにとってデザイン理論は必要不可欠だと言えるでしょう。
Webサイトを公開する際に必要なデザインのデータ（HTMLやCSSなど）はWebサイトのデータ置き場であるサーバーに保管する必要があります。 デザインデータをサーバーに格納するのもWebデザイナーの業務の一部なので、Webサイトを構築する際の仕組みを幅広く知っておく必要があると言えるでしょう。
中でも必ず知っておくべきサーバーの知識はサーバーの必要性、ファイルのアップロード方法、ドメインを管理・運用するDNS（Domain Name System）のしくみの3つです。
単純にデザインされたものをhtmlコーディングするだけであればサーバーやドメインの知識はほとんど必要ありませんが、WordPressやMovableTypeなどのコンテンツ管理システム（CMS）を使ってWebサイトを公開する場合は加えて「サーバーサイドプログラミング」と呼ばれる知識が必要になります。
Webサイトは一度作ったら終わりではなく、ユーザーの行動や満足度に応じて随時改善を図る必要があります。そのため、サイトのデータを分析して課題を特定し、集客やユーザー行動を改善させる、Webマーケティングの知見があることが望ましいです。
具体的には、Webサイトが検索結果の上位に表示されるよう最適化するSEOや、直帰率を下げたり、ページの成約率を上げたりするために、LPをユーザーのニーズに合わせて最適化するLPOの知識が挙げられます。
ここまでご紹介したように、Webデザイナーに必要な知識はデザインだけではなく、サーバー管理やマーケティングにまで及びます。
Webデザイナーになるために必要な知識を勉強する方法はいくつかありますが、ここでは独学の場合とスクールに通う場合に分けて例をご紹介します。
これからWebデザイナーを目指す方や、スキルアップをしたいと考えているWebデザイナーさんはぜひ参考にしてくださいね。
Webデザイナーになるための知識を独学で学びたいと考えている方の中には「どのように勉強を始めれば良いのか分からない」と悩む方も少なくありません。
Webデザインを独学するには、主に書籍や動画を活用する方法があります。それぞれ見ていきましょう。
独学で身近だと感じやすい方法に専門の書籍で学ぶことが挙げられます。未経験からWebデザイナーを目指している方にとって、書店やECサイトで自分の知識レベルに合った書籍を選べることはこの勉強法のメリットの一つです。 デザインについて未経験から勉強する方に人気がある書籍には以下のようなものがあります。
『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』
人気ブログ「Webクリエイターボックス」の管理人、Manaさんが書いたWebサイト制作の学習書。この1冊にWebサイトの仕組みから、HTMLとCSSの基本、最新のコードの書き方、Webデザインの知識、制作現場の流れなどWeb制作入門に必要な知識がまとめられています。
『なるほどデザイン』
著者はアートディレクターの筒井美希さん。デザインに関するものごとを「目で見て楽しめる」形にまとめられており、Webデザインに限らず、デザインを良くするヒントが欲しい新人デザイナーの役に立つ内容が盛り込まれています。
この他にも『配色デザイン カラーパレット 印象づくりに欠かせない、意味を込めた配色の作り方 』（2021）や『実例付き フォント字典』（2018）ではデザインを制作する際に色彩やフォント例を参考にすることができます。
またデザイン基礎のような、普遍的な分野を学ぶ際に書籍は役立ちますが、Webデザインの場合はトレンドや技術の移り変わりが激しいので、インターネット上の最新情報やオンライン講座を参考にしながら、実際に手を動かしながら学習していく方が効率的とも言われています。
次に動画学習についてご紹介します。動画学習は書籍での学習と比較して、分かりやすく、効率的だと言われています。
理由としては講師が動画を視聴している方にわかりやすいように意識して伝えている点や、企業が提供する動画サービスでは学習意欲が維持しやすいように学習時間や履歴が分かるようになっているからです。
また、学習動画を提供している企業は最新の情報を取り入れたコンテンツを定期的に発信している傾向にあるので、書籍では補えなかった「トレンドや技術の移り変わり」を踏まえながらWebデザインを独学できるでしょう。
オンライン研修コンテンツを提供するSchooでは2022年5月時点で260以上のWebデザインに関するコースがあり、初心者向けのツールの使い方やコーディングに関する動画からアプリ開発、UIデザインなどの実務に関する動画まで幅広く提供しています。
次で、これからWebデザイナーを目指したいと考えている方におすすめの動画をいくつかご紹介します。生放送では実際に講師の先生に質問をすることもできるので、気になる動画をチェックしてみてくださいね。
個人サイト立ち上げにあたりWebデザインを学ぶ必要性を感じている方を対象に、「Webデザイン習得に何から学べばいいのか」そして「どんなツールをつかうとデザインが上達するか」などWebデザインのはじめ方をご紹介しています。
「デザインを学び始める上でまず前提となる知識をインプットし、効率的にデザインスキルを身につけられるようになる」ことを目指します。全体を通して「デザインの世界への旅」が感じられるよう、楽しくデザインを学んでいきます。
優先して学ぶべきものや何を意識しながらデザインを行っていくかを学ぶ授業です。学習についても何から手を付けたらよいのかや、いまと昔でウェブデザイナーは何を意識してウェブ制作に関わっているのかを知ることができます。
デザインの制作については「自分が使いやすい！こんなの作ってみたい！」と思うサイトをそのままトレースして（なぞって）みましょう。使用するのはブラウザさえ起動できれば使える無料ツールFigma（フィグマ）がおすすめです。
コーディングについては簡単なWebサイトをHTMLとCSSでトレースしてみましょう。わからないところはインターネットで検索しながらとにかく進めることがポイントです。サーバー不要で、書いたHTML/CSSがその場で表示・確認できる無料ツールCodePenがおすすめです。
ここまで、Webデザインについて独学する方法をご紹介してきました。
しかし、Webデザイナーになる方法はいくつかあるので、自分に合った方法を選んで学び続けることが大切です。次からはWebデザインについて独学するメリットとデメリットをご紹介します。
Webデザインを独学するメリットは以下の3つです。
これらのメリットを踏まえて、Webデザイナーを目指したい方の中でも独学が向いている人は、仕事やプライベートが忙しい方や金銭的な理由で学び続けられるか不安な方だと言えます。
一方で、Webデザインを独学するデメリットは以下のとおりです。
独学の場合はデザインに対するフィードバックを受けにくいため、モチベーションを維持しにくい点や、ポートフォリオの作成などのキャリア支援が受けにくい点が主なデメリットです。
Webデザイナーの需要が増えたことによって、Webデザイナーを養成するスクールも増えています。スキルを積む時間や金銭的な余裕がある方におすすめの方法です。
最後に、独学でWebデザインのスキルを身に付けることに不安を感じている方に向けて、Webデザインスクールで学ぶメリットとデメリットもご紹介します。
主なメリットは以下のとおりです。
独学と比較すると、サポートの手厚さや環境が整っている点がメリットになると言えるでしょう。一方でデメリットによく挙げられるのが以下のとおりです。
一般的には未経験者向けに開講されているカリキュラムのスクール費用は20万円〜30万円程度で、休日に開講しているスクールでも半日以上授業があったりと、働きながらスクールに通う場合は十分な休養ができない状態に陥る可能性もあります。
独学のメリットとデメリットと比較して、自分に合った学習方法を見つけてくださいね。
Webデザイナーの需要は増えている一方で、UI/UXやWebディレクション、Webマーケティングなど、ユーザーが使いやすいWebデザインを制作できる人が今後さらに求められるようになるのが、Webデザイン業界の流れです。
流行を取り入れる必要があるWebクリエイターだからこそ、日々学びながらキャリアアップしていきたいですね。
Schooでは未経験からWebデザイナーになりたい方はもちろん、Webデザイナーのプロを目指す方にぴったりの動画コンテンツをご用意しています。
また生放送ではコメント機能を使って、講師の先生に直接ツールの使い方やキャリアについて質問することができます。Webデザインの授業から自分に合った動画を受講してみてください。
