企業やお店のWebサイト制作をするのがWebデザイナーです。今見ているこのブログも大きなくくりで言えばWebサイトです。
デザイナーという位なのでデザイン（見た目）を作るのがメインですが、HTMLやCSS、JavaScriptを使うコーダーという仕事を兼任する事も多いです。
実はこの「兼任する」って所に未経験からでもWebデザイナーになる大きなチャンスがあります。
理由を詳しく解説しますので、「未経験でWebデザイナーになるのは難しい？」と考えている方は参考にして下さいね。
未経験のWebデザイナーに必要なスキルや、制作現場で重宝される方法もアドバイスします。ちなみに資格は全く不要です。絵も別に描けなくて大丈夫です。
もしスクールや講座を考えているなら、本当に申し込む必要があるのか記事を読んでから決めても遅くありません。
この記事の目次
Webデザイナーとは
WebデザイナーはWebサイトの見た目をデザインする訳ですが、大事なのは「使いやすいか？」「わかりやすいか？」など、実際に触って利用しやすい様に情報を整理する事です。
今はスマホユーザーが多く、PC以外での見え方も意識したレスポンシブデザインが主流です。
こういった理由もありデザインだけでなく、コーディングへの理解も必要になってきます。
実際、コーダーとWebデザイナーを兼任する事も多いです。
- コーダー
- HTMLやCSS、JavaScriptを使ったコーディングでWebサイトを組み上げていく（マークアップエンジニアともいう）。
制作現場で重宝されるWebデザイナーとは？
Webデザイナーはデザインもコーディングも両方出来る人の方が重宝されます。
理由は単純で、制作会社側は以下の様に考えます。
- デザインとコーディング両方出来ると制作がスムーズ
- 制作の人件費が抑えられる
- 休む人が居てもカバーできる
昔実際に僕も言われた事がありますし、経験を積んだ今では僕自身も同じ考えです。
だからデザインとコーディングの両方で臨機応変に動ける人が居れば、現場は凄く助かるんですね。
とは言え、現場のWebデザイナーが全員コーディングが出来るわけではありません。
ここに未経験者がWebデザイナーになれるチャンスがあります。
未経験のWebデザイナー志望者の多くはコーディングの重要性を知りません。未経験ながらもコーディングが出来るのは武器になります。
面接に臨む際は、デザイナーだけれどもコーディングの重要性も理解しているという事をアピール出来ると良いですね。
未経験でも最低限必要なスキルは？
実は最低限必要なスキルであれば、時間はものすごく掛かりますが全くの独学でも大丈夫です。問題なく制作出来るレベルで大丈夫。制作現場の人達も理解しています。
ただし、学校では無いので教えて貰える前提では難しいです。
使える必要があるアドビのツール
言わずと知れた、業界のデファクトスタンダード。おおよそどの制作現場でも共通で求められるものだけ挙げました。アプリを使えるスキルが無くては始まりません。
- Photoshop
- Illustrator
- Figma・XD
世の中に画像編集ツールはアドビ以外にもありますが、制作現場では確実にこれらのツールを使っています。
また、サイトレイアウトにはPhoroshop以外にもFigma・XDを使う事も多くなっています。難しくはないのでサクッと覚えてしまいましょう。
現在ではXDよりもFigmaをおすすめします。
どれくらいのレベルで使えたらいいの？
就活ではポートフォリオサイトが必須で、架空の会社やお店、出来れば知り合いのお店など小規模なウェブサイトを複数作るかと思います。
その際に、バナーやアイコン等のパーツも必要になるはずです。そういったものをひと通り問題なく作るレベルであればOK。
ウェブサイト全体はFigma・XDとPhotoshopをうまく使い分けしつつ連携させて作れるとGood！
画像素材は有料が良いですが、金銭的な事もあるのでフリー素材を活用するのも有り。フリー素材でも著作権など、利用規約は守りましょう。
このあたりが適当だと確実にアウトです。
読んでよかったデザインの本
色んなサイトで紹介されているので、私も実際に読んでみて、良かったので紹介しますね。
最初は、「どうせ宣伝でしょ？」って思ってました。結局買ったのですが、デザインに自信の無い方は絶対読んだ方が良いです。参考書系はkindle版ではなく単行本がおすすめ。
Webクリエイターボックスというサイトを見た事がある人も多いかと思います。運営されているManaさんはウェブデザイナーやコーダーなら知らない人がいないくらい有名な方です。
私も昔はサイトを見て勉強させて頂いてました。間違いなくおすすめ出来る本ですよ。
デザイナーがどんなことを気にかけ、どんな基準で良し悪しを判断しているのか。とてもわかりやすいサンプルで解説されています。
著者は新人を指導する立場の方だそうです。どうりで説明がわかりやすい訳ですね。
フォントの知識はとても大切です。デザインの中でもごまかしが効かず、上手い下手がすぐにバレてしまう部分です。
一冊は持っておきたい、というか読んでおくべき本です。
かなり古いので買うかどうかは別として、デザインの基本的な理論や法則なども理解しておいた方が良いです。
普遍的な内容なので、今でも参考になります。
HTML・CSS・JSなどのコーディング
繰り返しですが、コーディングの出来るWebデザイナーは臨機応変に動けるので好まれる事が多いです。未経験ならデザインだけでなく、コーディングも出来る方が評価は高いかもしれません。
プログラムはJavaScriptを使う事が多いのですが、jQueryをある程度使えれば大丈夫です。
- jQueryとは
- jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述出来る様に設計されたJavaScriptライブラリ。スライダーやドロップダウンメニュー、トップへ戻るボタンなどで見かけますよね。
コーディングが出来た方が良い理由
スマホの普及やGoogleが推奨という事もあり、レスポンシブで作る事が多いです。
レスポンシブとは
レスポンシブとは、PCとスマホを1つのHTMLで構築し、デバイス毎にCSSで見た目を変えて最適表示させる方法です。正確にはレスポンシブウェブデザイン。
つまり、HTMLやCSSへの理解が無いとレスポンシブを意識したデザインが難しいんです。言い換えれば、デザイナーにはコーディングも理解出来て欲しい訳です。
デザイン的にも理由がある
現在のデザインのトレンドであるフラットデザインは、コーディングと相性が良く、今までは画像で作られていたボタンなどのパーツもHTMLとCSSで作れる物が多いです。
SEO的にも、わざわざ画像で書き出すよりもコーディングで作る方がメリットがあるんです。
どれくらい使えたらいいの？
jQueryは今でもまだ使う事がありますので、ウェブサイトでよく使う機能くらいは使えると良い感じだと思います。例えばスライダーやスムーススクロール、アコーディオンメニュー等ですね。
効果的な勉強方法
Webの仕事は覚える事が沢山あります。全部出来るようになるのは物理的に不可能です。それだといつまでたってもWebデザイナーにはなれません。
色々出来ないと駄目なのではないかと不安になるかもしれませんが、必要最低限の物だけを効率よく勉強すればOK。実務をこなしつつスキルを上げていく感じです。
過去の自分にも言ってやりたい。当時はどこまで出来れば良いか分からず、手あたり次第勉強していました。
最低でもこのスキルは必要です
- Webサイトデザイン（レイアウト・バナー）
- コーディング（レスポンシブ・スマホ対応）
- ウェブサイト立ち上げ
- グラフィックツールの使い方
① Webサイトデザイン（レイアウト・バナー）
今どきだと、デザインのトレンドやユーザーの利用デバイスに合わせて、「カラム・レイアウト」「グリッド・レイアウト」といったレイアウトのパターンが多く、ウェブデザインの傾向としては※フラットデザインが主流です。
フラットデザインとは
フラットデザインとはミニマリズムを取り入れたデザイン。文字通りフラット（平面的）でシンプル。ボタンを見ても分かる様に立体感は無い。多様なデバイスへの対応やレスポンシブと相性が良く、画像ではなくCSSで対応出来る事も多い。
情報が分かりやすく整理されているか、PCとスマホでの見え方を意識したデザインが必要です。文字のサイズや余白の取り方などと同じくらい重要です。
勉強方 – 実際のサイトをお手本に真似する
自分が実際に作ろうと思っているものに近いサイトを検索。良いと思えるサイトを見つけたら、全く同じものをマネしてデザインしてみます。文字のサイズや色、余白の取り方などを意識します。
出来上がったら必ず見比べてみましょう。例えばスクリーンショットで画像を撮り、自分の作ったものと重ね合わせてみます。
大事なのは気付きです。重ねてみて何かおかしいなと気付いたら、必ず自分なりに理由を考えます。余白の取り方が違ったり、使っているフォントで印象が違う事が分かるでしょう。
② コーディング（レスポンシブ・スマホ対応）
デザイナーといえどデザインの事だけ考えていては駄目です。デザインによってはコーディングに不向きだったり、レスポンシブ対応が難しい物もあります。
勉強方 – お手本にしたデザインでコーディング
お手本で使ったデータを元にコーディングするのがおすすめ。デザイナーとしての視点を持ちつつコーディングする事で、どの様にデザインするべきかが見えてきます。
➂ ウェブサイト立ち上げ
就活にはポートフォリオサイトが必要な事もあり、必然的に自分でサイトを立ち上げる事になります。
勉強方 – デザイン以外の事も経験しておく
独自ドメイン取得にサーバー契約くらいは経験しておくべきだと思います。数ページ程度ならHTMLファイルでも良いですが、おすすめはWordPressでのポートフォリオサイト構築です。
実は未経験者であれば、これらの経験も良いアピールになります。難しい訳ではないですが、自分でやった事があるのと無いのとでは大違いです。
④ グラフィックツールの使い方
使える必要があるツールとして以下を紹介しましたが、実際にウェブサイトやバナーが一通り作れたら大丈夫です。
- Photoshop
- Illustrator
- Figma・XD
以下、基礎をひと通りやるならアドビのチュートリアルが最強です。
PhotoshopとIllustratorは、よく使う操作をショートカットで使いこなし、作業効率を上げましょう。
ウェブサイトのデザインレイアウトはFigma・XDで作れるとGood！
参考：Creative Cloudチュートリアル
参考：Creative Cloudメンバー向けことはじめオンライン講座
実務経験を積む方法
これまでWebデザイナーに必要なスキルや勉強方法をお伝えしてきました。独学でもスクールでも、未経験でWebデザイナーになることは出来ます。ですが、求人サイトを見てみると数年の実務経験があることが条件になっている事が多いです。
この様な条件から、未経験者なのにどうやって経験を積めばいいのかと困ってしまい、やはり無理なのかと諦めてしまう方も多いです。
そんな時は派遣で実務経験を積むのも有りです。もちろん派遣でも実務経験が問われる事は多いのですが求められるスキルは様々です。スクールレベルでOKの求人もありますし、ポートフォリオを見て判断してもらえます。
資格よりも実力が評価される世界なのでポートフォリオがものをいうんです。スキルさえあれば未経験の方でも採用されるチャンスはありますし、派遣会社に相談して求人を紹介してもらう事も可能です。
派遣という形であっても仕事に就けさえすれば、実際の制作現場で必要なスキルがどれ位か知ることが出来ます。また、やった事が無い事にもチャレンジさせてもらえる可能性もあります。そうなればもう未経験者ではありません。
もし未経験であることで悩んでいるのであれば、制作現場で経験を積むために派遣という形でWebデザイナーになるというのも考えてはどうでしょうか。派遣から大手の正社員も可能ですし、いつか独立してフリーランスになる事も可能です。
まとめ
ここまで紹介した内容の習得が自分では難しいと感じたら、オンラインスクールや講座で近道するのがおすすめです。
オンラインスクールだと、独学では分からない箇所を周りを気にせず質問出来ますよ。また、派遣という働き方を足掛かりにするのも方法の1つです。
note
過去実際に自分がやって良かった勉強法や、周りの人を見て今の自分ならどうするのかまとめました。
もちろんオンラインスクールも良いです。その場合自分に足りないスキルが何か理解してから探しましょう。