Webデザインの勉強方法を紹介！未経験者でも独学で学べる？

Webデザイナーの仕事とは

「Webデザイナー」は、主にWebサイトの制作・Webサイトのデザインをするお仕事です。Webディレクター・エンジニアなどと協力しながら、クライアントや自社のWebサイトを作りあげていきます。
“Web”は構成する要素が多いこともあり、Webデザイナーの仕事領域も広範囲にわたります。分業している会社では、それぞれの領域に名前がついていますが、Webデザイナーはそのいくつかの領域を越えての業務内容を担当します。 主にこの4種の領域があります。

・Web制作の目的、戦略に基づくUX（ユーザーエクスペリエンス）の設計：UXデザイナーの領域
・Web制作に置けるUI（ユーザーインターフェース）のデザイン：UIデザイナーの領域
・Webデザインをブラウザ上で見える形にするためにソースコードを記述する：マークアップエンジニア/コーダーの領域
・Webデザインを元にマークアップエンジニアの領域からさらにCSSやJavaScript、PHPのコーディングを行う：フロントエンドエンジニアの領域

Webデザイナーと呼ばれる人は幅広くスキルを網羅している人もいれば、どこかに特化している人もいます。上記でいうと、UIのデザインと、マークアップは必須スキルといえるでしょう。しかし、どの領域もWeb制作において大切であり、1人で制作せずとも、連携して取り組む必要があり、他の領域についても知識を持っておくことが重要になります。

Webデザインを仕事にするにはどういうスキルを学べばいいの？

Webデザイン

色・文字・レイアウトなどのデザインに関する基礎知識や、Webサイトの目的に沿ったデザインを考える知識を学ぶ必要があります。紙とWebではデザインに関する基礎知識は同じ部分はありつつも、工程や定番が異なるため、Webに特化したデザインを学ぶ必要もあるでしょう。決められた枠組みの中でデザインする紙と、デバイスによってレイアウトが異なるWeb、読む人の視線を意識したZ型のレイアウトをする紙と、縦にスクロールするため、F型のレイアウトが推奨されるWebといったように、同じデザインでも考え方が異なります。

HTML

HTMLはWeb制作のためのマークアップ言語であり、情報構造を定義するための言語です。インターネット上で公開されているウェブページのほとんどはHTMLで制作されています。Webを制作する上で基本知識であり、しっかり押さえておく必要があります。また、HTML自体も進化をしています。

CSS

CSSはWebをスタイリングするための言語です。色をつけたり、枠をつけたり、ボタンを並べたりといった見た目に影響する部分を担います。HTMLが情報構造を定義するための言語とお伝えした通り、HTMLでサイトをスタイリングしてしまうと、コンピューターや検索エンジンに理解されにくい構造になってしまうため、HTMLと分けてCSSでスタイリングをします。簡易なサイトであっても、CSSはしっかりと理解しておく必要があるでしょう。

　

レスポンシブ（スマホ）対応

みなさんはWebサイトを何で見るでしょうか。移動中に携帯（スマートフォン）で、家で、タブレットで、会社にいるときはPCで、など状況により見るデバイスが異なると思います。そうしたデバイスに対応するために、それぞれのデバイス用に1つ1つサイトを作るという手法もありますが、1つのサイトで対応できるようにデザインされたもの、それがレスポンシブデザインです。デバイスが増えたいま、Webデザインの主流になりつつあります。特に、最近ではどんな状況やデバイスであっても常に快適に閲覧できるサイト構造が求められています。

　

JavaScript/jQuery

HTMLはマークアップ言語で構造的な意味づけをするものですが、JavaScriptは計算処理を行うように指示するプログラミング言語です。その計算処理により、画面に動きを与えたり、サーバーに対して情報を送受信したりすることが可能です。そしてプログラミング初心者でも扱いやすくJavaScriptをより簡単に記述できるように設計されたライブラリがjQueryです。jQueryはどのようなブラウザでも使用できるメリットがあるため、JavaScriptと一緒に覚えておきたいスキルです。

Wordpress

