たまブログ-男の美容とweb副業-

男の美容、webの副業情報などを紹介します

給料上げたいwebデザイナーにおすすめの本14選2018版と必要スキル

こんにちは、webデザイナー向けに実務に使える本をおすすめ度別2018年版を、現役webディレクター(大手企業勤務)が紹介します。webデザインに関わる本は、デザイン制作の実務や実務に役立つ理論よりの本や、事例集、ディレクション寄りの話やUXデザイン、ABテストの話など多岐にわたります。おすすめできない本もありますから、目的に応じて購入検討がよいと思われます。

 

f:id:captainpentagon:20181022231303j:plain

 

目次

 

webデザイナーの実務内容と必要な理論

webデザイナーの実務と必要な理論を抑えて戦略的に、給料をあげていくことができます。企業はどのスキルだとどんな給与や時給単価にするか決めているためです。実務でいうと、多くはデザイン制作になり、一部さらにスキルレベルが高いと、アートディレクションやLPやバナーのデザインだけでなく実装が出来ると好まれます。また、メンバーが多いチームや企業だとマネジメントやチーム運営の経験があると時給や給料が上がるのがwebデザイナーのキャリアの一般例です。

 

 

www.marunouchi.tech

 

 

webデザイナーの実務

実務をさらに突き詰めると、デザイン制作においてはツールの利用などもスキルとして含まれてきます。デザイン制作においては、多くのwebやインターネットサービスの企業では、Photoshopやイラストレーター、そしてSketchやInvisonを用いることが多いです。ツールなのでそこまで難しくないため習熟すればだれでも使いこなせます。

 

webデザイナーに必要な理論

また、webデザイナーがキャリアアップや昇進して給料や時給単価を上げたい場合は、理論的な知識も持ち合わせるとより納得感が高まり、上昇傾向にあります。例えば、色彩理論や情報設計の理論、そしてマネジメントの理論も雑学程度に知っていれば好印象ではないでしょうか。マネジメントはどちらかというと、経験を通して自分なりの考えを持っているほうが重要だったりしますが。 

 

www.youtube.com

 

これが出来ればwebデザイナーの市場価値(時給単価)があがる

では、早速webデザイナーが市場価値や時給単価、給料を上げたい場合に持つべき本や必要スキル別に重要度別でご紹介します。既に持っている場合でも、どのような視点で読むとより実務へ活用できて時給を、給料を上げていけるかも合わせて紹介していきます。これは現役webディレクターの5年の経験から抽出した一例になります。

 

アートディレクション(おすすめ度:中)

まず、アートディレクションです。アートディレクションとは、デザインやアートの部分でのディレクションです。ディレクションとは、指示や調整を指しますが、具体的には個別のデザインの制作というよりも全体的なルール、ガイドラインの制作が該当します。

 

トンマナやIAやデザインパーツなどの部分で、大枠のルールなど順守すべきものをガイドラインとして制作するというような活動が代表的です。こちらが出来ると、より市場価値があがり給与や単価があがる傾向が高いです。

 

LPやバナーの実装(おすすめ度:高)

最も効率的に確度高く給与を上げたい場合は、LPやバナーの実装までできると完璧です。というのも、多くの企業は資金が足りないため、デザイナーとしてもFE(フロントエンドエンジニア)としても業務が出来ると確実に給与はあがります。

 

その一例としてわかりやすいのは、デザインではなく実装もできる人材です。かなりスタートアップに好まれると思います。なかなかここまで出来る人材はいないため、出来れば時給1.5倍は狙えると思います。ぜひ目指してみてください。 レベル的にも、高レベルではなく簡単なhtml css JSを使えるレベルで大丈夫です。

 

 

www.marunouchi.tech

 

 

 

www.marunouchi.tech

 

 

マネジメント(おすすめ度:低)

ここはそこまで重要ではないです。そして、知識よりも経験を重視されます。なので、リーダーとして数名のメンバーを率いた経験を持てるとよりよいです。そういった機会があれば、ぜひ掴み取りましょう。 

 

www.youtube.com

 

 

www.marunouchi.tech

 

 

給料上げたいwebデザイナーにおすすめな本2018編

では早速、先ほどご紹介した給料をあげるために必要な好まれるスキル別におすすめの本をご紹介していきます。重要度別に紹介しますので、予算が限られていれば高いものだけ購入するのがおすすめです。 

 

実務×デザイン制作

まずはともあれ、webデザイナーであればデザイン制作の実務面が第一優先で強化すべきです。デザイン制作では、IA(情報設計)や色彩理論、そしてwebならではのデザインパーツの3つに分かれます。

 

IA(情報設計)(おすすめ度:高)

