【未経験必見】ウェブデザイナーの仕事がわかる4つの工程

こんにちは！
現在子育て奮闘中、ウェブデザイナー歴5年のみたナスです。

最近、子育てをしながら時間の融通が利く働きかたをしたいと思っている方が増えてきているように感じます。

その仕事の候補として、ウェブデザイナーという仕事が気になっている人もいるのではないでしょうか。

そんな方達のために、ウェブデザイナーが実際にどんな仕事をするか私の経験談も含めお伝えできればと思います。

まず、ウェブデザイナーはここからここまでの仕事という区切りはありません。

「企画（打ち合わせなど）」「設計（サイトデザインなど）」「制作（コーディング、プログラム構築など）」「運用（更新作業、サイト分析など）」の4つの工程全てに関わっているWEBデザイナーが多数です。

今回、未経験でウェブデザイナーの世界に踏み込み、現在はウェブディレクターとしても現役で活躍しているみたナスが、未経験の方にもわかりやすく説明していきます。

この記事を読み終わ頃には、

どんな仕事内容なのか把握し、ウェブサイトがどのように作られていくのかイメージできるようになります。

また、本当に自分のやりたい仕事かどうか判断する参考材料にもなることでしょう。

ウェブ制作現場の仕事の流れ

まずはウェブデザインの仕事の流れを理解しておきましょう。

1〜4の順番でサイト制作が進められます。人によって分け方が異なる場合もありますが、大まかな流れはこんな感じなんだと思ってくれれば大丈夫です。

それでは各項目について詳しく説明していきます。

工程1：企画

サイトデザインをする上で最も重要なのが、課題を見つけ、デザインによって解決することです。

そのため企画では、今ある問題を洗い出し、方向性を決めていく役割を果たしており、この企画の良し悪しでその後の設計、構築、運用に大きく関わってくる重要な工程です。

企画をしっかり作り込みクライアントと摺り合わせすることで、最後までブレることなく一貫した軸でサイトを構築することができます。

まず案件を受注したら、今ある課題を調査していきましょう。

ヒアリング

ヒアリングでは、クライアントのニーズを聞き出していきます。

ウェブサイトは競合との差別化を図るため、ブランディングを確立させる必要があります。そのためヒアリングでは理念、強み、他社との違い、製品の詳しい情報などを詳しく知ることも重要です。

また注意点としては、クライアントのニーズばかりに捉われすぎないということです。理由は、サイトを利用するのはユーザーだからです。

しかし、目的もなく雰囲気で言っている要望を反映しているとクライアントの自己満足で終わるサイトになってしまいます。一度ユーザー目線で本当に必要なのかどうかと言うのを判断し、クライアントに説明しましょう。

市場・競合調査

まず市場調査・競合調査の違いについて見てみましょう。

市場調査では、「アンケート調査」も市場調査の一つと言えます。もしクライアントがこういった情報を持っているのであれば活用し、ユーザーが求めているものを探った上でウェブサイトで情報を発信する必要があります。

競合調査ではヒアリングの項目で記した通り、他社との差別化をはかりブランディングを確立する上で、重要な調査となります。

目的・目標の設定

目的と目標の違いが分かりづらいかもしれませんが、明確に違います。

目的はゴールとするならば、目標は目的までの中間地点で掲げるもの、というイメージです。

目的までの道筋に沿って、短期目標、中期目標、長期目標を立てることにより、目的により近づく事ができます。

目的・目標をしっかり設定し、ウェブサイトの方針も明確化させましょう。

ターゲットを想定

次にこのウェブサイトを誰に見てもらいたいのか、誰に見られるのかを考えましょう。このターゲット設定も重要で、設定した内容によってデザイン、コンテンツ内容、発信するメッセージが変わってきます。

「未経験でウェブデザイナーを目指す子育てママ」と言うターゲットなのに、エンジニア向けの専門用語ばかりの情報が発信されていてはターゲットはウェブサイトを訪問してくれませんよね。

またターゲットを広げすぎても芯がブレてします。できる限り具体的なターゲットを設定しましょう。

ペルソナの設定

ターゲットの想定の一つとして、ペルソナ設定があります。このペルソナ設定は、メインターゲットを実在する人物のように詳細設定をすることです。

ペルソナを細かく設定しておくことで、メインターゲットの抱えている問題点や悩みを発見し、その悩みを解決する手段を導くことができます。

時間のかかる作業ではありますが、客観的な立場になって考え、ターゲット層に刺さるウェブサイトを構築していきましょう。

コンセプト

上記のような調査をしていくと、このサイトは誰に何を伝えたいのかが明確になっていきます。そうして決まるのがコンセプトです。

