Webデザインを独学で学ぶなら何から勉強すべき？ 初心者Webデザイナー向けの学習法

Webデザイン初心者が最低限学んでおく項目としては以下のものがあります。

まず最初に何から学んだほうがいいのか？

本記事では学習の順番についての考え方を解説します。

どんなWebデザイナーになりたい？ デザインとコーディングはどっち優先？

Webデザイナーは大きく分けると以下の2つに分類されます。

Webデザイナーって言うとデザインの見た目を作るだけのイメージを持つ人がいるかもしれませんが、後者のコーダーもWebデザイナーと呼ばれることが多々あります。

「Webデザイナー」の定義は曖昧で人によって定義が異なりますが、多くの人がコーディングも含めてWebデザイナーと呼びます。

デザインとコーディング、最終的にはどちらも覚えたほうが良いですがまずは興味があるものから始めていきましょう。

「デザイン」と「プログラミング」興味があるのはどっち？

Webデザイナーは覚えることがたくさんあり、挫折しがちなので自分の興味があるものから学び始めるのがおすすめ。

どっちに興味があるでしょうか？

基本的にはどちらも学ぶことになるので迷ったら直感で選んでOK

初心者Webデザイナーに必要なデザイン関連知識

Webデザイナー初心者でも最低限抑えておきたい基礎知識は以下の3つ

コーディングを任せるタイプのWebデザイナーであれば以上3つのスキルがあれば最低限のWebデザインカンプを作ることができます。

初心者コーダーに必要なプログラミング関連知識

業務によって必要となるスキルは異なりますが、最初に覚えるべきは以下の3つ

HTMLとCSSだけでWebサイトは作成できます。

JavaScriptはサイトに動きを出したりする際に使用しますが、無くてもWebサイトは作れるのでまずはHTMLとCSSを学びましょう。

Webデザイナーにコーディング知識が必要な理由

Webデザイナーという名前のとおり、デザインだけでコーディングやらプログラミングなどはしたくないという人も多いんじゃないでしょうか？

以下のような場合はデザインのみのWebデザイナーとして働けます。

しかし、多くの求人や業務ではコーディングスキルも求められます。

仮に求められなかったとしても、コーディングスキルが無いWebデザイナーには以下のデメリットがあります。

絶対に必要というわけではありませんが、できて当たり前と思われているところがあるので最低限のコーディングスキルは身につけておきましょう。

コーディングのプロと言うレベルまでいかなくても大丈夫です。

デザインソフトの使い方を学ぶ

デザインをメインに学びたい人は最初にPhotoshopを学ぶのがおすすめです。

PhotoshopはWebデザイン以外のデザイン業務にも役立ち、スキルとしての価値があります。

まずは汎用性の高いPhotoshopから学んでいきましょう。

Webデザインに必要となるデザインソフトは？

Webデザインに使えるソフトはたくさんあります。

どのソフトが一番良いとは一概には言えませんが、初心者が最初に学ぶのであればWebデザイン以外でも使えるPhotoshopを推奨。

Photoshopに慣れてきたらWebデザインのレイアウト作成に最適なAdobe XDなどを学んでいくのが良いと思います。

WebデザイナーがPhotoshopから学ぶべき理由

Webデザイン未経験者にPhotoshopをおすすめする理由は以下のとおりです。

Adobe XDを推奨する場合も多いですが、万能さや応用力でいくとやはりPhotoshopが一番。

Photoshopを安く買えるプランであれば月額1000円程度で最新版が使えます。

Webデザイン以外にも役立つシーンが多いのでまずはPhotoshopから学んでみましょう。

Photoshopの使い方を学びながら実際に作ってみる

Photoshopは超多機能なソフトなので使い方を覚えるのが大変と感じるかもしれません。

しかし、ピンポイントで自分に必要な操作を行うだけであればけして難しくありません。

