未経験からWebデザインを独学で習得するための効果的な勉強手順とは

未経験からWebデザインを独学で勉強するのは可能？

結論から言うと未経験からWebデザインを独学で勉強するのは「可能」です。パソコンさえあれば、ある程度のWebサイトを作成することは可能です。ただし独学の場合、詳細は後述しますが、少し苦労する部分も出てくるのも事実です。

Webデザインの仕事と言っても、見た目部分を考える「デザイン」的な側面とWebサイトを正しく動かせる「プログラミング」的な側面があるため、Webサイト作成が未経験でも、学生時代などにそのどちらかの経験があれば大きなアドバンテージとなります。

もちろんデザイン、プログラミングの経験が無いという人でもWebデザイナーの道が閉ざされていると言う訳ではありません。正しく、効率的な学習を心がけることでWebデザイナーへの道は開かれるでしょう。

スクールと独学のメリット・デメリット

Webデザインの勉強方法としては大きく2つあり「専門のスクールに通う」「本自分1人で勉強する」という方法です。それぞれにメリット・デメリットがあるので解説していきます。

スクールのメリット・デメリット

まずはスクールに通うという学習方法ですが、スクールに通う一番のメリットは「学習効率」です。スクールでは経験豊富な講師と充実したカリキュラムでサポートしてくれるので、分からないところ聞いたり、自分の得意分野を伸ばしたりということが比較的簡単に行えます。

特にWebデザインはコンピュータのことなので、分からない部分も数多く出てくるため、そんな時にすぐに聞ける人がいるというのは独学よりも有利な点と言えるでしょう。

デメリットとしては「コストが高い」と「移動時間」でしょうか。やはり費用面ではどうしても独学には勝てませんが、その分効率的に学習できると考えれば、「時は金なり」早く就職したい人には良いかもしれません。移動に関してもCodeCampなどのオンラインスクールなら自宅からパソコンのビデオ通話で、プロ講師のレッスンが受けられます。

独学のメリット・デメリット

独学のメリットは「コストが低い」と「自由な時間」ではないでしょうか。パソコンやデザインについてある程度の知識のある方や、自分のペースで学習したい方は独学の方が向いているかもしれません。プログラミングと言ってもWebデザインではそこまで難しい処理はしないので初心者でもどうにかなりますし、良いデザインのHPを研究すればデザインの勉強にもなります。

デメリットとしては「全て自分でする」ということにつきます。勉強でつまづいても自分で解決するしかありませんし、PhotoshopやIllustratorなどのグラフィックソフトも必要であれば購入から学習まで1人で行う必要があります。学習本も自分に合ったものをうまく見つけなければ学習をスムーズに進められなくなります。

また、自宅で学習するというのは自由に学習できるというメリットともありますが、自宅はスマホなどが自由に使えてしまうため、様々な誘惑があり勉強に集中できない場合もあります。

独学の効率的な勉強手順

独学の場合、どう勉強していいか分からなかったり、どういう教材が良いのか分からない場合があると思います。最近は、基本操作を覚えるだけなら十分に学習できる動画教材がたくさんあります。

基礎学習は動画教材でおこない、書籍のインデックスから足りない知識を補っていく使い方がおすすめです。

ステップ1.html,css,Bootstrap,JQueryを学ぶ

動画で基礎知識を習得する

ドットインストール

ドットインストールは3分動画でマスターできるプログラミング学習サービスです。1つ1つの講義が短いためスキマ時間を上手に使うことができるのが最大の特徴です。ビデオ講義なので気になったところは繰り返し見ることができます。

講義も、HTML、CSSなどの講義が豊富にそろっているので長い講義だと集中力が保てない方などにもオススメです。講義数もある程度あり、初級から中級くらいまでのレベルの講義がありますので、少しずつステップアップしていけます。

有料プレミアム会員になれば全ての動画講義、文字起こしの閲覧、講師エンジニアへの質問などが行えますが、登録しなくても無料の講義などもありますので気になった方はとりあえず無料会員で講義の雰囲気を確かめてみるのもいいかもしれません。

スキマ時間を使って実践的な学習をしてみる

progate

イラスト中心のスライドで学習したあとに、指示書を見て実際にコードに打ち込みながら作品を作り上げていく実践形式の学習教材です。学習を進めるうえで初心者でも迷うことのないようなデザインになっています。

