見出し画像
Photo by kurimo

今さら聞けない？Webデザイナーの仕事って何だ

Webデザイナー20年。ネットショップ運営10年。丹羽さくらのWebデザイナー応援note

Webデザイナーへの就職、転職あるいはWebデザイナー講座などよく目にするものの具体的にどんなお仕事なのだろう。
そんな方にWebデザイナーとして20年近く活動している私なりの解説をしたいと思います。

デザイナーの仕事の分類

  • Webデザイナー

  • グラフィックデザイナー

  • CGデザイナー

  • ファッションデザイナー

  • ゲームデザイナー（ゲームクリエイター）

  • プロダクトデザイナー

  • エディトリアルデザイナー

  • UI、UXデザイナー（これは日本だとWebデザイナーに含まれたりなどのケースも）

日本における代表的なデザイナーの仕事分類になります。
それ以外にも沢山あるとは思うのですが基本的なものをご紹介しました。

Webデザイナーの仕事の分類

主なWebデザイナーの仕事は下記の通りです。
下記以外にも細かい仕事は沢山ありますし、ITの進化によって今後も新しい仕事は増えていくでしょうし逆に時代の流れに伴い不要になる仕事もあるかと思います。

  • ホームページ制作
    –デザインカンプ
    –コーディング（HTMLやCSS、Javascriptなどデザインと関わる部分まで）
    –ノーコード

  • LP（ランディングページ）制作

  • ECサイト制作

  • バナー制作

  • サムネイル制作、メインビジュアル制作など画像

  • アプリのUI制作


ホームページ制作

まずはホームページ制作についてご説明します。
Webデザイナーが取り組むべき作業は大きく分けて３つあるかなと思います。

まず１つめのデザインカンプ制作とは、フォトショップだったりイラストレーター、Canva、Figma、XDなどによりデザインを起こす仕事です。
サイトの構成案やワイヤーフレームに基づいてデザインを進めます。
ワイヤーフレームはお客様から支給される場合もありますが、デザイナー自身が作成するケースもあります。

２つめのコーディングとはデザインカンプに基づいてホームページとして表示されるよう最適化する「コード作成」を指します。
また最近だとコードからいきなりデザイン案を起こす方もいらっしゃるのではないかと思います。特にエンジニア寄りの方に多いですね。

そして最後３つめのノーコードは、コードを使わずにデザインをホームページとして最適化するための手段です。
私はここ数年はノーコードでホームページを作っています。
ノーコードはWordPressを利用したElementorやDivi、そしてSTUDIOやWIXなどもそうです。

LP（ランディングページ）制作

ランディングページは厳密に言えばホームページの一つではあるのですが、最近は分類分けされることが多い傾向にあります。

ランディング（landing）を和訳すると着陸場所という意味になります。
そこから転じて、検索エンジンで表示されたり広告が表示された際にクリックやタップすると行き着く場所がランディングなんです。
一般的にはとにかく長〜い１ページ構成のホームページをランディングページって言われているのですが、２ページだろうが３ページだろうがランディングページです。
要はどこからかアクションした際に最初に着陸したサイトのことです。
なぜそれをホームページと切り分けるかというと、着陸した見込み客が目的とする行動を取ってくれるよう設計したサイト構成にする必要があるからなんです。
これに関して詳細なテクニックなどお話しするとまた話が長くなるから今日は割愛します。

例えばネットサーフィンしていてうっかり広告をクリックした際に出てくる長〜いサイトがそれです。
前半で魅力的な訴求があってお客様の声や実績などが掲載されていて、最終的に申し込みや問い合わせフォームにたどり着くというアレです。

ECサイト制作

次はECサイト、いわゆるネットショップ制作です。
これも細かく言えばデザインカンプを作ったり、コーディングしたり、あるいはノーコードで制作したりとまた３つ位に分類されます。

バナー制作

これをWebデザインと言っていいのかなと個人的には疑問に思ったりしますが、バナーはWebデザイナーに降ってくる仕事の一つです。
私は以前、ヤフーの自社稿バナーを業務委託で受注していました。
当時はFlashを使ったアニメーションバナーがメインでした。

サムネイル制作、メインビジュアル制作

サムネイル制作は主にYouTubeのサムネを作ることを指します。
これもWebデザイナーが受注する機会は多いのではないでしょうか。
またメインビジュアルとはWebサイトのいわば看板となるタイトルやメニューの直下に配置される画像のことです。

アプリのUI制作

これは最近ちょっと減った気がしますが、スマートフォンアプリだったり、Webアプリケーションだったりの全体的な構成やボタンを設計する仕事です。
UIとはユーザーインターフェースの略で、厳密に言えばフォントやボタン、デザイン全体まで指します。
しかしUIがなぜ特別なものとして分けられているかというと、より使いやすい構成をデザインすることがユーザーの快適な操作へ導き、その結果として効率が上がったりあるいはWebサイトで言えば回遊率や滞在時間が増えるなど重要な役割を持つからなのです。

独学で始めるならどれがオススメですか

未経験者が独学で始めるなら、とてもやりやすいのはメインビジュアル制作やバナー制作です。
なぜなら１枚の画像として完結するので作りやすいからです。
また画像制作はAdobeフォトショップやイラストレーター、あるいはCanvaがあれば作れます。
作るツールは今はCanvaが人気ですが、プロを目指されるのでしたら是非ともフォトショップに挑戦していただければと思います。
Webデザインの現場ではプロはまだまだフォトショップやイラストレーターを使って制作しています。

初心者がやってはいけないこと

初心者がやってはいけないことは、あれこれと中途半端に手を出すことです。
Webデザインの仕事は勉強量が多く習得するのに時間がかかりますので、まずは何か一つやってみてから次に移る方が良いでしょう。
それから例えばWebサイトを作るにはマーケティングも学んでおかなくちゃ等とやることがブレるのも考えものです。
もしWebデザイナーになるという意思があるのでしたら、一つずつ着実に極めてみてください。
あれこれやりたかったらその分２倍以上の時間をかけて行動してください。

以上、今さら聞けないWebデザイナーの仕事分類についてお話しいたしました。

更に質問や疑問点がある方へ

Webデザイナーになりたいけれど何から始めたらいいか分からない、あるいは今の方法で合っているのか不安。
そんな方がいらっしゃったら無料でご相談に乗りますのでTwitterからDMください。営業もいたしませんのでお気軽にどうぞ。
ってことで、私のTwitterを共有します。

Webデザイン初心者さん向けのTwitterはこちら

LINEオープンチャットができました！

WebデザイナーさんやWebデザイナー志望さんのためのオプチャです。
ゆるくつながっておきたい方や本格的にお悩み相談してみたい方も大歓迎です。
今のところ少人数でのんびりと盛り上がっています。

LINEオープンチャット「Webデザイナーの休憩室」https://line.me/ti/g2/a8ZUHva6XTFPws9mqR1VTqxxy9913zNVdxDPBw


この記事が気に入ったらサポートをしてみませんか？