webデザインの独学は何から勉強すれば良いの?独学の勉強方法を紹介します!

takato(@enjoying_free)です!

webデザインの独学は何から勉強したら良いの?

この記事では上記の課題を解決します。

僕は営業職として働いていましたが、勉強してwebデザイナーに転職しました。

未経験でwebデザイナーに転職した経験を元に、webデザインの独学について説明していきます。

webデザインの独学に行き詰まっている方やこれからwebデザインの勉強を始めようとしている方は是非読んでみてください。

    この記事でわかること
  • webデザイナーの必要なスキル
  • webデザインを独学で学ぶ方法
  • webデザインを独学で学ぶコツ

目次

独学でwebデザイナーになれるのか?

独学でwebデザイナーになることは可能です。
独学でwebデザイナーになれるのか?
そもそも独学でwebデザイナーになることは可能なのか?

上記の疑問を感じている方が多くいるかと思います。

独学を開始して少し時間が経ってくると不安になりますよね。また、これから勉強を始めようと思っている方も不安を感じると思います。

結論から言うと、

独学でwebデザイナーになることは可能です


独学でwebデザイナーになることが出来る理由は2つあります。

webデザイナーは資格を必要としない

1つ目の理由は、webデザイナーになるのに資格を必要としないという点です。

webデザイナーは職業を名乗るのに資格を必要としないため、自分がwebデザイナーと名乗ればwebデザイナーとして働くこと出来ます。

カラーコーディネーターなどの資格はありますが、保有していなくてもwebデザイナーとして働くことができます。

独学でもwebデザインのスキルは十分身につく

2つ目の理由は、webデザインのスキルは独学で十分身につくという点です。

webデザイナーになるためには特別難しい知識やスキルを身につける必要があるわけではありません。

もちろんwebデザインのスクールやデザイン学科などありますが、内容は参考書と大きな違いはありません。

つまり正しい勉強方法さえ知っていれば、独学でwebデザイナーになることができるのです。

webデザイナーの必要なスキル

webデザイナーの必要なスキル
webデザイナーの必要なスキル

webデザイナーの必要なスキルは何かを知ることで、勉強の目標が明確になります。

webデザイナーの必要なスキルは下記となります。

    webデザイナーの必要なスキル
  • デザインスキル(デザインセンス)
  • デザインソフト(Illustrator,Photoshop)
  • コーディング(HTML,CSS,JavaScript,PHP)
  • CMS(WordPress)

それぞれ説明していきます。

デザインスキル

デザインスキルはデザイナーにとって最も大切なスキルと言っても過言ではありません。

デザインスキルとは、情報を与えたい印象に加工するスキルです。

洗礼されて無駄のないスタイリッシュな印象や、柔らかくてポップな印象など、与えたい印象に近づけるためにビジュアルを作成するスキルです。

デザインスキルとデザインソフト・コーディングスキル立ち位置は、下記の通り異なります。

デザインスキル → 頭の中でデザインを創造するスキル
デザインソフト・コーディングスキル → 頭の中にあるデザインをビジュアル化するスキル

まず与えたい印象に近づけるためにはどういうビジュアルが良いかを考える、デザインスキルとは考えるスキルなのです。

デザインソフト

デザインソフトのスキルも必要です。

webデザイナーが使うデザインソフトは、主にIllustratorPhotoshopです

Illustratorはバナー広告やwebサイトのデザインを作成するのに使用します。

Photoshopは写真の加工やサイズ変更に使用します。

昔はPhotoshopでwebデザインを作成しておりましたが、最近ではIllustratorでもwebデザインを作成する事が出来ます。

また、ワイヤーフレームをXDで作成する方もいますが、僕はIllustratorでワイヤーフレームを作成しています。

Illustratorの操作に慣れており、XDより早く作る事が出来るからです。

ワイヤーフレームの作成はどちらのツールを使用しても構いません。自分の使いやすい方を使ってください。

コーディング

webデザイナーは、デザインスキルだけでなくコーディングスキルも身につける必要があります。

コーディングとはプログラミングを用いて実際にwebサイトを構築することです。デザインで作成したwebサイトをコーディングで実際に作ります。

webデザインのコーディングには下記の言語が必要となります。

  • HTML
  • CSS
  • JavaScript
  • PHP

HTMLはwebサイトの文字の作成や画像の貼り付け、リンク設定などを行う言語です。

CSSはHTMLで作成した情報に装飾を加えることの出来る言語です。

