今回は、Webデザイナーについて書いていこうと思います。
これからWebデザイナーになりたい、Webデザインに興味があるという人は参考にしてください。
ちなみに私はWebデザイナーの仕事を約３年ほどしています。その経験から色々なことをお伝えしていきます。
目次
Webデザイナーってどんな仕事？
一口にWebデザイナーと言っても、会社によってその業務領域は異なります。
デザインだけをする人もいれば、HTMLやCSS、JavaScriptなどを使ってコーディングまで行う人、クライアントとの打ち合わせなどをするWebディレクションを兼ねる人もいます。
任される範囲は企業の規模や考え方によって違います。
ちなみにHTMLやCSSを専門とする人はコーダー。
JavaScriptやそのライブラリ・フレームワーク使った実装までをする人をフロントエンドエンジニア。
クライアントと打ち合わせや予算計画の立案、デザイナーやエンジニアに指示を出す人をWebディレクターと言います。
Webデザイナーの具体的な仕事内容
WebデザイナーはWebサイトのデザインが主な仕事です。
よりWebサイトが見やすく・使いやすくなるようにデザインしたり、オシャレに装飾を施したりします。
PhotoshopやIllustratorなどのデザインソフトを使い、デザイン案を作って、クライアントに提案をします。
クライアントの確認でOKになったら、次はHTMLやCSSでコーディングを行います。
Photoshopなどで作ったデータから、必要な画像を書き出して、それをWebサイトに表示させます。
HTMLやCSS、場合によってはJavaScriptまで実装したらテストアップして、クライアントにチェックしてもらいます。
これで問題なければ、データを送るかサーバーにデータをアップして、納品となります。
使うデザインソフト
ここではWebデザイナーが使っているデザインソフトを紹介していきます。
Photoshop
多くのWebデザイナーがAdobeのPhotoshop（通称フォトショ）というソフトを使ってデザインしていきます。
Photoshopはビットマップ、つまりドットの集まりで画像を表現します。
Webサイトはドット（ピクセル）の集まりでできていますので、その点でPhotoshopと相性が良いのです。
Photoshopは画像編集ソフトのイメージが強いですが、Webデザインをする上でも便利な機能がたくさんあります。
Webサイトでは画像を使うこともあるので、すぐに画像編集ができるという点ではとても便利です。
Illustrator
Illustrator（通称イラレ）もAdobeのソフトです。
Illustratorはベクター画像、つまり線で画像を表現する形式です。
WebデザインをIllustratorでする人は多くありませんが、イラストやアイコンの作成で大活躍します。
Webデザインをする上で、かなりの頻度でアイコンを作成します。アイコンの多くは丸や四角、三角を組み合わせて作れるのですが、Illustratorならそれらの結合も楽に行えます。
Adobe XD
最近では徐々にAdobe XDの利用者が増えています。
レイアウトのしやすさ、レイヤーや設定の使い回しのしやすさなど、これまでのソフトよりも痒いところに手が届く作りになっています。
動作が軽いのも、大きなメリットです。
さらにクライアントにデザイン案をブラウザから見せることができるので、実際の見た目に近い形で確認してもらえるという便利な機能もあります。
ただし、画像加工はPhotoshopでしなければいけないですし、アイコンの作りやすさではIllustratorに劣ります。
それぞれの特性を活かして組み合わせて使うのが、今のベストな方法かと思います。
Sketch
Sketch（スケッチ）はAdobeの対抗勢力として、昨今利用者が増えているデザインツールです。
Adobe製品が月額での支払いなのに対して、Sketchは一度の購入でOKで、金額も比較的に低価格なのも魅力です。
ただし、英語での表示になるので、慣れるまでは大変かもしれません。
どれから覚える？
この中でまず最初に覚えるべきはPhotoshopの操作方法です。
画像加工からWebデザインまで行えますし、多くの制作現場で使われているからです。
次に覚えるのはIllustratorです。アイコンや簡単なイラスト制作はWebデザイナーには必須のスキルになるからです。
この二つに慣れるようにして、もっと便利にレイアウトを組みたいという欲が出たらAdobe XDに手を出してみても良いでしょう。
Webデザイナーが抑えておくべき知識
Webデザインには基礎的な知識が必要であり、センスや思いつきだけでできるものではありません。
レイアウトの知識
まずWebデザインを勉強するなら、レイアウトの知識を先に頭に叩き込みましょう。
端を揃える、適度に余白を入れるなど、レイアウトには覚えておくべき知識が色々あります。まずは基本的なことを意識しながらデザインできるようにしましょう。
かなりベタですが、デザインの基本はこの本が断然おすすめです。基礎的なことが一通り学ぶことができます。
配色の知識
色にはそれぞれ特徴や使うポイントがあり、色同士の相性などもあります。
色の使い方によって、Webサイトの雰囲気をコントロールすることができます。
オシャレにするだけではなく、見やすい配色についても勉強しておきましょう。
タイポグラフィティの知識
フォントや文字の組み合わせ方などの知識はとても重要です。
どのフォントを使うかで雰囲気が大きく違ってきます。
また、いかに閲覧者が読みやすいようにするかも、大事な要素です。
タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ]
タイポグラフィについて学ぶなら、この本が一押しです。
コーディングについて
多くの制作現場では、Webデザイナーがコーディングまでを担当します。
もし、デザインだけが業務でも、コーディングを理解せずにWebデザイナーとして成長するのは難しいと思いましょう。
コーディングにはHTMLとCSS、場合によってはJavaScript（jQuery）を使う場合もあります。
HTML
Webサイトの骨組みを作るためのマークアップ言語です。
HTMLを使えば、文字や画像、表などを表示させることができます。
レイアウトを整えるのはCSSの範囲なので、HTMLだけだと縦（下方向）に積み重なっていくイメージです。
後述するCSSのことを考慮しながら、HTMLを組んでいく必要があります。
今多く使われているのはHTML 5というバージョンで、要素がどのような役割なのかを明確にできるような仕様になっています。
HTMLというのは、例えば以下のようなにタグで囲んで使います。
<div class="content">
<p>テキスト</p>
</div>CSS
HTMLで表示されたページのレイアウトを組んだり、色やサイズなど変えたりできるのがCSSです。
主に使われているのがCSS 3というバージョンで、アニメーションの実装などの複雑な表現もできるようになっています。
CSSは以下のようにして文字色を変えたり、文字サイズを変えたりできます。
.content {
color: #333;
font-size: 1.2em;
}本当によくわかるHTML&CSSの教科書 シンプルで、デザインの良いサイトが必ず作れる
HTMLやCSSは、このような入門書を読んで勉強しましょう。
JavaScript（jQuery）
HTMLやCSSではできないような、より複雑な処理を実装できるのがJavaScriptです。
例えば、ユーザーがボタンをクリックしたらアニメーションが始まるとか、テキスト入力欄の文字をチェックするとかです。
JavaScriptでできることは多岐にわたり、幅広い分野で使われるようになっています。
例えばJavaScriptは以下のように書くのですが、完全にプログラミング言語です。
var elem = document.getElementById('element');
elem.addEventListener('click', function() {
console.log('click!');
}JavaScriptはマークアップ言語（HTML・CSS）に比べると難易度が高いのですが、jQueryというライブラリを使えば、初心者にも使いやすくなります。
利用者は減少傾向にありますが、今でもjQueryを使っている現場は少なくありません。
とはいえ、読み込みや実行速度に難があるため、最近ではjQueryを使わないようになっています。
コーディングに必要なテキストエディタ
HTMLなどのコードを打つとき、テキストエディタを使い保存していきます。
究極メモ帳でもHTMLを実装することはできますが、機能が少なくて（機能が無いに等しい）効率が悪すぎます。
便利なテキストエディタはたくさんありますし、それらの多くは無料で利用できます。
Visual Studio code
マイクロソフトが無料で提供しているテキストエディタがVisual Studio codeです。VScode（ブイエスコード）と呼ばれています。
Visual Studio Code – Code Editing. Redefined
開発元が信頼できる企業という点でも安心して利用できます。
最近ではかなり利用者も増えており、機能を拡張するプラグインもどんどん増えているようです。
これからコーディングを勉強する人は、VScodeをインストールしておいて問題ないでしょう。
最初から日本語で利用できるので、初期設定も楽です。
Sublime Text 3
最近では利用者が減少傾向にあるようですが、まだまだ根強い人気のあるテキストエディタです。
私もこのエディタを使っています。
何と言っても起動や処理速度が早いのが特徴です。
VScodeよりも前から人気のあったエディタなので、プラグイン（パッケージ）もたくさんあって便利です。
ただ、体験としては無料ですが、本格的に使うには有料になります。（体験期間は無制限）
デフォルトでは日本語化されていないので、パッケージをインストールして日本語化の初期設定をする必要があります。
他にもWebデザイナーが抑えておくべき知識
Webデザイナーは、Webデザインとコーディングだけできれば良いという訳ではなく、他にも細々とした業務もあります。
地味だけど結構重要なことです。
サーバーの知識
エンジニアばりにサーバーの知識を身につけろという意味ではありません。
サーバーやドメインの契約から新規サイトをアップロードするまでの流れは知っておかなければいけません。
Webデザイナーなら、自分でサーバーやドメインを契約してサイトを運用する経験はしておいた方がいいでしょう。
サーバーの仕組みを知らないと、サーバー移転で「？？」となってしまうので勉強しておきましょう。
WordPressの知識
WordPressで記事を書いたことがない人は、一度ブログを開設してみるのをお勧めします。
意外とWordPressでWebサイトを制作することは多く、「管理画面すら見たことない」ではまずいでしょう。
テンプレート（テーマ）やプラグインを作れるレベルは要求されませんが、基本操作くらいは覚えておくと良いでしょう。
どうやって勉強するの？
Webデザインの勉強をするなら、「自分でサイトを立ち上げる」「他のサイトを真似してみる」というのがおすすめです。
私はWebデザイナーになるまで、自分でサイトを立ち上げて勉強していました。
「あわよくばサイトから収入を…」みたいな考えだったと思います。
他のサイトをトレースするのも、学習効率が良いでしょう。自分では思いつかないようなアイディアを、真似することで体で覚えることができます。
Webデザイナーの年収ってどれくらい？
Webデザイナーを目指している人が気になるのは、この職種の平均的な年収だと思います。
一般的には300万円から400万円台くらいが多いです。Webディレクターになれば400〜500万円台くらいですね。
フリーランスになればもっと増える可能性もあります。
私は副業もしているのですが、Webデザイナーは副業との相性も良いです。慣れてきたら、副業を始めてみるのも良いでしょう。
未経験者でもWebデザイナーになれる？
私は28歳でWebデザイナーに転職できたので、しっかり勉強すればなれます。
全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG
もしWebデザイナーになりたいのなら、HTMLやCSSやいったん脇に置いて、デザインの基礎知識・手法やデザインソフトの勉強を徹底しておいた方がいいでしょう。
HTMLやCSSのスキルは後から伸ばせますが、デザインセンスというのは採用段階で判断できないと困るからです。
デザインがきっちりできていれば、HTMLやCSSは大目に見てくれるはずです。
フロントエンドエンジニアという道も
Webが好きでWebデザイナーを志したけど、フロントエンドエンジニアの方が向いているという場合もあります。
デザインを考えるよりも、HTMLやCSS、JavaScriptを勉強している方が楽しいという場合はそっちの道を極めるという手段もあります。
JavaScriptの複雑化もあり、精通している技術者はまだまだ少ないと感じます。
この方向で考えてみてもいいかもしれません。
まとめ
一口にWebデザイナーと言っても、業務の内容は多岐に渡るというのが分かったでしょうか。
確かに「大変そうだ」という印象を受けるかもしれませんが、経験が浅い人でも歴の長い人を超えられるというメリットがあります。
Web業界では昔ながらの方法はすぐ通用しなくなるので、歴が長いということが必ずしも有利という訳ではありません。
ベテランでも若手でも、最新のWeb動向をどんどんキャッチアップしていく姿勢が大切なのです。
Webの情報を収集するのが好きという人にとっては、ベテランを追い抜けるチャンスがあるのです。
側から見れば大変そうに思えますが、楽しく学びながらできれば魅力的な職業だと思います。
他にもこんな記事があります。
WEBデザイナーやエンジニア向けおすすめ求人サイト・転職サイト・転職エージェント | SHIROMAG
