WEBデザイナーになりたいけど、何から始めたらいい？と思っている人も多いはず！
私が実践した勉強方法、少しは役立つと思うので書いていきます。
HTML/CSSの習得は必須
WEBデザインをするにあたり、どこまでをWEBデザインというのか人によって定義は違うと思います。
私は、見た目のデザイン案を作るだけでなく、コーディングまでできるようになっていた方がよいと思っています。
なぜなら、いろんなアプリやツールが世の中にたくさん出てきて、簡単なものだと素人でもそこそこ見栄えのよいページを作れるサービスも出てきていますよね。
ということは、見た目のカッコよさや可愛さだけでは、仕事にならなくなっているということです。
しかし、素人の方でも作れるサービスを使うと見栄えはいいけど、他との差別化がつけにくかったり、細かなところは妥協しないといけない場合もあります。
そんな時、細かなところまで対応してくれる人がいたら、そちらに仕事を出す可能性が高いですよね。
別の話でも書いたのですが、大きめの会社や制作会社ならコーダーと呼ばれるマークアップ言語のコーディングを専業とする人もいます。
でも、自分の力でやっていくためには、表面のデザインだけでなく、ある程度コーディングできることは必要と言えるでしょう。
関わる人が増える＝費用がかかるに近いはずなので、まとめてできる人だと仕事をもらいやすいと考えます。
そして、WEB上の見た目をコントロールできる、HTML/CSSは思っているより、難しいものではなく、できる人が多い分野になっているのも事実です。
ということで、HTML/CSSはWEBデザイナーならできるのが当たり前になってきているので、習得必須となります。
完璧でなくても、まずは多少の修正ができるようになりましょう。
Photoshopや Illustratorでのデザインだけでは、よほどのデザイン力やネームバリューがないと難しいと思ってた方がよいです。
WEBデザイナーへの勉強の順番
最終的には、自分のポートフォリオサイトを作ることを目標にします。
勉強の順番は
- Photoshop(最低限)
- HTML
- CSS
- Photoshop(ある程度)
- Illustrator(ある程度)
でしてみましょう。
なぜこの順番かというと、目標するものを明確にしておく方が学びを実践に近づけられるからです。
1.Photoshop(最低限)というのは、自分のポートフォリオサイトの構想を簡単に形にしてみましょう。
画像まで入れなくていいので、トップページのワイヤーフレームを作ってください。デザインを先に作ってしまったり、ある程度の構想までしてもいいです。
ワイヤーフレームとは
https://nandemo-nobiru.com/web-5695
ワイヤーフレームくらいならパワーポイントやエクセルでもできるのですが、ゆくゆくは使うので、Photoshopで作ると気分があがるのではないかと思います。
こんなサイトにしたいというのがなければ、WEBサイトのまとめサイトがあるので、参考にしてください。
おすすめのWEBサイトまとめ
大好きなLIGさんの記事です。
https://liginc.co.jp/designer/archives/11237
自分が作りたいワイヤーフレームを軽く頭に入れて、次は2.HTMLの勉強に入ります。
目的や目標を元々持っている人なら1.のワイヤーフレームをすっ飛ばしても構わないですが、ワイヤーフレームがあることで勉強の吸収率が変わります。
漠然とHTMLの本を読んだり、動画をみたりするのと、自分が作りたいものを明確にして学ぶのでは見え方・捉え方が変わってきます。
ワイヤーフレームを作る時点で、ある程度いろんなサイトを見ているはずですし、視点も始めより変わっているはずです！
自分が作りたいと思うサイトを思い描きながら、ここはどの部分を言っているのかと考えながら勉強を進めてください。
次に3.CSSへ進みましょう。
HTMLでは必要な要素を作り、CSSで見た目を整える。
地味だったHTMLでの見た目をCSSでどんどん変わっていく様は、おもしろいの一言です。
時には、自分の作りたいものと違うことが出てくるかもしれませんが、始めの勉強は基礎中の基礎なので、きちんと覚えておくことをおすすめします。
HTML・CSSは、たくさんの記述があるので覚えきるのはムリだと思ってください。
一通り勉強した後、随時必要なことをどんどん検索してレベルアップを目指しましょう。
驚くほど、詳しく書いてくれているサイトがたくさんあります。ネット上に先生がいっぱいです。
そして、4.Photoshopでサイトのデザインをしていなかった人はここでガッチリと作りましょう。
どんな人へ向けて、自分はどういうものを作れるのか。どんなデザインを得意とするのか。今までにどんなことを勉強したのか。
どういった経緯でWEBデザイナーになることを選んだのか、少しは人となりがわかるものがよいかなと思います。
WEBとはいえ、実際は人対人のコミュニケーションに使われるものだからです。
そして、バランスを見るために先に全体のデザインを作ることをおすすめします。
パーツ作りから始めると出来上がった時、なんだかチグハグになってしまった。。ということが起きがちです。
全体のデザインができたら、必要なパーツを必要なサイズで作ります。
いろんなサイズ・形を作ること、画像をレタッチや編集することになるかと思うので、全てが練習になるはずです。
ベジェ曲線をかいて、背景と対象物を切り分ける切り抜き作業をしたり、写真の色を補正したり、文字入れしたバナーを作ったりといろいろできて楽しいですよ！
Photoshopチュートリアル
https://helpx.adobe.com/jp/photoshop/tutorials.html?promoid=29NMCP23&mv=other
たくさん動画で説明してくれています。見るだけでもおもしろいですよ！ワクワクします！
いろいな動画がありますが、全ての操作になると覚えることは不可能に近いので、やりたいことを検索しながら進めることもおすすめします。
もうお気づきかと思いますが、独学は検索力が大切です。わからないことを言語化して、調べる。の繰り返しです。
一回の検索でわからなくて、違う言葉に置き換えて検索しましょう。
先生がいれば答えをくれるかもしれませんが、いずれは自分の力で解決しないといけない状況になります。
常に自分で調べるという意思をもっていてください。
4.Photoshopをある程度使えるようになったら、5.Illustratorへ進みましょう。
なぜこの順番かというと、練習するにもソフトが必要だからです。IllustratorはPhotoshopに比べて、使用するにも費用があがります。
Photoshopは安価で使えとっつきやすく、操作もIllustratorと似ているので、操作の下地を作れるのです。
時期によりますが、執筆時点ではPhotoshop/Illustratorともに無料期間7日間あります。練習にうまく使いましょう。
この2つのソフトは違いって何？と思う人も多いはず。この2つはできる範囲が少し違いますが、同じようなこともたくさんできます。
Illustratorは名前の通りイラストを作るのに強く、Photoshopのような画像編集はできません。
矢印があっという間に作れたり、アイコンが作りやすかったりと絵を書くのが好きな方は楽しいソフトだと思います。
Illustratorでできることはチュートリアルを見てみましょう。
Illustratorチュートリアル
https://helpx.adobe.com/jp/illustrator/tutorials.html
Photoshopでもできるようなことがたくさんありますが、写真はPhotoshopで加工して、バナーなどのデザインはIllustratosですると作業時間が短縮できます。
少なくとも、私はそんな風に使ってます！
PhotoshopでもCCならアートボード機能がありますが、Illustratorでページ全体を見ながら作れたりいろいろメリットがあります。
Photoshopだけでデザインする人もいますが、どちらも使えるようになっておいて、損はないです。
でも、どうしても余裕がなければ、Photoshopを使えるようになりましょう。
勉強の順番に(ある程度)とつけたのには理由があります。基礎は身につける必要がありますが、応用は作りたいもので変わります。
未経験の時点で完璧に機能を使いこなすことは、ほぼムリです。やりたいことや作りたいものが明確になった時に調べながら作ればOK！
プロと言われる人たちでも、日々進化していくテクノロジーと要求に答えるために、試行錯誤し調べながら取り組んでいます。
だから、始めから完璧を目指そうとしないで行動してみましょう！
どのソフトでどんなことができるかを理解しておけば、もし仕事で使うことになってもスムーズに取り組めるはずです。
なんだかんだいいましたが、Photoshopや Illustratorを使い、サイトに必要なパーツを作りあげます。
ここまできたらあとはサイトをつくるだけ。
ポートフォリオサイトを公開しよう！
ここからは、勉強した結果を出しましょう。
HTMLで必要な要素を作り、作ったパーツをはめ込んでいきましょう！CSSで見た目を整えてください。
そして、サーバーとドメインを用意して、公開という流れになります。
この時点でサイトのトップページだけができている状態ですので、作品を増やしていくようにしましょう。
サイトを作ったという事実はできました。ここからは、さらに自分らしさを磨いて作品を足していってください。
実績があれば、できるものは掲載してください。なければ自分のために名刺をデザインしたり、テーマを決めてバナーやサイトデザインをしてみたりと追加してください。
WEBの良さは、後からでも思った時にデザインを変えられることです。
あれができたら、ここができてから。と考えがちですが、手を動かして形にしていくのが、1番身になると実感しています。
なので、自分のサイトを持って、どんどん更新していきましょう！
サーバー・ドメインの取得方法やHTML/CSSの勉強方法はまた別で書きます。
コメント