IA(情報設計)では、IA/UXプラクティスがおすすめです。こちらは、IAやUXの基礎実務的な部分を実例を通して紹介しています。特に現代はモバイルファーストな時代ですから、モバイルに注力されているところもおすすめです。amazonでの評価も高いところも好感度が高いです。本当に実務向けだと思います。

 

 

情報設計に馴染みの無い人には少々とっつきにくい感じも受けるが、UX デザイン を本格的に学ぶには、情報設計は避けて通れない。本書では、IA→UX→デザイン→運用と、わかりやすく結びつけて解説してある。
UX を学んでも組織内で活用できないという悩みがUX初学者には多いが、実際の現場でどのように運用されているのかも実体験を元に書かれてあるので、自分の組織の中でUXを導入したいというUXリードの立場の人はバイブルとなるだろう。

 

色彩理論(おすすめ度:中)

次は色彩理論です。きれいな色の本という本を紹介します。色彩もセオリーがあって、理論として身につけると実務にもよく活かせますし、デザインの提案時に説得力のある形で提案が可能です。そこまで重要性は高くないですが、知っているとデザイナーとして一目置かれることでしょう。ディレクターだったりエンジニアはこの辺は全くわかっていませんので笑

 

 

デザインパーツ(おすすめ度:高)

めちゃくちゃおすすめです。というのもどのようなwebデザインがユーザーに好まれるかというのは、実際に施策を打って効果検証しないとわからないものなのですが、こちらの2万回のA/Bテストからわかった支持されるwebデザイン集では、事例を元にどのようなwebデザインが好まれるかを説明されているからです。ABテストをしたことのないwebデザイナーでもどのようなwebデザインが好まれるか、どれくらいCVRが変わるかといったところを知識として得られます。

 

概ね、どのwebサイトでもユーザーに好まれるwebデザインは近い性質があるため、これ一冊だけでも相当量の知識を得られます。また理屈や理由も書いているため、実際に現場でwebデザインの提案をする際にも参考になるでしょう。こういった知識も持つwebデザイナーは現場で大変重宝されますよ。

 

 

ABテスト自体の必要性をわかっているのに、それをクライアントにうまく伝えきれてない。ビジュアルが豊富で見やすく、クライアントに伝えやすい事例がたくさんあるので改善活動につなげられます。

理論×デザイン制作

 

次はより理論的な部分になります。実際現場で働く場合は、セオリーを知っていると応用が聞きますし、骨太の提案が可能になるため時間と予算があればぜひとも押さえておきたいところです。

 

IA(情報設計)(おすすめ度:低)

 

まずは情報設計からですが、馴染みある方も多いでしょう。動物で有名なオライリーシリーズです。情報アーキテクチャでは、しろくまさんのようですね。こちらは、かなり骨太で学術的な理論の部分もそうですし、実務ではどう行われているかも解説があります。

 

かなり厚い本ですし、高めですが多くの人が持っていたりします。マニアックな方向けと言えるでしょう。

 

 

色彩理論(おすすめ度:中)

 

色彩理論は、かなりマニアックな本を紹介します。その名も色彩の学校です。こちらは色彩つまり色の扱い方で、何がどう変わるかを実験形式で書かれております。そのため、色彩理論がどのように理論かされているのかその背景的な部分から探求が可能です。めちゃくちゃマニアックなだけに、ここまで読んでいれば相当な物知りなwebデザイナーになれるに違いありません。というレベルです。

 

 

デザインパーツ(おすすめ度:高)

 

こちらはwebデザインのあらゆるところを基礎的に解説されています。webデザインの基礎もそうですし、情報設計や色彩もあります。いちばんよくわかるwebデザインの基本きちんと入門、という名に恥ずかしくないレベルです。アマゾンの評価も高評価です。

 

 

この本は良かった。
オールインワンっていう言葉で理想だけど、中々その言葉を体現するツール(ひょっとしたら人も!?)って無いもんだけど、この本はまさにオールインワンなWEBデザイン本だ。
っていうか、動画や紙媒体のデザインをする人にもとても参考になると思った。

内容はまさにてんこ盛り、レイアウト、配色、写真、タイポグラフィー、HTMLとCSS、インタラクションで、そのどれもが豊富な図版と詳細な説明、さらに読みやすい誌面でスキがないのだ。
※特に参考に参考となるのが、事例として豊富に掲載している実際のウェブサイトのトップ画面。

入門と言う割にはページ数は結構あるけど、飽きない内容で良かったね!

実務×ツール

 

お次は、webデザイナーに必要なツール編です。筆者はweb業界に身を置いていますが、ここ最近は小さめのスタートアップはもちろん大手企業でさえもwebデザインに置いてツールに投資しています。なぜ投資しているか?でいうと、生産性が劇的に変わるためです。今ではエクセルでワイヤーフレームを書く企業は少ないんじゃないでしょうか?

 