JavaScriptはHTMLとCSSで作成したサイトに動きを加えることの出来る言語です。

PHPは問い合わせフォームの入力内容をメールに送る設定を行う言語です。

webデザインのコーディングはこの4つの言語が必要になります。

CMS(WordPress)
CMSとは、プログラミングの知識が無くても簡単にwebサイトを作成することの出来るツールです。

CMSはいくつか種類がありますが、最も有名なのがWordPressというCMSです。

WordPressはCMSの中で最も使用され、web制作の現場でも頻繁に使用します。

CMSを使用するメリットは、サイト運営者(クライアント)がコーディングの知識がなくても情報の更新を行うことができるという点です。

web担当者にコーディングの知識があれば通常のコードで作成しますが、コーディングの知識が無い方が情報更新される場合はCMSを使ってサイトを作成します。

webデザインの独学のコツ

webデザインの独学のコツを紹介!
webデザインの独学のコツ

webデザインを独学で身につけるには、時間の使い方が重要になります。

日中は仕事なので、勉強出来る時間は朝と夜という方がほとんどだと思います。

そのため、朝と夜(日中の隙間時間も)を駆使して勉強する必要があります。

朝の時間

朝の時間は頭が1番冴えている為、アウトプット中心の勉強をすることをオススメします。

デザインソフトやコーディングで実際に形にする活動はこの時間が適しています。

前日にインプットした内容を元に、手を動かしてアウトプットする時間にしましょう。

夜の時間

夜の時間はインプットを中心とした勉強をオススメします。コーディング・デザインソフトの新たな使い方を覚える時間にしましょう。

朝のアウトプットの時間で出来なかったところや、もっと効率良くやりたいという内容について調べましょう。

夜学んだ内容は朝のアウトプット時間で手を動かし、知識を定着させましょう。

日中のスキマ時間

勉強や仕事で差をつけるには、日中のスキマ時間の使い方が大切になってきます。

朝と夜の時間は一定数の人が努力時間として活動しています。

しかし日中のスキマ時間を使っている人はそんなに多くないと思います。(あくまで個人の感想です)

日中には1,2分のスキマ時間が多く存在しています。電車が来るまでの時間、ランチが運ばれるまでの時間、エレベータの待ち時間や乗っている時間です。

こういうスキマ時間は積み重ねると膨大な時間に化けます。つまりこのようなスキマ時間にインプットorアウトプットをすることで他の人と差をつけることができます。

スキマ時間におすすめなのはデザインに関する本を読むことです。Kindleなどを用いてデザインに関する本を読むことで、デザインセンスを向上させることができます。

Kindleアプリは常に開いた状態にして、スキマ時間が来たらすぐに本を読めるようにしましょう。

ちなみに僕はブログ記事をスキマ時間で作成しております。スマホのブラウザを常に開いた状態にしているので、スキマ時間が来たらスマホで記事を書いております。

webデザインの具体的な勉強内容

webデザインの具体的な勉強内容を紹介!
webデザインの具体的な勉強内容

ここからはwebデザインの勉強方法を具体的に紹介します。デザインセンス、デザインソフト、コーディングの3つに分けて説明します。

デザインセンスの独学

デザインセンスの独学には本がおすすめです。

与えたい印象に近づける方法やビジュアルを綺麗に見せる方法など様々なデザイン本が存在しています。

僕が実際に読んで良いと思った本を下記で紹介させていただきます。

ノンデザイナーズ・デザインブック

「ノンデザイナーズ・デザインブック」は、デザインの基本と言われる4原則を覚えることができる本となります。

デザインの4原則とは

  • 整列
    (縦横の位置を揃えて綺麗に見せること)
  • 近接
    (同じ内容の情報を近くに配置すること)
  • 反復
    (同じ装飾を繰り返し統一感を出すこと)
  • 対比
    (情報に強弱を付けて視線を誘導すること)

のことです。

フォントの種類や色彩、形も大切ですが、その前にこの4つの基本を抑える必要があります。

上記の本はこの基本原則をしっかりと教えてくれる本となってます。

デザイナーを目指すならまず手にとってほしい一冊です。

¥2,398 (2022/01/19 15:12時点 | Amazon調べ)
あたらしい、あしらい。

「あたらしい、あしらい。」は、与えたい印象ごとに様々なデザインを見せてくれる本です。