WordPressはもともとブログを運営するために作られたソフトウェアで、Webサイトのコンテンツを簡単に管理することができます。HTML/CSSやPHPなどのWeb関連技術が無い人でもサイト管理や記事投稿ができるため、企業から個人まで広く導入されています。WordPressは「テーマ」と呼ばれるデザインテンプレートがあり、初期設定のテーマから選ぶ方法もありますが、HTML、CSS、PHPの知識を持っていると自分でテーマを作ることが可能です。

PHP

PHPはWeb開発に特化したスクリプト言語です。サーバー側の処理を記述するのに適しており、お問い合わせフォームや予約システム、検索機能、ログイン機能等を作ることが可能です。そのため、Webサービスを作りたい方は覚えるとよいでしょう。すでに記載しましたが、Wordpressのテーマを作りたい方も、PHPを学部と良いでしょう。

その他必要なスキルや知識について

主に、手を動かして制作するスキルについて記載してきましたが、最初に述べたように、Webサイトを作る際には目的や戦略があります。そういった事業戦略、サービスデザインを考えることなどユーザーの需要を考える領域はUXと呼ばれます。ユーザーの立場になって考えること、声を集める方法などの知識もあることで、ユーザーに寄り添ったデザインを作ることができるでしょう。
また、Webサイトは納品したら終わりではなく、その後の運用があります。目的に沿ったユーザーが見てくれているか、目的を達成できているかなどはアナリティクスを理解することで知ることが可能となり、Webマーケティングの知識も役立つでしょう。

Webデザインの勉強方法：初級編

Web制作に必要なツールは何？

UIをデザインする際にはAdobe PhotoshopやAdobe Illustrator、Adobe XDといったソフトを使うことが主流です。そのため、まずはソフト習得が必要になります。特にWebデザインではPhotoshopが一番多く使用されますので、Photoshopを中心に学習するとよいでしょう。Illustratorはベクトル画像を扱うツールで、縮小と拡大を繰り返しても画像が荒くならない特徴があります。そのため印刷物向けですが、Webデザイナーでもロゴ制作はIllustratorを使うとよいでしょう。

Webデザインの基礎：色

デザインの基礎と言われる色はWebデザインにおいても重要です。印刷物などはCMYKと呼ばれるC（シアン）、M（マゼンタ）、Y（イエロー）の色の3原色の組み合わせで表現され、3つの色を混ぜ合わせると、黒になります。しかし純粋な黒をつくることは難しいため、K（ブラック）が加えられています。ではWebデザインはというと、RGBと呼ばれるR（レッド）、G（グリーン）、B（ブルー）の光の3原色の組み合わせで表現されます。この光の3原色は3つの色を混ぜ合わせると白色になります。RGBとCMYKでは表現できる領域の幅が異なります。色によって何を伝えたいのかを明確にすることがデザインするうえで大事ですが、加えてWebデザインに関しては、RGBをどう使っていくかを学ぶ必要があります。

Webデザインの基礎：文字

字も印刷物とWebでは扱い方が大きく異なります。印刷物では自由にフォントを選ぶことができますが、Webに関してはデータ形式や環境によって見え方が違い、どんな環境でも見やすいよう配慮し、フォントを選ぶ必要があります。パソコンやスマホなどマシンにインストールされているフォントのことを「システムフォント（デバイスフォント）」と言い、このシステムフォントを使えばライセンス料を払う必要がなく、サーバーに接続しなくてよいので、表示スピードが速いです。ただし、フォントの選択肢が少なく、デバイスによってフォントが異なるデメリットもあります。最近では、外部のWebサービスからフォントを読み込む「Webフォント」も増えてきて、フォントの選択肢が多くなり、デバイスが異なっても同じ文字を表示できるため、デザインの自由度は高くなってきました。ただし、ライセンス料がかかるフォントも多く、ランニングコストがかかるデメリットもあります。表示スピードも、フォントによって読み込みに時間がかかることがあります。
システムフォントとWebフォントを理解し、目的に沿ってフォントを選ぶ必要があります。

Webデザインの勉強方法：中級編

レスポンシブ（スマホ対応）

