Webデザイナーの必要なスキルとは?未経験者でも雇われるかも!

Webデザイナーの必要なスキルとは?未経験者でも雇われるかも! webの仕事(デザイナー、プログラマー)

この記事はこんな人にオススメです。

・Webデザインを職業訓練校で学んで働きたいと思っている
・Webデザインを独学で勉強しており、働きたいと思っている人
・Webデザイナーやコーダーとして、制作会社で働きたいと思っている人

現在Webデザイナーとして働く私が必要なスキルについて紹介をします。

なぜ紹介をするのかといえば、「私みたいに遠回りをしてほしくない」からです。

私は職業訓練校に行ってから4年ほど色んな仕事で下積みをしました。

「4年ですよ、4年も…」そんな状態では、Webデザイナーになりたいという気持ちもすり減るので、手っ取り早くスキルを身につける方法についても紹介をします。

プロのデザイナーも、一緒に働くなら、これぐらいのスキルを身につけて欲しいというものを紹介しています。
ですので、身につけることで自然と就活にも有利になります。

 

Webデザイナーに必要なスキル コーディング(コーダー)編

まずは、ホームページをPCやスマホで見れるようにしなければ話になりませんので、HTMLから学んでいく必要があります。

HTML 必要度★★★★★ 難易度 ★

ホームページの骨組みとなるのがHTMLです。
文字や画像をHTMLで出力します。

当たり前ですが、HTMLができなかったらコーディングができないですから。

といってもHTMLは簡単で、
バージョンは、今HTML5が普通なのでそちらをマスターしましょう。

Progate(プロゲート)でも、2~3周ぐらいすればキッチリ覚えられるので是非覚えましょう。

ちなみに、キレイに構築できた方がSEOでもプラスとなりますので、そちらはまた別の機会に記載します。

CSS 必要度★★★★★ 難易度 ★★~★★★★

CSSも必ず必要ですね。

HTMLが文字などの骨組みと写真を出したものに対して、色をつけたり配置を変えたりします。
現在はCSS3がマストですので、そちらを勉強しましょう。

色とか変えなかったら20年前ぐらいのサイトになるで…

これもprogateで基礎を身につけるのですが、それだけは不十分で実際に3サイト分ぐらいコーディングをする必要があります。

CSSって案外難しいんです。

その理由はレスポンシブデザインですね。

PCのコーディングだけなら、簡単にできたーと思うのですが、別の端末でみたら大きさがバラバラで見るに耐えない…なんてことにも。

レスポンシブコーディング 必要度★★★★★ めんどい度 ★★~★★★★★

レスポンシブとは、サイトを見た時にPCでもスマホ(iPhone、Android)でもタブレット(iPad)でもキレイに見せることですね。

こちらも簡単じゃーんと思いきや、スマホで見るとガッタガタ!崩れている…

どちらかと言うと難しいというより面倒くさいですかねw

jQuery(JavaScript) 必要度★★★★ 難易度 ★★★★

jQueryも基礎をマスターしている方が良いと思っています。

ハンバーガーメニューをクリックしたらメニューが表示されるとか、メニューをタブに分けて表示させるとか、スクロールされてきたらフワッと表示をさせるなど、Webサイトを見ればほとんど搭載されています。

つまりホームページが欲しいと思っているお客さんからすれば、普通にあるものと思っているから→そりゃあ搭載して欲しいですよね。

もちろん有用な部品をコピペなどで取ってくるなども可能ですが、割と細かいカスタマイズが必要なのでjQueryはマスターしている方がいいです。

ちなみにJavaScriptは必須という訳ではありません。

WordPress(ワードプレス) 必要度★★★★ 難易度 ★★★

世界の37%のWebサイトがWordPress(ワードプレス)となっています。

私も携わっているサイトは、ほぼWordPressです。

無料のCMSですからね、そりゃあみんな使うわ!という感じです。あと、有名なブロガーマナブログのマナブさんもWordPress使っていますね。