新米デザイナーが作成したデザインをベテランデザイナーが修正してより良くするストーリーとなっており、読みやすくなってます。

多くのあしらいを自分の引き出しに入れることが出来るので、是非読んでみてください。

けっきょく、よはく

「けっきょく、よはく」は、余白を使ってデザインをより良くする方法を紹介しています。

余白の無いデザインは窮屈で良いデザインとは言えません。意図的に余白を作ることでデザインが洗礼されます。

この本ではどのように余白を作ることでデザインが良くなるのかがわかります。

ほんとに、フォント

「ほんとに、フォント」は、フォントの種類を変えることでデザインの印象を変える内容となってます。

フォントには様々な種類があり、同じ文章でもフォントを変えるだけで印象が変わってきます。

デザイン初心者にとって、そもそもどのようなフォントがあるのかわからない方も多いと思います。

この本はフォントの基本から教えてくれるので、初心者にもオススメの本です。

デザインソフトの独学

webデザイナーになるためには下記2つのデザインソフトをマスターすれば大丈夫です。

  • Illustrator
  • Photoshop

特にIllustratorは絶対に使うのでマスターしてください。

と言っても、Illustratorは感覚的に使えるツールなのですぐにマスターできると思います。

Illustratorの勉強方法は実際にデザインを作ってみる事が1番早いと思います。

下記にIllustratorの勉強方法を3ステップでまとめましたので、参考にしてみてください。

STEP
参考書でIllustratorの操作方法を勉強する

一番最初は参考書を用いてIllustratorの使い方を勉強することをおすすめします。

webで調べながら勉強するのもありですが、参考書だとそもそもどういう機能があるのかがわかるので、初心者には参考書で勉強するが良いと思います。

ここで大切なのは、実際にIllustratorを触りながら勉強することです。

参考書を読むだけでなく、参考書を見ながらIllustratorを触ることで理解の定着率が高まります。

Illustrator しっかり入門」という参考書は、Illustratorの基本操作から応用、高度なデザインの作成方法まで1冊に含まれてます。

僕のこの本を購入しました。お勧めです。

STEP
バナー広告を模写する

Illustratorの基本的な操作方法がわかったら、実際にバナー広告を作成していきます。

バナー広告に載せる情報は写真、サービス名、強み、会社名、ロゴくらいなので、短時間で完成します。

webデザインより少ない時間で完成するので、多くのデザインを作成することが出来るのです。

Pinterestに優れたバナー広告があるので、そこから模写するバナー広告を選ぶと良いと思います。

バナー広告の作成ではクリッピングマスクの作成やフォントデータの読み込み、複雑な図形の作成などのスキルが身に付きます。

また、余白の使い方やフォントの種類、色合い、サイズなどデザインセンス部分の知識も身に付きます。

STEP
webサイトの模写

バナー広告の模写をある程度こなしたら、webサイトの模写を行います。

muuuuuLP-ARCHIVEなどに優れたwebサイトがあります。こちらから模写したいwebサイトを選択し、サイトをスクショして模写していきます。

サイトのスクショに関してはFireShotというChromの拡張機能がお勧めです。こちらはページの全体や一部を画像にしてくれる機能です。模写する際に使用してみてください。

webサイトの模写は、バナー広告の模写で身につくスキルの他に、UI・UX視点でのデザインの組み方、申し込みへの誘導方法(LPの場合)なども身につくことができます。

webデザイナーにとってはあった方が良いスキルになりますので、模写を通りてスキルを身につけてみてください。

コーディングの独学

コーディングはドットインストールプロゲートを使うことで無料(一部有料)で勉強することができます。

これらはオンラインで勉強することができるので、パソコンさえあればどこでも可能です。

webデザインのコーディングは、下記4つの言語が使用できるようになれば大丈夫です。

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP

コーディングの勉強は、「静的サイトを作れるようになる」「動的サイトを作れるようになる」「問い合わせフォームからメールを飛ばせるようになる」の3ステップで進めることをお勧めします。

下記それぞれ説明していきます。

STEP
静的サイトの制作

静的サイトとは、サイトに動きの無いものになります。使用する言語はHTMLとCSSの2つのみです。

HTMLで文字や画像の配置を行い、CSSで装飾を行います。

この2つの言語はwebデザインの基本になるので、早いうちにマスターしておいてください。

STEP
動的サイトの制作

静的サイトの制作がでいるようになったら、動的サイトの作成を行います。

