Webデザイナーという仕事は制作だけでも範囲が広い仕事なので通常業務をしてるだけでもそれなりに書籍を買う必要が出てきます。
私の場合はデザインはある程度フリーランスの時やインハウスデザイナーだった時にできていたのでデザインに関して事前に勉強する必要はありませんでした。主にフロントエンドに関しての本が多いです。
レスポンシブwebデザインの基本を勉強する
イマドキのweb制作の現場がほぼ9割がレスポンシブwebデザインでデザインとコーディングすることを求められます。
私はBootstrapのフレームワークなしでもコーディング対応できるようにおさらいとして購入しました。
でも会社員だった場合はゼロからCSSコーディングして構築することは滅多になく、自分でゼロから構築する場合は時短化のためにBootstrap、他のCSSフレームワークでwebコーディング対応してる気はします。
UI/UXデザインやプロトタイプ作りについても学んでおく
コーディングだけを頑張って勉強すればwebデザイナーとして仕事できるのか？と言われたら決してそうでもなく、当然ながらゼロからwebデザインを制作する仕事もあります。
▼ゼロからデザインする場合のweb案件の制作の流れ
(1)トップページのデザイン制作
(2)下層ページデザイン制作
(3)コーディング制作
(4)サイトを開発環境へアップする
(5)テストサイトに問題なければ本番サーバーへ納品する
(1)のトップページデザインの時点で出来の悪いデザインを提出しまうと案件進行がデザインの修正で止まってしまいます。
Webデザイナーはデザイン力も求められる職業だとやってみるとよくわかります。
デザインがスムーズに進むと後工程のコーディングの流れも早いです。
イマドキのweb/UIデザインでおススメなデザインツールはAdobeXDです。
共有リンク、プロトタイプ、プロトタイプの動画作成も１つのデザインソフトで完結するので学習コストも少なく、クライアントとのデザイン共有も上手くいきやすいです。
私が働いてるweb制作会社もメインで使用しています。
昨年から私個人のフリーの案件ではXDを使用するwebデザイン制作も増えてきました。
Adobeソフトなのでクライアント企業も多く導入してる点でAdobeXDの方が需要はありそうです。
何よりPhotoshopやIllustratorよりもXDの方がコーディング作業がしやすいため、webデザインはUIソフトを使用する方が効率的です。
WordPressは静的サイトからオリジナルテーマを作れるようにしておく
webデザイナーはオリジナルのWordPressテーマ制作を求められる事があります。
会社によってはWordPress案件を中心に請け負ってる制作会社も多いです。
デザインをカンプから制作して静的サイト(HTML/CSS/JS)コーディングしてからWordPress組み込み作業を行います。
クライアントの要望に応えられるのは静的サイトからWordPressテーマを作成する方法だと思います。静的サイトだとカンプからのデザインの再現率も高いですし。
「このページは記事ページ、このページは固定ページにする」など細かいカスタマイズも静的サイトからコーディングする場合は自由自在です。
そのため、下記の本のように静的サイトからWordPressテーマ作る方法を学ぶ事をおススメします。
共同作業ができるようにGitも使えるようにする
web制作会社に入ると必ずGitは使用します。
私はコマンド打つのはわからないのでSourcetreeというGUIツールでコードをGit管理してます。
コーディング失敗したり、コーディング後にクライアントにコーディング前の方がよかったと言われた時に前のデータに簡単に戻せるので便利です。
私が働いてる会社はBitbucketを利用しています。
私も個人的な開発でもUIがわかりやすくて日本語対応してるBitbucketを主に利用しています。
下記の本が漫画つきでわかりやすくてオススメです。
デザイナーにあまり必要はないかもしれないけどJavaScriptの基本も勉強しておく
AmazonやTwitterで評判が良かった本なので購入しました。
webデザイナーはここまでJSのプログラミングまでは求められる事はありませんが（WordPressのPHP/HTML/CSSのコーディングが主な仕事なってる会社が多い）JSはここまでできるということくらいは覚えておいた方がいいかもしれません。
大体webデザイナーだとJSそのものよりも、jQueryプラグインの方を頻繁に使用する機会が多いです。
webデザイナーとフロントエンジニアの違い
webデザイナーとフロントエンジニアは似て非なる職業です。
webの職業の違いについて認識した上でスキルアップの勉強を始めた方がいいと思います。
Webデザイナー
担当分野：主にwebのビジュアルデザイン、HTML・CSSのコーディング、Javascriptの実装。
分業制の会社はデザイン作業のみを担当する場合もある。
会社によってはイラスト、DTPデザイン、グラフィックデザインも担当する場合もある。
フロントエンジニア
担当分野：デザイン以外のHTMLのマークアップ、CSS設計、Javascriptの実装や開発、PHPの実装。
フロントエンドのコーディング技術は高いが、対応できるのはデザイナーと同じくシステムやサーバー以外のフロント部分のみ対応する。
分業制ではない少人数のweb制作会社の場合はデザイナーとフロントエンジニアの両方を兼ねた人材を募集していることが多いです。
地方のweb制作会社の場合はデザインもコーディングも1人でできるWebデザイナーを求めています。
地方は都会のフロントエンジニア、UIデザイナーのような各専門分野に特化した求人はほとんどありません。
地方はwebデザイナーは人件費の関係でwebフロントエンジニアとデザイナーを一緒にしたような扱いにしてるのではないかと思います。
こういう会社で働く場合は広く浅くwebの勉強するようになります。
今、私が働いてる会社がこのタイプになります。
デザイン専門、フロントエンド専門に特化したいのであれば地方ではなく都会の東京周辺で働く方がマッチした求人は多いと思います。
ただ、都心部には未経験で勤められる会社はほぼないと思います。
未経験者は面接で落とされるか、採用されても周りのスピードについていけずに2、3ヶ月の試用期間で落とされる‥というパターンになります。
昔は私も未経験のうちはそうでした。
地方でも都会でも制作会社は未経験は不可なのでweb系の仕事に就きたいなら一般企業のインハウスwebデザイナー、web担当者からスタートした方がいいかもしれません。
一般企業のデザイン担当者として勤めたら社内の販促物のチラシやポスターも作ったり、webは商品販売のLP、バナーを作成するなど、様々なwebとDTPデザインを担当する事になります。
媒体問わずデザイナーが期待されてるのはあくまで成果の出るデザインであるためデザイン実績の多いデザイナーの方が仕事獲得するにも有利だと感じるわけです。
フロントエンドのコーディング技術は後から案件やりながら覚えても全く問題ないと感じました。
基本程度のHTML/CSSの知識があればwebで検索して調べたり、本読みながら調べてサイトのコーディングはできます。
むしろ、webデザイナー/UIデザイナーになるには先にデザインの経験値を積む方が重要ではないかと思います。
UIの設計から考えてコーディングしているのであればフロントエンジニア(コーダー)もUIデザインに参加してるという見方もできるので、デザイナー志望なのにコーディングばかり担当させられるからと不満を感じて悲観的になる必要はないんじゃないかと思います。
今後はwebで静止画像デザインしかできない人の方が仕事は減っていくから、コーディングできるデザイナーの方が残ると思います。
これからはUIデザインのプロトタイプを数多く作って検証できるデザイナーの方が求められてると感じます。
投稿者プロフィール
最新の投稿
WordPressのランディングページ（LP）制作を依頼してみませんか？
もちろん通常のHTMLのLP制作の対応も可能です。
WordPressのランディングページ（LP）はワードやパワポ感覚で編集が簡単に行えるためお客様ご自身で修正や更新が行えます。