但し、セキュリティ面が弱点なので、セキュリティ面を強化するようにしましょう。

ワードプレスの便利な点は、ずばり更新情報の機能とお問合せフォームやSEOが楽という点です。
プラグインというものを使って搭載をします。

また、ヘッダーごとの部品を呼び出したりして使うようになっているので、あとの修正もしやすいです。

ちなみにまずは、無料のテーマで触ってみて、固定ページや投稿ページ、パーマリンクの概念を知ってから自分でテーマを作る方が良いでしょう。

PHP 必要度★★★ 難易度 ★★★★★

PHPはほとんど使う機会はないのですが、WordPress自体がPHPで作られています。

WordPressで細かな設定をする場合、PHPが必要になるよ!

そうなんです、ワードプレスで細かなカスタマイズをする時はPHPを使う必要があるわけです。

 

WebデザイナーやWebデザイナーになりたい人にオススメの記事はこちら

・「Webデザイナーは未経験からなれる!職業訓練校、スクールに行く必要は?

・「Webデザイナーの必要なスキルとは?未経験者でも雇われるかも!

・「きつい?つらい?現役webデザイナーが仕事内容について解説

・「webデザイナーの給料は安い?年収を上げる&キャリアアップの方法

・「Webデザイナーはいなくなる?オワコンとして消える説について

 

Webデザイナーに必要なスキル デザイン・ツール編

Webサイトのデザイン 必要度★★★★★

なんと言ってもWebデザイナーですからね、Webサイトをデザインできなければ意味がありません。

オシャレにしたいよね!

たとえ、名刺やチラシをうまく作れても、Webデザインは別物ですから、WebサイトのデザインをしなければWebデザインの能力は上がりません。

勉強中の人に伝えたいことは、できるだけ今のトレンドを取り入れた方がよいということと、奇抜じゃなくても普通のデザインの方が中小企業では需要があるということですかね。

バナーのデザイン 必要度★★★★★

バナーのデザインができることによって、様々なことに対応ができるようになります。

大人気なのがバナーのデザイン、よく模写をしている人もいますね!最初は小さな画像でも時間がかかるのよねぇ。プロだと2時間以内の制約がつくかな…

バナーはもちろん、広告に使用する画像、サイトのメインビジュアルなど様々な箇所も作れるようになります。

けっこう初心者に人気なので、最低限身につけておく必要があります。

LPページのデザイン 必要度★★★

LPページ(ランディングページ)は、広告のリンク先として使用されるページのことです。

LPページは1ページで5万円~20万円、プロだと15万円~40万円ぐらい。フリーランスの一つ目の仕事して受けている人多いんですが、成果を上げなきゃ意味ないので難易度高いっす…

フリーランスで仕事を受ける時に便利だってことで勉強する人は多いですが、Webデザイナーからすれば難しいイメージです。
※時間もかかるし

それにランディング成果も問われる仕事ですからね。
作ってもらったランディングページじゃ全然売れなかったってことになれば、次の仕事はこないんですよね…。

ソフトの使い方

続いてソフトの使い方を紹介します。

Adobe illustrator(イラストレーター) 必要度★★★★ 但しデザインのメインにするなら必要度★★★★★

通称イラレですが、何に便利ってベクターデータを扱える点が素晴らしいですよね。

ロゴ、名刺を制作する時に大活躍で、イラストレーターを使う人が多いのではないでしょうか?

私はメインがイラレを使ってのデザインとなっていますので、一番使っています。

何が便利って文字とかもまとめて選んで拡大とかがXDなんかのツールより断然しやすいってことですね。
アプリの重さは普通ですね。

Adobe Photoshop(フォトショップ)  必要度★★★★★

通称フォトショは、写真の加工をする際には必ず必要となるソフトです。

モデルのほくろとってとか、人物切り抜いてとか、写真から電線消してとか、料理の見た目をもっと美味しそうに画像を加工してなど、写真の加工には必須のソフトです。

