Webサイト制作工程におけるWebデザイナーの仕事の流れ

Webデザイナーの仕事は、Webサイト制作工程の中の1つです。
Webサイトの企画から公開、運用の流れの中で、目的に基づくWebデザインやユーザビリティ、HTMLコーディングなどを担当します。

私が担当してきたWebデザイナーとしての仕事の流れをご紹介します。
Webデザイナーの仕事に限定しなければ、他にもやらなければいけないことはたくさんあります。
デザインとは設計することです。
アートではないので、目的のための設計が必要となります。

ヒアリングでコンバージョンとペルソナ確認

Webサイトの目的に向かって制作していくため、担当営業やクライアントと打ち合わせ、ヒアリングしていきます。

Webサイトを公開する目的

わざわざお金をかけてWebサイトを公開する目的を確認します。
(この時点で「メンテナンスや費用を考えると無料のサービスでも目的を果たせるのでは？」となることもあります)

など、Webサイトの目的によって必要な機能や見せ方が違ってきます。

Webサイトのコンバージョンは何か

Webサイトにおけるコンバージョン(Conversion)とは、
Webマーケティング用語で
Webサイト上で獲得できる最終的な成果のことです。

例えば「通販サイトの決済」「資料請求」「会員登録」などをコンバージョンとします。

Webサイトのコンバージョンが決まっていないとWebデザインはできません。
コンバージョンを明確に設定すればWebサイトの目的が定まり、どのようなコンテンツを追加していけばいいのかブレずに制作を進めることができます。

目的に基づいて効果的なWebデザインを制作します。

ペルソナ設定

ペルソナ設定とは、ターゲットになる人物を具体的に決めることです。
ターゲット層ではなく、具体的な人格(ペルソナ)を決めて、その人がどのような行動を取るのか設定します。

ペルソナ設定の項目の例です。

設定したペルソナがWebサイトのコンバージョンまでに取る行動、心理、時間帯などを分析してWebデザインに反映していきます。

サイト構成図制作

サイト構成図とは、
Webサイトがどういうページ構成になっているのか、各ページがどういう関係になっているかを視覚的に表したものです。
サイト遷移図ともいいます。

サイト構成図によってページ変遷、必要なページ、不足ページなどがわかります。

ワイヤーフレーム制作

ワイヤーフレームとは、
Webサイトの骨組み、要素のレイアウトを作るものです。
画像や色を入れてビジュアルデザインをする前に、ワイヤーフレームを作ってユーザーをコンバージョンに導くWebサイトにします。

ワイヤーフレームが完成したら、ビジュアルデザインは半分完成したと言ってもいいくらい重要な作業です。
スマートフォンサイトのワイヤーフレームも必要です。

SEO対策を意識した原稿リライト

原稿リライトはWebデザイナーの仕事ではないかもしれません。
Webディレクターや専門のライターさんが担当することがあります。

私の場合、Webサイトのどこに何を入れたらいいか、文字数の把握やバナーのキャッチコピーを先に考えます。SEO効果も考慮して、ワイヤーフレームと同時に原稿のリライトをさせていただいてます。

クライアントから下のような原稿をいただくことがあります。

SEO効果が出るようリライトします。

クライアントには「SEO効果が出てWebサイトのアクセスが上がり、売り上げが伸びるように少しだけ文言を修正させていただきました。」と提案します。

ビジュアルデザイン案制作

ビジュアルデザインの部分が一般的に「Webデザイン」と呼ばれている工程かもしれません。
色や写真、ボタンなど、Webサイトを魅力的に使いやすく、効果が出る見た目の装飾をします。

先のワイヤーフレームができたら、イメージや色を当てはめていきます。
一番重要なデザインはコンバージョンのためのCTAです。

CTAとは「Call To Action」の略です。日本語では「行動喚起」と訳されます。
「押してほしい会員登録ボタン」「選んでほしいバナーリンク」など、
ユーザーの行動を自然に導くCTAはWebデザイナーの腕の見せ所です。

コンバージョンの他に、ペルソナが使ってくれそうなビジュアルデザインも絶対条件です。

Webデザイナーを目指すなら最初にビジュアルデザインを作ってみよう「Webデザイナーになりたい！」とこれからWebデザイナーを目指す初心者の方は、まず何をやればいいか、どんな勉強をすればいいかを調べるこ...

HTMLコーディング

ビジュアルデザインができたら、HTMLをコーディングしていきます。
特に気を付けることだけ簡単に記載します。

HTMLについてはこちらの記事でも簡単に解説しています。

HTMLとは？Webデザイン超初心者向けのHTMLの基礎知識Webデザイナーを目指すなら避けて通れないHTMLの基礎知識。 「HTMLとCSS」がセットで登場することが多いです。 この記事...

通常は表示されていない要素やページも作っておく

下記の他にもたくさんあると思います。必要な要素やページはあらかじめ用意しておきましょう。

画像素材制作

HTMLコーディングと並行して、画像素材を制作していきます。
こちらも、特に気を付けることだけ簡単に記載します。

Webデザインで使用するRGBとは？CMYKとは違う色の話RGBとはRed・Green・Blueの頭文字をとった光の三原色です。モニタの色を光で表現するために使います。WebデザインのカラーモードはCMYKではなくRGBになっていることを必ず確認しましょう。...

制作途中の素材ファイル・ボツのデザイン案は全て保存しておく

PSDやAIデータなど、最新の素材だけではなく、制作途中の素材ファイルは全て保存しておきましょう。
ボツになったデザイン案も全て保存しておきます。

これはとても重要なことです。
後から「あれに戻して」なんてことはしょっちゅうあります。

CSSでWebサイトを装飾

HTMLコーディング、画像素材制作と並行して、CSSファイルでHTMLに装飾します。
CSSとは、
(Cascading Style Sheets) Webページのスタイルを指定するための言語です。

こちらも簡単に記載します。

クライアントが更新できる箇所に想定外の要素を入れてCSSを調整

Webサイトで更新できる部分はテキストや画像を誰が更新するかわかりません。
誰が更新しても、何が表示されても崩れない、不具合を起こさないよう、
HTMLファイルの更新できる箇所に想定外の要素を記述してCSSを調整しましょう。

CSSで調整できない部分はWebエンジニアの担当かもしれないので相談してみましょう。

ローカル環境でチェック

できあがったHTMLをサーバーにアップロードする前に、ブラウザ表示してチェックしましょう。
1つのブラウザで崩れや不具合が出ない状態になったら、複数のブラウザ、デバイスで必ずチェックしましょう。

代表的なWebブラウザを無料でダウンロードできます。

HTMLファイルをWebエンジニアに渡す

完成したHTMLファイルをWebエンジニアに渡して、Webデザイナーのお仕事はいったん終わりになると思います。
Webサイトとして公開する設定や、クライアント側で更新する機能などの設定をしてくれます。

CSSファイルや画像データは、FTPを使ってWebデザイナーがアップロードすることもあります。

テスト環境で動作確認・修正

Webサイト公開前に、公開時と同じ動きを確認できるテスト環境で動作確認します。
不具合が起きたら修正します。

おわりに

Webデザイナーの中には「Photoshopで見た目のデザインをするだけ」というビジュアルデザインのスペシャリストもいます。
分業できる専門の担当者がいれば、HTMLとCSSはコーダーさんに、原稿リライトはライターさんにと依頼して、ビジュアルデザインに専念できます。

しかし、私が経験したWebサイト制作工程におけるWebデザイナーの仕事の流れはこのような感じです。
やること多いです。
「Webデザイナーの仕事」に限定しなければ、公開後もやることはたくさんあります。