未経験＆独学でもできる！初心者向けWEBデザイン学習方法
副業や在宅でできる仕事が注目を集める今、WEBデザインを学びたいという人は非常に多いと思います。
そんな中でも「独学でできるのか？」「何から始めればいいのか？」という不安があるのではないでしょうか？
そこで、今回は初心者から独学でWEBデザイナーになった筆者がWEBデザインとは何か、どうやったらWEBデザイナーになれるのかを簡単にご紹介します。
1.WEBデザイナーは独学でもなれる
WEBデザインとは、インターネット上で表示されるもののレイアウト、デザインを指します。
その中にはホームページやウェブサービス、ランディングページなど様々な種類が存在します。
また、WEBデザイナーは大きく分けると２つに分類され、デザインの見た目を作る「デザイナー」とWEB上で表示や動かすのが「コーダー」が居ます。
WEBデザイナーの定義は人によって曖昧ですが、この二種類を含めて「WEBデザイン」と呼ばれることが多いです。
勿論、デザインとコーディングどちらも出来たほうが良いですが片方を専門にしているデザイナーも居ます。
実際、筆者はコーディングの知識は若干ありますがサイトを完全に構築できるほどのものではない為、デザインしたものをコーダーに渡すという流れでWEBサイトを製作しています。
ここまで読むと２種類もやることがあるのに果たして未経験から独学でなれるのか？と思われるかも知れませんが、結論、なれます。
事実、弊社には筆者をはじめとした未経験からの独学でWEBデザイナーとして働くスタッフが在籍しています。
美大や専門学校を卒業しないと出来ない職業と思われることも多いですが、現在では様々なWEBスクールやサービスが充実しているので独自でスキルを磨くことができます。
ただし、独学でのデメリットも存在します。
- モチベーションを保ちにくい
- 習得に時間がかかる
- すぐにフリーランスを目指すのは難しい
なので、自身の環境や目指す働き方に合った学び方を見つけましょう。
2.WEBデザイナーになる為に必要な知識
上記で紹介した「デザイン」や「コーディング」の他にWEBデザイナーになるために必要な知識をご紹介します。
●デザインソフトの使い方
WEBデザインの仕事では主にPhotoshopやIllustratorを使用してデザイン制作をします。
この２つは汎用性が高いので必須ソフトとして使いこなせると良いでしょう。
最近ではそれ以外にもAdobe XDやSketchといったWEBデザインに特化したソフトも多くなっています。
こちらはデザインのプロトタイプを作るのに便利で、直感的に操作することができるのでWEBデザイン初心者にもおすすめです。
PhotoshopとIllustratorを学んだ後に、XDやSketchなど特化型ソフトを触ってみて自分に合うものを使用していくと良いでしょう。
●UI／UXデザイン
UI／UXデザインとはユーザー（WEBサイト利用者）にとってホームページやアプリを快適に使ってもらえるように必要になる知識です。
ユーザー目線でわかりやすく、使いやすいデザインをつくるスキルを磨くことで自分の作ったサイトやアプリを選んでもらい、より長く使い続けてもらうことができます。
●SEO対策やアクセス解析スキル
SEO対策はWEBサイトを作った後に多くのユーザーにアクセスしてもらう為に必要な知識です。
SEOとは検索エンジンで上位に表示されるように対策を行うことです。
方法は様々ですが、例えばスマホからでも見やすいモバイルフレンドリーなサイト構造を意識したり、正しい用途のHTMLタグを使用してGoogleに認識させやすくするなどが挙げられます。
アクセス解析は解析ツールを使って、サイトに訪れたユーザーの情報を数値化し分析することです。
サイト内でどんな動きをしているのか、どんな人がサイトに訪れているのか等といった情報が分かるのでWEBサイトの現状を知ることができ、課題点を見つけて改善へと繋ぐことができます。
上記二つはどちらかと言うとエンジニアやマーケター寄りの知識ですが、デザインを作る上で必要となってくる要素でもあるので勉強しておくことをおすすめします。
3.WEBデザイナーになる為の勉強法
ここでは筆者も実践しているWEBデザインを制作するステップを踏まえ勉強法をご紹介します。
《STEP1》どんなサイトを作るか決める
まずは作りたいものを決めましょう。
ターゲットや目的をしっかり決めることで次のステップである市場調査もしやすくなります。
《STEP2》参考サイトを調査・分析
作りたいものが決まったら参考になるサイトを探します。
PinterestやWEBデザインまとめサイトなどを利用して気に入ったデザインをストックしていきましょう。
サイト全体だけでなく、メニューやバナーが気に入ったようなものでも集めておくとデザインの方向性を決めるのに役立ちます。
参考サイトが集まったら必ず分析をしましょう。
なぜ良いと思ったか？どこが良いのか？といった疑問に具体的な答えを導けるようにしましょう。
そして、それらの要素をデザインに落とし込んでいきます。
《STEP3》ワイヤーフレームを作る
ワイヤーフレームとはWEBサイトのレイアウトを決める設計図のことです。
デザインソフトを使用しても良いですが、ラフのようなものになるので手書きでも良いでしょう。
ソフトが使いこなせないうちは自分の使えるツール内でしかデザインできず、デザインの幅が狭くなってしまうこともあるのでやり易い形から始めることをおすすめします。
《STEP4》デザインに落とし込んでいく
ここからは実際にデザインソフトを使用していきます。
先ほどご紹介したPhotoshopやIllustratorでデザインすると、サイトで実際使用する素材を書き出すのにも便利な機能があったりします。
そしてここで大切なのは、完璧なものを作るのではなくまずは完成させることです。
7～８割程度の完成を目指しましょう！
《STEP5》コーディング
サイトの基礎となる『HTML』とデザインするための『CSS』を使ってサイトを構築いきます。
その他にも動きを出すための『JavaScript』などがありますが、なくてもサイトは作れるのでまずはHTML / CSSを勉強しましょう。
ちなみにデザインから学んだ場合はコーディング知識がない分自由にデザインでき、コーディングから学ぶとサイト構築しやすいデザインが作れるようになります。
自分が興味のあるやり方から学んでいくのも独学でモチベーションを保つ方法の一つです。
《STEP6》客観的に見る
ある程度形になってきたら自分以外の人にも見せて、実際にサイトに触れてもらいましょう。
制作者である自身は理解していても、初めサイトを見る人には不明な点がいくつも出てきます。
それらの意見を参考にさらに良いサイトになるようブラッシュアップしていきましょう。
《STEP7》公開へ
ブラッシュアップを重ねた後はサーバーを借りたり、ドメインを作ったりする作業を経て公開になります。
ただし、WEBサイトは公開したから完了というわけではありません。
印刷物などとは違い随時改善していくことができるので、SEO対策やアクセス解析を踏まえ更にユーザーから愛されるWEBサイトを目指していきましょう！
4.おすすめアイテムをご紹介
WEBデザイナーを目指す人におすすめなサイトや本をご紹介します。
●おすすめ書籍
デザイン・グラフィック関連の書籍を数多く出版しているMdN社さんの一冊。
デザインの基本を楽しく学ぶことができます。
HTMLとCSSの基本だけでなくWEBデザインについても学べる一冊。
全国の書店員がオススメする本（CPU大賞）第1位に輝くだけでなく発売から3年連続で売り上げ第1位の学習本です。
●おすすめサイト
日本国内のステキなWEBサイトを集めたギャラリーサイト。
更新頻度が高く、カテゴリー分けの種類が多いのでその時求めているデザインが見つかりやすいのでおすすめです。
スライドを見ながら実際に自分でプログラミングを実践することができるのでより深く学習できるサービスです。
アプリも用意されているので、ゲーム感覚で学ぶこともできます。
5.まとめ
どんな職業も共通ですが、いきなりプロのような腕前になることは不可能です。
いくつもの経験を積んだ後、やっとスタートラインに立てるようになります。
そんな中でもWEBデザインは流行や機能が日々更新されていくので、完全な終わりはありません。
なのでデザイナーもその都度成長し続けていくことができます。
まずは自分が作りたいと思ったものをどんな形でも良いので作ってみてください。
そして必ず改良、改善を重ねていきましょう。
そうやって積み上がっていったスキルは最強の武器になり、働き方の幅を広げてくれるでしょう。