フォトショにはレイヤーやマスクなど初めてデザインソフトを使う人にはわかりにくい機能もありますが、多くの機能は直感的に操作できるのではじめてでも大丈夫。

Photoshopをはじめて使う人は情報量の多いWebデザインではなく、バナー広告やサムネイルデザインなどを作ってみましょう。

バナーやサムネイルなどの単品デザインは慣れてくれば数分で作ることができるのでサムネ制作などのちょっとした副業にもおすすめです。

以下の記事でPhotoshopで作れる副業向けのデザインを作成する方法を詳しく解説していますので参考にしてみてください。

Webサイトやポスターなどに配置する「写真」を美しく編集するための画像編集＆レタッチの方法は以下の記事で解説しています。

デザインの基本を学ぶ

デザインソフトを使って「なんとなく」レイアウトしたり装飾していくだけではなく、理屈のあるデザインを行えるようにする必要があります。

このデザインにした理由をはっきりと答えられるようにデザインの基礎知識も勉強しておきましょう。

デザインの基礎も本やWebで学ぶことができます。

抑えておくべきデザインの基礎知識

デザインに役立つ知識は多々ありますが、基本的なものは以下の通り。

初心者には必須でないものもありますが、デザインを行う上で抑えておきたい知識になります。

デザインの基礎については以下の記事にまとめましたのであわせてご覧ください。

Webデザイン独自の基礎知識

どんなデザインにしたら便利なのか？わかりやすいのか？

Webデザインを作成する上でUIデザインは欠かせません。

紙面とディスプレイでは求められるデザインも大きく変化します。

印刷物で見やすいデザインとWebで見やすいデザインは異なるので媒体によって適したデザインを選択するスキルも必要になります。

Webデザインの「目的達成のために」必要となる知識

目的を果たすためには見た目のデザインが良いだけでなく、目的達成に効果的なデザインが求められます。

場合によってはWebデザイナーがテキストも考える必要があるため、キャッチコピーなどのマーケティング関連スキルも身につけていきたいところ。

コーディングの基本となるHTMLやCSSの勉強方法

コーディングを学ぶ方法は主に以下の3つ

Webデザインの学習本で学ぶ

おすすめはmana氏の『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』

実際に作りながら学べるタイプの学習書なので、Webサイト制作の現場の流れが体験できるという大きなメリットがあります。

最新のWebデザインに欠かせないレスポンシブ、Flexbox、CSSグリッドに対応しています。

YouTubeやWebサイトで学ぶ

現在は無料情報も豊富に提供されており、インターネットに接続してさえればいくらでも学習することができます。

無料の学習サイトは多々ありますがProgateかドットインストールが人気。

直感的に学べるので初心者に最適ですが、無料で学べるのは基礎講座だけなので深く学びたい場合は有料プランに入る必要があります。

無料のオンラインスクールで学ぶ

オンラインスクールでも無料提供されている体験や実質無料のオンライン講座を使うことで無料で学習することができます。

おすすめは以下の2つ

Adobeの公認オンラインスクールはAdobe CCコンプリートプランが安く買えてオンライン講座が付属するという超お得なプラン。

デザイナー必須のAdobe CC（全部入り）買うよりも安いのでオンライン講座なしでも買う人が多いコスパ最強プランです。

Adobe CCを未購入の場合は実質無料以下なので一番おすすめ。

デザインの基本からコーディングやWebサイトの仕組み、実際にサイトを制作する方法まで体系的に学べるWEBデザインスクールの無料体験もおすすめ

WEBデザインスクールの「rimomo（リモモ）」は無料体験でも有料講座とまったく同じ講座が7日間、受講し放題になります。

上記のオンライン講義の内容すべてが、無料体験中でも受講し放題になります。

入門レベルは無料体験期間中でも十分に学び切ることができますし、実際に体験してみて自分にあっていると実感できたらそのまま入会し、すべての講座を学んでもOK。

もちろん無料体験だけでやめてもOKです。

