「これからWEBデザイナーを目指したい！」
「WEBデザイナーに興味があるけど何をしたらいいかわからない。」
そんな方に向けておすすめの勉強方法を紹介していきたいと思います。
目次
WEBデザイナーになるために初めに学習しておきたい項目
デザインツールの学習方法
HTML/CSSの学習方法
デザインの原則の学習方法
WEBデザイナーになるために初めに学習しておきたい項目
WEBデザイナーになるために初めに学習しておきたい項目は
-
- デザインツールPhotoshopの使い方
- HTML/CSSの基礎
- デザインの原則
以上の3点です。順を追って解説していきます。
デザインツールPhotoshopの学習方法
業界のスタンダードであるPhotoshopを使用してデザイン制作を行います。学習の段階であれば月額税込1,078円〜利用できるフォトプランの契約で大丈夫です。
プラン内容はAdobe Creative Cloudのサイトから確認してみてください。
初めにPhopshopでどんなことができるのか基本的な操作の学習を進めるといいでしょう。その際本を一冊決めて１週間ほどでさっと一周学習します。
その後はとにかく実際に自分でデザインをして学習していきます。
最初は文字だけの簡単なバナーから模写（トレース）をしていきましょう。模写を通して文字のジャンプ率や配色、デザインなどを学ぶことができます。
文字だけのバナー模写に慣れてきたら、少し複雑なバナー模写に挑戦していきましょう。見本を選ぶ際のポイントは少し調べたらできそうなものにします。わからないことが出てくればググってみてください。ほとんどのことが解決できるでしょう。
慣れてきたら時間制限を設けて制作するのもいいでしょう。ショートカットを覚えて、どんどん作業スピードを上げて時間単価UPを目指しましょう！
ただ単に模写するのではなくなぜそのデザインになっているのか分析、言語化することが大事になってきます。自分なりに考えることが今後のデザイン力に生きてきますので是非やってみてください。
詳しい模写の方法や分析方法は別の記事で紹介していますので参考にしてみてください。
HTML/CSSの学習方法
HTML/CSSは実際に手を動かしながら勉強することが大事です。
私のおすすめはProgateです。Progateの良い点は自分でコードを書きながら学習ができる点です。各レッスンごとに課題をクリアしながら進めていきます。
・Progateについて
Progateはこちらからログインして始めることができます。
初級編のみ無料で学習することができるので試しにやってみたいという方はやってみてください。
全コースを受講するには有料会員になる必要がありますが月額税込¥1,078で公開されている他言語も含む全てのレッスンを受けることができます。
上のレベルになってくると難易度が上がりわからない部分が出てきます。ググって解決するのもいいのですが、時間を無駄にしてしまうことがあるのでサクッと答えを見て進めると良いでしょう。
また全てを覚えようとするのではなく、理解したら次に進むようにしてください。使う時に調べられるようにしておけば大丈夫です。
こちらのサイトで要素の意味や使用方法などを検索することができますので参考にしたいときに調べてみてください。
・書籍での学習について
自分のペースで勉強したいという方は書籍での勉強がいいでしょう。『1冊ですべて身につくHTML＆CSSとWebデザイン入門講座』がおすすめです。
1日に進めるページ数を決めて自分のペースで進めてください。ここで大事なことはもちろん手を動かすということになります。読み進めるだけでなく、自分でコードを書きながら進めることでインプットとアウトプットができ理解度が深まります。
デザインの原則
デザインには原則があり、それを理解していないとユーザーにとって使いづらいデザインになってしまいます。そうならないために最初の段階で理解をしておきましょう！
『なるほどデザイン』
デザイン原則に基づいたいいデザイン、惜しいデザインなどを例を挙げながらが紹介されています。デザインをする際の基礎、概念、ルール、プロセスが学べます。
デザイン力を上げるには日頃から良いデザインに触れることが大事です。
学習を始める前や隙間時間を利用してデザインをストックしていきましょう！
WEBサイトまとめページやPinterestを利用してスクショや保存しておくとデザインする際の参考にできます。
スクショはファーストビュー、申し込みボタン周り、サービスの流れなどのカテゴリーごとに保存しておくと見返した時に便利です。
スキマ時間を上手に活用しながらデザイン力の向上を目指しましょう！
今回はWEBデザイナーになるために初めに学習しておきたい項目
- デザインツールPhotoshopの使い方
- HTML/CSSの基礎
- デザインの原則
の3点について紹介しました。
WEBデザイナーになりたい方に少しでも役に立てたら幸いです。
