Webデザイナーとは

こんにちはMiya(@Miya_noir)です。
先日、Mirrativの配信中の雑談でポロっと喋った内容を少しまとめておきます。
内容としては初心者向けとなっており、『え、ここ違うよ？』とか『ちょっと考え方古いんじゃない？』と思われる箇所もあると思いますがその場合はコメント等で突っ込んでいただければと思います。

Webデザイナーという職業について

自己紹介などで自分の職業をWebデザイナーと言った時、相手の反応はどうでしょうか？

1.(とりあえず横文字職業)すごーい
2. ホームページ作る仕事か～
3. ホームページのスペシャリストか～
4. ブログとかでアフィリエイト収入でもしてるのか～

こんな感じが多いんじゃないかと思います。
1つ目はともかく、2つ目・3つ目の感想は間違ってはいません。
でも、詳しいことは知らないんじゃないかと思います。
(4つ目は違うと思いますが、ある時マジで言われました。)

なので、かなり簡単にWebデザイナーとして欲しいスキルを紹介していきます。
なお、これから紹介するスキル全てを持っていなければならないわけではありません。
もちろん、あればなお良いとは思います。

画像編集(PhotoshopやIllustrator)

色々なホームページを見てみると、様々な画像が埋め込まれています。
アイコンだったり、ヘッドイメージだったり、背景だったり、商品の画像だったり。
それらを見栄え良くPhotoshopなどの画像編集ソフトを使って編集したり、または0から作り出します。
アイコンやロゴなんかだとIllustratorを使ったりもします。
(お好みですのでIllustratorが使えない人も昔は多かったです。)

プロトタイプ作成(Adobe XDやFigmaなど)

昔は作成するホームページの全体図をPhotoshopまたはIllustratorで作ってました。
今はAdobe XDやFigmaといったプロトタイプを作成するソフトがあるので、これらで作ります。

IllustratorやPhotoshopで作るのと何が違うのか？と言われれば、Adobe XDやFigmaで作ったプロトタイプは実際にボタンを押した時にどのページに飛ぶのか、ボタンにマウスオーバーした時、アニメーション(ロールオーバー)するのかなどを見ることが可能です。

ちなみに、昔、携帯電話(いわゆるガラケーと呼ばれるもの。i-modeとかの時代)のコンテンツ制作をしていた時は、どのページからどこに飛ぶのか、という遷移図をPowerpointで作ってました。

コーディング(Dreamweaverなど)

プロトタイプと同じデザイン・アクションするように、ブラウザが読み込めるHTMLという形式へと変換する作業が必要になってきます。
昔であれば見た目のデザインも、ボタンを押した時のアクション(ロールオーバーなど)も同じHTMLファイルに書き込んでました。
今は基本的には別ファイル化して使用することが多いです。
(そのページにしか反映させないものであれば直接書き込みますが…)

見た目のデザインはスタイルシートと呼び、アニメーションやマウスオーバーなど動きをつけるものはJavascriptといい、それぞれ別の言語です。
それとは別に、例えば入力フォームを使ったページだとPHPと言ったプログラミング言語も使います。

昔に比べて、求められるスキルがとんでもなく多くなっているため、環境によっては『デザイン系だけする』とか『コーディングだけする』とか分業することもあります。
全ての作業を一人でこなすことは業務上少なくなっているんじゃないかと思います。
もちろん、知識としては両方持っていたほうがいいに越したことはないですけれども。

-----

と、ここまではWebデザイナーの基本的な業務となります。
他にも、ホームページのアクセス解析をして改善点などを報告したり、検索サイトでヒットするのかを調べたりなどする場合もあります。
簡易的でもいいので、このあたりもできると尚良しだと思います。
でもたぶんこの辺は専門のスペシャリスト(Webマーケティング・SEO対策専門等)に任せたほうがいいですね。