webデザイナーってどんな仕事?

「webデザイナーって何をするの?」

この記事では、そんな疑問に答えます。

今回は、未経験からフリーランスのwebデザイナーになった私が、webデザイナーの仕事とはどういうものなのか?を具体的に説明します。

目次

webデザイナーの仕事内容

webデザイナーの仕事
  • ワイヤーフレーム(デザイン案)を作る
  • PhotosopやIllustratorを使ってサイトデザインを作る
  • コーディングしてサイトを組み立てる
  • wordpressのカスタマイズをする
  • プログラミングを実装する

ワイヤーフレーム(デザイン案)を作る

ワイヤーフレーム

ワイターフレームを作るとは、上のようにコンテンツやテキストの配置をデザインすることです。この時点では、モノクロで要素の大まかな位置を決めます。

上のワイヤーフレームは、パソコン表示されるトップページのデザインですが、スマホ表示用のページも作成します。また、基本的に全てのページでワイヤーフレームを作ります。(量産ページでなければ)

ワイヤーフレームは、UIの知識が必要ですし経験も影響するので、中堅かそれ以上の経歴値を持ったwebデザイナーが担当します。それかディレクターがやる場合もよくあります。

UIとは?

ユーザーインターフェースの略。ユーザーとサービスを繋ぐ接点を指す。この場合はwebサイトの快適性。

使うツール

figma、XD、Illustratorなど

PhotosopやIllustratorを使ってサイトデザインを作る

ワイヤーフレームを元に画像を当てはめたり、色を加えて装飾的なデザインを施します。

見た目は普通のwebサイトと同じですが、ページとして機能していないので、ボタンを押しても何も変わらない状態です。

コーディングしてサイトを組み立てる

コーディング画面

コーディングとは、「絵」の状態デザインを、サイトページとして機能するように実装すること。htmlとcssというプログラミング言語を使ってソースコードを記述します。

パーツ毎にデザインを切り分けて、素材を作り組み立てます。webデザイナーはデザインだけで、コーディングは、マークアップエンジニアが担当するという完全分業制にしている会社もあります。

それでもコーディングの知識は必須です。知識がないと実装できないデザインを作ってしまう可能性があるからです。

wordpressのカスタマイズをする

wordpressとは、ブログ構築が出来る無料のオープンソースです。上はwordpressの管理画面です。

ブログだけでなく、企業のwebサイト制作にもwordpressは利用されます。wordpressを使えば、サイト制作の知識がなくても、クライアント自身でブログやページの更新が出来るからです。

webデザイナーは、デザインテーマの作成をしたり、既存テーマのカスタマイズをします。

プログラミングを実装する

webサイトにおけるプログラミングとは、アニメーションを作ったり、カーソルを合わせると下に広がるアコーディオンメニューなどの動きのあるデザインを作る時に利用します。

javascriptやjqueryなどのプログラミング言語を主に利用します。

プログラミングはプログラマーが専門的に実装する場合も多いので、webデザイナーに必須ではありません。でも、簡単なものくらいは身につけておいた方がいいです。

私は、デザインとコーディングをやっていたので、ボタンなどで利用する動きのあるアニメーションを求められることがよくありました。

仕事の流れ

webサイトを作る時の流れは大まかに以下のような感じです。

仕事を発注される

クライアントにヒアリングを行う(ディレクターの仕事)

サイト設計を作る(主にディレクターの仕事)

ワイヤーフレームを作る

(ディレクター or webデザイナーの仕事)

クライアントチェック&修正作業

デザインカンプの作成(webデザイナーの仕事)

クライアントチェック&修正作業

コーディング作業

(webデザイナー or マークアップエンジニアの仕事)

クライアントチェック&修正作業

納品

webデザイナーに必要なスキル

  • パソコンの基本的な使い方
  • デザインの基礎知識
  • Photoshopが使えること
  • Illustratorが使えること
  • HTML、CSSの知識

パソコンの基本的な使い方

webデザインにはパソコンが使える事が必須です。基本的な使い方とは、電源が付けられること(デスクトップのMacは後ろに付いてるからwindowユーザーは戸惑う)、問題なくタイピングできること、検索できること、が出来れば大丈夫です。

昔はMacが多かったけど、今はWindowsを使用することも多いので、どちらでもOK。私は両方持っているけど、Macが制作作業に1番向いていると思うので、制作作業はMac、動作確認にwindowsを使います。

MacでもWindowsでも、基本的な使い方は同じ。職場のパソコンが自分のと違くても、全くわからない状態にはならないから大丈夫です。

