こんにちは！
フリーランスWebデザイナーの「あお」です。
今回はWebデザイナーになるまでにどのようなことを学んで、どういうことをしたのかを詳しくまとめてみたいと思います。
- 調べても情報が多すぎてわからない…
- 一体どんな知識があればいいの…
- まず何から始めれば…
と困っている方の一例にしてもらえれば嬉しいです！
- 実際に習得した知識・技術
- Webデザイナーになるまでの流れ
実際にWebデザイナーとして働くことに興味はあるけど、一体何から手をつけたら良いのかわからない、という方は多いのではと思います。
あくまで私の場合ではありますが、この記事を読むことで、こんなことを勉強するんだ、まずはこれをしたら良いのか、などぜひ参考にしてみてください。
実際に習得した知識・技術
- コーディング知識 HTML/CSS/JavaScript(jQuery)
- Photoshop
- 色、フォント知識
- UI/UX
- その他
簡単にまとめるとこんな感じです。
下記で詳しく解説していきますが、内容知ってるよという方は読み飛ばしてください！
コーディング知識
WEBページを作成する技術ですね。
HTML：Webページを作成するために開発された言語です。HyperText Markup Languageの略でそのままエイチティーエムエルと読みます。文字を認識できないコンピュータのために、今ここではこの内容を書いていますよと、マークアップして知らせてあげるためのものです。
CSS：Webページのスタイルを指定する言語です。Cascading Style Sheetsの略でそのままシーエスエスと読みます。文字サイズや色の指定から、要素の配置までデザイン面はこちらで作成していきます。大体のことがCSSをいじることで表現できます。
JavaScript：主に動的な部分を表現する言語です。ジャバスクリプトと読みます。大体のことは上の２つで表現できるのですが、例えばスクロールしたら横から画像がニュッと出てくる、とか動きを付けたい時に使用します。上の２つだけでも十分ページとして成り立つのですが、これを使用することにより一気に表現の幅が広がります。
デザイナーなのに、コーディング出来ないといけないの？という方もいるかもしれないのですが、もちろん出来なくてもデザイナーにはなれます。実際の現場では分業していることも多いです。
ただ、デザインする上で基本の知識があった方が提案もしやすいですし、コーディングのことも想定したデザインができるので、基本は身につけた方が良いかなと思います(特にフリーランスは)
Photoshop
Adobe社が出している、写真加工ツールです。
バナーを作成したり、実際にWebページのデザインを作成する（デザインカンプと呼びます）際に使用しています。
有料ソフトですが、私はスクールに通っていた頃は学生料金で安く購入することができたため、年間で23,760円で他のAdobeソフトも使用できるプランに入ることができました。(スクールのメリットの一つかもしれません)
Photoshopだけのプランであればもっと安く使用できます。
※購入と言っても、一回購入して永続的に使用できるというわけではなく、使用料を月額または年額で支払って使用するサブスクシステムです。趣味で写真加工にも使えますし、私の中では一番楽しい勉強でした。
そのままずばり、配色やフォントの種類を学びます。
色の与えるイメージや、ゴシック体明朝体などのフォントの種類を勉強しました。
実は元々、大学生の時に興味があったので色彩検定2級を取得していたのですが、もうすっかり忘れていたのとWEBデザインではターゲットユーザーに合わせた色を選ぶ必要があるため、改めて学ぶ良い機会でした。
色、フォント知識
配色やフォントの種類を学びます。
色の与えるイメージや、ゴシック体明朝体などのフォントの種類を勉強しました。
大学生の時に趣味で色彩検定2級を取得していたのですが、もうすっかり忘れていたのとWebデザインではターゲットユーザーに合わせた色を選ぶ必要があるため、改めて学ぶ良い機会でした。
UI/UX
Web業界に興味を持って調べている方は聞いたことあるなという場合も多いかと思うのですが、使いやすいサイトを考えるために必要な概念です。
ちなみによく、横並びで記述されますが並列の概念ではありませんのでご注意。
UI：User Interface ユーザーインターフェイスの略です。
Interfaceは訳すと境界面、接点のことです。つまりユーザーとWebデバイスの設置面ということになりますので、PCやスマホなどでWebサイトを見る時など画面上で見られるすべての情報がUIです。
UX：User Experience ユーザーエクスペリエンスの略です。
Experienceは訳すと体験、経験のことです。つまりユーザーがWebを通して得る体験や経験のことを指し、ユーザーがサイトやサービスを使用した際に、内容がわかりやすい、デザインが綺麗で見ていて楽しい、ボタン配置がわかりづらくて使いにくい、などそういってユーザーが感じたこと全てがUXです。
自分で書いていてなんですが、このブログも良い感想を持ってもらえるように工夫して行かないとですね。
その他
上記のこと以外にも学んだ方が良いだろうなということは多岐に渡るので、何を学ぶかは実際に自分がどのような働き方をしていきたいか次第かなと思います。
私は企業で働くのではなかったので、一通りの知識を身につけたいと考えて、Webマーケティングの講座も受講したり、少し高度なJavaScript、PHP(WordPress)、Illustrator、XDなども独学で勉強中です。
実際に実務をしていく上で、必要だった技術はまた別の記事でまとめたいと思います。
Webデザイナーになるまでの流れ
勉強を始めてから実際に仕事として始めるまでの大まかな流れをご説明します。
私の場合はスクールに入学したので、とてもシンプルです。
- スクール学習
- 復習＆自主学習
- クラウドソーシングサービスで受注
という３段階。以下で詳しく説明していきます。
スクール学習
私が選んだところは通学制のスクールでした。
スクールに関してはネットで調べた他、実際に３箇所ほど足を運んで比べました。
（スクール比較に関しては長くなるので別記事にまとめます。）
今は完全に在宅で動画学習主体のところも多いですし、仕事と両立したい、移動時間もったいない、近くに校舎ない、なんて方も気軽に勉強が始められるようになりましたね。有名どころだとTECH CAMPなど。
そんな中、私が通いのスクールを選んだ理由としては、
場所が変わった方が集中できるから
というのが大きいです。学生の頃から人がいるところの方が集中できる質でして、自習室とか図書館とか、大人になったらカフェとか。
むしろ勉強とか人と一緒にやりたい派でした。
その方が記憶の定着が良かったです。あ、これ誰々と問題出し合ってたとこだ！とか。
余談でした。
なのでこれは人が全くいないところの方が集中できる人もいると思うので、完全にお好みです。今のスクールの充実具合だと、オンラインスクールを選ぶかもなとも思います。
復習＆自主学習
これまた当たり前ですね。
言われるまでもないよって感じだと思うのですが、スクールでやった内容、忘れます。
サーバー？それって何？のレベルだったので、授業で聞いてもすぐ忘れます。
コーディングも実際に自分で作品制作をするまでは全然身についた気がしませんでした。
私が通っていたところは、授業での予約以外に、決まった時間内で予約して自由に質問できるという枠があったので、そのタイミングで復習作業して、わからなかったら質問というのを繰り返していました。
自主学習というのは、授業で使うテキストの内容以外に「読書、バナー模写、作品制作」などです。
文系学部出身としては、そもそもデザインを勉強するという経験自体がなかったため、デザインに関しては基本を教えてくれる本を読みました。
次に、バナー模写というのは、ネット上にあるWebバナーを見ながら同じものをPhotoshopで真似て作るという作業です。
こちらはPhotoshopの練習になるのはもちろん、デザインの勉強にもなります。それを作品として公開してしまうともちろん著作権違反ですので、あくまで自分の練習として行います。(私は初期の頃、ファ◯リーズのバナーを模倣して細かいプロのお仕事に感動しました。)
最後に作品制作ですが、自身のポートフォリオサイトとは別にWebサイトを３つ作成しました。最近では実際に募集の多いLPも作成しております。デザイン及びコーディングのアウトプットのためにも必ず作成した方が良いかと思います。
おすすめの本や、バナー模写などに関しては長くなるので、別ブログで解説します！
クラウドソーシングサイトで受注
こちらは実際に仕事を始める時に使用したサービスです。
クラウドソーシングとは、作業をして欲しいクライアントと、仕事を探しているワーカーをマッチングさせるサービスのことです。
コロナ禍で注目度がUPしたので、すでに登録済みの方もいるのではないかと思います。
特に企業に属さない、かつツテがない私のような個人事業主には最適なサービスだと思います。（デメリットももちろんありますが自分で何もないところから仕事を探してくるのは本当に大変なので、とてもありがたいです。）
私は最初クラウドワークスというサービスに登録し、その後ココナラでも活動しています。
まとめ
以上、実際に習得した知識・技術と、Webデザイナーとして仕事をするまでの流れについて簡単にまとめてみました。
もちろん、人それぞれなのでこれをやればOKというわけでも、出来ないからWebデザイナーになれない、というわけでもないかとは思います。
ただ、私はこれをやって実際に仕事を始めることが出来たので、一例として参考にしてもらえれば嬉しいです！
お付き合いありがとうございました！
