Webデザインを独学で学ぶためのロードマップ

Webデザインをこれから学ぼうと思っている方や駆け出しの方の中には、Webデザインが独学で学べるかどうか気になっている方も多いのではないでしょうか。

もちろん独学でもWebデザインは学べます。

ただし、独学で学ぶ場合、Webデザインができるようになるまの道のりを自分で描く必要があります。

この記事では、Webデザインを独学で学びたい方に向けたロードマップを公開していきたいと思います。

Webデザインとは？

Webデザインとは、Webサイトの見た目を制作することです。

文章や画像のレイアウト、装飾や配色などWebサイトの見た目に関する全てを決めていきます。

Webサイト内で使用する画像の制作自体も行うことが多く、幅広い仕事内容が特徴です。

Webデザイナー

Webデザインを仕事にしている人のことを一般的に、Webデザイナーと呼びます。

印刷関係のグラフィックデザイナーやDTPデザイナー、ファッションデザイナーやインテリアデザイナーという職業があるように、Webにもデザインを仕事にしているデザイナーがいるのです。

Webデザインと一言で言っても、実際の業務範囲は多岐にわたります。

デザインだけを専門で作るデザイナーもいれば、コーディングやWebサイトの公開まで行うデザイナーもいます。フリーランスの場合、仕事をとってくる営業からこなすこともあります。

Webデザインについてもっと詳しく知りたいという方は次の記事を読んでみてください。

Webデザインとは？Webデザイナーの仕事内容と必要スキルについてWebデザインとは、Webデザインとは、Webサイトの見た目を制作することです。文章や画像のレイアウト、装飾や配色などWebサイトの見た目に関する全てを決めていきます。Webサイト内で使用する画像の制作自体も行うことが多く、幅広い仕事内容が特徴です。...

Webデザインに必要なスキル

Webデザインをしていく上で必要なスキルは大まかに分けて以下の4つです。

デザイン

当然といえば当然ですが、デザインを制作するのでデザインスキルは必須です。

Webサイトの見た目を作っていくので、レイアウトや配色に関する知識などは欠かせません。また、クライアントの要望とデザインを結びつける発想力も必要です。

デザイン力は一長一短で身につくものではありませんので、日々の学習や習慣を大切にしていきましょう。

デザインツール

デザイン制作は基本的にパソコン上のソフトウェアを使用して行います。

代表的なものとしてAdobeのPhotoshop・Illustrator・XDやFigma、Canvaというサービスが挙げられます。

他にもデザイン制作をサポートしてくれる様々なツールがあります。

良いデザインを作るためにもデザインツールを使えるスキルは必ず身につけましょう。

コーディング

コーディングとは、Webサイトを構築するために必要なプログラム言語を書いていくことです。

コーディングをするために最低限、HTML・CSSの知識が必要です。アニメーションを付けたりリッチな機能を持たせよと思うならJavaScriptの知識も必須になります。

コーディングを行わないWebデザイナーでも、コーディングを見据えたデザイン制作が求められるため、ぜひとも身につけておきたいところです。

Webの知識

WebブラウザにWebサイトが表示される仕組みはもちろん、検索エンジンの仕組みやトレンドといったように幅広い知識が必要です。

Webは常に進化し続けているため、今日学んだことが数年後には古い情報になっているということはザラにあります。

常にアンテナを張り続け、情報をアップデートしていくことは欠かせません。

Webデザイン学習のみちしるべ

「Webデザインができるようになりたいけど、何をどのような順番で学べばいいのか分からない」という方のためにWebデザインの学習をステップに分けてみました。

目標はWebサイト制作とWebサイトの公開にしています。

Webデザインだけでコーディングまで仕事として行う予定のない方でも、コーディングやWebサイト公開の知識は必要です。

その理由は、コーディングを考慮したデザイン制作をしなければならないからです。

Step1. デザイン・Webの基本的な知識を身につける

まずは基本的な知識を身につけましょう。

行うのはWebデザインですが、デザイン制作における基本的な知識はどの分野のデザインでも共通している部分があります。

まずは上記の4つについて学習することをおすすめします。
デザインは知識があれば問題ありません。

どうやって学んでいくかですが、最初は書籍で学ぶのが間違いありません。
それぞれおすすめの書籍もあります。

・デザインの原則

・レイアウト

・タイポグラフィ

・配色

Step2. デザインソフトを使えるようにする

デザインを制作するためにデザインソフトの操作を覚えましょう。

デザインの学習では、実際にデザインを作りながら学ぶことが大切です。

そのためにもデザインを制作するソフトを使えるようになる必要があるのですが、ここでは完璧にするというより、まずはデザインを作れる程度の操作で構いません。

デザインを制作する上でおすすめのソフトは次の4つです。

Photoshop、Illustrator、XDはAdobeのソフトです。