Photoshop(おすすめ度:中)

 

まずはPhotoshopです。Photoshopは比較的どの企業でもwebデザイナー向けにライセンスを購入している場合が多いですね。また、いろんな使い道があるため用途も多彩なのが特徴です。

 

 

こう言うソフトをいじるのは万年初心者でPhotoshopは持っていませんが、友人が使っているのを一緒に読みながら操作してみました。
素直に初心者でも解りやすく、画面も掲載されているので解りやすくて良いです。
自分もPhotoshopをいじるのは初めてでしたが、ヘタでも本書を見ながら写真の編集をして結構楽しめました。
Photoshop自体が結構高額で色々機能があって使いこなすのが大変ですが、この本は一般的に使いたい機能や、編集方法が色々掲載されていて、本当に初心者には丁度良い物だと思います。基礎を確り説明すると言う意味ではかなり丁寧なほうかな。
ただ、友人曰く「機能に関しては入門書として大体説明されているけど、画を描くコツなどの本ではないかも」という事です。
なので画を描くのであれば、本書と別にイラストレーション用の本を同時に活用すると良いと思われます。 

イラストレーター(おすすめ度:中)

 

こちらはイラストレーターとPhotoshopの両方教えてくれるところがおすすめですね。なので、コスパが良いです。イラストレーターもPhotoshopと並んで、用途が様々なのでどちらかを使えると実務的には良いでしょう。

 

 

 

一番連携して利用する2つのソフトを一度に解説してくれているので、読みやすくわかりやすい。 

Sketch(スケッチ)(おすすめ度:高)

 

きました、Sketchです!Sketchでピンときた方は、結構ツール導入が進んでいるweb企業で勤務なさっていることでしょう。このツールは、webデザイン業務を全般的に業務改善できるツールです。使えるとよりいろいろな企業で活躍できるでしょう。面接での印象も好感度は高いです。Sketchは今まエクセルなどでワイヤーフレームを書いていた場合は、実際の画面でどのように見えるかが曖昧だったため適切な修正や改善、レビューができないという問題がありました。

 

 

ただ、Sketchができたおかげでもっと実際に近い画面でのデザインが可能になるためかなり生産性が上がります。さらに、web企業っぽさが出せるのもいいところです。

 

 

 

ちょっと操作方法の説明が不親切かなあと思いますが、日本語の解説書はレアなんで星5で。

Sketchの最大のウリであるSymbolとShared Styleの活用方法がしっかり解説されています。

あとはプラグインとか関連サービスの紹介も。

タイトルに「UIデザイナー」と入っていますが、Sketchのライセンスを持っているならデザイナーでなくても有益な本です。
画面サイズの異なるデバイスが溢れる時代のデザインはこうやる、効率化のためにデザイナーがどういうことを考えているか、というのは知っておいて損はないと思います。

 

実務×アートディレクション

 

では、ツールの次はアートディレクションです。いわゆるこれができると給料高くなる、市場価値が高まるの1つがアートディレクションです。アートディレクションは結構定義が曖昧ですが、ようは個別に制作するんじゃなくて全体的なデザインの考え方をディレクションする能力を指します。

 

アートディレクション(おすすめ度:中)

 

こちらがアートディレクションで、おすすめの本です。というかアートディレクションは本で伝えるのが難しいためか、あまり本がないです。アマゾンのレビューも高いですし、アートディレクションで身に付けたい内容が30も書かれているためとても豊富なディレクション能力を学べます。

 

 

30の型として、アートディレクターに必要な考え方がわかりやすく書かれています。
ただ抽象的に「これが大事」というのではなく、水口氏が実際に作った広告、実際に世に出ている広告に沿って書かれているため、
その型がどんな場面で大事なのかが理解しやすくなっています。
また、その広告のビジュアルも章ごとに多く添えられているため、文中の言葉を確認しやすいです。
教科書として、悩んだ時に読み返すなど、職場に置いておくと良さそう。
アートディレクターを目指す人なら必読の一冊だと思いました。

実務×プログラミング実装

 

またアートディレクションに続いて、時給や市場価値、給料が高くなるための必要なスキルのわかりやすい例が来ました。プログラミングです。これができると、FE(フロントエンドエンジニア)として食べていくこともできます。一般にwebデザイナーとFE(フロントエンドエンジニア)であれば、FEの方が給料が高い傾向があります。

 

しかしながら、webデザインもできてある程度プログラミングもできると、なお高くなることは言わずもがなです。

 

html css(おすすめ度:高)

 

フロントエンドで需要のある言語は決まりきっていて、まずはhtmlとcssです。LP制作であれば、この2つができればまず問題ないです。なのでぜひ習得をおすすめします。こちらは両方学べますし、webデザインも学べるためとても便利です。 

 

 