セクションが完了するたびにキャラクターが応援してくれるので、ゲーム感覚で楽しく学習できますよ。スマートフォンアプリもあるので、電車に乗っている時間などを使ってコツコツ進めていきましょう。

参考書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

この本はWeb関連の情報やデザインについて学べるブログ『Webクリエイターボックス』のManaさんがHTML、CSSなどのWebサイト構築の方法を分かりやすく教えてくれるという内容になっています。

内容はブラウザーやテキストエディタの種類といった一般的なIT知識から丁寧に解説されています。もちろん、Webサイト制作の基本からスマーフォン対応などのWebサイト作成のための技術を実際のWebサイトの画面などを織り交ぜながら解説してくれます。

ただし、JQueryやJavascriptなどは解説されていないため、他の書籍で学習する必要があります。とりあえず、難しそうなプログラミングや技術は置いておいてWebデザインをはじめたいと感じている人にはピッタリの書籍ではないでしょうか。

ステップ2.フォトショップの使い方とデザイン理論を学ぶ

フォトショップの基礎を学ぶ

Udemy

Udemyはオンラインでいつでもどこでも学習ができるサービスです。もちろんスマートフォン対応しているので外出中にも学習ができるのが特徴です。授業は買い切りのビデオ講義で1度購入すると何度でも受講することができます。

Webデザインの授業数も豊富でPhotoshopからillustratorの基本から応用のレッスン、AdobeXD、英語ではありますがFigmaなど、多くの数のレッスンの中から自分の目的に合わせて選ぶことができます。

レッスンの割引なども行われているため、24000円もするレッスンが1200円で購入できることもありますので、安いうちに購入しておいて時間があるときに学習すれば、学習本を購入するより安い価格でビデオレッスンを受講することも可能です。

Photoshop しっかり入門 増補改訂版 【CC完全対応】[Mac & Windows対応]

デザインツールの解説書は、文章がわかりにくかったり解説ばかりで見にくかったりすると、だんだん見る気をなくしてしまいます。こちらの書籍は、デザインがとても綺麗で見やすいのでおすすめです。

文章も丁寧にわかりやすく書いてあるので、複雑な機能の解説でも頭にスッと入ってきますよ。基礎学習が終わったあとに見返すときも、後ろのインデックスからすぐに確認できます。

デザイン理論を学ぶ

デザインは、ある程度の理論を理解して何度も練習していくと、徐々にセンスが積み上がっていきます。ここでは初心者向けの書籍を簡単に紹介します。

なるほどデザイン

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

どちらもとても有名な書籍で、デザインのことが何もわからない初心者でもわかりやすい内容になっています。特にノンデザイナーズ・デザインブックの例を見ると、「本当に初心者からデザインを始めてもいいんだ…」と安心して勉強を進められますよ。

ステップ３.サイトを制作してみる

学習が一通り終わったら、あとは自分でサイトを実際に作ってみましょう。もちろんわからないところがたくさん出てきます。調べながら進めていくことでより知識が深まりますので、ぜひ挑戦してみてください。

「急に作れと言われても思いつかない…」となる方もいるかもしれないので、試しやすそうなやり方をいくつか紹介しますね。

シンプルなサイトを模写してみる

クオリティが高いWebデザインを掲載しているサイトから、シンプルなサイトを見つけて模写をしてみましょう。デベロッパーツールでコードを確認できますので、真似できそうなところは参考にしてみてください。

『cocoda!』のお題から探す

cocoda!のDaily Cocoda!シリーズには、たくさんのお題が掲載されています。他の人が作成したデザインも見れますので、いいなと思ったところはどんどんマネしてみましょう。

クラウドソーシングサイトの案件を参考に作ってみる

より実践的な内容でチャレンジしてみたいときは、クラウドソーシングサイトで実際に募集されている案件を探して作ってみましょう。実案件ではどういった指示内容で制作されているのかがわかりますよ。

自分のことについてまとめたポートフォリオサイトをつくる

転職する場合に面接でも使えるので、ひとつ作ってみてもいいかもしれません。最初はクオリティが低く感じても、他のサイトを作っていくうちに改善点が見つかるので、どんどんアップデートしていきましょう。

Webデザインを勉強するのにおすすめのパソコン

Webデザインで使用するデザインツールによってはパソコンにそこそこハイスペックな能力が要求される場合があります。そこで必要な性能とおすすめのパソコンをご紹介します。

必要な性能