Creative Cloudコンプリートプランに入れば他のAdobe製ソフトも含めて全て使用できるようになりますが、7,780 円/月 (税込)という料金設定です。

Figmaは個人での使用なら無料でも十分に使用することができます。最近は制作現場でもFigmaを使用することが増えているので使えるようになっておくのも良いですね。

操作方法を覚える優先度は、Photoshop＞XD or Figma＞Illustratorを推奨します

Webサイトで使用するバナーや画像はPhotoshopで加工することが多いからです。

Illustratorはロゴを本格的に作ったり、Photoshopでは困難なタイポグラフィや図形の作成をすることがメインになってくると思うので初期段階ではそれほど重要ではありません。

Step3. HTML/CSSのコーディングができるようにする

実際のWebサイトはHTMLというプログラムで構成されていて、CSSというプログラムで見た目を装飾していきます。

デザインの見た目をプログラミング言語化してやり、Webブラウザがそれを読み取り、ブラウザ上にそのデザインが再現されるという仕組みになります。

最近は動きのあるダイナミックで面白いWebサイトが主流ですが、まずは基本的となるHTML/CSSを覚えていきましょう。

こちらもまずは書籍で学ぶことをおすすめします。

・おすすめの書籍

コーディングはテキストベースで行なっていきます。

コーディングに特化したテキストエディターは無料で利用できますので、必ず使うようにしましょう。

・おすすめのテキストエディター

Step4. Webサイトの公開をできるようにする

Webサイトのデザインとデータを制作することができたら最後はいよいよWebサイトの公開です。

Webサイトはサーバー上にアップロードをしてドメインと結びつけることによりはじめて、全世界に発信ができます。

サーバーにアップロードしただけ、ドメインを取得しただけでは公開ができません。どうやったらWebサイトをインターネット上に公開できるのかしっかり学んでおきましょう。

以上がWebデザイン学習のみちしるべとなる4ステップです。学習を重ねて各スキルを日々ブラッシュアップしていくことも欠かさず行ってください。

Webデザインの学び方

独学での学び方を紹介します。
独学なので、誰かに教えてもらう・誰かに聞くという方法は除いています。

書籍

書籍は出版されるまでに何度も校正されているので情報の信用性が高くより正しい知識を身につけることができます。

また、検索がメインで情報を入手するネットよりもあらかじめ満遍なく情報を提供してくれる本の方が、自分の頭で考えているよりも幅広いことを学ぶことができます。

Webデザイン初心者こそお金を出してでも書籍で学ぶべきです。書籍であれば何を学ぶべきか一通り網羅してくれているので、学習漏れのない書籍であれば間違いありません。

学習動画

いまは動画でも学習用の教材が揃っています。

特におすすめなのはUdemyという動画学習サイトです。

有料になりますが、プロによる教育動画が数多く配信されています。時々行われるセールを狙って購入するとお得に動画が手に入ります。

YouTubeでも検索すれば色々な動画を無料で見ることができます。ただ、それなりにしっかりと学ぶためにはUdemyのような有料のサービスがおすすめです。

ネット検索

独学では、分からないことは自分で調べるという行動がとても大切です。

その中で最も手軽にできるのがネット検索です。

やり方が分からないことがあれば、大体のことは検索でヒットします。

検索によって解決したことは、なぜ解決したのかをしっかり理解しておく必要があります。「なぜか分からないけど、検索して出てきたこの方法で動く」というのは避けましょう。

また、ネットには様々な情報が転がっています。時には正反対の意見を見たりするかもしれませんが、自分の頭で判断することが大切です。

Webデザイナーとして働く

Webデザイナーとして仕事をする場合は自分の実力を示し、就職するか自分で獲得していく必要があります。

いつまで学習をして、いつからWebデザインの仕事をしていくかを考えておきましょう。

仕事となるとそれなりの知識やスキルが必要なため、学習をはじめてから仕事になるまで半年から1年ぐらいを目安にしておくと良いと思います。

また、Webデザイナーとしての働き方は以下の3通りです。

ポートフォリオを制作する

ポートフォリオとは、主にクリエイターが準備する自分の実力を示すためのものです。

デザイナーであればデザインを、イラストレーターであればイラストというように自分の職種に合わせて用意します。

Webデザインの場合、XDやFigmaで作ったデザインや実際に公開しているWebサイトなど、Webデザインに関わるものをポートフォリオとして準備します。

仕事で制作した成果物を実績として提示できれば良いのですが、仕事でWebデザインをしたことがなければそれはできません。

未経験の方がWebデザイナーとしての一歩を歩き始めるためにも、自分の実力を示すポートフォリオはかなり重要な役割を持っています。

必ずポートフォリオは制作しましょう。

ロードマップは以上になります。

この記事は今後も定期的にアップデートしていくつもりです。