Webデザイナーを目指すには？独学でできる勉強法5選

こんにちは、あまさすです。

Webデザインを始めたい方は、こんな感じで悩んでいるのではないでしょうか？

そこで未経験・独学でWebデザイナーになった私が、これまでに勉強してきた5つのことについてご紹介します。

Webデザインの勉強をしたいけど迷っている方、どうやって勉強していけばいいか分からない方に向けて解説しています。

まずは動き出すことが大切だと思っています。この記事が少しでも、一歩踏み出すきっかけになれば嬉しいです。

私の経歴

まずは私のことについて少しだけ紹介させてください。

現在、会社員（総務・人事）。
副業で、Webデザイン（3年目）とブログ執筆をしています。

高校は、商業高校で主にExcelやWordの勉強をして、大学では経営学を学んでいました。

完全に文系の人間です。

「プログラミングは理系の方がいいんじゃないの？」と思われる方もいるかもしれません。

Webデザインは、プログラミングもやりますが、プログラミングだけではありません。

そもそもWebデザインとは？

Webサイトの見た目や機能を使いやすいようにレイアウトすることです。
Webデザイナーの人たちが使うプログラミング言語には、次のようなものがあります。

HTML/CSSとは？

Webページを作る上では、欠かせない言語です。

・HTML：マークアップ言語（Web上に文字を表示すること）
・CSS：装飾言語（Web上の文字に飾り付け（色や大きさなど）をすること）

プログラミング言語はPCに命令文を出してPCを動かすことなので、
HTML/CSSは、厳密にはプログラミング言語ではありません。

JavaScriptとは？

Web上のものを動かすためのプログラミング言語です。
画像が切り替わったり、ポップアップ画面が出てきたりするのはJavaScriptで制御しています。

Webデザイナーに必要なスキル

Webデザイナーには、次のようなスキルも求められます。

なのでプログラミングに苦手意識があっても、向いていないと判断するのは早いかもしれません。

Webデザイナーの求められること

働き方によって求められることも変わってきます。働き方は、大きく分けて2つあります。

1. 企業のWebデザイナー
2. フリーランス

①企業のWebデザイナー

企業の場合は、幅広い知識が必要になってきます。一通り、難なくこなすスキルレベルを持っていれば就職もできるでしょう。

就職してからも周りには、WebデザインやWeb制作に精通している人が多いので、スキルアップするには最適の環境です。

②フリーランス

フリーランスで働くメリットは、今まで学んできたスキルを生かして自由に仕事ができること。

たとえばプログラミングができなくても、できないことは外注（できる方に依頼）してしまえば解決できます。

私もイラスト系は苦手なため、このブログでも使っているアイコンはイラストレーターさんにお願いしています。

企業ではできないことを放り出すことは難しいかもしれませんが、フリーランスでは融通が効くのがメリットです。

このように、将来自分がどうなりたいかでも勉強の方法は変わってきます。
まずは勉強の前に、将来像をしっかりと考えてみるといいと思います。

Webデザイナーの詳しい仕事内容についてはこちらの記事で解説しています。

Webデザイナーになるために勉強してきた5つのこと

それでは、文系の私がどんな流れで勉強してきたのかを解説していきます。

もう少し詳しくお話していきます。

ステップ1：CodeCamp受講

2020年10月から2021年2月までの約4ヶ月間、CodeCampにて学びました。

いきなり未経験の状態から始めたので正直不安はあったのですが、未経験者だからこそスクールはメリットを感じられると思います。

オンラインプログラミングスクールは、数多くのサービスがあります。

CodeCampを選んだ理由や他サービスとの違いはこちらの記事で解説しています。

ステップ2：動画＆書籍での学習

私はCodeCampを修了してから、何をすればいいのか迷い、一人でWebサイトを制作できるかも不安な状態でした。
不安を埋めるためにさらに学習が必要だと思い、動画や書籍で勉強をしました。

今思ば、

こんなに学習期間は必要なかったなと感じています。

だからといって学習期間が無駄だったとは思っていません。

動画や書籍で学んで知識の幅が広がったと感じています。
価格も安価なので、気軽に始められるのではないでしょうか。

