Webデザイナーって何?どんなことしてるの?Webデザイナーの仕事を徹底解説します

こんにちは、なっちゃそです。

 

わたしはフリーランスでWebデザイナーという仕事をしています。

みなさんそもそもWebデザイナーってどんなことをするのかご存知ですか?

「Webをデザインしてるんでしょ?具体的に何をしてるのかは知らないけど。」

という方もたくさんいるのではないでしょうか。

そんな方のために今回はWebデザイナーが具体的に何をする仕事なのかについて紹介していこうと思います。

 

Webサイトを作りたい!というクライアントの要望を整理する

 

Webデザイナーはクリエイティブな職だというイメージを持っている人が多いと思いますが、

実はそうでもありません。

私たちの仕事はクライアントの方の

「こんなWebサイトを作りたい」

「今のサイトを今っぽくリニューアルしたい」

「こんな機能を追加したい」

といった要望から始まる仕事で、

いかにクライアントの需要に合ったサイトが作れるかが大切になってくるので

アーティスティックな要素はほとんど必要ありません。

 

案件の相談を頂いたら、まずはクライアントの要望を詳しく聞いて

具体的にサイトの開設やリニューアルによって得たい効果は何なのか

どんなコンテンツが必要で全部で何ページ作るか

どんな雰囲気のサイトがいいのか、どんな機能をつけるか

など実際にサイト構築に必要なデータを揃えていきます。

 

また、納期や予算などについて見積もりを出すと言った事務的な作業もこの段階で行います。

 

補足

わたしはフリーランスなのでこの段階も自分で行いますが、

制作会社などではWebディレクターという役割の人がいる場合が多く、

デザインのに入る前の方針や構成などはこのWebディレクターが行うことがほとんどみたいです。

うらやましいですね。

 

サイトの構成を考えてデザインに落とし込む

 

さて、ここからが実際にデザイナーらしい作業になります。

サイトの概要が決まった後、

それをどのような見た目で実現していくのかを考え、

「ワイヤーフレーム」「ラフカンプ」という2つの形に落とし込んでいく作業が発生します。

 

ワイヤーフレームを作る

 

ワイヤーフレームとは実際に必要になるコンテンツ(テキストや、写真、イラストなど)を

サイトのどこに配置するのかといったことを、

線や枠で構成された骨組みの形で書き出した物のことを指します。

書き出し方は決まっていないのでIllustratorPhotoshopなどで作る人と手書きで作る人がいます。

ちなみに、わたしは作ったワイヤーフレームを自分しか見ないパターンがほどんどなので

手書きでささっと作ることが多いです。

 

ラフカンプを作る

 

完成したワイヤーフレームを元に先ほども登場したIllustratorPhotoshopを使って

実際に画像やボタン、テキストを作成し

サイトの完成形と同じになるように配置したものをラフカンプと言います。

一般的にはこの作業がWebデザインと呼ばれていて

実はこの作業ができるだけで「Webデザイナー」を名乗ることができちゃいます。

 

また、ラフカンプを作るにはある程度のスキルが必要になるので

クラウドワークスやランサーズでは「Webデザインのみ」という形で

ラフカンプだけを要求している案件もたくさんあります。

 

ちなみにわたしの場合は自分でサイトの構成を考えて、自分で構築していくので

クライアントに要求されない限りはラフカンプの段階はスキップして

いきなり次に紹介するコーディングの作業に入っています。

 

わたしはWebサイトのデザインを考える際に『Webデザイン良質見本帳』という本を参考にしています。

WebサイトのデザインのレパートリーはWebサイトを見ることでしか増やすことができないので、

自分のアイディアの源になる一冊は持っていた方がいいと思います。

こちらの本はサイトの印象・配色・業種など様々な切り口で優れたデザインのWebサイトを紹介してくれていて

非常に使いやすいのでおすすめです。

デザインを元にコーディングする

 

さて、デザインが決まったらいよいよ

HTMLCSSという2種類のマークアップ言語でコーディングする作業に入ります。

いきなり英文字が登場してしまったのでこの辺りでアレルギー反応を示す方もいるかもしれませんが

ここでは英文字の意味は気にしなくていいので、単なる名前として覚えてください。

 

ちなみに、

このコーディングする作業のみをする人のことをコーダーと呼び、

さらに専門性が高くなってくるとフロントエンドエンジニアという呼ばれる職種になります。

会社などではWebデザイナーとコーダー・フロントエンドエンジニアの両方がいる場合が多く

その場合はWebデザイナーは前章のWebデザインの部分のみをこなすということになります。

 

ただWebデザインとコーディングどちらかしかできないとなると

受けられる仕事の幅が非常に狭くなってしまうので、

Webデザイナーになりたいという方はこれら両方ともしっかり身に付けたほうがいいと思います。

 