コンセプトはデザイン、カラー、キャッチコピーなど、この先の工程でも重要になる指針です。デザインなどで迷った時にもコンセプトが道標になってくれるので、必ず設定しておきましょう。

スケジューリング

当たり前の話ですが、どの仕事でも納期は非常に重要です。

ウェブサイト完成にかかる時間は仕事や組み込む機能によって変わってきますが、おおむね3〜4ヶ月で納品することが多いです。もちろん数千ページの規模であれば1年、もしくは1年以上の期間が必要になります。

そのためスケジューリング実現可能なものにしなければなりません。スケジュールを立てたのに、納期を守れないようでは本末転倒です。

案件にかかる仕事の工数を洗い出し、漏れのないスケジュールを作成しましょう。

工程2：設計

設計は、目的を持ったユーザーが目的のページにたどり着ける導線を作り、企画で導いたコンセプトをもとにデザインに落とし込む作業です。

大まかな作業内容はこちらです。

サイトマップ

サイト全体ページ構造をリスト化したものをサイトマップと言います。ウェブサイトの目次のようなものです。

もしユーザーがサイト内で迷子になっていても、サイトマップがあればサイト全体を見渡せる事ができます。また、検索エンジンにサイト内のページを知らせることができるので作成しておくメリットはあります。

サイトマップ作成することで、全体のページ正しい構造になっているか情報の整理します。

ユーザーシナリオ

ユーザーシナリオというのは、目的を持って訪れたユーザー（ペルソナ）がどのようにサイトを回遊していくか想定する作業です。

例えば、飲食サイトで「アクセス情報が見たい」という目的でユーザーが訪れても、アクセス情報が見当たらなければサイトを離れてしまいます。これでは機会損失となってしまいます。

そのため、ユーザーにサイト内をどのように回ってほしいか想定し誘導する導線が必要になってきます。
この導線が想定されているか否かで利益が左右されてしまうといっても過言ではありません。

常にユーザーの立場になって第三者の目線でシナリオを考えていくことが重要になってきます。

ワイヤーフレーム

ウェブページのレイアウトを決めた設計図がワイヤーフレームです。デザイン前の骨組みの役割をしており、全体的なイメージと方向性を把握することができます。

ワイヤーフレームを作成しておくことでメリットがあります。

ワイヤーフレームはスピードが大事です。数百ページの規模のサイトであっても、基本的なデザインテンプレートは同じです。ワイヤーフレームではトップページ、セカンドページ、ユーザーシナリオで想定されるページを作成しておくと良いでしょう。

サイトデザイン

目的を持ったユーザーが目的ページに辿り着くために、デザイン技法を使って視線を誘導していく必要があります。

例えば「青空と海が広がるテラスでひととき。親子で安心して食べられるオーガニックパン」といったコンセプトを想定します。

全体カラーは自然をイメージできる青が想定されますよね。その中に黄色のボタンが設置されているとどうでしょう。

恐らく黄色のボタンという文字が目立って見えると思います。理由は2つあります。

• 青の補色である黄色を使っているから
• 「黄色のボタン」の文字と背景色のコントラスト比が高いから

このようなデザイン技法を覚えることで、未経験の方でも視線を誘導する仕掛けを作ることができるのです。

制作仕様書・要件定義書

制作するウェブサイトの仕様をまとめた仕様書と、プログラムの機能がどんな機能を盛り込むか要件が記載されている要件定義書は、クライアントとしっかり交わしましょう。

案件が小さい場合は、メールなどで記録を残すことも大切です。

書類やメールでまとめておくことで、必要な機能の漏れにも気付きますし、クライアントから追加依頼が来た場合も、仕様書にあるないでどのように進めるか検討することもできるからです。

導線やデザインが確定すれば、次は構築フェーズに移行します。

工程3：構築

構築では制作したデザインをもとに、HTML、CSS、JavaScriptでウェブサイトを構築していきます。いわゆるプログラミング言語というものです。

まずはHTML、CSS、JavaScriptについて未経験の方でもわかるように説明します。

HTML

HTMLはハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略で、「ここがタイトルですよ」「ここが見出しですよ」「ここが画像ですよ」といった人間の言葉をコンピューター語に訳す言語です。

CSS

HTMLとセットでいるCSSはカスケーディング・スタイル・シート（Cascading Style Sheets）の略で、ウェブサイトのスタイルを指示している言語です。例えば「文字の色を赤くしたい」「文章を枠で囲いたい」「余白をあけたい」などのスタイル調整を行なっているのがCSSです。

JavaScript

JavaScriptは動きを指示するプログラミング言語です。

