このブログはWebサイトのデザインや制作に関することを中心に色々なジャンルに基づいて書いているのですが、そもそもWebデザイナーが何なのか？を書いたことがなかったので、今回具体的に書くことにしました。
Webデザイナーと一口に言っても、在り方が様々なので、人によっては該当しないこともあるかもしれませんが、この業界を目指す人にとっては一つの指標となると思います。
目次
Webデザイナーの仕事
ヒアリングとスケジュールについて
Webデザイナーの仕事とは、簡潔に述べると、Webサイトをデザインすることが仕事です。
Webサイトやランディングページ等を持ちたいと考えている相手からヒアリングを行い、何を実現したいのか、何を表現したいのかという意図を汲み取って形にすることが仕事です。
意図を汲み取るというのは、クライアントファーストコンタクトはWebサイトが欲しいという点が多いのですが、本来の目的はWebサイトを持つことではなく、Webサイトで実現したい「何か」があるという事です。
我々Webデザイナーはその「何か」をコミュニケーションの中で拾い上げ、相手にそれが正しいかを確認て、Webサイトを作らなければなりません。
Webデザインの場合、デザインを再現するためにはHTMLやCSSといったソースコードを記述することで可能になるため、Webデザイナーはソースコードでの再現性を考えながらデザインをおこさなければなりません。
ヒアリングといったコミュニケーションは、WebデザイナーではなくWebディレクターの仕事になる場合も多く、その場合、Webディレクターがまとめた資料を元にデザインしなければなりません。
更に、Webデザインを考える際、クライアントの要望を叶えるだけでも駄目で、実際に完成したWebサイトを使うユーザーの事を配慮しなければなりません。
例えクライアントの要望を叶えたデザインであっても、出来上がったデザインが使いづらかったり、使い方が分からないなどの理由によってユーザーが離脱しやすいものであっては本末転倒で、Webデザイナーはクライアントとユーザーをつなぐ為のデザインを作ることがもっとも重要な仕事となります。
では、これが叶えばそれで全てか？というとそういうわけにも行きません。
冒頭に述べたHTMLとCSSといったソースコードがなければWebデザインを最終的な形にすることは出来ません。
そのソースコードで再現不可能なものは論外として、再現に制作コストが掛かりすぎるデザインはどうでしょうか？
Webデザインの仕事には納期があり、その納期の中にはデザイン、コーディング、システムの導入と行ったフローが存在します。
ディレクション〜デザインのフェーズは上流（工程の最初の方）に当たるため、この時に下流の事を検討しなければ、コーディングやシステムへの取り込みでコストが掛かかってしまい、最悪納期に間に合わないケースや、間に合わせるために無理なスケジュールのために、残業が増えるといった問題が発生します。
そうならないため、Webデザイナーは自分より後の作業スケジュールも考慮して自分のタスクを完了させなければなりません。
情報設計（IA・情報アーキテクチャー）
ヒアリングを終えスケジュールを抑えたら、最初に行うのがWebサイトの情報設計です。
ヒアリングした内容から、必要なページ、要素、コンテンツ、キーワードをまとめ上げ、それらをサイトマップやワイヤーフレームに落とし込んでいきます。
サイトマップというのはWebサイト全体の構造を記したもので、ツリー状に構成されたものを指します。これを作ることで、必要なページ構成が見えるようになり、サイトの全貌が見えてきます。
そして全貌が見えたら、実際のページ単位の構成をワイヤーフレームとして作成していきます。
ページのレイアウトを決めるための設計図で、ワイヤーとも呼ばれます。
どこに何があるのか。何がどのようになっているか。を視覚的に記すことで、クライアントや制作者、また制作者同士で起こる認識のズレを防ぐことが出来ます。
その為、ワイヤーフレームには平面上で確認できるすべての情報を漏れなく入れておく必要があります。
人と人との伝達というのは完璧ではありません。完璧ではないが故に、認識にズレがないかの確認は必ず行わなければならず、ズレの修正は早い段階のほうがスムーズに行えます。
例えば、コーディングのフェーズで必要な要素が漏れていることに気づいた場合、修正の作業はデザインフェーズに戻され、更には設計のフェーズまで戻されることになります。
しかし、ワイヤーフレームの段階で漏れが確認できた場合は、ワイヤーフレームを修正するだけで済みます。
ワイヤーフレームは修正が簡単に行えるように、それを困難としてしまう装飾などは入れません。
UIデザイン
情報設計で必要なコンテンツが決まったら、UI（ユーザーインターフェース）を設計し、ワイヤーフレームに書き込んでいきます。
UIとは、ユーザーとページ対して視覚的に触れる全ての部分を指し、ロゴ、バナー、コンテンツ、ナビゲーションはもちろん、フォント、デザインそのものなどがそれに当たります。
デザインのディティールはこのフェーズで詰めず、主にユーザーが操作する箇所、視線誘導、視覚効果などを重点的にデザインし、ワイヤーフレームに落としていきます。
ここで考えるべき点は、情報をユーザーに伝える為には、UIがどうなっておくべきか？であり、この答えを導き出すために、様々なサイトを閲覧し、同業、同タイプのサイトをより深く研究します。
これを行うのは、ユーザーが新しいWebサイトに触れる際に感じる使いづらさを、いかに与えないかが狙いで、ユーザーが過去に体験したであろう共通のポイントを見つけるためにあります。
人は新しいものを目にした時、脳内で自分の過去に体験した情報を引っ張り出し、その情報を元に、今目にしている新たなものに対する情報を予測し、使い方を予測したり、検証しながら触れることで利用できるようになっていきます。
この時、UIが自身の持つ情報に近いものであれば、初めて見るものであっても、使い方を早期に学習することができ、少しのストレスをうけるだけで次のアクションへと行動を写せます。
ストレスというものは大小なりとも感じるので、一定の値を超えるとそこから離脱してしまいます。
それを防ぐためにも、他のサイトを研究し、ユーザーがどういう経験を持ってWebサイトを閲覧するか？を考えなければなりません。
このユーザーの体験している事、それに対する評価、感覚などを総称してUX（ユーザーエクスペリエンス）といいますが、WebデザイナーがこのUXを考えながら設計を行う事で、ユーザーにとって使いやすいという感覚に影響を与えています。
調査する点としては
- ヘッダー、メインコンテンツ部分、サイドナビ、フッターなどのサイズ感
- 訪問ユーザーにとって最適となるフォントのサイズ感
- 要素のレイアウト
- ナビゲーションタイプ
などです。
ただ、真似をすることが大事なのか？というと、そうではなく、大事なのはこういった事を理解した上で、目の前にあるプロダクトにどう落とし込むか？を考えることで、重要なのはいかに自然にユーザーが使いやすさを手に入れるかにあります。
ユーザーの経験してきたものに働きかけるには露骨にすればうまくいくかもしれませんが、Webデザイナーが仕事で望まれることの多くはそうではなく、オリジナリティが有りながらもユーザー体験をうまく活かすことが、求められるスキルの一つです。
モックアップ・プロトタイプの作成
平面での設計図が出来たら、次は画面の遷移やクリック時の挙動など、ページ閲覧時に起こるアクションの認識を合わせるため、モックアップやプロトタイプを作成します。
パララックスのような視覚効果を与えるデザインや、ロールオーバー、スライドのスクロール、スマートフォン向けのスライドメニューといった、UIに動きが必要なケースでは、モックアップやプロトタイプを用いた認識の共通化が必要となってきます。
特にコーディングのフェーズになると、この設計書がないと憶測で値を設定するしかなく、デザイナーとコーダとで認識の違いが発生し、不必要な調整が発生してしまい、制作コストが上がってしまいます。
そうならないためにも、設計段階で完成形を確認することは大切なプロセスです。
ワイヤーフレーム、モックアップ、プロトタイプを作るツールは多数存在し、下記のようなツールが利用されています。
Excel
表計算ソフトですが、セルを結合するなどでワイヤーを作ることが出来ます。欠点としては、あとで修正がある場合調整に手間がかかるので、他のツールが使えたほうが良いです。
JUSTINMIND
Justinmind Prototyper は、iPhone や Android などのスマートフォン向けのモバイル アプリや Web サイトの骨組みとなるワイヤーフレームを素早く、手軽に作成できるツールです。Justinmind Prototyper を使用することで、シナリオや仕様を考慮しながら簡単にモバイル アプリや Web サイトのプロトタイプを作成することができます。
XLSOFT:JUSTINMIND https://www.xlsoft.com/jp/products/justinmind/
AdobeXD
Adobe XDには、スマホやタブレット、PC向けのWebサイトやアプリのUIを制作するDesignモードと、そのUI操作による画面遷移や画面遷移エフェクトなどを設定し、プレビューができるPrototypeモードがあります。この2つのモードを使い分けましょう。
Adobe XD
Sketch
ワイヤーにとどまらず、シンプルな操作ながらWebやアプリケーションのデザインまで幅広くデザインできるアプリケーションです。パーツの書き出しや複数アートボードの作成、CSSの再現など様々な点で利用するのに優れたツールとなっており、ベクターグラフィックで完結するのであれば、これ一つで完結させることも出来ます。
ただ、Mac用しか用意されていない為、Windowsなどで仕事をしている人は使えないのが難点です。
Cacoo
ブラウザ上で利用できるWebアプリケーションで、他者との共同作業が行いやすいのが特徴です。他のユーザーが作成したステンシルを利用できるCacooストアやテンプレートの利用などがあり、ワイヤーフレームを作る効率が非常に良いです。
Illustrator
Adobeが提供しているベクタードロー用グラフィックアプリケーションです。ロゴ、図面、パッケージ、地図など、印刷業界を始め、昔から様々な分野で利用されています。
POP
POPはワイヤーを１から作るのではなく、ワイヤー１枚１枚をアップロードし、それぞれを１ページとして遷移を作成するアプリケーションです。
スマートフォン向けのアプリケーションと、ブラウザで利用できるWebアプリケーションが存在し、スマートフォンであれば画像を写真撮影して登録できるので、手書きのワイヤーをカメラで撮影し、それを繋いだ上でタップする場所を決め、画面遷移を含めたワイヤーフレームにすることが出来ます。
Webアプリケーションの場合は画像をドラッグ・アンド・ドロップなどでアップロードが出来るので、その後画面遷移を指定していきます。
また、作ったワイヤーはシェアが可能なので、プロジェクト内で共有することも可能です。
moqups
Cacooと同じく、ブラウザ上でワイヤーが作れるWebアプリケーションで、ステンシルをドラッグ・アンド・ドロップすることで作成できます。
Wireframe.cc
こちらもブラウザ上でワイヤーが作れるWebアプリケーションです。UIが非常にシンプルな点、アカウント登録不要で保存・URLのシェアが可能と、すぐに使えるのが特徴です。
Prott
株式会社グッドパッチが提供しているプロトタイピングツールです。
POPの用に写真を撮影してワイヤーを繋いでいくものと、CacooのようにWebブラウザで１からワイヤーフレームを書くものが用意され、どちらも合わせて使うことが出来ます。
またPCとスマートフォンのアプリはアカウントで連動し、どちらで作ったものも編集が可能になっています。
シェアに関してもWireframe.ccのように、URLのみでシェアが出来るので、総合的に使いやすいアプリケーションです。
ページのデザイン
設計が決まれば実際にページをデザインをしていきます。ページのデザインにはグラフィックツールを利用し、主にはPhotoshop、Illustrator、最近ではSketchなどを使ってメインビジュアル、メニュー、バナー、ナビゲーション、ボタンなどのグラフィックを作り、レイアウトしていきます。
昔はFireworksが広く利用されていましたが、近年では開発が終了したことにより、新しいOSで開くことが出来ない事が発生した為、メインのグラフィックツールとしては利用されなくなりました。
グラフィックは絵を描いたり、写真を撮影してレタッチしたりで、目的のグラフィックによって扱うツールが変わってきます。
ペイント系の絵をかくのであればPhotoshopやGimp、ドロー系のイラストを書くのであればIllustratorやSketchが有名ですが、利用するツールに制限はありません。
写真を扱う場合は、写真のクオリティに問題がないかのチェックも行い、必要であればレタッチが必要になります。
また、自身で作成するのではなく、素材を利用する場合は著作権やライセンスをチェックし、サイトに利用して問題ないかの確認は欠かせません。
デザインする上で重要なのは、手法ではなく、必要なグラフィックを用意できるかという事と、それのクオリティが一定以上担保できるかという事。そして、使っているものに問題がないかという事です。
クオリティについては、デザインの仕上がりに違和感が無いかという点で、写真であれば撮影したままの状態だとレンズの歪みやライトによる色味の違いが発生していたりするので、Photoshop等でレタッチを行い、色味に違和感があれば、カラーのトーンをあわせて素材のディティールを詰めますし、タイポグラフィはデザインに合うフォントがゴシックなのか、明朝なのか？といった選定から行い、レイアウト、文字詰め、読みやすいフォントサイズを調整していきます。
他にも、コンテンツ余白が与える印象はどうか？テクスチャの与える印象が強すぎないか？等、あらゆる部分を詰め、全体のトーン、バランスを整えながら完成に近づけていきます。
また、デザインをする中で意識しないといけない点にアクセシビリティがあります。
ウェブにおけるアクセシビリティは、誰でも、いつでも、どの端末でも情報を取得することに対する柔軟性がポイントで、それは一定レベルで担保しておかなければなりません。
例えば、背景色と文字色を同系色にすると読みづらくなり、リンクテキストが他のテキストと同じ色で且つ下線がなければ、それをリンクと認識することは困難となります。更に、小さすぎるフォントサイズはユーザーにとって読みづらく、極端なストレスを与えてしまいます。
ユーザーが使うことを想定してデザインしていると、こういう極端な例は起こり得ないのですが、アクセシビリティではコントラストがどれだけ必要かという指標が記されている事など、一定のルールが設けられていることから、全てを把握しておくことが難しいとしても、調べるポイントとして抑えています。
コーディング
ページのデザインが完成したら、サイト全体で必要なページやパーツをデザインし、クライアントに確認を取ってからコーディング作業に入ります。
Webデザインするだけならコーディングまで出来なくても良いのでは？という点がありますが、コーディングの制約を知ってデザインするのと、それを知らずにデザインするのでは、コーディングの際のコストに大きな差が発生します。
例えば、デザインデータで色を調整するのに透過を用いてしまうと、コーディング時には透過ではなく色の値を指定するため、実際の色の値が取ることが出来ず、完全な一致が不可能になります。
他にも、レスポンシブで再現が難しいレイアウトであったり、ページごとに共通化しておいたほうが良いパーツが微妙に違っていたりなど、実装コストが増える要素が多数存在します。
そのデザインが根拠のあるもので、必要なものであればコーディングすること自体に問題はありませんが、コストを上げてまでそのデザインである必要が無い場合、コーディングの負荷が増えるだけになるので最善策とは言えませんし、Webサイトを構築する上で負担となるコストはなるべく下げておくことが望ましいです。
そのためにも、Webデザイナーはコーディングができる、もしくは、それに該当するだけの知識を持って置く必要があります。
仕事の分担
この記事ではWebデザイナーの仕事としてヒアリング、設計、デザイン、コーディングまで書きましたが、働く環境によってはヒアリングから設計はWebディレクターが担当し、コーディングはコーダーが担当するという場合もあります。
ですが、やらなくていいということと、知らなくていいということは別の話で、やらなくていいとしても、知っておくことはWebデザイナーとして必要ですし、後述Webスクールでもこのあたりまでは教わるかと思います。（情報設計まで教えているかはわかりません。）
Webデザイナーの種類
Webデザイナーといっても、働き方は一つではありません。
- 制作会社で働くWebデザイナー
- インハウスのWebデザイナー
違いはクライアントの望むものを作るWebデザイナーか、所属する会社が運用しているサイトやプロダクトを作り上げるWebデザイナーの違いです。
制作会社の場合はWebサイト制作を分業化し、Webデザインに特化して仕事をするケースと、デザインからコーディングまでを担当するケースが多いです。
インハウスの場合は、1からサイトを立ち上げるケースは制作会社と比べて少なく、運用が中心になるため、部分的なデザインからコーディング、SEO、マーケティングと、仕事の範囲が広くなるケースが多いです。
制作会社の仕事内容は上記のWebデザイナーの仕事でわかると思うので、事項よりインハウスのWebデザイナーが普段行っている仕事を記述していきます。
インハウスのWebデザイナーについて
Webデザイン自体については制作会社でもインハウスでも変わりませんが、作りたい要望を持ったクライアントが存在しない為、何を作らないといけないか？は自分たちで見つけていかなければなりません。
- 顧客となりうるユーザーはどこに居るのか
- 顧客層をどこまで拾い上げるのか
日常の業務でこれを考えながらWebサイトを作っているのがインハウスのWebデザイナーです。
ページの作成自体は制作会社のWebデザイナーとやることは変わりませんが、運用の面では大きく変わってきます。
まず、ユーザーを集客しないと行けないので、SEM（サーチエンジンマーケティング）は不可欠です。
特集ページや販売ページ、またWebサイト全体で検索上位に表示させるキーワードを洗い出し、SEOを仕掛けていきます。
SEOが効果を生み出すまで、もしくは効果の弱いキーワードについてはリスティング広告をはじめ、Web広告を活用し、集客力をあげていきます。
集客ができるようになれば、集客したユーザーからコンバージョン（成果）を取るためにメンテナンスを行います。
アナリティクスなどの解析ツールを使い、サイト上で直帰率の高いページや離脱率の高いページがあれば、UIの構造を見直し、配置や配色を変更し、ABテストをかけていきます。
それを繰り返し、ボトルネックとなる箇所を潰していくことで、サイトの集客力をあげながら離脱率を下げ、回遊率をあげることによりコンバージョン率をあげていきます。
それを行いながら、新しいコンテンツを増やしていき、サイトでの売上をあげていきます。
インハウスのWebデザイナーが関わるキーワードを以下に解説していきます。
Webマーケティング
インハウスのWebデザイナーに求められるのは、まず運用しているサービスの顧客獲得増加や、ECサイトでの売上増加です。その為、Webマーケティングに対する知識は必要不可欠です。
- SEO（検索エンジン最適化）
- SEM（サーチエンジンマーケティング）
- 広告運用
- SSM（ソーシャルメディアマーケティング）
- ABテスト
- メールマガジン
- etc.
インハウスのデザイナーはこれらを活用し
- 新規顧客の獲得
- 既存顧客へのアプローチ
- 顧客となりうるユーザーへのアプローチ
を目指します。
SEO
集客の上で必ず課題となる、検索エンジンの検索結果で上位に表示させるための施策で、SEO対策とも呼ばれますが、SEOがSearch Engine Optimizationの略で、この言葉自体が対策の意味を含むので、SEOだけが正しい表現になります。
Googleが公開しているウェブマスター向けガイドラインに沿った手法のホワイトハットSEOと、それに準拠しないブラックハットSEOの2つが存在し、どのやり方で行うかはその企業によって違いますが、ブラックハットSEOは掲載順位から排除されるリスクが高い為、ホワイトハットSEOで順位を上げることを目指す企業がほとんです。
SEOの手法は割愛しますが、インハウスのWebデザイナーは、何がホワイトハットで、何がブラックハットか。そして、検索順位を上昇させるためにどういったコンテツが必要かを検討し、それをデザインしてコーディングし、運用していきます。
その中で、アナリティクスとサーチコンソール（ウェブマスターツール）の2つは不可欠で、検索順位を追うためのツールとしてGRCを利用して順位上昇を狙っていきます。
また、アナリティクスは他にも、サイト上で離脱につながりやすい箇所を特定してページのメンテナンスを行ったり、ユーザーの動向を捉えたりと、日常の業務で一番活用するツールになります。
SEM
検索エンジンを使ったマーケティングの事を指し、SEOはこの中に含まれます。
サイトのSEO施策を行い、検索順位が上位に表示されそこからユーザーが流動しコンバージョンすることが理想ですが、施策してすぐに効果が出ない。もしくは、更に流動を増やしたいという要望からリスティング広告を利用するというのが多い理由です。
制作会社と違い、クライアントからの要望と言うものが存在しない代わりに、ユーザーの声を自分たちで拾いながらページを作ったり更新を行うので、ユーザーデータが欠かせません。
立ち上げてすぐのサイトであればユーザー自体は殆ど存在しませんが、マーケティングの対象となるユーザーの仮説をたて、それに基づいた戦略を練っていきます。
この仮説のユーザーはペルソナといいますが、これはSEMにかぎらず、マーケティングやIAでよく出てくる言葉です。
広告運用
SEMに含まれるリスティング広告を始め、Web広告の運用も仕事の一つです。場合によっては専門の部署があったり、外部の会社に委託したりしますが、ハンドルを握るのがWebデザイナーやWebディレクターのケースも多いため、知識として知っておく必要性は高いです。
- リスティング広告
- 検索エンジン連動型の広告で、検索したキーワードに対して関連する広告を表示させる事により、サイトへユーザーを流動します。Web広告では一番利用される広告で、広告費の調整が行いやすく、成果を把握がし易いのが人気の理由になっています。
- アフィリエイト広告
- 他社サイトや他ブログにリンクを張ってもらい、そのリンクを経由してコンバージョンのあったサイト主催者に対して報酬を支払う仕組みです。
- アドネットワーク広告
- ブログやサイト集めたネットワークに対して広告を出稿する手法で、一度に大量のトラフィックを確保することが出来ます。
- DSP広告
- Demand-Side Platformの略で、広告主が利用するプラットフォームの事を指します。DSPには広告を買うための枠が用意され、それを利用することで配信から分析までを自動で行うことが出来ます。ただ、DSPはただのツールにしか過ぎず、媒体側のSSPと呼ばれるプラットフォームと連携しなければ広告を配信することが出来ません。
- 動画広告
- TVCMのWeb版というのが分かりやすいです。動画と動画の間にCMを流すことで、ユーザーに映像と音声を利用した立地な広告を表示することが出来ます。
- ネイティブ広告
- メディアなどの第三者目線で作られたコンテンツを利用してユーザーに訴求する広告です。ブログなどでPRのついた記事があったりしますが、それがネイティブ広告に当たります。記事広告とも呼ばれます。
- メール広告
- メールマガジン等、Webメールに掲載する広告のことです。メールアドレスのデータを多数保有している媒体が取り扱っており、Web広告の中では歴史が古く、インターネット初期から利用されている広告手法です。
- バナー広告
- Webサイトにバナーを設置してもらい、ユーザーの流動を促す広告で、純広告とも呼ばれます。Yahoo!の右側に設置されている広告が有名です。
- RSS広告
- ユーザーのRSSフィードに表示させる広告です。Webサイトの更新情報に合わせて広告を表示することでユーザーの興味関心を引き、サイトへ流動を促します。
- リワード広告
- スマートフォンアプリ内でそのアプリのユーザーに対し、広告主の出す一定の条件（アプリダウンロード、商品購入など）を満たす事で、利用しているアプリ内のポイントに還元できるといった仕組みの広告です。少し分かりづらいですが、例えばAというアプリ内でコミックを読むのにポイントが必要で、そのポイントは通常お金を払って購入しなければなりません。しかし、アプリから広告主のサイトへ飛び、30秒の動画を閲覧することで一定のポイントが貰えるといった仕組みのことです。
必要なスキルや知識
Webデザイナーの仕事内容はこれで理解できたでしょうか？
すべてのことが最初から出来ないといけないか？というとそういうわけでもありません。ただ、最初から求められるというスキルというものも存在しますので、これからWebデザイナーになろうと思っている方は、下記から取得していくと良いです。
- 何らかのグラフィックツールをつかったWebサイトのデザイン。
- 何らかのツールを使ってHTMLとCSSのコーディング。
- FTPを使ってコーディングしたデータをサーバーにアップロードし、閲覧できる状態にする。
この3つは必須項目です。
これが出来ないと仕事ができません。
当然、これができるから大丈夫というわけではなく、これができれば次はJavaScriptやjQueryを使ってアニメーションやインタラクティブさを追求してみたり、PHPをつかって簡単なプログラムを書いてみたり、MySQLなどを利用してデータベースに触れてみたりと、触っておいたほうがいいスキル、出来たほうが良いスキルというのはもっともっと存在します。
近年であればWordPressのようなCMSを使ったサイトの構築や、Bootstrapのようなフレームワークを使ったサイトの構築、SASSやSCSSのようなスクリプト言語、gulpを使った様々な自動化、gitを使ったソース管理など、現場で必要となるスキルは非常に増えています。
どこまでできれば良いのか？というのは最初に出てくる疑問ですが、自身が担当する場面で必要となるスキルは変わってきますし、必要でないスキルも出てきます。
大切なのは、自分がWebデザイナーになったとき、必要なスキルと、取得しておくと効率があがるスキル、会得しなくても良いスキルを判断する力と、新しいスキルに対して自身がポジティブに捉えていけるか？という事です。
これはWebデザイナーに限ったことではないですが、この業界にいると常に新しいものが出現し、利用してきたものが使われなくなるというサイクルが早いです。
Webデザイナーも色々なことを求められる業界ではありますが、一番大事なことは制作会社であればクライアントの望みを期間以内に叶えられるか？ということと、インハウスのWebデザイナーであればWebサイトを使って売上をあげられるかどうか？です。
そして、もう一つWebデザイナーに必要なものとして、コミュニケーション力があります。
Webデザイナーはクライアントの要望を形にできなければならず、その為には相手の要望を聞き出すためのコミュニケーションが要で、それが出来なければ要望を形にすることは出来ません。
それは、クライアントに限らず、Webディレクターや営業職の人が相手でも同じです。
自分がクライアントと直接やり取りを行う場合、聞いておかないといけない事を頭に描くことは容易いですが、その描いたことを間接的に聞いてもらうことは難しく、どうしてもコミュニケーションコストは上がってしまい、意思疎通が困難になればなるほどコミュニケーションへのストレスが増え、プロジェクトへのモチベーションが下がってしまいます。
そうならないため、プロジェクトに関わるメンバーは、同じ方向を向く事、同じ目標を持つ事、そして全員がプロジェクトに対してポジティブである事が必要で、更にメンバー同士がフラットに話し合える環境が望ましく、その中でWebデザイナーはデザインを通じてコミュニケーションを計るために、何が必要かを的確に伝えるコミュニケーション力が必要です。
また、WebデザイナーはWebディレクターとエンジニアやコーダーをつなぐ部分を作る事にもなるため、言葉のコミュニケーションだけではなく、レイヤーの整理や、共通箇所の指示、余白のpx指示など、次の人が作業しやすいよう考える事もWebデザイナーに必要なコミュニケーション力です。
資格
Webデザイナーになるための資格は必須ではありませんが、Webデザイナー向けの資格はいくつか存在し、骨格資格も存在します。企業によっては資格の有無を募集要項に掲載しているところもあるので、就職・転職を有利に運ぶために資格を取るという選択も一つです。
Webクリエイター能力認定試験
はじめて学ぶ学生の方からWebサイト制作の現場で活躍する
プロの方まで、保有スキルに合わせて学習することができます！Webクリエイター能力認定試験は、Webクリエイターに必要とされる、Webサイト制作のデザイン知識およびWebページのコーディング能力を測定・評価する認定試験です。
エキスパートとスタンダードといった難易度に応じた級種を選択することで、現役のWebクリエイターはもちろんのこと、Webデザイナー、Webディレクター、Webプログラマー、それらを目指す学校・教育機関で学習されている方など、Webに関わる全ての方々を対象としています。
Webクリエイター能力認定試験：サーティファイ：Webクリエイター能力認定試験 http://www.sikaku.gr.jp/wc-lp/
ビジネス能力認定 サーティファイ：Webクリエイター能力認定試験
HTML5プロフェッショナル認定資格
ウェブデザイン技能検定
アドビ認定エキスパート（ACE）
ウェブ解析士
Webアナリスト検定
Webデザイナーになるには
Webデザイナーになるための資格は存在しないので、自分がWebデザイナーと名乗れば誰でもなれます。
ただ、名乗っただけで仕事ができるわけではないので、一般的には上記で述べたスキルや知識、コミュニケーション力が必要で、それを会得するには
- スクールを利用する
- 職業訓練校に通う
- セミナーに参加する
- 独学で学ぶ
などがあります。
スクールを利用する
スクールには実際に通うものと、オンラインで学べるものと2タイプあります。スクールを利用するメリットは、必要なスキルを学ぶ為のカリキュラムが多数用意されており、自分で学びたいスケジュールを組めること、また、卒業後の就職に対する体勢が整っている点です。
デメリットとしては、それに見合うだけの金額がかかる為、他のものよりも高額になります。
尚、スクールには下記のような物があります。
通学タイプ
デジタルハリウッド
ヒューマンアカデミー
KEN スクール
バンタンデザイン研究所 キャリアカレッジ
HAL
神戸電子専門学校
オンラインスクール
TECH ACADEMY
ドットインストール
CodeCamp
schoo
インターネット・アカデミー
職業訓練校に通う
職業訓練校というのは、求職者を対象に、職業に必要となる知識や技能をに身につけてもらい就職につなげてもらう為の職業訓練を受けられる学校の事です。
スクールと違うのは、これを国が支援しているため、基本的に無料、もしくは低価格で受講できることと、内容や受講者によっては給付金等の援助を受けながら学校に通えるという点です。
尚、失業保険受給社の場合、交通費や受講手当（職業訓練受講手当）が受けられるといった点もあり、メリットもかなり多いです。
ただ、デメリットとしてはメリットが多い分応募数が多くなるため、競争率が高く、受講したくても受からないケースもあるという点です。特にWeb系は人気が高く、他のコースと比べて競争率が高いです。
職業訓練校で受けられる内容は、主にWebサイト制作の基本技術、html・CSSによるサイト構築、PhotoshopやIllustratorの使い方、スマートフォンサイト、レスポンシブによるサイト制作など、スクールで学ぶ内容とほぼ変わりありません。
ただ、申し込む時期や地域によって内容が異なるので、受講する際にどういったものがあるのか？はその時に調べないといけません。
セミナーに参加する
スクールとは違い、時々個人や法人が開催しているセミナーに参加して勉強する手段です。値段は無料もの、有料のものがあり、その回によって違いますし、どんなセミナーがいつ開催されるかというのは自分で情報を見つけないと参加することが出来ません。
また、スクールとは違って知識０の状態から学べるセミナーは少なく、基礎ができていて、さらに学びたい人向けのものが多いです。
独学で学ぶ
テキストとなる書籍を自分で選択して購入したり、わからないことをインターネットで調べて知識を蓄えたり、実際に手を動かしてものを作ってみたりと、独学でWebデザイナーになる人も少なくありません。
スクールに通うような多額のお金は必要なく、自分のペースで学ぶことが出来ますが。基本は１人なのでコミュニケーションの部分を伸ばすことが難しいことと、就職・転職についても全て自身で調べたり探したりしなければなりません。
Webデザイナーが利用するツールについて
仕事をする上で使うツールですが、これまでの話に出てきたものも含めて紹介します。
グラフィックツール
Photoshop
Illustrator
Adobe XD
Sketch
レタッチツール
Lightroom
Photoshop
エディタ
Dreamweaver
Sublim Text
Atom
Brackets
Coda
ez-HTML
TeraPad
サクラエディタ
Liveweave
フォント管理ツール
NexusFont
FontExplorer X Pro
Suitcase Fusion
画像素材管理ツール
Adobe Bridge
ftpツール
transmit
Cyberduck
FileZilla
[FileZilla}(https://ja.osdn.net/projects/filezilla/)
FFFTP
NextFTp
WinSCP
アニメーション作成
Animate CC
Google Web Designer
SEO関係
Google Analytics
サーチコンソール（ウェブマスターツール）
GRC
バリデーションチェック
[W3C Markup Validation Service
HTML Validator – Chrome Extension
HTML Validator – Chrome Extension
HTML 5 Validator – Firefox add-on
HTML 5 Validator – Firefox add-on
HTML5 Outliner
Webデザイナーのキャリア
Webデザイナーの平均年収は300万円〜400万円（ 平均年収.jp 調べ）で、これを大きく下回っている場合は転職を考えたほうがいいかもしれません。
また、キャリアップとしてはWebデザイナーからWebディレクターやプロデューサーなどがあります。
この業界は求人情報をWeb上で閲覧できるサービスが豊富なので、それを活用して就職、転職を検討する事が多いです。
Find Job
Green
DODA
マイナビ転職
イーキャリア
Indeed
キャリアトレック
Wantedly
switch
エン・ジャパン
ジョブセンスリンク
また、転職ではなく個人事業主としてフリーランスになったり、法人を立ち上げて会社の経営者になったりというのも少なくありません。
また、今回は全体を通して国内のWebデザイナーについて書きましたが、海外のWebデザイナーとなると年収や社会的地位が異なってきます。
求められるスキルとしては、Webデザインスキル、プログラムスキル、SEO、アクセス解析といったあたりなので、日本のWebデザイナーが普段行っている仕事と大差はないと思いますが、言語の取得が一番の課題になります。
最後に
非常に長くなりましたが、Webデザイナーがどういったものかは伝わったかと思います。
Webデザイナーの主軸となるのは、デザインの部分で、デザインをするためには設計が必須項目です。
現場によって、どこまでWebデザイナーが担当する箇所かは若干の違いがありますが、少なくとも本記事で述べた内容について、どういうことをすればよいか？の判断がつくようにして置かなければならないことと、新しいことが出てきた時に、そこにアンテナを伸ばすこと。そして、デザイン力を常に伸ばしていくスタンスが、Webデザイナーとして生きていくのに必要な事です。
お役に立てたらお願いします🙇
Comments