目次
- # Webデザインとは
- # 未経験でWEBデザインを勉強するために必要なこと
- # WEBデザインの勉強方法
- # 独学でWEBデザインを勉強する場合の注意点
2021.07.20
Webデザインの勉強法から注意点まで徹底解説
昨今プログラミングと並んでWebデザインを学ぶ人たちが増えてきています。
この記事ではWebデザインを勉強する上で必要なことから勉強法・注意点までを解説していきます。
# Webデザインとは
# 未経験でWEBデザインを勉強するために必要なこと
自由度の高い職業のため、昨今目指す人々が増えてきているWebデザイナー。未経験でも目指す方が増えてきていますが、未経験でWebデザインを勉強するためには具体的にまず何をしていく必要があるのでしょうか。ここでは、Webデザインを勉強するために必要なことを解説していきます。
## ツールやソフトウェアの理解
Webデザイナーは様々なツールやソフトウェアを使用するため、まずはWebデザインを制作していく上で必要なツールを理解していくことが必要です。特に、Adobe社のグラフィックソフト「Photoshop」「Illustrator」はWebデザイン制作に必須です。
「Photoshop」は写真加工などの画像編集やWebサイトのデザイン制作、「Illustrator」はWebサイトに掲載するロゴ制作やイラストに使用します。一般的に「Photoshop」はWebサイトの制作、「Illustrator」は印刷物の制作で利用されますが、これからWebデザイナーとして働くことを考えると「Photoshop」「Illustrator」どちらも利用するため、両方を使えるようになることが望ましいでしょう。
これら以外にも、主にUIデザインや検証用に作成するプロトタイプの作成に向いている「Adobe XD」というソフトやグラフィックソフトでデザインしたデータをWebサイトにするために、HTML、CSS,JavaScriptといった言語で構築していくための「Adobe Dreamweaver」といったソフトが存在します。
このようにWebデザイン制作には様々なソフトがありますが、初心者で始める場合、まずは「Photoshop」「Illustrator」を使用できるようになることが先決です。それ以外のソフトについては、勉強しながら調べてみると良いでしょう。
## デザインに関する一般的な知識を身に付ける
Webデザインに関する一般的な知識は、「デザインの基本原則」と「サイトデザインの基礎知識」の大きく2つに分けられます。
Web・紙媒体にかかわらず、まずは「デザインの基本原則」を抑える事が重要です。具体的には以下の４つがあげられます。
・近接（グループ化）
・整列
・反復
・コントラスト（強弱）
Webサイトはトレンドやユーザーの利用するデバイスによって異なります。ですが、ユーザーにとって、わかりやすく魅力的なWebサイトはデザインの基本である「ユーザーにわかりやすい情報をしっかり、届けられるか」という本質を忠実に守っています。この本質を抑えるための基本原則が上記の4つです。
一方で、Webサイト自体のデザインに必要な知識として、「サイトデザインの基礎知識」があります。主には以下の3つです。
・レイアウト
・フォント
・配色パターン
どのようなユーザーに向けたサイトを作るかによって、構成や見せ方は異なるため、一般的にユーザーに合わせて決定されています。したがって、これらを幅広く習得すればするほど、デザインの幅は広げることができます。
このような「デザインの基本原則」や「サイトデザインの基礎知識」を習得するために、まずは既存のWebサイトを参考にしましょう。ギャラリーサイトからインスピレーションを受けて、デザインの完成イメージを作ってみることも1つの方法です。Webデザインのプロたちが作成したギャラリーサイトからインスピレーションを受けて、デザインの完成イメージを作ってみると良いでしょう。おすすめの参考サイトは以下の通りです。
おすすめの参考サイト
・muuuuu.org
・straightline
・1GUU
## コーディングに関する一般的な知識を身に付ける
前述したように、デザイナーがコーディングまで実施する企業もあれば、デザインとコーディングを完全に分業にしている企業も存在します。ですが、コーディングの知識がないと、エンジニアと認識の違いが生まれ、最終的に完成したサイトが思ったものと違うということもあります。また、Webサイトは作って終わりではなく、更新や改善を繰り返しながら運用していくものです。したがって、コーディング知識を持たないまま、可変しづらいデザインのサイトを制作すると後々改善コストが増えてしまう可能性があります。
したがって、完璧にできるようにならずとも、エンジニアとコミュニケーションできるレベルには習得できるようになることが望ましいでしょう。
学習の手順としては、コーディング→デザインの順で習得することがおすすめです。なぜなら、コーディングを学ぶことで「デザイン以外の大事なポイントや仕組みを知る」ことができるからです。また、Webデザイナーを目指す人にとっては、コーディングが壁になることも少なくありません。特に未経験からWebデザイナーを目指す人にとっては、適性を判断するためにも、コーディングから学習することで、自分に向いているか否か見極めることができるでしょう。
# WEBデザインの勉強方法
ここまでWebデザインを習得する上で必要なことを紹介してきました。ツールの理解やコーディング知識など、Webデザイナーは技術的な部分も習得する必要があります。では、具体的にどのように勉強していけば良いのでしょうか。
ここでは、WEBデザインの勉強方法について解説していきます。
## コーディング
Webデザイナーが学ぶべきコーディングの言語は、「HTML」「CSS」「Java Script」の3つです。
本などで基本的なことを学ぶことも然りですが、実際に自分でコードを書き、理解を深めていく事が大切です。まずは動画などを活用して、Webサイトが出来上がっていく過程を知りましょう。これにより、全体像を把握することができます。
基本的にコーディングは何かを作りながら、勉強することでレベルアップしやすくなります。したがって、まずは簡単なWebサイトを制作していくことがおすすめです。また、Webデザインでは基本を徹底的に定着させることが重要です。自分で手を動かしていきながら、「わかったつもり」はなるべく解消するようにしましょう。最近では、ゲーム感覚で勉強することができる学習サービスもあるので、コーディングの勉強に抵抗のある方は利用してみてはいかがでしょうか。
## 模写
WEBデザインの勉強方法の1つに模写があります。模写を通じて、Webデザインにおけるフォントサイズや色、レイアウトなども模写を通じて、知ることができます。また、模写を通して「自分のデザインの強みを作ること」も重要です。したがって、どのくらいのレベルかにもよりますが、自分の好きなテイストや得意とするテイストの参考サイトを探して、模写することがおすすめです。
模写のステップは以下の通りです。
①素材の準備
②サイトの構成要素を紙に書く
③模写するWebデザインを観察して、記憶する
④模写するWebデザインを閉じて、自分の記憶と美的感性だけでデザインする
⑤正解のデザインと自分のデザインを見比べる
それぞれ具体的に以下で解説していきます。
### ①素材の準備
模写するデザインが決まったら、素材を準備しましょう。参考にするサイトからキャプチャや画像保存などをして、保存していきます。テキストもコピーして、メモやテキストエディターに残していきましょう。
### ②サイトの構成要素を紙に書く
ざっくりで結構ですので、構成要素を紙に書き写します。いわゆる、骨子のようなものです。模写では最終的にサイトを見ずに、自分の覚えた記憶と美的感性のみでレイアウトをします。最低限、ワイヤー見れる状態にするために、ここでワイヤーを紙に記載します。
### ③模写するWebデザインを観察して、記憶する
前述したように、模写ではWebサイトを閉じて、自分でデザインするため、しっかりと観察する必要があります。意識すべき点として、「色の組み合わせ」「文字の大きさや行間」「フォント」「余白の大きさ」「写真選定」「レイアウト（配置）」があげられます。
また、過去自分の制作したデザインと比較して考えることも重要です。
### ④模写するWebデザインを閉じて、自分の記憶と美的感性だけでデザインする
①〜②までで準備したものと③での記憶、自分の感性を用いて、同じデザインのものを制作します。記憶をもとに制作していきながら、覚えていない部分については、自分自身の美的感性を入れながら調整していきます。
### ⑤正解のデザインと自分のデザインを見比べる
最後に、自分のデザインと正解のデザインがどこが違うかを分析します。
初心者の場合、自分のデザインと正解のデザインで大きな乖離があるかもしれません。ですが、そこをしっかりと振り返り、何が違うかを知る事が重要です。これを繰り返すことで、デザインの引き出しが増え、デザイン力をアップさせていくことができるでしょう。
このように模写は一見簡単そうに見えて、実際にやると、想像以上に時間がかかります。継続的に実施しづらいですが、毎日少しずつ時間を決めて継続して続けていきましょう。
## 分析してデザインを言語化
模写とセットで実施すると好ましいのが、デザインの言語化です。デザインの言語化では、具体的に色の割合やページの構成、ページの役割、導線設計、インタラクションなどを分析し、言語化していきます。Power PointやGoogleプレゼンテーションなどにまとめていくことが好ましいでしょう。
デザインを分析し、言語化することで、デザインのトレンドやサイトの構造などを学ぶ事ができたり、実際の業務でデザインの作成意図をクライアントに説明するスキルを習得する事ができます。
## パーツを集めて研究する
Webデザインを制作していく中で、頻繁に起きる悩みがパーツのデザインです。このような悩みを解消するためにおすすめなのが、パーツのストックです。
Webサイトは、ヘッダーやフッター、スライダーなど、複数のパーツから構成されています。
日々、様々なデザインを見ていく中で、これらのパーツをストックしていくことで、制作時に引き出しとして持っておく事ができます。ストック方法については、画像管理アプリを使用したり、Google Driveなど、データ管理ツールなどを利用することが好ましいです。
# 独学でWEBデザインを勉強する場合の注意点
ここまで紹介したWebデザインの勉強方法は、継続していくことが重要です。独学でやるとなると少しハードルが高いと感じる方もいらっしゃることでしょう。したがって、ここでは独学で勉強する上で注意するべきことについて紹介していきます。
## まとまった学習時間を用意する
Webデザインはまとまった時間を確保して、学習することが望ましいです。特にコーディングは、期間を空けると忘れてしまいます。勉強したことを忘れてしまうのは非効率なので、なるべく毎日学習する癖をつけていきましょう。
また、仕事をしながら勉強する場合、1日あたり最低2時間の学習時間を確保することが理想です。仕事で忙しい中で学習するとなると、なかなか時間を確保することが難しいといったこともあります。したがって、電車での通勤時間や入浴中など、スキマ時間を活用して勉強していくことが望ましいです。
## 自分に合った勉強法を探る
前述したように、Webデザインの基礎知識やコーディング、Photoshop・Illustratorといったツール理解など、Webデザインは様々なことを勉強する必要があります。あまり学習にお金をかけられない場合は、Youtubeにあがっている動画や書籍で学びながら習得していくことがおすすめです。
一方で、短期間で実践的なスキルを学ぶのであれば、eラーニングを活用し、講師に教えてもらうのが良いでしょう。無料体験レッスンなどに参加しながら、選定していく事がおすすめです。Webデザインを学べば、Webデザイナーになれるわけではなく、Webデザイナーにはサイト制作に必要なヒアリング力や提案力、マーケティング知識なども必要になっていきます。Webデザインの基礎はもちろん、実際にWeb制作現場で求められるスキルをeラーニングを通して、バランスよく学んでいきましょう。
## 質問できる環境を用意する
独学で勉強する場合は、間違った情報や知識をそのまま受け入れないようにするために、誰かに質問・相談できる環境を整えることも重要です。身近にいらっしゃるWebデザイナーにメンターになってもらったり、スキルシェアのサービスなどで質問に回答してもらうなどがおすすめです。 また、最近ではeラーニングでもリアルタイムで先生や他の生徒とコミュニケーションを取る事ができ、質問や意見をその場で解消する事ができるので、そのようなサービスを活用してみてもいいでしょう。
このように、常に質問やフィードバックをもらえる環境を作ることで、適切な知識を身につけ、効率よく学習を進めることができます。
# Webデザインの勉強をするならSchoo
SchooではWebデザイナーを目指す方向けに、オンライン学習コンテンツを用意しています。
最新のトレンドを取り入れた授業や実際の仕事を模したWebサイト制作など、実際の業務で活きるスキルを身につけることができます。また、Schooなら、質問や意見などがタイムラインに表示されるため、リアルタイムで他の生徒や講師とコミュニケーションを取ることができ、一定緊張感を持って進める事ができます。プレミアムプランの場合、月額980円でWebデザインに限らず、Webマーケティングやプレゼンテーションスキルなど、6,000本以上の授業が見放題です。ぜひ、検討してみてください。
まとめ
本記事では、Webデザインの勉強方法を中心に紹介してきましたが、いかがでしたでしょうか。 冒頭でも紹介したように、Webデザイナーは自由度が高く、将来性がある職業です。しかし、ツールの理解や基礎知識など、専門的な分野であるため、簡単になれるものではありません。実践的な知識を身につけるためには、eラーニングなどを活用しながら、継続的に学んでいく事が必要不可欠です。
本記事で紹介した内容を実施していきながら、Webデザイナーの道を目指していきましょう。
今日の生放送
そもそもWebデザインとは具体的にどのようなものを指すのでしょうか。ここでは、グラフィックデザインとの違いや実際のWebデザイナーの仕事について解説していきます。
## グラフィックデザインとの違いWebデザインとは、WebページやWebサイトに表示されるレイアウトやデザインなど、見た目に関わる制作を行うことを指します。
一般的に、ほとんどのWebサイトは完成後も更新や改善を繰り返して運用していきます。なぜなら、Webサイトは実際に"利用する"ユーザーが存在するからです。したがって、ユーザーにとってわかりやすいボタンのデザイン、文言に設計していく必要があります。
また、Webデザインは、よくグラフィックデザインと比較されますが、グラフィックデザインはパンフレットやチラシなどの印刷物やWebサイトに載せる文字・写真・イラストなどを指します。一方で、"利用する"ユーザーを見据えて制作されるWebデザインは、「作品を作る」というよりも「設計する」ものであると言えます。
## WEBデザイナーとはWebデザイナーは、Webサイトの構成とレイアウトを設計する職業です。Webデザイナーになるためには特別な資格は必要ありません。知識とスキルがあれば未経験でも仕事に就くことができます。最近では、フリーランスや主婦の方がWebデザイナーとして活躍する他、在宅勤務で活動するWebデザイナーも増えてきており、自由度の高い職業であると言えるでしょう。
また、企業によって異なりますが、WebデザイナーはWebデザイン以外に、プログラミングや文字コンテンツの制作に携わる可能性があります。一般的にプログラミングはプログラマー、文字コンテンツの制作はライターといった職業に分業化されていますが、これらのスキルをあわせ持つことができれば、市場価値は高くなります。また、Webデザイナーの平均的な年収は300~400万円程度ですが、経験を積むことで将来的にWebディレクターやWebプロデューサーへとスキルアップしていくこともできます。WebディレクターやWebプロデューサーへと転身した場合、年収も大幅にアップさせることができます。
このようにWebデザイナーは自由度が高く、将来性もあることから昨今人気の職業の一つとなってきています。