ウェブサイトメニューの開閉ボタンや、画像がスライドして動くスライドショーなど、JavaScriptは今はウェブでは欠かせない言語になってきましたが、JavaScriptを習得するためには時間がかかるため、使用するのが難しい言語でもあります。

jQuery

jQueryは、簡単な記述でサイトを動かせるように設計されたJavaScriptライブラリです。JavaScriptライブラリは使用頻度の高い機能や効果などのプログラムを再利用できる形にまとめたものを指します。

CMS

ウェブデザイナーの仕事を調べているとWordPressという単語を目にしてきたかと思います。

これはCMS（Contents Management System：コンテンツ・マネジメント・システム）と言って、管理画面から記事を作成・削除、デザイン変更、管理者設定などウェブサイトのコンテンツを一元管理することができるシステムです。

そのため、HTMLやCSSの知識がなくても簡単にウェブサイトの更新できるのがCMSのメリットの一つです。

構造設計を考える

構築フェーズで重要なポイントは、運用がしやすい構造設計を立てるということです。

この構築はただデザインの通り構築していけばいいというものではありません。

運用フェーズに入っていざ更新をしようと思っても、どこに何を書いているか、どこで管理しているかが分からなければ、更新するのにも一苦労です。それでは運用の手間となってしまいます。

運用の手間を最小限に抑えるためにも、見やすく、そしてわかりやすいソースを書くことによって、管理のしやすいウェブサイトになるのです。

この構築が完了すれば、本番公開まであともう少しです。

工程4：運用準備

最終段階の運用準備では、いよいと本番公開を行います。

間違いなく本番公開できるよう確認作業をしていきましょう。

SSL化設定（セキュリティ管理）

SSL化とは、通信を暗号化にすることで盗聴やデータの改ざんを防ぐ仕組みです。個人情報を記載するお問い合わせフォームでは、送信した内容などが流出など、個人情報流出の恐れもあります。

現在ではGoogleもSSL化されていないサイトに対して警告を出しています。

ウェブを扱うにあたってセキュリティは切っても切り離せない関係です。セキュリティ対策をどれだけしても100％防ぐことはできませんが、穴をできるだけ小さくすることでリスクは軽減できます。

SSL化は今は必須の設定です。設定はサーバーの管理画面なので設定できるので、もし案件内でサーバー管理を行うようであれば必ず設定を行なってください。

Googleアナリティクス・サーチコンソールの設定

公開後のサイト運用にはGoogleアナリティクス・サーチコンソールの設定が欠かせません。

Googleアカウントさえ取得していればどちらも無料で使用することができます。

サイトは公開して終わりではありません。運用してようやくスタートします。
そのためには、アクセス状況、流入経路、ユーザーの行動などを把握しなくてはなりません。

また、より多くの人にウェブサイトを見てもらえるように、インターネット検索の上位に表示される必要があります。いわゆるSEOというものです。

Googleアナリティクス、Googleサーチコンソールでサイト分析し、分析した結果を踏まえPDCAサイクル（計画、実行、評価、改善）を回すことで、よりよいサイトにアップグレードしていきます。

最終チェック

人目に触れる前の最後のチェックとなります。公開前に不備がないか最終チェックしましょう。

最終チェックは公開前の最後の確認作業となります。

確認することが多く大変な作業ではありますが、公開して間違った情報が流れたり、ウェブサイトが正しく機能しないということはあってはならないことです。公開・納品前には必ず最終チェックを行うようにしましょう。

本番公開

新規案件とリニューアル案件とで、本番公開する方法が変わってきます。

新規案件では、本番サーバーをドメインに紐付けずにテストサーバーとして確認作業を行い、公開と同時にドメインに紐付ける方法が多いです。サーバーに置いてあるファイルは動かさないため、ミスが最小限に抑えられます。

リニューアル案件では現在稼働している本番サーバーの環境と同一のサーバーを用意し、そこにテスト環境を作ります。そのため、テスト環境に上がっているファイルを本番環境に反映させる作業が必要になってきます。

そのほかにもサーバー上にアップロードせず、ファイル納品するケースもあります。

公開後は正しく反映されているか、おかしな箇所がないか、お問合せフォームを設置しているようであれば、正しい送信先にメッセージが発信されているかなど、公開後の確認も必要です。

特に問題がなければ、これでウェブサイト公開完了です。

まとめ

未経験でウェブデザイナーを目指す方にわかりやすく仕事の流れを説明しました。

この記事を読んで、大まかなウェブサイト構築までの流れがイメージできたと思います。

案件によってはやらない項目はありますが、もしウェブサイトを構築する機会があれば是非参考にしてみてください。

みなさんがウェブデザイナーとして活躍する日を楽しみにしています。

以上、みたナスでした。