※なお今回はWebデザイナーの仕事内容に焦点を当てているので

各言語の詳しい説明は割愛させていただきます。

HTML・CSSについての記事も書くのでそちらを興味がある方はそちらを見てみてください♪

 

HTMLとはテキストに文書構造を与えるためのもの

 

 

HTMLはWebサイトのコンテンツ(テキストや画像)をサイト上に表示させるための言語で

正式名称は「Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)」といいます。

HTMLの仕事は

『ユーザーがサイトを開いた時にそのサイトの内容を見ることができるようにすること』

なので、単体でもサイトを成立させることができます。

ただし、デザインや装飾を施すのはCSSの仕事なので、

HTMLのみで作られたサイトはただ文字が並んでいるだけという状態になります。

(そしてご周知のとおりこの状態でサイトが公開されることはまずありません)

 

CSSとは装飾やレイアウトを与えるためのもの

 

 

CSSとはHTMLで構成されたコンテンツにデザインを当てていくための言語で

先ほどのHTMLとは違い、単体では何も表示させることができません。

必ずHTMLとセットで使われます。

HTMLのファイルの中に直接書き込むこともできるのですが、基本的にこの方法はあまり取らないほうが良いです。

ではどうするかというと、HTMLとは別にCSSのファイルを作成し、

HTMLの中にリンクを設定してCSSファイルの情報が呼び出されるようにします。

そしてデザインを施したいHTML内の要素にclassと呼ばれる名前をつけて

CSSのファイル内でその名前の意味を定義するという流れでコンテンツをデザインしていくことがほとんどです。

 

「Webデザイン興味あるけどコーディングとかわけ分からんわ・・・」という方へ

 

Webデザインを初めて勉強する人にとって最初の関門がこのHTML・CSSです。

概念を理解してしまえばあとは数をこなして体に染み込ませるだけなのですが、

逆に言えば概念がわからないと手も足も出ません。

Googleで検索して勉強する方法もありますが、最初は情報がまとまっている本を使っての勉強をオススメします。

わたしは『いちばんやさしいHTML5&CSS3の教本』という本に非常にお世話になりました。

HTML・CSSを実際に手を動かしながら学ぶことができるので、この本を2周ほどすれば基礎は身につけられるかと思います。

 

JavaScriptを使ってサイトに動きをつける

 

HTMLとCSSだけでも立派なWebサイトを作ることができるのですが、

最近はトップの写真がスライドしたり、クリックした際にアニメーションがついていたりするサイトが多いですよね。

あれらの動きをつけるためにJavaScriptという言語が使われています。

 

HTML・CSSは比較的シンプルな構造で覚えやすいのですがJavaScriptは本当にいろんなことができるので

使いこなすにはより高度な知識が必要になります。

なので、JavaScriptを使った作業はフロントエンドエンジニアの方、

もしくはエンジニアの方が担当することもあります。

 



その他の仕事

 

フリーランスのWebデザイナーはWebサイトを作る以外にも

デザイン関係の案件をいただくことがあるのでそちらもちょこっとご紹介します。

 

 

ロゴ・名刺を作る

 

会社のロゴや名刺を作ることがあります。

これらは単価はさほど高くないのですが、

新しい会社や新しいサービスのスタートアップに関わることができるので

個人的にはとてもやりがいがあって好きな仕事です。

どちらもIllustratorで作るのが主流です。

 

バナーを作る

 

バナー単体で受注することは滅多にありませんが、

新規開設サイトにバナーが必要な場合等は作成しています。

こちらは写真を使用することが多いのでPhotoshopを使用することが多いです。

 

チラシ・フライヤーを作る

 

チラシなどの紙媒体をデザインすることをDTPデザインといい、

Webデザインとは違った技術が必要になります。

ですが、WebデザイナーはDTPデザインに必要なPhotoshopIllustratorを使うことができ、

グラフィックデザインの勉強もしている人がほとんのなので

紙媒体の制作依頼もお受けすることがあります。

 

最後に

 

いかがでしたか?

想像していたWebデザイナーの仕事内容とのギャップはありましたでしょうか?

 

こんなに色々やらないといけないのか・・・

と思った方のために補足しておきますと、

ここでご紹介している仕事内容は、

フリーランスでWebデザイナーをやる場合は全て自分でやらないといけませんが

Webデザイナーとして制作会社などに就職して働く場合は基本チーム制になっているはずなので

これらの業務中で自分が得意とするものをひたすらこなしていくという感じになるかと思います。

 

また、Webデザイナーになるための資格等は存在しておらず、

根気さえあれば独学でも技術を身に付けることができます。(わたしは完全独学でWebデザイナーになりました)

 

誰でも簡単になれるとまでは言えませんが、誰でもなれる可能性がある職業であることは間違いないので

興味がある方は挑戦してみるのがいいかと思いますよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です