WEB制作をするうえで「どのような流れで進めていくのか」という疑問を持つ人も多いと思います。
特にWEBデザイナーとして初めて案件を獲得したときには、進め方がわからず不安になる方も少なくないはずです。
そこで、本記事では、WEBサイト制作の全工程を一つずつ追いながら、WEBデザイナーが担う役割等をお伝えします。
- WEBサイト制作の全フロー
- 制作プロセスにおける役割分担
- プロジェクトのスケジュール感
WEBサイト制作の基本的な流れ
WEBサイト制作は、営業から納品まで複数の工程を経て進みます。
まずは全体の流れをイメージしていきましょう。
WEBサイト制作は主に6つのプロセスから成り立っています。
WEBデザイナーにかかわりが深い「5.制作」は、さらに細かく8つの工程に分けられます。（一般的にコーディングは、WEBデザイナーではなくコーダーが担当します）
このようにWEBサイト制作は工程ごとにそれぞれの役割があるため、複数で関わることも少なくありません。
場合によっては、WEBデザイナーがデザイン制作以外の工程に関わる必要もあるため、全体の流れを把握しておきましょう。
デザイナーのスキルによって、全てを一人で担う場合もありますが、WEBサイトの規模が大きくなれば、制作の難易度は高くなり時間もかかるので、工程ごとに分業することが現実的になります。
WEBサイト制作の流れ＜3ステップ＞
WEBサイト制作は小さな工程の積み重ねです。各々の作業を次にバトンタッチしながら最終目標に向かって進んでいきます。
全体の流れがイメージできたところで、それらの細かい工程に焦点を当てていきましょう。
制作過程は大きく３つのステージに分かれ、1.企画と設計、2.デザイン制作、3.公開と運用、に分類できます。
1.企画と設計
WEBサイト制作の目的やターゲットを明確にすることと、WEBサイトの仕様を設計（デザイン）する段階です。
そのために必要な作業工程を見てみましょう。
情報整理
クライアントにヒアリングしながら、WEBサイトを作る目的や要望、制作に必要な情報を整理していきます。
- WEBサイトを制作、もしくはリニューアルをしたい理由
- ターゲットは誰なのか（年齢層や性別、職業など）
- クライアントの事業内容、アピールポイント
- サイトに載せる必要項目
- 画像やテキスト原稿など提供してもらえる素材はあるか
- レスポンシブWEBデザインにする必要があるのか
- 予算やスケジュール
打ち合わせの段階でこれらの情報を整理し、競合調査や分析を経て、WEBサイトのゴールとなる目標を定めます。サイトの方向性が決まる大事な段階です。
この時点でクライアントとしっかり話し合い、目的や認識を共有することが大事です。
また、分業して制作を進めるのであれば、これらの情報をチーム全体で共有しておくことで、認識のズレによるミスの回避にもなります。
サイト設計
サイト設計とは、情報整理で明確になった目的やターゲットをもとに、WEBサイト全体の構造やページ同士のつながりを設計する工程です。
この工程では、ユーザーが必要な情報へスムーズにたどり着けるよう、どのページを作成し、どのような順番で情報を配置するかを決めていきます。
まずは、WEBサイト全体のページ構成を整理した「サイトマップ」を作成します。
サイトマップとは、WEBサイトのページ階層をツリー状に整理した設計図のようなものです。
図にすることで全体の構造が分かりやすくなりますね。
制作チーム内で認識を共有しながら作業を進めることができ、ページの抜け漏れや重複を防ぐことにも役立ちます。
サイト構造を考える際は、UI（ユーザーインターフェース）やUX（ユーザーエクスペリエンス）も意識します。
たとえば、ユーザーが目的のページに迷わず移動できるか、お問い合わせや申し込みまでスムーズに進めるかなどを考えながら、ページの配置や導線を設計していきます。
サイトマップの作成は、手書き以外にPowerPointやExcel、Googleスプレッドシートなどを活用できます。無料で使えるクラウド型の便利な作成ツールもありますので、利用してみるのも良いでしょう。
サイトマップ作成ツール参考：Lucidchart公式サイト／Cacoo公式サイト
ワイヤーフレームの作成
サイトマップをもとにワイヤーフレームを作成します。
ワイヤーフレームとは、ページのどこに何を配置するのか、導線などを考えてレイアウトしたもの、いわばWEBページの設計図です。
トップページ、下層ページの大まかな枠組を作っていき、これがのちのWEBデザインの根幹になります。
WEBページのイメージが具体的になりましたね。この段階で大事なのは、単に見映え良く整えるだけでなく、ユーザー目線で導線も意識して設計するということ。
せっかくWEBサイトを訪れてくれた人が、迷子になってしまうような設計では困ります。WEBサイトの規模が大きくなるほど、ナビゲーションや導線設計がしっかりされていなければなりません。
ユーザー目線のWEBサイトであるかどうかは、ブランドイメージや、商品・サービスの成約数にも関わってきます。
クライアントの意向を汲みながら、プロとして、本来の目標が達成できる形に設計する必要があります。
また、パソコン以外にスマートフォンやタブレットなど、画面サイズの異なる端末に対応させる必要がある場合は、それに配慮した設計にします。
2.デザイン制作
いよいよWEBサイト制作における「デザイン」の分野に入っていきます。WEBデザイナーの出番です。ワイヤーフレームをもとに、デザイン案を作成します。
デザインカンプの作成
デザインカンプとは、デザインの「完成見本」のことです。WEBサイトが公開される前に、クライアントと制作者の間で、具体的な完成イメージを共有する重要な工程です。
ワイヤーフレームが設計図だとすれば、デザインカンプはその枠組みに写真やイラストを配置し、背景や色を設定したり、文字サイズやフォントを整えながら完成イメージに近づけていきます。
ワイヤーフレームの段階ではイメージしにくかったWEBページ全体の雰囲気や、印象を左右する色味など、具体的なデザインを確認することができます。デザインカンプ作成の流れとしては、まずトップページのデザインを手がけ、全体のトーン&マナー、世界観を決めます。
それから他の主要ページのデザインを制作し、トップページとイメージを統一していきます。
全体のスタイルが統一されていないと、ページごとにチグハグな印象になってしまうので、企画と設計の段階で明確にした世界観に基づいた配色で設計し、フォント、アイコン、余白を含めてルール化し、トップページから下層ページにかけて、WEBサイト全体の雰囲気を統一します。
制作ツールとして、Adobe Illustrator、Adobe Photoshop、Figmaがよく使われています。
素材（画像・テキスト・イラスト）の準備
ワイヤーフレームでページ構成が決まったら、WEBサイトに使用する素材を準備します。素材とは、写真やイラスト、ロゴ、テキスト原稿、図版などのことです。
たとえば、企業サイトであれば代表者やスタッフの写真、オフィスの外観・内観、サービス紹介用の画像などが必要になります。
素材を使用する際には、著作権や利用範囲の確認が必須です。
インターネット上の画像やイラストを無断で使用すると、トラブルにつながる可能性があります。写真やイラスト、ロゴなどは、権利関係を確認したうえで使用しましょう。
既存の会社案内や営業資料、過去に撮影した写真を活用できる場合もありますが、WEBサイトの目的やデザインコンセプトに合わせて内容を調整したり、新たに撮影したりすることも少なくありません。
確認と修正
デザインカンプがあることで、完成イメージを共有することができ、意見の相違がなくなります。
例えば、ポップな雰囲気、落ち着いた色味、シャープな印象、と言葉だけで伝えられても、そこからイメージするものは人によって異なりますね。
実装作業が済んでしまうと、修正には非常に手間を要します。だからこそ、この段階で確認と修正を丁寧にやらなければなりません。
一度の制作でクライアントの要望に全てに応えることはできませんので、デザインカンプをもとに何度か打ち合わせと修正を繰り返し、徐々に完成イメージに近づけます。
全体を指揮するWEBディレクターを交え、全体の調整をし、最終的なデザインを確定できたら、ついにデザインデータの完成です。コーディングのためにエンジニアにデータを提出します。
3.公開と運用
いわゆる、コーディングの段階です。
プログラミング言語を使って、作成したデザインをウェブブラウザで閲覧できるようにします。
コーディング
確定したデザインデータをもとに、コーディング作業に入ります。「HTML」や「CSS」といったマークアップ言語が使われるのが一般的です。
さらに、写真がスライドするようにしたり、アニメーションを付けるなど、動くデザインをにしたいときは、「JavaScript」が使われます。
この分野で活躍するのは、フロントエンドエンジニアやバックエンドエンジニア。
フロントエンジニアはWEBサイト制作において、ユーザーの目に触れる機能をHTMLやCSS、JavaScriptを用いて開発します。HTML、CSSのコーディングを専業にする「コーダー」と呼ばれる人もいます。
バックエンドエンジニアは、サーバーサイドやデータベースのシステムなど、ユーザーの目には直接触れない、土台となる部分の開発をします。使用されるのはJava、JavaScript、PHP、Python、Rubyといったプログラミング言語です。
WEBデザイナーがコーディングを手がけないにしても、コーディングしにくいデザインだとコーダーが戸惑います。画像サイズや余白、配色、位置合わせといった基準にばらつきがあると、デザインミスなのか意図的なのか、判断に困ってしまうことがあります。
デザインの不備によって、コーディング作業の際に迷惑をかけるのはWEBデザイナーとして避けましょう。
テストの実施
コーディングが完了したら、WEBサイトを公開する前にテストを実施します。
この工程は動作検証やデバッグとも呼ばれ、不具合や表示崩れがないかを確認する大切な作業です。
ユーザーがWEBサイトを閲覧する環境はさまざまです。
パソコンだけでなく、スマートフォンやタブレット、ChromeやEdgeなど異なるブラウザでも問題なく表示・操作できるかを確認します。
また、リンク切れがないか、お問い合わせフォームが正常に送信されるか、レイアウトが崩れていないかなどもチェックしましょう。
公開前のテストで修正点が見つかることは珍しくありません。スムーズに公開するためにも、テストと修正の期間をあらかじめスケジュールに組み込んでおくことが大切です。
メンテナンスと改善
WEBサイトが一般公開されたあとも、アフターフォローをしていきます。むしろWEBサイトは公開してからがスタートです。
アフターフォローの基本は、WEBサイトのメンテナンス。何らかの不具合が発生していないか確認しながら、定期的なメンテナンスをおこなっていきます。
基本情報に変更があれば修正をおこない、情報を最新に保ちます。また、外部リンクに正しく移動できるかも確認します。
リンク先のWEBサイトがなくなったり移動している場合もあるので、こういったエラーやリンク切れも修正が必要です。
そして、集客のための改善。アクセス分析やSEO対策をしながら、WEBサイトの改善を図っていきます。定期的に更新することで検索順位が上がるので、WEBサイトの情報は資産となります。
WEBサイト公開後は、誰がどうやってアクセスしたか記録に残る仕組みになっています。
アクセス解析をおこなえば、ページ閲覧数や訪問者数が分かるばかりか、どこを経由してアクセスされたか、どんなデバイスを使用しているのか、どのような検索ワードを使用したか、申し込みや問い合わせにつながったか、など多くの情報を得ることができます。
この情報をもとに、WEBサイト運営の目的が達成できるように改善施策しながら、WEBサイトを育てていきます。
WEBサイト制作においてWEBデザイナーが担う役割
WEBサイトの制作過程を、3つのステージを追いながらご紹介してきました。
全体の流れを知ると、WEBデザインがWEBサイトの中で実際に機能するまでには長い道のりがあることが分かりますね。
WEBデザインは単にツールを使ってイメージを形にする、という単純なものではありません。
小さな工程の積み重ねを経てWEBデザイナーの手元にやって来て、また次の工程の担当者へと受け継がれていきます。
デザイナーはその立場と役割を認識することで、初めて精度の高い仕事ができるのです。
では、WEBデザイナーはどこからどこまでの工程を担うのでしょうか。
それは、クライアントの要望や依頼内容にもよりますし、WEBデザイナーのスキルにもよります。
はっきりと線引きすることはできませんが、メインとなる「デザイン制作」の前に、「企画・設計」の段階から参加できることが望ましいでしょう。
「公開と運用」の段階になると、エンジニアが担当する分野なので、WEBデザイナーが携わることは少ないかもしれません。
ただ、コーディングのスキルを備えたWEBデザイナーが、３つのステージ全てに関わることもあります。
全てのスキルを備えなくとも、自分が携わる仕事の前後の工程を手伝えるくらいの知識があったら頼もしいWEBデザイナーになれそうです。
だからこそWEBサイト制作全体の流れを知り、いろいろな工程に関わり合いながらWEBデザイナーとしてのスペックを高めていきたいですね。
全体の流れを考えたスケジューリング
完成までに多くの工数があるWEBサイト制作。
制作チーム内、もしくはクライアントとの間で完成イメージの認識にズレが生じれば、作業が遅れ、その次の工程にも影響が出てきます。
そうなると納期に間に合わない、もしくは納期に無理に合わせたため十分な作業ができず、クオリティの低い成果物になってしまう、といった事態にもなりかねません。
そうならないためにも、依頼する側も、受注する側も、全体の工程を考え、お互いに無理がなく余裕のあるスケジューリングをすることが重要です。
複数の案件を同時に進める場合はなおさらです。
その際に忘れてはいけないのが、クライアントとの確認作業に要する時間です。
クライアントによっては、担当者だけでなく上層部の承認など、社内確認に時間がかかる場合があります。
要望や予算が膨らめば膨らむほど、制作は複雑になり、作業に時間がかかります。
制作期間が限られているならば、期限内にできる作業量を逆算し、完成イメージと予算の見積もりを明確にして、お互いに共通の認識を持っておかなければなりません。
WEBサイト制作になれていない相手だと、「一旦作ってもらって、後から修正すれば･･･」と安易に考えている場合もあります。
家を建てるのと同じで、完成後に修繕や増築をするよりも、設計段階で明確な完成イメージができていた方が、余計な手間もコストもかからず効率的です。
それをあらかじめ説明しておくようにしましょう。
WEBサイト制作にかかる費用相場
WEBサイト制作にかかる費用は、サイトの種類やページ数、搭載する機能によって大きく変わります。
一般的な費用相場の目安は以下のとおりです。
| サイトの種類 | 費用相場 |
|---|---|
| ランディングページ（LP） | 6万〜20万円前後 |
| コーポレートサイト | 40万〜100万円前後 |
| 採用サイト | 50万〜120万円前後 |
| メディアサイト | 60万〜200万円前後 |
| ECサイト | 70万〜300万円前後 |
| サイトの種類 | 費用相場 |
|---|---|
| ランディングページ（LP） | 6万〜20万円前後 |
| コーポレートサイト | 40万〜100万円前後 |
| 採用サイト | 50万〜120万円前後 |
| メディアサイト | 60万〜200万円前後 |
| ECサイト | 70万〜300万円前後 |
商品販売機能を備えたECサイトや、記事を継続的に更新するメディアサイトのように、システム開発やCMS導入が必要になるサイトは費用が高くなる傾向があります。
また、デザイン制作だけでなく、企画・構成、コーディング、写真撮影などの工程によっても費用は変動します。
WEBサイト制作の費用相場について詳しく知りたい方は、以下の記事も参考にしてください。
##WEBデザインを学ぶなら「デザスク」
WEBサイト制作の流れを理解すると、WEBデザイナーとして、制作全体を見据えながらデザインを考える視点が身につきます。
実際に、クライアントから選ばれるWEBデザイナーほど、制作工程全体を理解したうえでデザインを提案しているのです。
日本デザインスクール（デザスク）では、デザインツールの使い方だけではなく、「なぜそのデザインにするのか」「どうすれば成果につながるのか」といった実践的な考え方まで学ぶことができます。
これからWEBデザイナーとしてスキルアップしたい方や、制作全体を理解してより価値の高い提案ができるデザイナーを目指したい方は、ぜひ以下の詳細をご覧ください。
まとめ
「WEBデザイン」といっても、その役割を曖昧に捉えていると、デザインのピントがズレたものになってしまいます。
「何となく制作した･･･」から脱却するためにも、今回WEBサイト完成までの流れを追うことで、その役割が少し明確になったのではないでしょうか。
制作の道のりにおいて、自分の立ち位置が分かると、次を見据えた仕事ができるようになります。
それは全体の作業を効率化することにもつながり、WEBデザイナーに強く求められていることでもあります。
隣の分野の知識を少し身に付ければ、さらに重宝される存在になれるはずです。
自分が手がけたデザインの向かうゴールを見据えて、制作に取り組んでみませんか。
下記のサイトでは、「誘導中心設計」という、WEBサイトで成果を出すためのメソッドを提唱しています。
「顧客の購入意欲」に応じたコンテンツ設計の参考にしてください。
参考
「売れる」ホームページの作り方。誘導中心設計|オフィスアンツ
東京都のホームページ制作会社おすすめ25選！選び方や費用相場なども解説 | BALANCe Magazine
東京・新宿のホームページ制作・WEB制作会社 マーカーネット