どんだけ世の中盛られてるんだ…と気づきますw ※あなたの好きな女優やモデルも残念ながら盛り盛りされちゃってます。

ちなみにこちらでデザインする人は、多いのですが私は使っていません。
なぜならアプリがめっちゃくちゃ重たいからです…。

Adobe XD  必要度★★~★★★★

最近人気なのがXDですね。

以前adobeではFireworksという、ホームページデザインのソフトがありましたが、こちらも同じようなもんです。

使いやすいは正義!でも、詰まる可能性あるかも。

特長としては、めっちゃ軽いです。
イラレよりも全然軽いです。
また使いやすいですね、職業訓練校とか、どこかで習うなら今は断然XDの方が多いのではないでしょうか?

Adobe Dreamweaver(ドリームウィーバー) 必要度★★

通称ドリ サイトのコーディングの際に使うソフト(エディター)ですね。
HTMLもCSSもJavaScriptもPHPもこのソフトで書けます。

便利な点とすれば、FTPソフトもついているという点です。

コードを編集して、ワンクリックでアップロードができるので私はドリ使いのままです。

でも、プログラマーからすれば、「えっドリームウィーバー使ってんの?w」って感じで若干バカにされる感じで言われることも。

だって無料でATOMとか優秀なエディターがありますからね。
でも私はAdobeの契約しているし、Dreamweaverでいいの!w

 

FTP

FTPソフトも使えるようになっておきましょう。
FTPソフトとは、サーバーに接続をし、データをアップロードしたり、ダウンロードしたりするものです。
無料だとFFFTPが有名ですが、色々機能不足のフリーソフトなので、私はFileZilla(ファイルジラ)を使っています。

 

他にもあれば良いスキル

サーバー、ドメイン操作 必要度★★★★

サーバーを触ることはWeb制作をする上では外せません。
サーバーにログインして、メールアドレスを作ったり、SSL化したり。
レンタルサーバーを借りて学びましょう。

ちなみに初心者は、さくらサーバーをオススメしており、サイトのアクセスが多いところにはXserverやMixhostですね。

あのブロガーのマナブさんもMixhostを使っています。

SEO 必要度★★

サイトには人が来なくちゃ意味がありません…。
私集客もできますよなんて言うと、制作重視の会社なんかでは重宝されます。

アナリティクス、サーチコンソールの解析 必要度★★

SEOにも必要なスキルとして、アナリティクスとサーチコンソールの分析ですね。
そもそもなぜ人が来ていないのか?データをもとに分析をする必要がありますので。

ライティングスキル  必要度★★

Webデザイナーとして、サイトを作る際は、いかんせんライティングする機会が多いですね。
もちろん優良な会社様は、テキストは自分達で作ります!とかプロのライターを使ってもいいですよ!となるのですが…
Webサイトのことがあまりわからない中小企業のおっちゃんは、えっそんなん一緒にやってくれへんの?となるわけですよ。
いやいや、ライティングは別料金ですから…という話が通じるか通じないかは、その人の器量の良さと懐具合の豊かさによると思います…w

写真の撮影スキル  必要度★★

なぜか写真を撮るハメになりがちな、Webデザイナーです。
プロのカメラマンを雇って写真を使いたいところですが、中小企業の人には通じない場合も…
こればっかりは、うまくは撮れないですよと保険をかけて撮影した方が安全です。
でもね、写真を撮れることでメリットはすごくあるんです。
構図を勉強できるとかね。
構図を覚えるとデザインにも活きてくるわけです。
Webデザイナーの趣味といえば、カメラの人も多いですよ。

Webデザイナーに必要なスキルを紹介しましたが、いかがでしたでしょうか?
多いじゃねえか!と思われた人もいるかもしれませんが、そう結構Webデザイナーは範囲が広いのです。
ここ10数年の業界ですからね、技術が出てきては覚えることも増えるのですよ。