デザインの基礎知識

デザインの基礎知識とは、レイアウトデザインや、文字のジャンプ率など、情報整理や快適に読む為に必要な知識のこと。

私の様に独学でデザインスキルを身につけた人も居ますが、かなり稀です。今はサイトが作れればOKな時代ではないので、学校に行ってきちんとデザインスキルを身につけた方が就職しやすいです。

Photoshopが使えること

Photoshopは、Adobeの画像加工ソフトウェアです。使用するには月払いで3,800円くらいかかります。

Photoshopには沢山の機能がありますが、必ず覚えないといけないのは、「ペンツール」の使い方。ペンツールは画像の切り抜き作業に使用します。

他にも「選択範囲の作り方」や「ブラシツール」「色補正」「ぼかしツール」なども必須ですが、それらの使い方は調べればすぐにわかります。でも、ペンツールでの切り抜きは練習が必要です。

Illustratorが使えること

Illustratorは、Adobeの描画用ソフトウェアです。使用するには月払いで2,728 円かかります。

PhotoshopとIllustratorを使うなら単品で契約するより、Adobe製品が全て使えるCreative Cloudプランの方が、ちょっとお得になりますよ。

Photoshopは「画像」で、Illustratorは「絵を描くこと」に特化しています。主にグラフィックデザインや、ロゴ作成、イラスト作成、バナー作成に利用します。

webデザイナーは、IllustratorよりPhotoshopを使う機会が多いと思いますが、Illustratorでデザインカンプを作る時もあるので、一通り触って理解しておく必要があります。

Photoshopと同じでペンツールの使い方と、図形の作り方を覚えておくと便利です。

HTML、CSSの知識

htmlとcssは、webサイトを組み立てる時に利用するプログラミング言語です。PhotoshopとIllustratorで作成したデザインを、htmlとcssを使ってサイトとして機能するように組み立てます。

プログラミングというと難しいイメージですが、コーディング作業は、いわゆるプログラマーの仕事とは全然違います。htmlとcssには理系要素は必要ありません。

webデザイナーの働き方

  • web制作会社に勤務
  • 広告代理店に勤務
  • 企業のweb担当になる
  • フリーランスになる

web制作会社に勤務

web制作会社の特徴
  • webサイト制作の全行程に関われる
  • 多種多様な案件で経験を積める
  • フリーランスになる為の下地ができる

web制作会社は、デザインはもちろん、サイト設計や、ディレクションなど、webサイト制作の一連の流れを経験できます。将来、フリーランスの道を考えている人に適した環境です。

でも、大規模な会社を選ぶと、完全分業制でひたすらデザインのみを作る担当になるかもしれません。

デザインが好きで、スキルを伸ばしたい人にはうってつけの環境ですが、ディレクションなど他の業務も経験しないと独立するのは厳しいです。

広告代理店に勤務

広告代理店の特徴
  • デザイン以外の業務も幅広く経験出来る
  • マーケティングの知識が身に付く
  • 数値分析が求められる

広告代理店のwebデザイナーの役割は、webサイト制作にとどまらず、広告の企画立案や戦略、ディレクション、マーケティング分析など、多岐に渡ります。制作会社のwebデザイナーよりも、コミュニケーションが求められる業種です。

web業界の知識を全て吸収したい!という貪欲な人にオススメ。マーケティングの知識が身につけば、フリーランスになった時もwebデザイナー兼マーケターとして、他にはない強みを生かせます。

社内のweb担当になる

社内web担当の特徴
  • 企画から携われる
  • マーケティングの知識が身に付く
  • 作成したデザインが正解だったか確認できる

社内の担当者は、「インハウス」とも呼ばれます。作って終わりの制作会社とは違い、その後の運用分析も含めて、深くサイト制作に携われます。

また、社内の広告担当的な立ち位置も多く、マーケティング分析やweb以外の販促物をデザインすることもあります。

フリーランスになる

フリーランスの特徴
  • 未経験からいきなりなるのは無謀
  • 営業力が高ければ会社員より稼げる
  • 集客、ディレクション、マーケティングなど、豊富な知識が必要

未経験からいきなりフリーランスになった私が言うのも何ですが、いきなりフリーランスは危ないのでやめましょう。

クオリティの低い商品を作ってしまうリスクと、金銭トラブルもあります。最近はクラウドソーシングが普及していますが、コンビニバイトより安い相場の案件に、応募が殺到する状況です。

フリーランスは会社員以上にコミュニケーションスキルが求められますし、コネクションがないと仕事が始められません。私は運良くコネクションがあったので未経験でも仕事をすることが出来ました。

