Webデザイナーとは
Webデザイナーとは、一言でいうと「Webサイトやアプリケーションのビジュアル部分」をデザインする職種です。 画像、イラスト、ロゴ、アイコン、メニューボタンなどさまざまな要素をWebページ上でレイアウトし、デザインを作成します。 しかし、ひとくちにWebデザイナーといっても、実際には「ここからここまでがWebデザイナーの仕事」と線引きするのは難しく、ビジュアル部分のデザイン作成のみだけでなく、HTMLのコーディングやJavaScriptを用いてWebページに動きをつけるところまでをWebデザイナーが担当することも多いでしょう。 Webデザイナーの業務範囲は、所属している企業や担当しているプロジェクトの規模によって異なります。 大規模なサイト制作であれば、デザインやコーディングをそれぞれの専門家が分業して作業にあたることが多いですが、小規模なサイト制作の場合には、Webデザイナーが打ち合わせからデザイン、コーディング、運用管理まですべての工程を1人でこなすことも少なくありません。 ここでは、サイト制作プロジェクトを例に挙げ、Webデザイナーの仕事内容について詳しく解説します。
（1）商品やサービス、ターゲットの要件整理
Webデザイナーというと、「まず大切なのは、デザインセンス」と思う人も多いかもしれません。 もちろんデザインセンスは大切ですが、具体的なデザインを制作する前にまず必要となるのが、Webサイトで取り扱う商品やサービス、ターゲットを分析し、Webサイトを制作する目的やコンセプトを理解し、課題を整理することです。 たとえば、「化粧品のサイトを制作してほしい」という要望があったとします。しかし、サイトで取り扱う化粧品がどのような化粧品なのか、ターゲットは20代男性なのか40代の女性なのかによって、目指すべきデザインの方向性は大きく変わります。 20代男性がターゲットならば、「ネイビーに近い青を使い、力強い印象を与えられるデザイン」とするべきかもしれませんし、40代の女性がターゲットならば、「パステルカラーを使い、エレガントで爽やかな印象を与えられるデザイン」が求められるかもしれません。 したがって、Webサイトを制作する前には、取り扱う商品とそのターゲットの分析を行ない、クライアントの要望を具体的な要素に落とし込む作業は、デザインの方向性を決める上でとても大切なのです。 なお、クライアントによっては、「かっこいいWebサイトをつくりたい」「おしゃれな感じにしてほしい」といった抽象的な要望しか持っていないこともありますが、そのような状態で制作に入るのは危険です。なぜなら、クライアントとデザイナーの考える「かっこいい」や「おしゃれ」のイメージにズレが生まれる可能性が高いからです。 また、クライアントがWebサイトで何を実現したいのか、サイトを制作する目的を把握することも重要です。たとえば、「成約率の向上」「ユーザビリティの向上」「トレンドへの対応」といったクライアントの「～したい」という要望を細かくヒアリングして整理し、より具体的な課題に落とし込んでいくことで、Webサイトのデザインの方向性だけでなく、盛り込むべき要素が明らかになっていくからです。
（2）レイアウトや配色を決定
Webサイトの要件を整理したら、それらをWebサイトで表現する作業に取りかかります。 具体的には、レイアウトや配色、画像やフォントなど細かいルールを決めて、Webデザインの方向性を決めていきます。 そして、「ワイヤーフレーム」と呼ばれる情報要素をまとめたドキュメントを作成します。 ワイヤーフレームは、PowerPointや Illustrator、Photoshopを用いて、トップページや主要なページなど数ページのみ制作するのが一般的です。 なお、作成したワイヤーフレームに対してクライアントの承認を得たら、モックアップを制作することもあります。 モックアップとは、実際に操作可能な状態にまで実装したWebサイトの試作品のことで、モックアップを用いてクライアントにプレゼンテーションを行います。
（3）デザイン・コーディングを行う
ワイヤーフレームやモックアップを提案してクライアントに承認を得たら、HTMLやCSS、JavaScriptを用いてコーディングを行っていきます。 HTMLとは、Webサイトを制作するための世界共通のルールで、コンピュータにどのようなページかを理解してもらうための言語です。CSSは、Webサイトのデザインを指定する言語です。たとえば、背景色、余白、文字の書体・大きさなどのデザインについてCSSを使うことで、デザインをHTMLの構造から分離させ、HTMLを一切変更しなくても簡単に変更することができます。そしてJavaScriptとは、「ボタンをクリックすると商品画像を変更する」など、Webサイトに動きをつけることができる言語です（※後ほど詳しくご紹介します）。 なお、スマホサイト制作の場合には、操作感が重視されることが多いため、ワイヤーフレームを作成せずにモックアップのみを作成してクライアントの承認を得る場合もあります。
（4）テスト公開と検証作業
小さなWebサイトの場合には、Webデザイナーが制作したWebサイトデータをテストサーバにアップロードして、クライアントに公開して、検証作業を行なうこともあります。 いきなり本番サーバにアクセス制限なく公開してしまうと、検索エンジンにクローリングされてしまうことがあるため、まずはテストサーバにアップロードしてID・パスワードを設定するのが一般的です。 クライアントによる検証作業の結果、修正点があれば修正を行い、修正データについて再度テストサーバにアップしてクライアントによる検証を行ってもらいます。 この検証作業の段階で、クライアントから新たな要望が出されることもありますが、際限なく要望を受け入れているとスケジュールや費用の見直しが発生することもありますので、企画提案段階からきちんとクライアントに説明をしておくことも大切です。
（5）納品・公開作業
テストサーバで検証と修正を繰り返し、最終的にクライアントから承認をされたら、公開に必要なデータを納品します。 プロジェクトによっては、本番サーバに直接本番公開作業を行うこともあります。 この場合、サイトのリニューアルで既存のWebサイトが存在することもありますので、あらかじめバックアップを行い、不測の事態が生じた時にはすぐに元の状態に戻せるような配慮も必要です。 Webサイトが公開されたらそれで終了ではなく、適宜継続的にコンテンツの改修や追加などの運用更新作業が必要となります。 たとえば、季節ごとに新しい商品を発表する企業のWebサイトでは、その都度商品コンテンツを投入する必要がありますし、トピックス部分を更新する必要があります。
Webデザイナーに求められるスキル
一人前のWebデザイナーとして活躍するためには、デザイン力、アイディア力、コミュニケーション力など、さまざまなスキルが必要となります。 「デザイナー」である以上、一番大切なのはデザイン力ですが、そのサイトを完成させるためには、サイト全体を設計するアイディア力やサイトを制作する技術力なども求められます。 また、サイトが完成するまでには、クライアントはもちろん多くのスタッフが関わることになるため、円滑なコミュニケーションを行うためのスキルやスケジュール管理能力なども重要です。
（1）デザイン力・アイディア力
webデザイナーに必要な「デザイン力」は、斬新さや奇抜さよりも目的が明確で伝えたいことをしっかりと伝えられる力です。 デザインの第一印象を決定する配色だけでなく、サイトの目的を伝えるレイアウトもデザインの重要な要素です。また、文字の大きさなどは最新のトレンドを常にチェックしておく必要があります。 また、サイトの目的に合った魅力的なデザインを考え、そのアイディアを形にする力も必要です。このアイディア力は、日頃からテレビ、映画、雑誌など数多くのメディアに触れることで磨かれます。また、美術館や美術雑誌などに小まめに目を通し、色彩感覚を磨くことも効果的です。
（2）技術力
HTMLとCSSを用いたコーディングスキルは、Webデザイナーにとって必須のスキルです。最近ではJavaScriptを用いてサイトに動的な演出を加える場合も多いため、JavaScriptまで扱えるようにしておけば、活躍の場を広げていくことができるでしょう。 ・HTMLとは Webページを作成するために開発されたマークアップ言語のひとつで、Webページにおける見出しや段落などのレイアウトを定義する役割を担っています。たとえば、という記述は、「image.pngの画像がここに入る」ことを意味しています。 ・CSSとは HTMLと組み合わせて使用する、Webページのスタイル（装飾部分）を指定する言語です。CSSではフォントのサイズや色、レイアウトの表示スタイルを指定します。PCやスマホなど、閲覧するデバイスによってWebページの表示デザインが変わるのは、CSSによって切り替えが行われています。 ・JavaScriptとは Webページに動的な演出を加えることができるプログラミング言語です。「郵便番号を用いた住所自動入力」や「Webサイト上でのポップアップ表示」、「複数枚の画像のスライド表示」などは、JavaScriptによって実装されています。 AdobePhotoshopなどのデザインツールのスキルはもちろん、AdobePremiereなどの映像やオーディオなどのリッチコンテンツの編集ツールも使いこなさなければならないこともあります。
（3）コミュニケーション能力・スケジュール管理能力
Webサイト制作の現場では、クライアント企業の担当者をはじめ、自社内の営業担当者、Webディレクター、エンジニアなど、さまざまな関係者と協力してプロジェクトを進行します。スムーズに業務を進めていくには、コミュニケーション能力は必要不可欠です。 ここでいうコミュニケーション能力とは、「誰とでも上手に会話ができる」という意味ではなく、「相手の目的や意図、事情を理解できる」「プロジェクトを進めるうえで必要な情報をきちんと共有することができる」「分からないことがあれば、分からないとキチンと伝えられる」という意味の能力です。 対面でコミュニケーションをとるのが苦手な人は、まずメールで要点を伝えた上で、口頭で補足する方法をとってもよいでしょう。 また、プロジェクトには納期がありますから、タスクを分解し、納期から逆算してスケジュールを立てられる能力、スムーズで効率的に仕事を進めるためにタスクを整理する、作業に優先順位をつけるといった自己管理力も必要となります。
（4）Web技術やWebマーケティングに関する知識
web技術 HTML、CSS、JavaScriptといったWeb技術は、Webサイトを制作するうえで必須のスキルです。プロジェクトによっては、コーディングやJavaScriptが分業されることもありますが、言語のルールなどは理解しておく必要があります。 HTMLはページのコンテンツ、CSSはページのデザイン・レイアウト、jQueryはスクロールやマウスに反応して動きを出すために必要となります。 jQueryをつかうと、JavaScriptからHTMLやCSSの一部を変更することができ、マウスをのせるとサブメニューが表示されたり、複数のイメージ画像をアニメーションで切り替えたりするなどWebサイトに動きを持たせることができるようになります。 同一のHTMLでPCやスマホなど端末によって表示が変わるようにするCSSを分岐させて適用させてゆく「レスポンシブWebデザイン」も必須のスキルです。 また、WordPressというサイト全体のコンテンツを管理するシステム（CMSツール）というソフトに関する知識が必要となることもあります。 WordPressはPHPというサーバ側で動く言語で作られたソフトで、サイトのデータはデータベースに格納されPHPでそれらを引き出してHTMLとして出力するというツールです。HTMLを出力する時には、テンプレートというファイルにデータが格納されていきます。したがって、そのテンプレート制作（HTMLにWordPressの関数やタグを埋め込む作業）ができるスキルもWebデザイナーに求められることになります。 さらに、作成されたWebサイトが検索エンジンで上位に表示されやすくするためのSEO（検索エンジン最適化）についての最低限の知識、ユーザビリティを意識したUIデザインによってユーザーがストレスなく快適にWEBサイトを利用できるようにするための知識も必要となります。 Webマーケティング Webマーケティングとは、簡単にいうと、「売れる仕組みを作ること」で、主に以下のような施策があります。Webデザイナーとしてクライアントと打ち合わせをし、エンジニアなどプロジェクトに携わるメンバーと会話をするなかで頻繁に出てくるワードなので、ワードの意味は理解しておきましょう。 SEO 主要な検索サイトとして広くユーザーに利用されているGoogleとYahooで、いかに検索結果上位にWebサイトを表示させるかといったテクニックをいいます。上位表示されるためには、ユーザーにとって有益なコンテンツを分かりやすい手段で提供するためのテクニックが必要です。 リスティング公告 キーワードに関する広告で、検索結果のページの上部や横に表示されます。キーワードによって費用は異なりますが、お予算を設定してその範囲で運用することもできます。 バナー広告 Yahooやニュースサイト、Facebook、Twitterなどにも広告を出すことができます。最近では市役所などの公的機関でもバナー広告を受け付けるケースが増え、地域密着型サービスで活用されています。 SNSを利用したプロモーション SNSでの拡散を見込んで、公式アカウントをフォローしたり、アプリ連携したりして自動的にプロモーション内容が表示される仕組みがあります。Facebook、Twitterでリンクが拡散されると、検索エンジンのアルゴリズムに組み込まれるとも言われていますので、SNSでの拡散によって検索エンジン上位表示の相乗効果も期待できます。
Webデザイナーの働き方・やりがい
Webデザイナーの仕事は多岐にわたりますが、働き方にもさまざまな選択肢があります。ここでは、Webデザイナーの主な働き方とやりがいについて解説します。
（1）インハウスデザイナー
インハウスデザイナーとは、クライアント企業からの受託案件ではなく、所属している企業のデザイン制作を専任で手がけるデザイナーを指します。 Webサイトを頻繁に更新し、問題が起こった場合には迅速に改善できる体制を築く必要のあるメーカー、保険会社、旅行会社、新聞社、ホテルなどでは、インハウスデザイナーの求人が多いようです。 自社の商品やサービスに関連するデザイン業務に従事するので、ユーザーからの声を直接聞いて改善に活かせる点にやりがいを感じる人が多い傾向にあります。また、クライアント案件と比較すると、スケジュールの調整なども融通がききやすい点もメリットといえるでしょう。一方で、「社内でWebデザイナーは自分一人だけ」といったケースも多く、業務を通したスキルアップが図りにくい場合もあります。周囲のWebデザイナーと切磋琢磨してスキルを磨いていきたい人や、ゆくゆくはアートディレクターなどの職種にキャリアアップしていきたい人は、まずは制作会社勤務からスタートするとよいでしょう。
（2）制作会社・広告代理店のWebデザイナー
Webデザイナーでもっとも一般的な働き方は、Web制作会社や広告代理店、デザイン事務所などに就職するケースです。クライアントから依頼された要望もとに、Webサイト制作・更新・管理を請け負います。 プロジェクトの規模によってWebデザイナーの担当作業は大きく変わります。大規模なプロジェクトであればテクニカルディレクター、フロントエンドエンジニア、プログラマーなど、分野ごとの専門家が分担して制作に当たりますが、小さなサイトの場合には、クライアントとの打ち合わせからすべてを担当することもあります。
（3）フリーランスWebデザイナー
制作会社などで経験を積んだ後、フリーランスWebデザイナーとして独立する働き方もあります。デザイン会社から仕事を請け負ったり、これまで築いてきた人脈を活かして、クライアントから直接仕事を受注したりします。 自分の裁量で仕事を進めることができ、実力次第では高い収入を得られる働き方ですが、仕事の受注がなくなれば収入もゼロになる可能性もあります。 安定的に仕事を受注し続けるためには、Webデザイナーとしてのスキルだけでなく、自身を売り込む営業力も必要となります。
Webデザイナーの転職事情・将来性
（1）Webデザイナーの転職事情
（2）平均年収
（3）Webデザイナーのキャリアパス
Webデザイナーのキャリアパスを考える際には、まず自分がどんなWebデザイナーになっていきたいかを具体的にイメージすることが大切です。 プロデューサーやプランナー アイディア力に自信があるなら、サイトの企画を立案し制作進行を担当するプロデューサーやプランナーを目指すのもよいでしょう。時代のトレンドを読み、新しい価値を創造する仕事は、Web制作に携わる醍醐味を味わうことができます。 プログラマー・フロントエンドエンジニア フロントエンドエンジニアとは、デザインデータをさまざまなブラウザでWebページとして表示できるようコーディングする人のことで、プログラマーはさまざまなプログラム言語を取り扱ってデータベースやサーバの運用面など、システムを構築・開発するのが主な業務です。 デザインだけでなくさまざまなプログラム言語を習得することで、デザインの幅が広がるだけでなく、転職する際にも有利になります。 最新のプログラムを理解し修得することが苦にならないのであれば、プログラマー・フロントエンドエンジニアとしてコーディング技術を極めるのもよいでしょう。 ディレクター 全体を見渡しプロジェクトの方向性全体を決めて、製作進行を監督するのが主な仕事です。スタッフとコミュニケーションをとり調整をする司令官のような役割を果たします。 スケジュールや予算を処理する能力はもちろん、制作に関わる人材それぞれの職業に対しての理解も必要となります。WebデザイナーとしてWeb制作の工程を理解しクライアントとの交渉について経験を積んだあと、ディレクターとして監督指揮する立場にステップアップすることもあります。
Webデザイナーになるには
続いて、Webデザイナーを目指す方法について解説します。Webデザイナーになる上で必須の資格や学歴はなく、必要なスキルを身につけることができれば未経験からでも転職することは可能です。一般的には大学や専門学校、社会人向けスクールに通って学んだり、資格取得を通してスキルや知識を身につけたりする人が多いでしょう。
（1）大学や専門学校、スクールで学ぶ
大学や専門学校、スクールなどでデザインを学び、最初からwebの世界に入る人も増えています。 最近は簡単にサイトを制作できるソフトや素材が販売されているので、誰もが気軽にWebサイトを公開できるようになっていますが、Webデザイナーに求められるのはこれらのソフトを使いこなすことではなく、HTMLやCSSという言語を使いこなしたり、画像を加工したりする技術やコンピュータグラフィックに関する技術です。 また、ネットワークやサーバに関する知識やクライアントの要望に応じたアイディアを立案するためのマーケティングの知識やネットでの商取引に関する知識が必要になることもあります。 したがって、デザイン、HTMLやCSS、マーケティングの知識が全くない場合や自信がない場合には、大学や専門学校、スクールなどに通うことで効率的にこれらの知識を学ぶことができるというメリットがあります。 ただし、スクールで学んだからといってすぐに実務レベルの能力が身につく訳ではありません。結局は多くのWebサイト制作に携わり、失敗を経験してそれを乗り越え、ようやく実務レベルの能力が身につくものだということも覚悟しておく必要があります。