今まで、ネットの情報を見てHTMLやCSSを、いじっておりました。
ほとんどコピペです。

そんなレベルの私にとっては、一番知りたい部分でした。
まだ一度さらっただけなので、あと2〜3回はやってみようとおもいます。

私と同じように、ネットの情報を元にコピペでHTMLやCSSを、
いじってるだけのレベルの人にもおすすめです。

js JQuery(おすすめ度:中)

 

htmlとcssができればあとはjs(JQuery)ですね。これもできればほぼFEとしてのキャリアも見えてくるレベルですし、LP制作やバナー制作だけでなくいろいろな動的ページも任せてもらえるレベルです。時給単価もかなり上がって貴重な人材になれます。

 

 

Javascriptに苦手意識があって動きのないウェブしか作れなかったので、真面目な書名にも惹かれて買いました。いくつもJavascriptの本は買いましたが、最初からあまり実用的でないつまらない練習ばかりが続いて読み疲れる他書に比べ、最初から見栄えの良いサンプルを動かすことから始めるので楽しめます。半分くらいを一気に読み進めましたが最後まで行けそうです。欲を言えば画像表示ばかりでなく、テキスト表示の様々な例を解説してくれていたなら、企業のイントラネットサイトなどにも応用が利いたと思います。また主役のJavascriptだけでなくhtmlやCSSの解説も各所にあり、それらに精通していない初心者でもJavascriptと同時にウェブ作成のコツを得ることができると思います。

実務×マネジメント

 

あとはマネジメントですね。これはもはや管理職としてのスキルに近いですから、後回しでも良いでしょう。

 

マネジメント・チーム運営(おすすめ度:低)

 

 有名なドラッカーさんです。サラリーマンであれば持っておいて損がないような代表作を、エッセンシャル版で学べます。余裕があれば読書感覚で読んでもいいでしょう。

 

 

理論×マネジメント

 

あとはマネジメントをより理論的に学べるともはやwebデザイナーとしては最強ですw

まあでもこれも必要度が高いかでいうと高くはないかなあというのが正直なところですから余裕があればで構わないと思います。

 

マネジメント・チーム運営(おすすめ度:低)

 

最近筆者もマネジメントで難しさを感じていますが、部下を味方につけるかが良いマネジメントができるかの分岐点なようにも感じています。こちらの本はwebデザイナー向けではないですが、それでもマネジメントにおいて重要な共感をテーマに解説がされています。人間は感情の生き物ですからね。

 

 

自分の仕事のバイブル本が見つかりました!!
理論としても分かりやすく、また相手の心に寄り添って応援する姿勢に共感しました!まさに共感マネジメント!!話も具体的でイメージもしやすく分かりやすかったです!仲間やたくさんの人に読んでもらいたい素晴らしい本です。ここで学んだ事を生かして、仕事が楽しくてしょうがない自分と仲間をたくさん作りたいです!

 

 

給料上げたいなら実務経験を増やすのがなんだかんだ近道

 

ここまで給料を上げるためのwebデザイナーに求められるスキルとそのスキルを得るための本をおすすめ度別に紹介しました。どれもweb大手企業で5年働く筆者の経験を元に紹介しています。

 

本をソリューションとして紹介しましたものの、本当に給料をあげたい、市場価値をあげたいということであれば本を読むより実際に就業したり、よりレベルの高い企業へ転職する、あるいは副業を通して実務経験を増やしつつ、収入も増やす方が得策だったりもします。

 

 

年収が上がるで有名なデザイナー専門のReDesignerという転職サービスでは、デザイナー専門というところを生かしてレベルの高い面談をしてくれます。また転職はハードル高いであれば、副業という形で週1などの片手間で副収入を得つつ経験を増やすという戦略もありますね。どのみちやはり本で得た知識を実務で生かして実績を出しつつ経験を増やすのが王道であります。これをやること自体は非常に投資回収の高い戦法です。webデザイナー向けの副業案件では、下記の記事を中心に解説しています。

 

 

www.marunouchi.tech

 

副業ってどうなの?できるの?と副業事態に疑問がある人は、筆者が副業で毎月10万以上を得るに至る体験談を書いている記事もぜひ読んでみてください。始めれば勝ち組になれます。お金で困ることが減りますよ。

 

 

www.marunouchi.tech

 

こちらも別の副業の体験談です。両方継続しています。

 

 

www.marunouchi.tech

 

webデザイナーのためのおすすめ本と必要スキルまとめ

まとめますと、webデザイナーは比較的必要なスキルや知識が明確なので頑張れば頑張っただけ自分に帰ってくる可能性が非常に高いです。まずはできるところから初めてキャリアアップと収入アップを実現していきましょう。

 

 

www.marunouchi.tech

www.marunouchi.tech