動画や書籍での勉強がおすすめな方は、

おすすめ動画サービス：Udemy

Udemy（ユーデミー）とは、IT技術からビジネススキル、ヘルス＆フィットネスといった趣味などの幅広いテーマの講座（動画）があり、自分の学びたいものを学べるオンライン学習プラットフォームです。

現在（2022年7月時点）では、185,000以上もの講座があり、ますます注目度が高まっています。

Udemy動画の購入

定価は2万円近くと高額ですが、定期的にセールを行なっています。
セール時は、1,500円前後で購入可能なため、セール時を狙って購入しましょう。

セール情報は、アカウント登録しておくとメールでお知らせが届きます。
こちらの公式サイトより、登録してみてください。

Udemy

オンラインコース - いろんなことを、あなたのペースで | Udemy Udemyは、学びたい人、教えたい人のためのオンラインのマーケットプレイスです。プログラミング、マーケティング、データサイエンスなど、213000以上のコースを6,200万人の...

おすすめ書籍

次に書籍のおすすめをご紹介します。

おすすめ書籍：HTML/CSS

Webクリエイターボックスで有名なManaさんの書籍です。
HTML/CSSを理解するならこの1冊で充分な内容です。

おすすめ書籍：JavaScript

JavaScriptのおすすめは2冊あります。
どちらも演習があるので身に付きやすいのが特徴です。

おすすめ書籍：Bootstrap

Bootstrapとは、Twitterの会社が開発した、Webフレームワークです。
ワークフレームとは、すでに出来上がっている雛形です。

Bootstrapを使用することにより、より早くWebデザインを行うことができます。

おすすめ書籍：WordPress

WordPressとは、CMS（コンテンツマネジメントシステム）の一種で、直感的にWebサイトやブログを作成することができます。

ステップ3：オンライン学習サービス

動画＆書籍と同時進行で、オンライン学習サービスである「Progate（プロゲート）」を使って学習していました。

動画や書籍と違って、オンライン上のスライドで学習→演習といった流れになっています。
演習では実際にHTMLやCSSなどのコードを記述できます。

プログラミンを始めるならProgateといわれるくらい有名なサービスです。

無料体験もできますので、Webデザインってどんなことをやるのか気になっている方にはおすすめです。

ステップ4：Webページ制作

CodeCamp、動画・書籍、Progateで学習したものを、ようやく形にしようと思い、まずは自分のWebページを作ろうと思い始めました。
もちろん最初は分からないことだらけで、調べながら真似しながらの作業でした。

実際にWebページを作ってみた感想としては、

もっと早くにやっておけばよかった

今勉強中の方、もしくはこれから始める方は、少しでも知識をつけたらまずは実践してみることをおすすめします。

なぜ実践が大事なのか

実践（アウトプット）することにより、学習（インプット）がより生かされるから。

実際には、学習していた内容と実践では全然違うということもあります。
自転車の乗り方をいくら勉強したところで、上手く乗れるようになるとは限らないですよね？

Webデザインでも同じことがいえますので、基礎知識がついたらまずは実践してみましょう。

実践で使える情報はこちらの記事で解説しています。

ステップ5：ブログ開始

ブログをはじめようと思ったのは、先ほど述べたアウトプットを意識してです。
それと私が始めたばかりの頃に、分からないことだらけだったので少しでも役に立つ記事を書きたいなと思ったからでした。

ブログを書くことによって、次のようなスキルが身に付きます。

メリットばかりです。

ブログでもWebデザインのスキルを生かすことができます。
見た目が整っていないページは、読まれもせずに離脱されてしまうこともあります。

まとめ

ここまで私が勉強してきたことを解説してきました。
もう一度お伝えしますが、早めに実践をこなすようにしておけばよかったと後悔しています。

これから勉強を始める方には失敗をせずに、より効率のいい勉強をしてWebデザインの楽しさを分かってもらえたら嬉しいです。

勉強方法は、自分に合う合わないもありますので、いろいろと試してみて自分がやりやすい方法で勉強するのがいいと思います。

実践をこなす以外にいえるとしたら、楽しんでやること。これに尽きると思います。

それではここで終わりにします。
ここまで読んでいただきありがとうございました。