今回は、Webデザイナーについて書いていこうと思います。
これからWebデザイナーになりたい、Webデザインに興味があるという人は参考にしてください。
ちなみに私はWebデザイナーの仕事を約4年ほどした経験し、今はWebディレクションやフロントエンド開発などをしています。その経験から色々なことをお伝えしていきたいと思います。
目次
Webデザイナーってどんな仕事？
一口にWebデザイナーと言っても、会社によってその業務領域は異なります。
デザインだけをする人もいれば、HTMLやCSS、JavaScriptなどを使ってコーディングまで行う人、クライアントとの打ち合わせなどをするWebディレクションを兼任する人もいます。
任される範囲は企業の規模や考え方によって違います。
ちなみにデザインはせずに、HTMLやCSSを専門とする人はコーダーと言います。
JavaScriptやそのライブラリ・フレームワーク使った実装までをする人をフロントエンドエンジニア。
クライアントと打ち合わせや予算計画の立案、デザイナーやエンジニアに指示を出す人をWebディレクターと言います。
Webデザイナーの具体的な仕事内容
WebデザイナーはWebサイトのデザインが主な仕事です。
よりWebサイトが見やすく・使いやすくなるようにデザインしたり、オシャレに装飾を施したりします。
XDやFigma、Photoshop、Illustratorなどのデザインツールを使い、デザイン案を作って、クライアントに提案をします。
クライアントの確認でOKになったら、次はHTMLやCSSでコーディングを行います。
前述しましたが、HTMLやCSSはWebデザイナーではなくコーダーが行う会社もあります。
コーディングでは上記のデザインツールで作ったデータから、必要な画像を書き出し、HTML/CSSを書いてブラウザでデザインを再現します。
HTMLやCSS、場合によってはJavaScriptまで実装したらテストアップして、クライアントにチェックしてもらいます。
これで問題なければ、データを送るかサーバーにデータをアップして、納品となります。
使うデザインツール
ここではWebデザイナーが使っているデザインツールを紹介していきます。
Adobe XD
Adobe XDはUIデザインに特化したデザインツールです。
最近ではAdobe XDをメインで使用している人は多いでしょう。
レイアウトのしやすさ、レイヤーや設定の使い回しのしやすさなど、これまでのソフトよりも痒いところに手が届く作りになっています。
動作が軽いのも、大きなメリットです。
さらにクライアントにデザイン案をブラウザから見せることができるので、実際の見た目に近い形で確認してもらえるという便利な機能もあります。
ただし、画像加工はPhotoshopでしなければいけないですし、アイコンの作りやすさではIllustratorに劣ります。
凝ったデザインパーツはPhotoshopやIllustratorで作り、それをXDに配置していくように作るのがベストでしょう。
それぞれの特性を活かして組み合わせて使いましょう。
サポート終了は近い？
現在XDの機能追加は積極的に行われていませんし、単体での購入は終了しています。
後述しますが、AdobeはFigmaを買収しましたので、今後はFigmaの開発に注力し、近い将来XDはFigmaに統合されるかもしれません。
XDのサポートが終了するのでは？という噂もあります。
Figma
XDと同じように、UIデザインに特化したデザインツールです。
XDと違う点としては、Figmaには無料プランがある点、ブラウザで使える点です。
2022年にAdobeが買収して話題になりました。
前述した通り、AdobeはXDを積極的に開発していませんので、近い将来Figmaが主流になる可能性もあります。
Googleトレンドを使って比較してみたところ、Figmaの検索ボリュームはXDを超えています。
Photoshop
Photoshopはビットマップ、つまりドットの集まりで画像を表現します。
Webサイトはドット（ピクセル）の集まりでできていますので、その点でPhotoshopと相性が良いです。
Photoshopは画像編集ソフトのイメージが強いですが、Webデザインをする上でも便利な機能がたくさんあります。
とはいえ最近ではXDやFigmaでWebデザインをする現場が大半かと思いますので、画像の加工やバナー制作などで使われることが多いでしょう。
Illustrator
Illustrator（通称イラレ）もAdobeのデザインツールです。
Illustratorはベクター画像、つまり線で画像を表現する形式です。
WebデザインをIllustratorでする人は多くありませんが、イラストやアイコンの作成で大活躍します。
Webデザインをする際、アイコンを作成することは多いので、Illustratorの基本的な操作はマスターしておきましょう。
どれから覚える？
おすすめはXDを覚えるのがおすすめです。XDの操作はそこまで難しくないですし、Webデザインに便利な機能が豊富だからです。
今後はFigmaに移行していくことが予想されますが、現状はまだXDをメインで使っている企業は多いです。
XDを覚えたらPhotoshopとIllustratorを覚えましょう。
Photoshopでは画像の加工や切り抜き、Illustratorではアイコンの制作を練習しておきましょう。
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については、Udemyのような動画学習サイトで勉強するのがおすすめです。
オンラインコース – いろんなことを、あなたのペースで | Udemy
JavaScript（jQuery）
HTMLやCSSではできないような、より複雑な処理を実装できるのがJavaScriptです。
例えば、ユーザーがボタンをクリックしたらアニメーションが始まるとか、テキスト入力欄の文字をチェックするとかです。
JavaScriptでできることは多岐にわたり、幅広い分野で使われるようになっています。
例えばJavaScriptは以下のように書くのですが、完全にプログラミング言語です。
const elem = document.getElementById('element');
elem.addEventListener('click', () => {
console.log('click!');
})JavaScriptはマークアップ言語（HTML・CSS）に比べると難易度が高いのですが、jQueryというライブラリを使えば、初心者にも使いやすくなります。
今でもjQueryを使っている現場もありますが、読み込みや実行速度に難があるため、最近ではjQueryを使わないようになっています。
CSSやJavaScriptが昔よりも便利になったため、jQueryを使う必要性が低下したというのもあります。
コーディングに必要なテキストエディタ
HTMLなどのコードを打つとき、テキストエディタを使い保存していきます。
究極メモ帳でもHTMLを書くことはできますが、機能が少なくて（機能が無いに等しい）効率が悪すぎます。
便利なテキストエディタはたくさんありますし、それらの多くは無料で利用できます。
Visual Studio code
マイクロソフトが無料で提供しているテキストエディタがVisual Studio codeです。VScode（ブイエスコード）と呼ばれています。
Visual Studio Code – Code Editing. Redefined
開発元が信頼できる企業という点でも安心して利用できます。
最も使われているテキストエディタで、機能を拡張するプラグインも豊富にあります。
これからコーディングを勉強する人は、VScodeをインストールしておいて問題ないでしょう。
他にもWebデザイナーが抑えておくべき知識
Webデザイナーは、Webデザインとコーディングだけできれば良いという訳ではなく、他にも細々とした業務もあります。
地味だけど結構重要なことです。
サーバーの知識
エンジニアばりにサーバーの知識を身につけろという意味ではありません。
サーバーやドメインの契約から新規サイトをアップロードするまでの流れは知っておかなければいけません。
Webデザイナーなら、自分でサーバーやドメインを契約してサイトを運用する経験はしておいた方がいいでしょう。
サーバーの仕組みを知らないと、サーバー移転で「？？」となってしまうので勉強しておきましょう。
WordPressの知識
WordPressで記事を書いたことがない人は、一度ブログを開設してみるのをお勧めします。
意外とWordPressでWebサイトを制作することは多く、「管理画面すら見たことない」ではまずいでしょう。
テンプレート（テーマ）やプラグインを作れるレベルは要求されませんが、基本操作くらいは覚えておくと良いでしょう。
どうやって勉強するの？
Webデザインの勉強をするなら、「自分でサイトを立ち上げる」「他のサイトを真似してみる」というのがおすすめです。
私はWebデザイナーになるまで、自分でサイトを立ち上げて勉強していました。
「あわよくばサイトから収入を…」みたいな考えだったと思います。
他のサイトをトレースするのも、学習効率が良いでしょう。自分では思いつかないようなアイディアを、真似することで体で覚えることができます。
また、ランサーズやクラウドワークスなどのクラウドソーシングサイトのコンペに応募するという方法もあります。
うまくいけば当選して収入を得られる可能性もあります。
Webデザイナーの年収ってどれくらい？
Webデザイナーを目指している人が気になるのは、この職種の平均的な年収だと思います。
一般的には300万円から400万円台くらいが多いです。Webディレクターになれば400〜500万円台くらいですね。
フリーランスになればもっと増える可能性もあります。
Webデザイナーは副業もしやすいので、プラスアルファの収入を得られる可能性もあります。慣れてきたら、副業を始めてみるのも良いでしょう。
未経験者でもWebデザイナーになれる？
私は28歳でWebデザイナーに転職できたので、しっかり勉強すればなれます。
全くの未経験が独学でWEBデザイナーに転職する方法
私はWeb制作会社を経営しており、2023年現在で36歳になります。28歳の時にWebデザイナーに転…
もしWebデザイナーになりたいのなら、HTMLやCSSやいったん脇に置いて、デザインの基礎知識・手法やデザインツールの勉強を徹底しておいた方がいいでしょう。
HTMLやCSSのスキルは後から伸ばせますが、デザインセンスというのは採用段階で判断できないと困るからです。
デザインがきっちりできていれば、HTMLやCSSは大目に見てくれるはずです。
フロントエンドエンジニアという道も
Webが好きでWebデザイナーを志したけど、フロントエンドエンジニアの方が向いているという場合もあります。
デザインを考えるよりも、HTMLやCSS、JavaScriptを勉強している方が楽しいという場合はそっちの道を極めるという方向も検討してみましょう。
JavaScriptの複雑化もあり、精通している技術者はまだまだ少ないと感じます。
この方向で考えてみてもいいかもしれません。
まとめ
一口にWebデザイナーと言っても、業務の内容は多岐に渡るというのが分かったでしょうか。
確かに「大変そうだ」という印象を受けるかもしれませんが、経験が浅い人でも歴の長い人を超えられるというメリットがあります。
Web業界では昔ながらの方法はすぐ通用しなくなるので、歴が長いということが必ずしも有利という訳ではありません。
ベテランでも若手でも、最新のWeb動向をどんどんキャッチアップしていく姿勢が大切なのです。
Webの情報を収集するのが好きという人にとっては、ベテランを追い抜けるチャンスがあるのです。
側から見れば大変そうに思えますが、楽しく学びながらできれば魅力的な職業だと思います。
他にもこんな記事があります。
WEBデザインが学べるおすすめオンラインスクール・通学スクー…
「WEBデザインの勉強をしたいけど、何から手を付けて良いのは分からない」そんな人のために、今回はWE…
Webデザイナーに資格は必要？難易度やメリットについて
今回は、Webデザイナーの資格についてです。これからWebデザイナーになろうとしている人は、資格を取…