無料体験はこちら>>rimomoの無料体験

WordPressの経験も役に立つ

必要最低限となる知識はHTMLとCSSとされますが、WordPressについての理解も深めておくと役に立ちます。

最新のWordPressではHTMLとCSSを使わずにノーコードでサイトを作ることも可能なのでコーディングしないタイプのWebデザイナーであればWordPressもおすすめです。

非常にかんたんに作れるのでポートフォリオ代わりに作ってみてください。

Web技術の知識がほとんど不要なノーコード制作ツールWix

WordPress以上に簡単にノーコードでホームページやショップが作れるWixというWeb制作ツールもあります。

HTMLサイトやWordPressサイトと違ってシステムからサーバーまで一元管理されたサービスなので「デザイン以外はまったくできない」という人でもサイトを作ることができます。

ノーコードツールは誰でも簡単に作れるという性質上「就職」「転職」といったシーンではスキルとして重宝されませんが、Webサイトを作るという結果だけを求めるのであればもっとも効率的なので「デザインのみ」に特化していくと考えている人は選択肢の一つとして頭に入れておいても良いでしょう。

Web制作の流れを理解する

Webデザインというと見た目のデザインを作ればいいというイメージを持つかもしれませんがWeb制作の工程は予想以上に多くなっています。

Web制作全体の流れを簡潔に解説していきます。

設計工程

Webデザイナーと言うよりはWebディレクターの管轄になりますが、Webデザイナーでも把握しておきたいポイントです。

あらかじめどのようなWebサイトを制作するかしっかりと決まっている場合は問題ありませんが、顧客の要望からデザインを起こすという場合にはこの設計工程が欠かせません。

制作工程

実際に制作を行う工程です。一般的にはWebデザイナーの管轄はこのエリアです。

公開〜運用

Webサイトは公開して終了ではありません。公開後の対応も必要になります。

公開や運用サポートまでWebデザイナーが行う場合もあるので業務内容によってはこれらの知識も必要となります。

全体の流れをもっと詳しく知りたい方は以下の記事をご覧ください。

Webデザインを学ぶおすすめの順番まとめ

Webデザインの基礎を学ぶ上で必要となる学習項目について解説しました。

何から学べばいいかという質問に対しての結論は「好きな部分から学んでOK」ということです。

とはいえ効率の良い順番もあるのでおすすめの順番を2パターンほどご紹介します。

デザインに興味がある人はPhotoshopから学ぼう

Webサイトやコーディングよりもデザインそのものに興味があるという人は以下の順番で学ぶのがおすすめ。

まずは興味があるデザイン関連のスキルを優先的に身に着けていきましょう。

この手順で学んでいけばPhotoshopを学んでデザインの基礎を身につけるだけでバナー制作やサムネイル制作といったかんたんなデザインの仕事なら受けることも可能になります。

ある程度デザインに慣れてきた段階でWebサイトの仕組みやコーディングを覚えてWebサイトを作成していきましょう。

コーディングに興味がある人はHTMLとCSSから

デザインというよりもコーディングやプログラミングに興味があるという人はHTMLとCSSから始めてみましょう。

コーディングの基礎となるHTMLとCSSは初心者でも学びやすい内容になっているので完全未経験でも大丈夫。

デザインができなくてもWebサイトは作ることができるので実際のサイト制作までの期間が大幅に短縮でき、達成感を得やすいロードマップです。

実際にサイトを作成してみよう

未経験でも実際に一人でサイトを立ち上げまで行ったという実績があれば就職や転職で有利に働きます。

本記事で紹介したデジハリや1冊で学べる本だけでもサイト制作は可能です。

実際にWebサイトを作ることができたら応用として作成したサイトにjavascriptで動きを取り入れてみたり、WordPressで立ち上げてみたりとできることを増やしていきましょう！

まずは試しに作ってみると自信がつきますので自分一人でサイトを作ってみるというのを第一目標にしてはじめてみてください。