Webデザインって独学でマスターできるの？
未経験でもデザイナー転職できるの？
今回はそんな疑問を持っている方に向けて独学でWebデザインを学習する方法をお伝えしていきます。
この記事ではWebデザインの知識が全くない人、独学でWebデザインを学びたい人に学習方法をお伝えします。
難しい単語や技術的なノウハウはなるべく省いています。
一通り学んだ方、すでにWebデザインの仕事をしていてさらに高みを目指したい方には物足りなく感じるかもしれません。
逆に初心者の方はこの記事の内容をぜひ参考にしてくださいね。
目次
Webデザインを独学するための必須ツール
IT・Web関係の勉強をするためには環境とツールが必要です。ここではWebデザインを勉強するための必須ツールを紹介します。
- パソコン
- Illustrator / PhotoShop
- テキストエディタ
- 本・学習サイト
上記はWebデザイン必須の4点セットです。Photoshopなどは他に似たような加工ソフトウェアがあります。ただ、転職やフリーランスでWebデザイナーを目指すのであればPhotoshopが必須でしょう。
パソコンはMacでもWindowsでもOKです。
Illustrator / PhotoShopは買い切り型のソフトウェアで販売されていました。現在はクラウドからダウンロードして利用するサービスタイプのソフトウェア「Adobe CreativeCloud」として販売しています。
月額6,248 円でIllustrator、Photoshop、DreamWeaverなど全てのAdobe製品が利用できます。クラウドから常に最新版がダウンロードできるのが大きな特徴の1つです。
ただ、月額6000円はちょっと高いなあ。。と思う方は月額1,078円でPhotoShopが使えるフォトプランをおすすめします。Illustratorが入っていませんが画像加工だけであればPhotoShopだけでいけます。
まずは学んでみるという意味ではおすすめなプランです。
Creative Cloudの価格とメンバーシッププラン | Adobe
テキストエディタはWebデザイナーやフロントエンジニアがよく利用しているSublime Textがおすすめです。このテキストエディタは無料なのに高機能なのでめちゃくちゃ便利です。
使い出したら他のエディタに戻れないくらいですね。
逆に最初はシンプルなエディタがいいなと思った方はサクラエディタというエディタをおすすめします。こちらも機能豊富なエディタで世間的に認知度が高いエディタです。
セキュリティに厳しい大企業でもインストールが許可されているエディタですね。ただ、Mac版がありません。Macを利用している方はSublime Textを利用しましょう。
学習するための本やWebサイトは後ほど紹介しますね。
Webデザインをマスターする期間は？
世間的にはプログラミングは500時間、英語は800時間、その道のプロになるには10,000時間が必要と言われていますよね。
Webデザインの場合はどれくらいの時間が必要なのでしょうか？
おおよその目安ですが160時間あれば一通りの学習とオリジナルサイトを作ることができます。
他のスキルと比べるとコスパが良いですね。
ちなみにプログラミングスクールのTECH CAMPでは60時間、CodeCampでは160時間〜200時間となっています。
スクールによってカリキュラムが違うので当然ですが、みっちりやる場合はやはり160時間という期間が1つの目安になりそうですね。
160時間であれば仕事や学校がなく集中して学べる方は約1ヶ月間で完了できます。
1日2時間ずつ勉強しても約3ヶ月で完了できる時間ですね。短期間で覚えられるので完走率がよいのも魅力の1つです。
Webデザイン独学【基礎勉強編】
Webデザインで必須のスキルは？
- デザインの基礎・基本
- HTML / CSS
- Illustrator / PhotoShop
- JavaScript
- Bootstrap
以上の5点のスキルが必要です。先ほど書いたようにIllustratorは無くてもまあ何とかなります（月額6,248 円は高いですからね。。）
逆にBootstrapは覚えておいた方がよいのでこの必須スキルの中に入れました。スマホ登場以降に開発された技術で、スマホ対応サイトなどが簡単に作れるテンプレートのような技術です。
覚えておいてまず損はないでしょう。
スキルの優先順位は上で書いた通りの順番だと思ってください。
最初に書いたデザインの基礎・基本はとても大事です。その下にいるHTMLやPhotoShopは描いたデザインを具現化するためのツールに過ぎません。
なんでそのデザインなのか？
そのデザインだと見た人がどういう印象を受けるのか？
そんなことを考えながら全体を構想できるスキルの方が実は大事なんですね。
それでは、独学のための勉強方法を見ていきましょう！
デザインの基礎・基本
Webデザインは最初にデザイン全般の基礎・基本を学んだ方が効果的です。遠回りしているように思えますが構成、色、フォントの使い方を学んでからWebデザインに入った方が効率的なんですね。
ここではデザインの本の紹介や学習方法を紹介したいと思います。
デザインの基礎理解
基礎を理解するための本の紹介です。デザインの原則を学ぶと学習スピードがグンとアップします。
20年売れ続けているベストセラー本です。時代が変わっても廃れないデザインの本質が学べる書籍です。絵や画像をふんだんに取り入れ、デザイン初心者のために分かりやすく解説しています。
初心者でも明日から使える内容満載の書籍です。
デザインを真似る
これくらい簡単なデザインなら自分でも書けるかな。と思ったポスターやチラシがあったらスケッチブックか何かに実際に描いてみると効果的です。
前述で紹介した本を読んだ後であれば「あ、なるほど、だからこうなってるんだな」と肌感覚で学ぶことができます。
「まなぶ（学ぶ）」は「まねぶ（真似ぶ）」と同じ語源とも言われている通り、とにかく真似て描いて考えてみるというのは結構効果的です。
Webデザインのワイヤーフレームを勉強する
ワイヤーフレームはWebサイトの設計図ですね。
どのページにどの機能がどの配置で必要なのかを定義します。グラフィックデザインにはないWebデザイン特有の工程です。
ワイヤーフレームはクライアントを含めた制作メンバー全体がページ設計の確認・共通認識を取るためのツールとして利用します。そのためワイヤーフレームにデザイン性は必要ないんですね（デザイン性があると打ち合わせの時に議題が発散します）。
ワイヤーフレームだけの学習教材というものがなく、前述の通りデザイン性もあまり必要ありません。なのでWeb制作全体の中でどんな役割なのかを学んだ方がよいかと思います。
ワイヤーフレームについては学習WebサービスのSchooでピンポイントな授業があります。月額1,500円です。1ヶ月だけ会員登録してみてはいかがでしょうか。
HTML / CSS
Webサイトを作るための必須のスキルですね。動きのないホームページであればこの2つのスキルがあれば作成できてしまいます。
デザインと並行してHTML・CSSの学習もしておきましょう。
「デザインだけやりたい！」と思う方もいるかもしれませんが、IllustratorやPhotoShopでデザインだけをする人は完全に分業された一部の大手企業の人だけです。
中堅・中小企業のWeb制作会社ではHTML・CSSのコーディングまで1人の担当者が行います。なので「IllustratorやPhotoShopでデザインができるだけ」では就職・転職は難しいですね。
Webデザイナーとして働きたい場合はHTML・CSSは必須のスキルです。
そんなHTMLとCSSを独学で学べる本とサイトをこれから紹介します。
HTML / CSSが学べる本
Webデザイナーのブログなどを読んで学ぶのもよいですが、初心者の場合は本や後述するWebサービスなどの体系化された教材で学んだ方が効率的です。
細かい技術などはブログでもよいと思います。ただ最初に全体像を掴んでおかないと自分が何をやっているか分からなくなるんですね。
良書で全体像を掴んで、そのあと細かい技術を学ぶ、といった方法がおすすめです。
適度なボリュームで内容もわかりやすい、初学者にピッタリの1冊です。たった1日で・・とありますが実際に手を動かしながらやると3日〜5日かかると思います。
最初からガッツリとボリュームのある書籍だと途中でだいたい学習をやめてしまいます。最初に手をつける書籍はボリューム感とポイントを押さえた内容が大事です。
そんなポイントを押さえた1冊ですね。
こちらも初心者向けの書籍。5年前の改訂版です。
Webデザインは技術の進歩、流行り廃りのサイクルが早い業界なので書籍を選ぶときはなるべく新しいもの（できれば2年以内に発行された書籍）がおすすめです。
こちらの書籍は2018年に発行された書籍です。
HTML / CSSが学べるWebサイト（Webサービス）
現在は「これ無料でいいの？」と思えるようなクオリティの高い無料学習サービスがたくさんあります。もちろん、有料サービスならさらに良いサービスが受けられます。
ここでは、そんなHTML/CSSを学ぶための学習サイトの紹介をします。
ドットインストール
無料の動画学習サービス「ドットインストール」。1コマ3分の講義になっているため、途中で飽きることなく学習が進められるのが特徴ですね。
HTML/CSSは下記のリンク先で学習することができます。
1コマ3分で無料。飽きっぽい方、1人だと集中が続かない方でも無理なく続けることができます。
Progate（プロゲート）
人気のプログラミング学習サービス「Progate」。大手メディアも取り上げるほど人気が出てきているサービスです。
スライドによる解説と実習を繰り返しながら進めていきます。
無料版と有料版があり、無料版だと学習できるカリキュラムに制限があります。有料版だと全てのカリキュラムが受講できます。驚くのはその料金。
なんと月額1,628円で全コースを受講することができるんです。
HTML&CSS | プログラミングの入門なら基礎から学べるProgate
Tech Academy（テックアカデミー）の無料体験
「いやあ、最初は誰かに教えてもらいたいなあ」
「自分だけだとなかなか手がつかなくて」
という方はテックアカデミーの無料体験をおすすめします。
テックアカデミーの無料体験はHTML、CSS、JavaScriptの基礎が無料で学べるんですね。体験中であっても入会者と同じサポートが受けられます。
「体験は1日で終わり」というオンラインサービスが多い中、テックアカデミーは7日もの体験期間があります。
- ビデオチャットでのメンタリング
- チャットサポート
- 課題レビュー
現役のプロから質疑応答が受けられます。本やWebサイトで勉強する前にこちらでサラっと学習しておくと本での学習も効率的になるでしょう。
>> TechAcademy無料体験の詳細を見る | 公式サイトへ
- 主催： キラメックス株式会社
- 期間： 4週間〜
- 料金： 129,000円〜
- 主な言語・技術： PHP、Ruby、Python、Java
Illustrator / PhotoShop
IllustratorとPhotShopはデザインを具体化するためのツールですね。一通り使い方を学習したらあとは実際に作ってみるのが一番効果的です。
あれ？ここを徐々にぼかしたいときはどうするんだっけ？など実現方法がわからないときはGoogleで検索するのが一般的です。
「調べる」→「やってみる」を繰り返しながら知識とセンスを磨いていきます。
Illustrator / Photoshopが学べる本
作りながら学べるIllustratorの入門書です。機能説明的な書籍、逆引き辞典的な書籍が多い中、初心者向きで作りながら覚えられる数少ない書籍です。
売上No1のPhotoshopの入門書。基本的な使い方から実務レベルの内容まで網羅されています。使い方がそこまで変わるわけではないですが、Adobe製品は年々バージョンアップを行なっています。
なるべく新しい書籍を購入することをおすすめします。
Photoshopが学べるWebサイト
サルワカ
月間150万PVのWebメディアの「サルワカ」。”サルでもわかる図解Webマガジン”がキャッチコピーの通り、初心者向けでわかりやすい内容になっています。
PhotoshopのほかにHTMLやCSSなどの情報も充実。これからデザインやWeb制作したい人なら必読のWebサイトです。
JavaScript
Webサイトに動きを付けるためのプログラミング言語です。
ブラウザ上で動作するためサーバーを借りたりする必要なく学習ができます。プログラミングになるのでHTML・CSSの学習に比べるとちょっとハードルがあがりますね。
Webデザイナーを目指している人はJavaScriptも覚えておいた方がよいでしょう。
JavaScriptが学べる本
いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門
いちばんやさしい〇〇シリーズのJavaScript編です。
ボリューム感、中身の濃さともに初心者向けな内容になっています。JavaScriptの全体像を掴むにはピッタリな書籍です。
ボリュームがあり過ぎたり中身が若干難しいと途中でやめてしまいますよね。もしくは進捗が悪くてイライラしたり。最初に購入する書籍はヘタに難しいものを買うより「ちょっと頑張れば読了できる」ものが良いです。
JavaScriptが学べるWebサービス
Webサービスで学ぶ場合は先ほども紹介したProgateをおすすめします。
JavaScriptコースは無料版だと途中まで学習することができます。コースの全てを学習するには有料版への登録が必要です。ただ、有料プランの料金は月額1,628円。技術書籍の2分の1の値段ですのでかなりリーズナブルです。
さらにHTMLや他の技術も学べますので書籍よりお得かもしれませんね。
サーバー・ドメインの知識
「とりあえずレンタルサーバーを借りてネットで調べながらやってみる」という方法もよいですが、サーバー・ドメインの概要は知っておきたいですよね。
ただ、サーバーやネットワークエンジニア を目指しているわけではないと思います。本を買ってまで覚えるレベルの知識は必要ないかと思います。
先ほども紹介したサルワカさんのページで概要をつかみましょう。
URLについては以下を参照ください。
ドメインにwwwは必要？2021年版、最新のWebサイトURLの決め方講座
実践的勉強方法
基本的なスキルが身についたらあとは実践してみるのが一番です。ここで言う実践とは世の中に自分の作品を出して見ること。ひと昔に比べて今は実践できる環境が整っています。
自分なんかでも出来るかな？
と思うかもしれませんが、心配する必要はありません。
時間をかければ必ずできます。
それでは実践的勉強方法を見ていきましょう。
とにもかくにもサーバーを借りる
これからWebデザインを独学するならレンタルサーバーは1つ借りておきましょう。
見え方をちょっと確認してみたり、動作チェックしてみたり色んな用途で利用できます。自分のブログも運営できるのでホントに用途多彩ですね。
気になる料金ですが現在のレンタルサーバーは激安で、月額1000円支払えれば高性能なサーバーを使うことができます。
有名なさくらインターネットだと月額524円。最も評判のよいレンタルサーバー1つであるエックスサーバーは月額1100円です。
どちらにしても安いですね。
値段の割に得られるメリットがとても大きいので借りておきましょう。
人気のエックスサーバー が気になる方はエックスサーバー 公式サイトで詳細を確認してみてください。
>> Xserver（エックスサーバー）の詳細を見る | 公式サイトへ
自分のブログを作る
上述の内容に連動しますが、レンタルサーバーに自分のブログサイトを作って運営するとWebデザインのスキルがアップします。
一人で完結できる、納期や納品などのクライアントワークも無いため最もやりやすい実践的勉強方法の1つです。
レンタルサーバーを借りてブログサイトを作るならWordPressがよいでしょう。よいというかWordPress1拓ですね。
構築しやすい、運営しやすい、汎用性の高いスキルが身につくなど良いこと尽くめです。
Webデザインを仕事として請け負う
仕事としてやってみるという方法ですね。最初は時間もかかってキツイですが最も力が付く勉強方法です。
おすすめは友人・知人でホームページを作りたい人から受注すること。友人・知人であればコミュニケーションが取りやすい、進行しやすいなどのメリットがあります。
それでも「出来るかなあ。。不安だなあ。。」
と思うかもしれませんが基礎学習を終えてWebデザインとWebサイトが作れるなら問題ないです。
最初は時間がかかるかもしれませんが、依頼者とやりとりをして修正を重ねていけば納得されるWebサイトが納品できますよ。
クラウドソーシング
こちらも仕事として請け負ってみる部類の勉強方法ですね。
クラウドワークスやランサーズに代表されるようなWebサービスを使って仕事を受注します。
クラウドソーシングでの実績が無い状態だと受注することすら難しいです。なので、自分はこれだけのWebデザインができます！というポートフォリオを掲載する方法がおすすめです。
実績がなくても「あ、この人はこれくらいのことが出来るんだな」と発注者に理解してもらえます。
こちらも受注したらあとは時間を使って発注者が納得のいくものを仕上げるのみといった感じです。対面での打ち合わせは基本的にありません。
チャットやメールでのコミュニケーションでどこまで相手の要件を聞き出せるかがポイントです。
実践でよく使うツール
ここからはWebデザインでよく利用するツールを紹介します。デザインやWebサイト制作の手助けをしてくれる便利ツールです。基礎勉強のときから是非利用してみてください。
Google Chrome デベロッパーツール
Google Chromeの開発者用ツールです。
Webサイト制作時に一番よく利用する機能はElementタブの機能。表示しているページのHTMLとCSSが全て確認できます。
さらに、デベロッパーツール上でHTMLまたはCSSを書き込むことで擬似的にデザインを変更することができます。この機能を利用すると画面で見栄えを確認しながらCSSのコーディングなどができます。
重宝する無料ツールの1つです。
Adobe Color CC
https://color.adobe.com/ja/create/color-wheel/
色の組み合わせに困ったとき、アイディアが沸かないときに利用できるサイトです。
ドラッグ&ドロップで1つのカラーホイールを移動させると残りのカラーホイールも自動で変わります。
配色に困ったときに重宝するサイトです。
Sublime Text
「Webデザインを独学するための必須ツール」でも紹介したSublime Text。
Macユーザーだったらこれ一択でいいんじゃないかと思えるくらい高機能なエディターです。ショートカット機能が使いやすく、作業効率を高めてくれます。
ダウンロード先： Sublime Text
サクラエディタ
こちらも上で紹介したエディターです。Windowsユーザー限定になります。
Sublime Textほど高機能ではないですがこちらも使いやすいエディターです。
ダウンロード先： サクラエディタ
FileZilla
自分のパソコンでHTMLファイルを追加したり編集したあとはサーバーにファイルをアップロードする必要があります。
そんなときに利用するのがファイル転送ソフトです。こちらのFileZillaは画面構成が分かりやすく、初心者でも利用しやすいファイル転送ソフトなんですね。
Mac、Windowsの両方に対応しています。
Mac: https://filezilla.jp.uptodown.com/mac
Windows: https://ja.osdn.net/projects/filezilla/
Webデザイン以外のスキルは習得した方がよい？
Webデザインを学ぶにあたって、「ホントWebデザインだけでいいの？」「Web業界に転職したいけど他に必要なスキルはないかな？」こんな風に疑問に思っている方もいますよね。
ここからはWebデザインに関連性のあるスキル習得について解説していきたいと思います。
プログラミングはできたい方がいい？
Webデザインの基本であるHTMLやCSSはデザインを形にするための言語です。なので厳密にはプログラミング言語に分類されないんですね。
JavaScriptはプログラミング言語に分類されます。
ここで言うプログラミングとはPHPやRubyなどのサーバー側で処理実行するプログラミング言語です。データベースと通信したりするのでより高度なスキルが求められるんですね。
サーバー側で処理実行するタイプのプログラミングはいったん後回しで構わないと思います。
というのもデザインとHTML・CSSでサイト構築ができるなら立派なWebデザイナーです。確立された職業なので転職もできますよ。
プログラミングはその後でも大丈夫です。
WordPressはできた方がいい？
ブログやWebメディア制作で有名なソフトウェアのWordPress。Webデザインを勉強しようとしている方ならどこかで聞いたことがある名前ではないでしょうか。
WordPressはブログ以外にホームページも作れてしまうソフトウェアなんですね。現在は大企業のホームページもWordPressで作られているケースが増えてきています。
WordPress自体はHTMLやCSSといったコーディングスキルは不要です。ソフトウェアの使い方を覚える感じですね。
需要も高く利用されている企業も多いため、こちらはWebデザインとセットで覚えておいた方がよいでしょう。
SEO対策はできた方がいい？
SEO（Search Engine Optimization）の略で日本語に訳すと「検索エンジン最適化」という意味です。
噛み砕いて言うと「Google検索で上位表示させるための施策」になります。デザインのように何かを作るためのスキルというよりマーケティングスキルの要素が強いです。
Web業界にいると自ずと身に付いたりしますので、デザインを学ぶ段階では勉強しなくて大丈夫です。
もし勉強したい場合は自分のブログを持って収益化を目標にすることをおすすめします。SEOはトライアンドエラーを繰り返していくことで上達しますよ。
おすすめの独学方法
仕事として受けてしまうのが上達・スキルアップの一番の近道です。友人、知人、知り合いの経営者でホームページを作りたい人がいたら率先して受けてみましょう。
要件を聞いてデザインに落とし込むスキル、制作の進め方やコミュニケーションの取り方などWebデザイン以外のスキルが身につきますよ。
楽して覚えたい方へ
ここまで読んで、「独学は大変だ」「自分だけだとモチベーションが続かないな」と思った方はWebデザインをプログラミングスクールで学ぶことも検討してみましょう。
分からないところがあったらすぐに質問ができます。学習方法も体系化されているので順序よく効率よく学ぶことができるのがスクールのメリットです。
現在はオンライン技術が発達してオンラインスクールのサービスが充実しています。オンラインであれば時間と場所を気にせず受講できるのもメリットです。
「やってみようかな」と思った人は、無料期間が最長のテックアカデミーの体験サービスを受けてみることをおすすめします。
>> TechAcademyの無料体験に申し込む | 公式サイトへ
まとめ
Webデザインを独学で勉強する方法を紹介しました。
現在はHTMLやCSSを学ぶための学習サイトやWebデザインスクールなどの学習環境が充実しています。学習のための環境構築で挫折することがないので、あとは行動あるのみといった感じですね。
デザイン自体の基礎・基本を学習する場合はまずは書籍で学ぶのがおすすめです。もっと上手くなりたい！職業にしたい！と思ったらWebデザインのスクールに通えばいいと思います。
まずは独学をしてみて、自分の興味関心を発見しましょう。
