Webデザインの受注から制作・完成サイト公開までの流れ
これからWebデザインを習得するならWeb制作全体の流れを知っておく事はとても重要です。Webデザインとはクライアントから受注を受けてサイトを公開するまでのすべての作業を総称して「Webデザイン」と呼ぶことがほとんどで、ページをデザインする事だけがWebデザイナーの仕事ではありません。
今回はWeb制作に重要な作業工程をわかりやすく解説しWebデザインの全体像を把握していただく事が目的です。Webサイト受注から制作・公開までの流れは以下の通りです。
- 制作依頼を受けて、クライアントからヒアリングを行う
- Webページの設計 (サイトマップの作成)
- サイトレイアウト設計 (ワイヤーフレーム作成)
- Photoshopでのページデザインする
- HTML+CSSを使ってコーディングする
- 修正チェック・反映
- FTPソフトを使ってサイトを公開
となります。デザインを始める前の設計などもとても重要な工程です。それでは各工程の内容を一つ一つわかりやすく解説しますのでぜひ参考にしてみて下さい。
この記事の目次
【工程1】クライアントから制作の受注を受けて初回のヒアリングを行う
Web制作のスタートは、クライアントからの制作依頼から始まります。受注を受けてからヒアリング見積もりまでを解説します。
ヒアリング
クライアントからの受注後、直接お会いするかビデオ会議ツールなどを使って、初回のヒアリングを行います。ヒアリングはクライアントがどのような目的でどのような結果を得たいのか一緒にゴールを決めていくとても重要な作業です。
サイトのゴールをクライアントと決定する
ヒアリングの内容を元にサイトのゴールとなる目的・目標を決めます。
(例1)資料請求をこれまでよりも10倍増やす。
(例2)新商品のオンライン販売数を前年よりも増やす。
(例3)オンラインを通してのセミナー集客数を増やす。
など、クライアントはお金をかけてサイトを作る以上、必ず何かの結果を求めています。そのゴールを明確にしておく事は、Webサイトをデザインする上でとても重要です。この目標が明確になっていないとサイトの方向性がブレブレになってほとんどの場合結果を出す事が出来ません。
クライアントと一緒に目指すべきゴールを決めておく事はとても重要です。何を達成したいのかを明確にしましょう。
【工程2】サイトマップの作成と工数計算/見積り/契約まで
ヒアリングデータとサイトの目的と目標を元にWebサイトの設計を行います。初めに行う事はトップページから見て必要な下層ページをすべてリストアップする事が重要です。このリストアップしたツリー上の構造その物をサイトマップまたはサイトストラクチャーと呼びます。
サイトストラクチャー(サイトマップ)の作成
これから作成するサイトは、どのようなページが必要なのかをリストアップして、サイト全体の設計を行います。
サイト全体の必要なページを一覧化したものをサイトマップと言います。Xmindというソフトを使えばすぐにサイトマップを構築する事が可能です。
工数計算
サイトに必要な全ページを把握した後は、サイト構築にどれくらいの時間を要するのかを計算しましょう。
工数計算は、デザイン会社によって全く異なるので1ページデザインするのにどれくらいの時間が必要なのか概算でも良いので把握しておく事はとても重要です。
Webデザイン作業では、デザインのクオリティをアップさせる事はもちろん重要ですが、制作にかかる時間を把握する事(工数計算)はそれ以上に重要です。
Web制作代金の見積り
工数計算が完了した後は、クライアントの予算と照らし合わせて見積もりをします。見積もりはWebサイトのお金に関するとても重要な工程ですので、必ず正式な見積書で提案しましょう。
クライアントに提示した見積もり金額で了承を得た後はいよいよ契約です。
契約
クライアントとWebサイト制作に関する契約を交わします。契約を交わさずに作業を進める事は後々トラブルになる事がとても多いので、必ず制作を進めるに当たり規約をしっかりと決めた上で契約書を交わすようにしましょう。
この予算内ではどこまでの作業が出来て、どこからは出来ないという線引きもとても重要です。
契約書の雛形は検索するといろいろ出て来ますので、それらを使用するのも良いでしょう。
【工程3】サイトレイアウト設計と素材の準備
契約を無事に終えた後は本格的にサイトの設計の作業にとりかかります。サイト設計が終わった後は、サイトに使う写真素材などを準備しましょう。
ワイヤーフレームの作成
ワイヤーフレームとは、上記のイメージのようなWebサイトの簡易設計図の事です。ページのどの部分にどのようなボタンやナビゲーションを配置するのか、どのようなレイアウト構成にするのかをAdobe XDなどでスケッチする事が可能です。
サイトマップを元に全ページのワイヤーフレームを作成しましょう。
テキストと写真素材の準備
サイトマップが完成後、サイト内のテキスト素材と写真素材をクライアントから提供してもらいます。
この工程はWebサイトの成否を決めるとても重要な工程。それは上質な写真と文章コピーがなければWebサイトの成功はありえないからです。最適な写真と最適な文章があるからこそWebサイトを通して結果に結びつくのです。
テキストと写真素材を準備してもらい、早めに送付していただくようにコミュニケーションを取りましょう。
【工程4】Photoshopを使ってWebページのデザインをします
サイトの設計図(ワイヤーフレーム)と写真素材、テキスト素材が揃い次第、いよいよPhotoshopを使ってページのデザイン作業に入ります。
ワイヤーフレームを見ながら1ページ1ページデザインを行い、サイトマップと照らし合わせて全ページをデザインしていきましょう。
Webデザイン業界では、Photoshopで作成したページデザインの事をデザインカンプと呼ぶ事が多いです。
【工程5】HTML5+CSS3でコーディングを行いWebページに変換します
工程4で作成したPhotoshopのデザインデータ(デザインカンプ)を元に、ボタン/画像/写真をパーツにしてそれぞれ書き出し、コーディングを行います。
Webデザインの現場では、効率化が求められますのでAdobeのDreamweaverを使ってHTML5+CSS3またはWordPressコーディングを行う事が主流です。Dreamweaverを使う事で、コードの予測入力、エラーチェックなどを自動で行ってくれるのでとても効率的に作業を行う事が出来ます。
これからWebデザインを習得したいという方は必ずAdobe Dreamweaverもセットで覚えるようにしましょう。
【工程6】サイトに修正箇所がないか入念にチェックします
コーディング完了後、テストサーバーなどにアップしてサイトの文言、画像、レイアウトの表示などにミスがないかを入念にチェックしましょう。誤字脱字・表記ミスなどはサイトのブランドを落としてしまう事になりますのでテキストを音読してみたり、数人でチェック作業をする事をおすすめします。
自分では気がつかなかったミスが他の人が見るとすぐに発見する事が出来るからです。
【工程6】FTPソフトを使って本番サーバーにHTMLファイルをアップし公開します
コーディングと修正チェック完了後はFTPソフト(ファイル転送ソフト)を使って本番サーバーへアップすることでサイトがインターネット上に公開されます。
サイト公開後、もう一度Webサイトがきちんと表示されているかをチェックしてサイトの公開が完了となります。
まとめ
いかがでしたでしょうか？
今回ご紹介させていただいた内容が、Webサイトを企画して制作して公開するまでの全工程になります。Webデザインは、ページをデザインして終わりではありません。その前の準備段階のクライアントとのヒアリング作業、素材の準備、サイトマップの作成、ワイヤーフレームの作成などサイトをデザインするまでの下準備がとても重要なのです。
これらの工程を理解する事なくWebデザインの習得はありえませんので、こちらの記事を参考にWebデザインの全行程と流れをしっかりと理解していただければと思います。
Webデザインの工程の全体像を理解する事が出来ていれば、必要なスキルは必然的に把握出来るのでスムーズに学習を行う事が出来るはずです。Webデザインで最低限必要なスキル・ソフトは、Photoshop/Dreamweaver/HTML5+CSS3/です。まずはすべてのスキルを習得するのではなく、この3つのスキルに集中して勉強を進めてみる事をおすすめします。
「【2020年度版】 Webデザイナーを目指す人の為のスキルチェックシート」ではWebデザインを行う上で必要なスキルを詳しく知る事が出来ますのでこちらの記事もぜひ参考にしてください。
最新記事 by 石原 誠之 (全て見る)
- お問い合わせフォームがスマホで拡大されてしまうのを防ぐ為のCSS - 2024年4月10日
- スマホで横スクロールが出た場合の解決方法 - 2024年4月3日
- Contact Form 7でお問合せ後にサンクスページにリダイレクトさせる方法 - 2024年2月10日
- inputボタンがiPhoneでダサいグラデーションになってしまう問題を解決するCSS - 2024年2月9日
- Webデザインの独学に必要な期間は6ヶ月に設定しよう - 2023年10月11日
この記事へのコメントはありません。