動的サイトとは、画像のスライドショーや要素をフワッと表示させるなど、サイト内に動きが加わったサイトのことを指します。

サイトに動きを加えるにはJavaScriptのjQueryというフレームワークを使用することで簡単に実装することができます。

プロゲートではこの辺りから有料になりますが、月額980円なので自己投資と思って課金することをお勧めします。

STEP
問い合わせの設定

問い合わせフォームはwebサイトに必要なページです。必要な言語はPHPです。

問い合わせした方とサイト管理者に問い合わせ内容がメールで送られる設定を作ります。

PHPはビジュアルではなくサーバー側の言語となるため、少し難しいかもしれません。

わからない部分に関しては参考書を購入して勉強してみることをお勧めします。

コーディングの勉強は、エラーを解決することに1番時間がかかると思います。そんな時はQiitaで調べることをお勧めします。

Qiitaはプログラミングの内容に特化したメディアで、登録している様々な方がコーディングに関する内容の記事を投稿しています。

コーディング初心者が陥りそうな内容の解決策もきっと存在していると思います。

ググる時はQiitaを使用してみてください。

CMS(WordPress)の独学

ある程度コーディングの勉強が進んだら、WordPressの使い方の勉強も行います。

WordPressはコーディングの知識が無くてもサイトを作る事が出来るツールなので、コードで作成するより簡単にサイトを作る事が出来ます。

クライアント企業のweb担当者が、コーデイングの知識は無いけど自分でサイトを更新したい場合にCMSを用いられます。

WordPressの勉強内容は、プラグインやサイトのカスタマイズ方法です。

プラグインとは

プラグインとはWordPressに様々な機能を追加する、拡張機能のことを指します

プラグインには様々なものがあり、サイト内の画像サイズを圧縮してくれるものや、セキュリティーを向上してくれるもの、簡易的に問い合わせフォームを作ってくれるものなどあります。

プラグインを使用することでコーディングをすることなく機能や装飾を追加することができます。

ただしプラグインを多くインストールしてしまうと、サイトが重くなり読み込み速度が遅くなってしまうので、必要最低限のプラグインだけインストールするようにしましょう。

また、WordPressのソースコードを編集することでカスタマイズ出来ます。

WordPressでwebサイトを作成する場合は、ソースコードを編集する必要があるので、ソースコードの編集方法も勉強しておいてください。

ポートフォリオの作成

ポートフォリオを作成しよう!
ポートフォリオの作成

ある程度webデザインのスキルを身につけたらポートフォリオを作成しましょう。

ポートフォリオとは

ポートフォリオとは自分の作品集のことです

デザイナーとして転職する場合や仕事を獲得する場合は、ポートフォリオの提出を求められます。相手はポートフォリオを見て採用や仕事の発注を判断しますので、ポートフォリオの作成は必須です。

ポートフォリオを作る際に注意があります。それはポートフォリオには架空のデザインを載せないようにする事です。

架空サイトやオリジナルのデザインをポートフォリオに載せる方がたまにいますが、ポートフォリオに載せて良いのは実際に作成したサイトのみです。

そのため最初は友達や知り合いにサイトを作らせてもらいましょう。無料でサイトを作ると言えば断られることは無いと思います。

いくつかwebサイトを作成したら、ポートフォリオを作成してみてください。

もし独学が難しいならスクールに通おう

もし独学が難しいならスクールに通おう!
もし独学が難しいならスクールに通おう

もし独学が難しいと感じるのであれば、スクールに通ってみるのも手段の1つです。

スクールはお金がかかりますが、教えてくれる人がいるので勉強のスピードが格段に早まります。

今はどのプログラミングスクールもオンラインで勉強出来るので、場所や時間を問わずに学ぶことが出来ます。

始めは独学で勉強して、難しいと感じたらプログラミングスクールに通うことを検討してください。

最後に

webデザインの独学についてまとめてみました。

webデザインのスキルを独学で身につけることは可能です。

社会人で忙しいという方も、時間の使い方を意識すれば早い期間でスキルを身につける事が出来ます。


webデザイナーになると時間や場所にとらわれず働くことができます。その代わり自分をコントロールする必要があります。

自分のコントロールが出来ない方だと、自由の中で成果を出す事は難しいかも知れません。

独学は自分をコントロールするスキルも身につくため、時間の使い方を意識して勉強してみてください。

勉強が辛くなったら、またこのブログに来てくださいね!

よかったらシェアしてね!
目次
閉じる