こんにちは、web制作ナビです！
最近「webデザイナー」ってよく耳にするけど、どのような職業なんだろう？業務内容はなんだろう？
「webデザイナー」は、webサイトに関わるデザインを担当するお仕事です。
当記事では、「webデザイナー」の職業や業務内容を徹底解説しています。この記事を読み終えたとき、「webデザイナー」について詳しくなっているでしょう。
- webデザイナーってについて知りたい。
- webデザイナーの具体的な業務内容を知りたい方。
- webデザイナーに転職を考えている方。
Web業界・webに携わる職種について詳しく知りたい方は、下記の記事をお読みください。
web業界とは？【現役webディレクター】がweb業界の将来性や、web業界に携わる職種を徹底解説
webデザイナーとは
webデザイナーとは、 webサイトのデザインに携わるデザイナーのことです。
クライアントの要望に応えたwebサイトが制作できるよう、全体の構成を考え、ユーザーが使いやすいwebサイトデザインを制作します。
企業によってwebデザイナーの仕事内容は異なり、webサイトデザインのみをする場合もあれば、webサイトの構成からコーディングまで幅広く行う場合もあります。
webデザイナーとグラフィックデザイナーの違い
webデザイナーとグラフィックデザイナーの違いは、デザインする対象の媒体が異なる点です。
グラフィックデザイナーとは、主に雑誌の広告やポスターなどの印刷物（紙媒体）をデザインします。一方でwebデザイナーは、webサイトに関わるデザインをします。
最近では、webサイトだけでなくアプリのデザインなども行えるwebデザイナーが増えてきています。
webデザイナーの仕事内容
先述致しましたが、webデザイナーの仕事内容は企業によって異なります。
今回はヒアリングからwebサイト公開まで行うwebデザイナーの仕事内容を紹介いたします。
ヒアリング
ヒアリングでは、顧客からの要望を聞き、どのようなwebサイトを制作したいか、またwebサイトを改修したいかを聞きます。この段階では、webデザイナーだけでなくプロデューサーやwebディレクターも同行する場合が多いです。
ヒアリング内容をもとに企画書作成を行います。その際にデザインの方向性をwebデザイナーが担います。
Webディレクターになるには？未経験から転職する方法、有効な資格を徹底解説!!
サイト設計
サイト設計では、webサイトの方向性を決めます。コンテンツを考えたり、ターゲットとなるユーザー層の確認、競合などを洗い出し、どのようなwebサイトであればクライアントに利益をもたらす事ができるのか考え企画書に落とし込みます。
この段階ではwebマーケティングの知識も非常に重要となってくるため、webマーケターと共に作業を進めていく事が多いです。
Webマーケティングとは？基礎知識から集客方法など初心者にも分かりやすく解説!!
ワイヤーフレームの作成
サイト設計で考えられたサイト構成をもとにワイヤーフレームを作成します。
ワイヤーフレームとは、 webサイトのレイアウトやコンテンツの配置を決定する設計図になります。
ワイヤーフレームは、webデザインの骨組みであるため、どこにどのコンテンツを配置するかなどUI/UXに基づき制作を進めます。
ワイヤーフレーム制作にあたり、使用される代表的なデザインツールは「Adobe XD」「Sketch」「Figma」などが挙げられます。
デザイン制作
先ほど制作したワイヤーフレームをもとにデザイン制作を行います。この工程が皆さんの想像するデザイナーの仕事になります。
メインビジュアル、挿入する写真素材の選定・加工、フォントファミリーの決定など、webサイト全体のデザインを制作していく工程になります。
デザイン制作にあたり、使用される代表的なデザインツールは「Adobe XD」「Illustrator」「PhotoShop」などが挙げられます。その他にも挿入する写真を選定する際に「Adobe Stock」などが使用されます。
デザイン制作において、多くのAdobe製品を使用している事がわかりますね。
コーディング
デザイン制作後は、コーディング作業に入ります。先ほど制作したデザインをもとにHTMLやcssを使用しwebサイトに実装していきます。
一般的にコーディングは、「フロントエンドエンジニア」「マークアップエンジニア」「コーダー」と呼ばれるコーティング作業を専門とする人が担当します。
コーディング作業で使用されるツールを「テキストエディター」といい、代表的なテキストエディターは「Visual Studio Code」「Atom」「Adobe Dreamweaver」などが挙げられます。
フロントエンドエンジニアとは？仕事内容やスキル・未経験からなる方法を徹底解説
テスト
最後にコーディングを終えたページをテストサーバーにアップして、実際に動くのか、エラーがないかを確認します。
この段階では、制作に携わっている人全員で確認作業を行います。主な確認項目としては、リンク漏れはないか、誤字脱字はないか、レスポンシブは正常に機能しているかなどを確認します。
確認後問題がなければ本番環境にアップし、データをクライアントに納品します。これでweb制作は終わりとなります。
webデザイナーに必要な基礎スキル
次にwebデザイナーに必要なスキルをご紹介します。webデザイナーといっても先述した通りマルチなスキルが場合によっては求められます。
デザインの基礎知識・スキル
webデザイナーと呼ばれるだけあってデザインの基礎知識・スキルは最低限必要となってきます。
色使いや、フォントの組み合わせなど媒体を問わず求められるスキルとなります。その上でwebデザイン固有のスキルも必要です。
webサイトは紙媒体と異なり、クリックやスクロール、リンクボタンなど多くの特徴が存在します。これらの特徴を理解した上でデザインを制作するスキルが、webデザイナーとして最低限必要なのスキルになります。
UI/UXの知識
webデザインは、グラフィックデザイン（紙媒体）と違って使用するユーザーが存在します。そのため美しいデザインを、ただ制作するのではなくユーザーにとって使いやすいデザインを制作しなければなりません。
そのためUI/UXの知識が必要となってきます。
UIとは、ユーザーインターフェイスの略称で、Webサイトのデザインやフォント、パソコン自体の外観など、ユーザーの視覚に触れるすべての情報がUIということができます。
UXとは、ユーザーエクスペリエンスの略称で、ユーザーが製品やサービスを通して得られる体験や経験のことです。
webデザイナーは、単に美しいwebサイトを制作する事だけでなく、ユーザーにとって操作しやすく、ユーザーが満足する価値を提供することも重要な役割といえます。
デザインツールの活用
webデザインを制作していく過程で多くのデザインツールを使用します。デザインツールは数多くあり全てをご紹介することができませんので、代表的なデザインツール3つをご紹介します。この3つを使いこなす事ができればwebデザイン制作で困ることはないと言えます。
近年webデザイン制作において主流となっているのがAdobeが提供する「Adobe XD」になります。
「Adobe XD」の特徴は、直感的な操作が可能で非デザイナーや初心者でも使いやすい点になります。そして最大の特徴が共有機能になります。
webデザインを制作する上で、webディレクターやクライアントに確認してもらう工程が発生します。今まではPDFやjpgデータを送りメール等で修正指示を何度もやりとりする必要がありました。しかし、「Adobe XD」では共有機能がありweb上でデザインを確認する事ができ、なおかつデータに直接コメントを書き込む事が可能になりました。
これにより確認工程が大幅に短縮でき、効率的にwebデザインを制作する事ができるようになりました。
その他にもUI機能も充実しており、より良いwebデザインが制作可能になりました。
「Illustrator」はAdobeが提供する代表的なデザインツールです。
webデザインに限ったものではなく、グラフィックデザインや多くのデザイン制作現場で使用されています。そのため「Illustrator」の使用スキルはデザイナーにとって必須と言えます。
「Illustrator」の特徴は、その名の通りイラスト制作です。ロゴやパッケージのデザイン、キャラクター制作もすべて制作が可能です。それだけでなくwebデザインも十分に制作可能です。
「Illustrator」をマスターする事がデザイナーとして活躍する上で必要となるスキルといえます。
「Photoshop」はAdobeが提供する代表的な画像加工ツールです。
「Photoshop」は主に、写真を切り抜いたり、別の写真との合成、色や明るみを調整する事ができます。さらに「Photoshop」はピクセル表示が基本となるためwebデザインと相性がとても良いです。
webデザインに限ったことではないですが、写真とデザインは切り離すことのできない関係です。グラフィックデザインもwebデザインも同様に写真を埋め込む事が多いため、「Photoshop」の使用方法を学ぶ必要があります。
上記3つのデザインツールを紹介しましたが、どれもAdobe製品になります。Adobe製品を使いこなす事がデザイナーとしての第一歩と言えるかもしれません。
HTML/css
HTML（Hyper Text Markup Language）とは、webサイトを制作するために開発された言語です。現在インターネット上で公開されているwebサイトのほとんどがHTMLによって制作されています。
例えば、段落や改行、見出し、画像・動画の挿入をする事ができます。
CSS（Cascading Style Sheets）とは、webサイトのスタイルを指定するための言語です。主にHTMLと組み合わせて使用する言語です。
CSSはHTMLでは、できないフォントの指定や背景など装飾をする事ができます。
JavaScript
JavaScriptでできる事は多岐にわたりますが、最も多く活用されているのはwebサイトに動きをつける事です。
今までは、フロントエンドの言語として使用されてきましたが、近年ではバックエンド側でも使用できるようになり、より汎用性が高くなりました。
SEO（検索エンジン最適化）
SEOとは、GoogleやYahooで検索しているユーザーに、サイトをより多く見てもらえるようにする施策です。
SEO施策では、GoogleやYahooの検索エンジンのアルゴリズムを理解し、ユーザーが求めている情報を分かりやすく伝えることで上位表示させることができます。
webデザイナーの将来性
今現在パソコンやスマートフォンの普及により、webサイトやwebサービスも年々増加しています。
特にECサイトやアプリ開発需要は特段増加している傾向にあります。
そのため、それらを制作する上でwebデザイナーの需要も年々増えてきています。
とくにwebデザインだけでなく、ディレクションやコーディングと幅広いスキルを習得することがキャリアアップにもつながります。
今後もIT・web技術が発展していくことは間違いなく、それに伴いwebデザイナーの需要も今後も高まっていくこと間違いないと言えます。
web業界とは？【現役webディレクター】がweb業界の将来性や、web業界に携わる職種を徹底解説
まとめ
webデザイナーのお仕事は、単に美しいデザインを制作することではありません。ユーザーにとって使いやすいデザイン設計を行うことと言えます。
ただ美しいデザインを制作するだけでなくユーザーベースで制作を行えるようになることが重要です。
今後もwebデザイナーの需要は高まる一方、多くのwebデザイナーが誕生すると予想できます。そこで差をつけるためにwebデザインだけでなくディレクションやコーディングといった、もう一つのスキルを身につける事をおすすめします。
