この記事は次のような方に向けて書いています。
・Webデザイナーになりたい人
・Webデザインの仕事内容を知りたい人
・Webデザインをするにはどんなスキルが必要か
・自分はWebデザインに向いているかチェックしたい人
この記事を最後まで読んだら、Webデザインの仕事の流れや必要なスキルを理解できるようになります。
どうぞ最後までご覧になってください。
Webデザイナーとは
Webサイトのページの構成やレイアウトを考えて、見やすく、見栄え良く、わかりやすいデザインをすることが、Webデザイナーの仕事です。
グラフィックデザインとの違い
これらのグラフィックをデザインする仕事のことをグラフィックデザインと言います。
ポスターや雑誌、商品パッケージなどの印刷物などが対象になります。
Webデザインの仕事内容
①ヒアリング
②コンセプト設計
③ワイヤーフレームの作成
④グラフィックの制作
⑤コーディング
⑥テスト
①ヒアリング
クライアントから依頼された作成・改修したいWebサイトについてをヒアリングします。
その要件は、Webサイトの見た目だけでなく、Webサイトを使って達成したい目的や、取り付けたい機能など色々あります。
そして、ヒアリングした結果を企画書にまとめます。
②コンセプト設計
コンセプトというのは、作成するWebサイトの方向性のことで、Webサイトで実現したいことやターゲット層、市場でのクライアントのポジションや競合といったことの状況を踏まえて、企画書に盛り込んだものを提案します。
全体のコンセプト設定を受け、デザインのコンセプトを策定して提示します。
コンセプトワードやイメージを合わせて、ターゲットのペルソナを決めることもあります。
デザインコンセプトの策定にあたっては、案件の規模が大きかったり、Webの他での展開もある時には、アートディレクターが作成することも多いです。
③ワイヤーフレームの作成
ワイヤーフレームというのは、Webサイトのレイアウトや構成を決めるための設計図です。
ナビゲーション（ページタイトル、パンくず、メインメニュー・サブメニュー）から、個々のコンテンツの配置まで細かく作成していきます。
サイトの全体的な構成や階層構造、レスポンシブ対応も考えながら設計していきます。
ワイヤーフレームを設計する時にあh、UIやUXの観点も重要になります。
トップページやカテゴリートップは、実際のページイメージをデザイン案としていくつか提示します。
④Webサイトのデザインを制作する
メインビジュアルや、写真素材の選定、加工、どんなフォントを使うのかなど、Webサイト全体のデザインを作っていきます。
ここでは、Adobe社のPhotoshopやIllustratorなどを使って制作していきます。
そしてその後の工程のためのエレメントリストという、タイトルやボタン類、表組みなど、ページを構成する要素をデザインパーツ化させたものも、必要により用意します。
⑤コーディング
コーディングはWebデザイナーではなくてコーダーというコーディングを専門とするものが担当するのが一般的ですが、Webデザイナーがすることもあリます。
また、動きのあるページを作る場合は、フロントサイドエンジニアが制作することもあります。
⑥テスト
コーディングを終えたら、想定通りの動作するのかを実際にテストします。
まず、社内プレビューで、基本動作や外部リンク、ページ間リンクの遷移や誤字脱字がないかまで細かくチェックして、誤りや動作不良があったら修正します。
そしてその後は、本番と同じ環境にデータをアップして、客先プレビューを行います。
ボリュームの多いページの場合は、カテゴリー単位など分割してプレビューすることもあります。
Webデザインの3つの働き方
・インハウスデザイナー
・広告代理店・制作会社
・フリーランス
インハウスデザイナー
デザイナーとは、基本的にクライアントから仕事を頼まれてする仕事ですが、インハウスデザイナーは、自分の会社が依頼元になります。
広告代理店・制作会社
会社によって得意とする分野や業界がありますが、大手広告代理店だと、色々な仕事が舞い込んできます。
例えば、新商品の販売に伴う制作だと、
・CMなどの映像や印刷物に載せる広告
・商品自体のロゴやパッケージ
・プロモーションやキャンペーンの企画
などもあります。
Web制作もこれらの一部として同時に並行して走ります。
フリーランス
フリーランスのWebデザイナーは、会社の社員としてではなく、業務委託でWeb制作を請け負います。
会社に所属していないので、自由に仕事ができますが、全部自分が担うという心構えが必要になります。
制作物の品質や納期、仕事の評価などで次の依頼があるかなど、全て自分で責任を持たないといけない、厳しい働き方ともいえます。
Webデザイナーになるにはどうしたらいい?
・大学でWebデザインの勉強をする
・独学で学びながら制作現場で力を付ける
大学でWebデザインの勉強をする
Webデザイナーになるには、大学に通って4年間Webデザインを学ぶという方法があります。
大学でWebデザインを学ぶと、スキルと幅広い教養の2つを身につけることができます。
制作ソフトを使う技術とコーディングのスキルがあれば、Webサイトを制作すること自体は可能ですが、プロのWebデザイナーとしてクライアントから満足してもらえる作品を制作するには、それだけでは不十分です。
・ビジネスやマーケティングを理解すること
・クリエイティブな発想力
といった、Webデザイナーに必要なものはたくさんありますが、これらを身につけるには、幅広い教養が必要です。
例えばデジタルハリウッド大学では、宗教学、歴史、社会学など、Webデザインにあまり関係ないような科目が幅広く学びますが、これらの知識があることで魅力的なデザインを生み出す想像の源となるのです。
独学で学びながら制作現場で力を付ける
最近では、デザインやコーディングなどの本やオンライン講座が豊富にありますので、これらをうまく組み合わせながら学ぶことができます。
知識を詰め込むだけではなく、優れたWebサイトを研究したりしながら、自分の作品を作っていくことを繰り返しながら、Webデザイナーとしてのスキルを高めていくことができます。
そしてプロのWebデザイナーとして働くためには、Web制作の現場でアルバイトやインターンを経験すると、制作の流れ、チームワークの進め方や課題を解決する提案力など、実際に仕事をする際に求められるスキルをいろんな角度から学ぶことができます。
Webデザイナーに必要なスキル
・デザインの基本のスキル
・UI/UXデザインのスキル
・デザインソフトのスキル
・テーマに沿ったデザイン力
・人を集める企画力
・SEOとアクセス解析の知識
・HTMLとCSSのスキル
・JavaScript/jQueryのスキル
・コミュニケーション力
デザインの基本のスキル
・配色
・レイアウト
・文字の扱い
など、グラフィックデザイナーと同じくWebサイトを制作する時にも求められるスキルです。
・モニターを通して閲覧する
・クリック・タップ・スクロールする
・リンクがあって段階構造になっている
など、Webには色々な特徴があります。
これらを考慮しながら最適なWebサイトを作り上げるスキルが、Webデザインの仕事に求められる第一のスキルです。
UI/UXデザインのスキル
どんなに美しかったりカッコイイデザインでも、使いにくかったり、見づらかったりしては、良いWebサイトとは言えません。
UIとはわかりやすく言えば操作性のことを指します。
そして、UIと一緒に使われるものにUXというものがあります。
UIとは、ユーザーがサービスや製品で得られる体験のことを言います。
UXの一部にUIがあって、サイトを使うユーザーにどんな体験を与えて、価値を想像できるかということを担うのもWebデザインの仕事です。
デザインソフトのスキル
写真などの画像を加工したりするPhotoshop、ロゴやイラストを作ったりするのはIllustratorといったふうに、昔から使われてきているツールは、使えて当然と思っておきましょう。
また最近では、WebとモバイルのUIデザインとWebデザインを作るのにはSketch、プロトタイピングを作るにはAdobe XDなども登場してきて、次の工程との連携を含めたデザイン作業は、以前よりも便利になってきました。
それらの新しいツールをどこまで使っていくかは、所属先やプロジェクトによって違いますが、一通り使えるようになっておくと重宝されます。
テーマに沿ったデザイン力
・可愛らしさ
・かっこよさ
・ホラー系ではおどろおどろしさ
だったりします。
つまり、Webサイトのテーマに沿ったデザインをすることが必要ということです。
色使いに関しては、「カラーコーディネート」のルールがありますし、文字サイズに関してもやっぱりルールがあります。
先生：これはWebでも印刷物のチラシでも同じで、こういうことをしっかりと身につけることで、良いデザインを作ることができるようになるんだ。
人を集める企画力
このようなデザイン力も、Webサイトをどんなテーマで作って、どうやって集客するのかという、いわゆる人を集める企画力がないのであったら、活かすことができません。
アイディアを出すには、「マインドマップ」や「KJ」といった発想法や整理法を用いたり、または、それ以外のビジネスフレームワークを用いるデザイナーもいます。
まずは、Webサイトの方向性を決める言葉をとにかく思いつくだけ書き出して、マインドマップでは、そこから浮かぶイメージを追加し、KJ方では似たようなものをまとめるという方法があります。
Webサイトのユーザーになるターゲットの性別や年齢層、趣味嗜好といったものをきっちり想定していきましょう。
つまり、「本命」「対抗」「大穴」にわけて案を出します。
よく考えて作った企画を提示すると、クライアントはほとんどの場合は「本命」に少しだけ「対抗」の要素を入れたものを良いと言うことが多いです。
稀に「大穴が良い」とクライアントから言われてしまう場合もありますが、そんな時には、「大穴が良いと言われましたよね?」と言うふうに確認してから先にすすめるようにしましょう。
SEOとアクセス解析の知識
どのようなユーザーに見てもらいたいのか、想定するターゲットにWebサイトを見てもらって、実際にWebサイトで購入してもらったり、応募してもらうことに繋げる必要があります。
そのためには、SEO（検索エンジン最適化）やアクセス解析の知識がとても重要です。
これは専門のスタッフが行うことが多くはありますが、Webサイトを始めから立ち上げるときや、アクセス解析をもとに、改修を行う時などには、Webデザイナーもある程度の知識を持っていることが望まれます。
HTMLとCSSのスキル
HTMLとCSSとは次のようなものです。
・HTML ⇨ Webページをパソコンに表示するためのマークアップ言語
・CSS ⇨ ページの装飾のスタイルを作るための言語
こういった仕事のことをコーディングと言って、コーダーが担当するのですが、小規模なものやフリーランスで行う場合は、デザイナーが行うこともあります。
JavaScript/jQueryのスキル
JavaScriptとjQueryとは次のようなものです。
・JavaScript（ジャバスクリプト） ⇨ Webブラウザで実行されるプログラミング言語
・JQuery （ジェイクエリー） ⇨ JavaScriptを簡単に記述できるようにしたライブラリ
JavaScriptもjQueryも動的なもので、フロントサイドエンジニアが担当しますが、WebデザイナーがUIを考える上で、どのような動作が可能かと言うことをデザイナーも理解しておく必要はあります。
コミュニケーション力
クライアントやディレクターが求めることや意図を汲み取ってそれをデザインにしていく時、作ったデザインをクライアントに提示する際に、聴いたり話したりするという基本的なコミュニケーション力は重要です。
Webデザインの将来性は高い
現在もWeb業界はどんどん拡大していっていて、それに伴いWebデザイナーの需要も高まっていっています。
また、Webデザイナーは、会社によってはデザイン以外にもプログラミングや文字コンテンツ制作の仕事をすることもあります。
プログラミングはプログラマーに、Webサイトの中の文章を書くのはライターが行うことが一般的ですが、このプログラミングやライティングのスキルも身につけておけば、さらに重宝されるWebデザイナーへ成長することができます。
Webデザインの仕事の平均年収
これはあくまでも平均なので、ウェブ制作会社では380万円以上、広告代理店や大手の制作会社になると450万円以上になります。
ただ、在宅のフリーランスのWebデザイナーの場合は、営業活動に時間を取られてしまうこともあり、250万円以上というように、仕事が軌道乗るまでには、あまり収入が高くなりません。
そして海外になると、最低でも450万円以上になりますが、日本と違って、SEO対策やアクセス解析ができるのが当たり前の高いスキルを求められていることが理由なようです。
Webデザインの仕事をするのに向いている人
・デザインが好き
・地道な作業が苦にならない
・繊細
・流行に敏感
デザインが好き
世のたくさんの人に見てもらえるなどの仕事は皆が憧れますが、業界向けのものや、会社・組織の中でしか使われないような仕事もあります。
選り好みができない世界なので、見てもらう対象がどのようなものであっても、自分の感性をデザインで表現できることに喜びを感じられるような人がデザイナーに向いていると言えるでしょう。
地道な作業が苦にならない
デザインというと、華やかなイメージですが、実際は地味な作業を積み重ねていくものです。
基本的にデザインとはクライアントワークなので、自分の思い通りに進まないことも多くあります。
何度も細かい修正が入ったり、地道な単純作業をすることも少なくありませんが、そういったことを苦と感じず、黙々と続けられる人が、Webデザイナーに向いていると言えます。
繊細
自分が作ったデザインの通りにコーディングされているか、表示がおかしかったり、崩れたりしていないかなどを細かくチェックしていきます。
細かい修正をすることもありますので、細部まで気が付く繊細で神経質な人がWebデザイナーに向いていると言えます。
流行に敏感
現在、どんなものが流行しているか、また反対に一昔前に流行したものは何かという情報は、Webデザイナーは常にチェックしておく必要があります。
流行に敏感だったり、情報感度が高い人がWebデザイナーに向いていると言えます。
Webデザインの仕事のやりがい
・世の中に自分が作った制作物が出た時
・自分が作った制作物から成果が出た時
・紹介で仕事の依頼が来た時
世の中に自分が作った制作物が出た時
Webデザインは、パソコンの画面に映し出されて、とてもたくさんの人が見ます。
Webデザイナーなどのクリエイターには、自分が作った作品を世の中に出して多くの人に見てもらいたいという思いがあると言われています。
自分が作った制作物から成果が出た時
顧客がWebサイトを持つのには何かしらの目的があるはずです。
商品の販売やサービスの提供のためだったり、または自分の会社の採用業務なのかもしれません。
その目的が達成されたり、何かで成果が出た時は、自分が作ったデザインがその結果を導き出したという意味で、大きな達成感を感じることでしょう。
紹介で仕事の依頼が来た時
フリーフランスだけでなく、会社に所属しているWebデザイナーの場合でも、直接デザイン作成を依頼される場合があります。
あのサイトを作ったデザイナーにお願いしたい、とか、以前作ってもらっったデザインが評価されて、今回もまた作ってもらいたいというようにです。
多くのWebデザイナーの中から。紹介で依頼が来るということは、大きな自信になりますし、やりがいも感じられるようになります。
Webデザインの資格
・ウェブデザイン技能検定
・Webデザイナー検定
・HTML5プロフェッショナル認定資格
・Photoshopクリエイター能力認定試験
・Illustratorクリエイター能力認定試験
ウェブデザイン技能検定
Webデザイナーの国家資格で、厚生労働省から唯一認定している資格で、受験資格はありません。
実技と学科試験の2つが実施されます。
1級から3級まであって、2級と3級に合格したら、特定非営利活動法人インターネットスキル認定普及協会から、1級に合格した場合には、厚生労働大臣から「ウェブデザイン技能士」の合格証書が発行されます。
Webデザイナー検定
公益財団法人 画像情報教育振興協会（CG-ARTS）が主催する資格で、ベーシックとエキスパートの2種類があり、受験資格はありません。
Webデザイナーに向けた基礎的・標準的な知識を問われる試験です。
HTML5プロフェッショナル認定資格
特定非営利活動法人エルピーアイジャパンが主催している資格で、HTML5、CSS3、JavaScriptなどの最新の知識・技術力を問われる試験です。
Level1とLevel2の2つのレベルの試験があります。
Level1では、マルチデバイスに対応したWebコンテンツ制作の基礎について、Level2ではWebアプリケーションやシステム連携についての知識を問われる試験が行われます。
Photoshopクリエイター能力認定試験
株式会社サーティファイが実施するPhotoshopに関する民間資格です。
エキスパートとスタンダードの2種類の試験があって、Photoshopについて、画像を作成したり、問題文の指示に従いながら、1つの作品を作り上げる力などが試される試験です。
Illustratorクリエイター能力認定試験
株式会社サーティファイが実施する、Illustratorに関する民間資格です。
エキスパートとスタンダードの2種類の試験があり、Illustratorについて、デザインのパーツの作成したり、問題文の指示に従いながら、新規ドキュメントから1つの作品を作り上げる力をためされる試験です。
まとめ
・Webデザイナーとは
・グラフィックデザインとの違い
・Webデザインの仕事内容
・①ヒアリング
・②コンセプト設計
・③ワイヤーフレームの作成
・④グラフィックの制作
・⑤コーディング
・⑥テスト
・Webデザインの3つの働き方
・インハウスデザイナー
・広告代理店・制作会社
・フリーランス
・Webデザイナーに必要なスキル
・デザインの基本のスキル
・UI/UXデザインのスキル
・デザインソフトのスキル
・テーマに沿ったデザイン力
・人を集める企画力
・SEOとアクセス解析の知識
・HTMLとCSSのスキル
・JavaScript/jQueryのスキル
・コミュニケーション力
・Webデザインの将来性は高い
・Webデザインの仕事の平均年収
・Webデザインの仕事をするのに向いている人
・デザインが好き
・地道な作業が苦にならない
・繊細
・流行に敏感
・Webデザインの仕事のやりがい
・世の中に自分が作った制作物が出た時
・自分が作った制作物から成果が出た時
・紹介で仕事の依頼が来た時
・Webデザインの資格
・ウェブデザイン技能検定
・Webデザイナー検定
・HTML5プロフェッショナル認定資格
・Photoshopクリエイター能力認定試験
・Illustratorクリエイター能力認定試験
私たちは、頑張るあなたを応援しています。