レスポンシブにすることで、サイト自体は1つになるため、ページ作成や更新の手間が減ることや、検索により優位になるなどのメリットがあります。作り方としては、画面幅似合わせてそれぞれのデバイスに合わせたCSSを用意します。HTML内に、PCではないデバイスの際にどのように表示するかを記載し、どの幅の時に切り替えるかをCSSに記述する方法を学びます。

JavaScript/jQuery

JavaScriptは、 HTML や CSS に比べるとコード量が多く、とっつきにくい部分があるかもしれません。そんなときは、JavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリであるjQueryから学ぶのもありかもしれません。実際に現場でもjQueryは多く使われています。よく使われるjQueryにはロールオーバー、スライダー、ハンバーガーメニューなどが挙げられます。まずはよく使うところから使用していき、慣れていくことで、表現の幅を広げてみてください。

UXデザイン

ユーザーが違和感なく使える、使いやすい、さらには戦略に沿った目的をユーザーが達成できるサイトを設計するのがWebサイトにおけるUXデザインです。また、制作したWebサイトの効果測定を行い、改善していくこともWebならではのUXデザインといえるでしょう。ユーザーインタビュー、ユーザーアンケートなどの手法や、マーケティング調査、アクセス解析、ABテストの方法などを学ぶ必要があります。

Webデザインのおすすめ勉強方法

Webデザインが学べるスクールに通う

Webデザインを学ぶ方法の1つにスクールに通う方法があります。メリットとデメリットを紹介します。

Webデザインをスクールで学ぶメリット

・体系立てて必要かつ旬な情報を学習することができる
何を学べばよいのか、どの順で学ぶことが効率よいのかを体系立てて学ぶことがでるのがスクールのメリットといえるでしょう。最新の業界の情報も入ってきやすい環境です。

・プロからのフィードバックをもらえる
成長するためにはフィードバックが必要です。Webデザインを仕事にしようと考えている場合、プロからのフィードバックをもらい、プロとして通用するレベルに引き上げてもらうことが成長の近道でしょう。

・人脈が出来る
学校は、引っ張ってくれる先生や、一緒に学ぶ仲間がいるため、モチベーションが担保しやすいメリットがあるでしょう。そして、卒業後にお互いの仕事を分かり合うことができ、時には一緒に仕事をすることもあるでしょう。

Webデザインをスクールで学ぶデメリット

・お金がかかる
スクールに通うには、受講料が必要です。選ぶ学校、コース、期間などで費用も変わってきますので、自身が求めるレベル感や生活スタイルに合わせて選ぶとよいでしょう。

・通学制の場合は移動が必要
学校に通学するために、通学の時間および交通費も必要になってきます。

Webデザインを独学で学ぶ

一方、独学で学ぶことも可能です。

Webデザインを独学で学ぶメリット

・いつからでも始められる
例えば今日からでも、始めたい時に始められるのは独学のメリットといえるでしょう。

・いつ学んでもよい
いつからでも始められると同時に、いつ学ぶのかも自分で選ぶことができます。早朝でも、深夜でも、隙間時間でも、自分に好きな時に学ぶことができることはメリットでしょう。

・お金がかからない
PCが必要なので、環境を揃えることは必要です。もしPCがすでにある環境であれば本やソフトを購入するにしろ、数千円～数万円で始めることができます。また最近ではWebサイト上にも様々な情報が掲載されているため、無料でもそれなりに学び始めることはできます。

Webデザインを独学で学ぶデメリット

・効率が悪い。
どこから学べばいいのか、学んでいることが最新の情報なのか、自分の制作方法があっているのかなどが分からず、効率が悪くなってしまうことがあります。

・プロからフィードバックをもらえる機会が少ない

最近はSNSで繋がるなども簡単にできるようになってきましたが、細かい指導を仰ぐのは難しいといえるでしょう。

まとめ

今、どこの企業にとっても、Webサイトはかかせない重要なものとなっています。需要が多い分、学ぶことで、仕事に繋がりやすいと言えるでしょう。求人数もグラフィックデザイナーよりも多いのが現状です。学ぶ範囲は広いですが、全体を把握しつつ、自身の得意な部分を伸ばすことで、他のWebデザイナーとの差別化も図れます。