まず、デスクトップとノートですが、性能という意味では現在ではあまり差がなくなっています。ノートだと打ち合わせなどに直接持って行けますので便利です。デスクトップだと大画面モニターでの作業などできます。

性能だとまずCPUですが、これはインテル Core i5以上あればある程度のツールを動かしてもそこまで遅くなりません。非常に多くのツールを動かす場合はi7の方が良いでしょう。ハードディスクはSSDのタイプのものを選ぶとよいでしょう、容量はできれば500GB以上を確保した方が良いと思います。メモリは最低でも8GB、16GBは欲しいところです。

オペレーティングシステムはWindowsとiOSどちらでもWebデザインの開発はできますが、Windowsの方が使える無料ツールが多いというのは覚えておいた方が良いでしょう。

アップルコンピュータ：Macシリーズ

デザイナーのパソコンと言えばまず思い浮かぶのがアップルのMacシリーズではないでしょうか。デザインのスタイリッシュさはもちろんスペックの方もWebデザインに十分のものが数多く用意されています。ただしMacBook AirはMacの中では最も性能としては低いので重い作業にはあまり適さないかもしれません。

ただし、先述しましたがWindowsに比べると無料ツールなどが少ないのと、同スペックのWindowsパソコンよりはやや割高になっているのは注意が必要です。しかしMacは全て性能としては高水準なので、様々な種類のあるWindowsよりは間違いがないので選びやすいでしょう。

マウスコンピューター：DAIVシリーズ

マウスコンピューターのDAIVシリーズはクリエイターのために作られたコンピューターです。その全てにグラフィックボードGeForceとSSDを搭載しており、Webデザイン製作活動に必要な能力は備わっています。

値段も最安のものは99,800円からありますのでコストは押さえたいけれどある程度のスペックは要求したい方にもオススメです。ただし安いモデルはSSDが128GBだったり、メモリが8GBと少し性能が低くなります。また、Macと違いデスクトップはモニターは付属しませんので別途購入する必要があります。

独学だと不安な方向け　Webデザインを学べるスクール

どうしても1人だと怠けてしまう、技術の習得に自信がないという方にはスクールをオススメします。スクールには自宅からパソコンでレッスンを受けられるオンラインスクールと直接スクールに通うオフラインスクールがあります。

Code Camp

CodeCampでは経験豊富なエンジニアのマンツーマンレッスンが毎日7時から24時まで時間・場所を選ばずに受けることができます。Webマスターコースなら、プログラム、デザイン未経験の方も自分1人の力でWebサイトを作成できるまで技術を習得することができます。

未経験者にも優しいカリキュラムと、理解度に応じたマンツーマンレッスンでパソコンやスマートフォンからアクセスできる料理レシピ検索サイト、インターネット掲示板、ショッピングサイトなど普段良く見るWebサイトを作成できるようになります。

すぐにでも就職したい人向けの転職支援サービスなども行っていますので、しっかりと実力を身に付け、次のステージへとステップアップしたい人にオススメです。無料体験も行っていますので興味のある方はオンラインレッスンを受けてみていかがでしょうか。

KENスクール

KENスクールでは、業界を席巻するような新しい学習システムを多数構築し、開講から30年間という長い間でたくさんの技術者を育ててきました。学習スタイルはインストラクターが「個別指導」で対話しながら授業を進行するスタイルを開講当初から行っています。

個別指導のインストラクターは現役のプロクリエイターが行いますので、現場の生きた技術を直接学ぶことができます。もちろん、未経験でもコーディング、グラフィックデザインなどWebデザインに必要なすべての技術を身に付けることができます。

受講料の20％相当額が戻ってくるWebデザインコース一般教育訓練給付金制度対象講座などもありますので、費用を抑えたいと考えている方にも嬉しい制度です。こちらはスクールに通うタイプなので近くにスクールが無い場合は通えませんが、近くにある方は検討してみてはいかがでしょうか。

まとめ

Webデザイナーは求人も割と多く、ある程度のスキルさえ身に付けられればそこまで狭き門でもありません。ただし、他の職種に比べ少し年収が低いという結果も出ていますので、そこは自分にしかできないスキルを身に付けて自分の価値を高めていかなければなりません。

独学でもスクールでもどちらもメリット、デメリットはありますので、総合的に考え、自分に合った勉強方法を見つけることが重要です。今回ご紹介したスクールや勉強方法などを上手に活用して、他の人より1歩先のスタートを切ってみてはいかがでしょうか。