webデザイン講座

独学の勉強の始め方は?
未経験のためのwebデザイナーの学習法

webデザイナーには勉強しておくべきことがあります。

・webサイトの仕組み
・デザイン
・デザインソフト
・webサイト制作

この4つです。今は「ノーコード」と呼ばれる、プログラミングを学ばなくても簡単にwebサイトを制作できるものがあるのでプログラミングは後から始めても問題ないです。
ただ、プログラミングもいつかは学ぶべきものなので苦ではない方は最初から始めてもいいかもしれません。

では学ぶ順番のおすすめは、なんでしょうか。

  1. デザインソフト
  2. デザイン
  3. webサイト制作

この流れで勉強するのがおすすめです。
では、詳しく解説していきます。

独学の勉強の進め方

①デザインソフト

デザインソフトは使えた方がいいです。そして、極めていきましょう。就職するときやクラウドソーシングで活動するときに、必ずデザインスキルのレベルを聞かれます。全て普通レベルの方より、何か1つでも上級レベルまで使いこなせる人の方が需要があります。

ソフトとの相性があると思うので、自分が使いやすいソフトのレベルをどんどんあげていきましょう!他のソフトも普通レベルまで使えるように頑張ってください。

Photoshop(フォトショップ)

フォトショップは画像編集に特化したソフトです。
名前を略して「フォトショ」とも呼ばれています。

写真を編集や合成したり、グラフィック画像を作成できたりする優れものです。
「写真の編集・加工」「バナー作成」ができるようになります。
Photoshopの需要は広く、スキルとしての価値があるので最初にフォトショップを学んでいきましょう。

Illustrator(イラストレーター)

イラストレーターはイラストやロゴ作成に使用されています。
名前を略して「イラレ」と呼ばれています。

ポスター等の印刷物に適しています。
作成したものを拡大縮小しても線がぼやけないので、webデザインでもロゴ等での使用頻度は高いです。

XD

Photoshopより後に出た製品で、デザインを制作するのに便利な要素(デザインのパーツ)の繰り返しや共有機能があります。
デザインの骨組みとなるワイヤーフレームやデザインの完成形となるデザインカンプを制作するのに使用します。

ページとページを繋げてリンクができるので完成形に非常に近いデザインができます。

ワイヤーフレーム:webページのレイアウトを決める設計図。デザインの骨組み。デザインカンプ:デザインの完成見本。写真やロゴ等全て配置、色付けしてクライアントに完成イメージとして提出する。

②デザイン

デザインはデザインを見て素敵だなという物だけではなく、販売促進となる意図したデザインが必要です。デザインを提出する際に、どのような意図で作成したのか答えれなければなりません。

「色」「文字」「レイアウト」をまず学んでいきましょう。

webデザインで言うとレスポンシブデザインというものがあります。レスポンシブデザインとは、ユーザーの画面サイズに合わせてページレイアウトを最適化するデザインのことです。
デスクトップやスマートフォンといってユーザーが閲覧する画面サイズは変わるので、どのような端末で見てもwebページが見やすい環境を作らなければなりません。

③webサイト制作

実際のwebサイト制作にはhtml/cssを使用したコーディングと、ソフトを使用しコードを書かないでwebサイトを制作するノーコードと言われるものがあります。

今ではノーコードでweb制作できるソフトが多く出ています。代表例としては「WordPress」「ペライチ」があげられます。

まずはノーコードから学ぶことをおすすめします。
理由は、サイトの仕組みがわかるからです。

プログラミングから始めると、コードも覚えながら、サイトの仕組みを勉強する必要があり知識がごちゃ混ぜになってしまう可能性があります。
しかしノーコードのwebサイト制作をすると、コードを覚える必要がなく余裕が出てきます。
また、先ほど出てきたレスポンシブデザインもソフトが勝手に最適化してくれるので、デスクトップでみたデザインがどのようにモバイル対応するのかということを実際に目で見て勉強ができます。

まずはwebデザインを楽しみながら学び、デザインの知識がついたらプログラミングに挑戦してみてください!

勉強を始める前に

まずは勉強を始める前に「ロードマップ」を作成しましょう。

ロードマップの作成理由は目標を見失わないようにです。
勉強を始めて途中で挫折する人が多いのが現実です。とても勿体無いです。

ロードマップをしっかりと作成し、いつまでにどんなことを達成するか決めていきます。

ロードマップ

ロードマップとは目標までの道すじのことです。

最終目標を決め、その目標までにどのような道すじがあるのか考え、決めていきます。

例)最終目標:1年後にwebデザイナーとして転職する
→そのためには途中でどのようなことを達成しないといけないか
3ヶ月後に「デザインソフトを中級レベルまで使いこなす」
10ヶ月後に「ポートフォリオを制作する」

といった感じです。では、早速ロードマップを作成してみましょう!

①最終目標を設定する

このロードマップで最初に決めておかないといけないことが最終目標です。ここが最も重要です。

・今の収入プラスαの収入を稼ぐ
・フリーランスになる
・転職する

さまざまな目標が出てきそうですね。
ただ、目標を決めるときに重要なことが2つあります。

具体的に決める

ただなんとなく「フリーランスになりたいな」では、目標がブレてしまいます。
例えば、「フリーランスになって20万稼ぐ」のように、具体的な数字とともに目標を決めていきましょう。

目標にワクワクするか

私はこれが1番できていないと目標がブレると思っています。
目標を設定するときに「私の今の状態ならこれぐらいかな」と考えていませんか?その考え方で設定してしまうと、達成することが困難な状況になった時にすぐに諦めてしまいます。
ぜひ「達成したい!」「これができたら、自分かっこいいな」とワクワクするような目標設定にしてください。

目標は、できるか・できないかではなく、達成したいかどうかで決めよう❗️❗️

②最終目標の期限を決める

最終目標が決まったら、いつ目標達成するかを決めましょう。
ここでも、「できるか」「できないか」で決めないようにしましょう。

本当はいつまでに達成したいかを決めてみてください。やれば、必ず達成できます。

③中身を埋める!

最終目標が決定したら中身を埋めていきましょう!

・最終目標までのステップには何が必要ですか?
→中間目標

・最終目標の期限に達成するには中間目標はいつ達成すべきですか?
→中間目標の期限

・中間目標や最終目標を達成するためには、日々何をしなければいけませんか?
→日々の勉強時間や勉強の進み具合

これでロードマップが完成し、日々どこまで勉強したらいいかの目安が決まりました。日々勉強を頑張っていれば最終目標を達成することができます。

まとめ

webデザイナーといっても、コーディングができる人とデザインが強い人がいます。自分の強みをどちらにするか考えて勉強を進めていくと、より仕事に役立ってきます。

勉強が進む箇所はどんどん進めていき、自分の強みを増やしていきましょう。