カテゴリ
本サイトはプロモーションを含みます。

Webデザイナーの仕事内容「デザイン」「コーディング」

Webデザイナーの仕事は大きく2つ「デザイン」と「コーディング」があります。それぞれを解説していきます。

デザイン

Webデザイナーが主にデザインするのは、Webサイトとバナーです。

Webサイトのデザイン

サイトのデザインには、主に「Photoshop(フォトショップ、略してフォトショ)」か「XD(エックスディー)」というAdobeのソフトウェアを使います。たまに「Illustrator(イラストレーター、略してイラレ)」を使ってデザインする人や現場もいます。

以前は、サイトのデザインと言えばフォトショが主流でしたが、現在は動きが軽快なXDが広く使われるようになりました。フォトショやXD以外にも「Sketch(スケッチ)」や 「Figma(フィグマ)」というツールを使っている現場もあります。

下の画像はフォトショでデザインを制作している様子です。

Webサイトをデザインする流れは次の通りです。

WebディレクターがクライアントにWebサイトが実現したい目的などをヒアリングをした上で、ワイヤーフレームというサイトの設計図を作ります。

Webデザイナーはそのワイヤーフレームを元に、サイトをデザインします。配色やデザインテイストをトーン&マナー(略してトンマナ)と言いますが、トンマナをしっかり押さえた上で、デザインをします。

Webサイト内で使用するアイコンや画像も基本的にはWebデザイナーが制作します。アイコンのようなイラストデータは、Illustrator(イラストレーター略してイラレ)というAdobeのソフトウェアだと作りやすいので、現場ではイラレも使用します。
もし、本格的なイラストが必要になり、Webデザイナー自身で制作できない場合は、外注のイラストレーターにお願いするか、素材サイトからダウンロードして利用します。

写真撮影の必要があれば、WebデザイナーもWebディレクターと一緒にカメラマンの撮影に同行することもありえます(僕は今まで一回しかありませんが)。

サイトのデザインが完成したら、Webディレクターを通して、クライアントにデザイン(「デザインカンプ」と言う)を提出します。修正の必要があれば、クライアントから戻し(フィードバック)があるので、デザインを修正します。

小さなWeb制作会社だと、スタッフが少ないせいで、WebデザイナーがWebディレクターの役割も担うことがあります。その場合、見積もりの仕方やスケジュールの進行などの知識と経験は積めますが、かなり多忙になる場合が多いので要注意です。鬱になる可能性もあるのでデザイン&コーディングとディレクションの兼務には気をつけましょう。

バナーの制作

バナーとは、サイトに掲載する画像の広告です。

クライアントかWebディレクターが、バナー上に掲載する原稿を用意してくれることが多いので、Webデザイナーはその原稿を元に、PhotoshopかIllustratorでバナーを制作します。バナーはCTR(Click Through Rate/クリック率)やコンバージョン(購入や申込みなどの成果)を確認できるので、その結果を元に、テキストやボタンの色などを変えて、よりバナーの効果が出るよう改善していくことがあります。

コーディング

コーディングとは、HTML/CSSやjQuery(ジェイクエリー)を用いて、デザインを元にWebサイトを構築していく作業です。

コーディングにはエディタと呼ばれるソフトを使用します。
現在人気のエディタは無料でMicrosoft製の「Visual Studio Code」です。略してVSCodeと呼ばれています。上の画像のエディタはVSCodeです。
その他のエディタには、Adobeの「Dreamweaver(ドリームウィーバー)」、「SublimeText(サブライムテキスト)」「Atom(アトム)」「WebStorm(ウェブストーム)」などがあり、無数に存在します。
企業ではDreamweaverを用意しているところが今も多いですが、みんな自分が使いやすい好きなエディタを使うことが多いです。有料と無料のものがあります。

コーディングで、何かしらアニメーションやアクションが必要な場合は、jQueryというプログラミング言語を使って実装していきます。

コーディングだけをする人を、「コーダー」「HTMLコーダー」「マークアップエンジニア」などと言いますが、現在はコーディングしかできないコーダーは生き残りづらくなっています。コーディングを極めて、さらにjQueryやその元の形のJavaScriptもバリバリ書けるフロントエンドエンジニアであれば、現場ではとても重宝されます。年収もかなり期待できます。

サイトを管理画面から更新可能にするには、WordPress(ワードプレス)を実装します。WordPressは、無料のサイト&ブログ構築システムです。PHPというプログラミング言語で構築されていますが、サイトに実装するにはそれほど難しくないため、Webデザイナーに必要なスキルの一つになっています。

コラム①:正社員のWebデザイナーを強くオススメする理由

このサイトでは、本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社することを強くオススメしています。

Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』『Webist』の2つです。
※コロナもほぼ収まりつつありますが、まだワークポートもWebistですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために、ポートフォリオを制作後に登録しておきましょう。

コラム②:Webデザイナーを強くオススメする理由

エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、50〜60万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』のようなスクールに行きましょう。プログラマカレッジは、学校&就職支援の一体型サービスです。

他にも、PHPに特化した無料の『無料PHPスクール』もあります。PHPはがっつりプログラミングの言語である一方で、ECサイト構築やWordPressにも使われるWeb系と親和性が高い言語なので、Web系に進みたい人には無料PHPスクールはオススメです。23日間通学でけっこうハードなカリキュラムです。

この2つの学校のどれかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

コラム③:ポートフォリオのチェックリストをnoteで販売中!

「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました!27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう!

ご質問や感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。
こちらで承認後にコメントは表示されます。
* が付いている欄は必須項目です。

上への矢印