webデザイナーの収入

求人ボックスでwebデザイナーで求人を出している企業50社を調査したところ、以下の結果となりました。

  • 未経験…年収265〜300万
  • 経験者…年収350万〜600万円

未経験者の場合、月20万〜25万円くらいが相場。プラス賞与という感じ。経験者の場合、経験値やスキルによって大きく変わります。最低ラインが300〜350万で、平均的には400万以上が多いです。

web制作会社、インハウス、広告代理店で比較してみましたが、業種は違ってもwebデザイナーの年収に大きな差はありませんでした。

webデザイナーで良かったことBEST5

ここでは私がwebデザイナーになって良かった!と実感したことをまとめました。

  • 在宅で働ける
  • 好きな制作作業が出来る
  • 人とあまり関わらない
  • 場所を問わず働ける職業だから住まいを選ばない
  • 知識を活かしてブログ運営が出来る

電車通勤しなくていい、メイクしなくていい、家という1番落ち着ける空間で仕事が出来る!もう、全部最高です。webデザイナーになって1番良かった事は、在宅ワークが出来るところでした。

私はHSPな人だと思うのですが、環境や場所が変わると集中力がとても下がります。誰かと一緒の空間というだけで、人が動く気配や音で集中力が削がれるタイプ。だから、家で仕事出来るというだけでストレス要因が減ります。

そして、何かを作る事が好きな自分にとっては、制作作業自体が楽しいものです。

webデザイナーのやりがい

  • クライアントに喜んでもらえた時
  • 自分のデザインで結果が出せた時(売上アップなど)
  • 自分でもいいデザインが出来たぜ!と思えた時

自分の制作物が世に出て役に立っている事が、やっぱりクリエイターとして、とても嬉しく感じます。

でも、逆に「こんな事書きたくない」と思うこともありましたし、消費者を欺く様に、極小の文字でわかりにくい注意書きを載せる時は、ディレクターと揉めました。(笑)

webデザイナーになる方法

専門学校 or 大学 or スクールで学び、専門技術を身につける。

私は社会人になってから、webデザイナーを志したので、スクールに通って勉強しました。

スクールでの勉強期間は3ヶ月〜半年程度。この期間で、webデザイナーに必要な知識を全て身につけられるかと言えば、難しいところです。

私はスクールで3ヶ月学びましたが、ツールの使い方すらあやしいし、自分で一からサイトデザインして組み立てるなんて、全く出来ませんでした。

専門学校か大学に行き本腰入れて学ぶべきだったと、今では思っています。スクールに通うにしても、半年〜1年はかかる本格的なカリキュラムの学校を選ぶべきでした。

就活する時もスクール卒より、専門卒、大卒の方が有利です。私は、最初の段階で判断を誤ったが為に、就活は全滅しました。その後、フリーランスでwebデザインの仕事を請け負う様になりましたが、知識が浅いから四苦八苦していましたし、単価が安い傾向でしたね。

生涯年収に大きく影響するので、初期投資は大事です!

webデザイナーに向いている人とは

  • 新しいもの好き
  • 刺激が好き
  • 勉強するのが好き
  • webやアプリなどIT周りの事が好き

webの世界は変化がめまぐるしく、勉強して覚えたことも、数年後には古くて使えなくなる事もあります。それが大変なんだけど、それが飽きなくていいという人も居ます。(笑)

そんな刺激や勉強が好きな人には、ピッタリの職業です。

それでは、一緒に頑張りましょう♪チャオ!

↓この記事がちょっとでも良いと思ったら、ぜひポチッとお願いします^^↓

ブログランキング・にほんブログ村へ 人気ブログランキング
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

未経験から在宅のフリーwebデザイナー歴5年→アフィリエイター歴6年くらい(1年目数万円→2年目→300万ちょっと→3年目目以降600万〜800万)→3年ブランクを経て再びブログに挑戦中。主婦ブロガー。
デザイナー時代から在宅で仕事をしてきた為、もう外で働けない人。
家にいながらお金を稼ぐ方法を、四六時中考えています。

コメント

コメント一覧 (3件)

  • わー!初コメ嬉しいなぁ!ありがとうございます!!
    webは向き不向きが大きく分かれますからね。無理しないでやめて正解だったと思います!

  • ぴよこさんの様な方もいらっしゃるんですね!私も安定した収入を考えてスクールで勉強しましたが、WEBは好きになれずやめました。やはり環境含めて楽しい!好き!が一番ですね、

コメントする

目次