【簡単】Webデザインの受注から納品までの8ステップ

あや

今日は、Webデザインの受注から、リリース(納品)までの流れを解説していきます。初心者さん向きの内容です。

今回の前提は、受注経路は『制作会社・広告代理店』『直接クライアント』など。最近増えてきているクラウドソーシングはまた少しSTEPが異なるから、またの機会に…

まめまる

コンテンツ

(※STEP1に入る前の概算見積もり)

まずは見積もり依頼からスタートすることがほとんどです。「ざっくりでいいから概算見積もりください。」と言われることも結構あります。この場合、打ち合わせ前にメールでのやりとりで完結します。相手もだいたいこれくらいのサイトを作る場合、あなたに頼んだらいかほど？ってくらいなので、あまり時間をかけないでスムーズにやりとりしたい..。おおよそのページボリュームや機能を聞き、おおよその金額をお伝えしています。

制作費の目安を決めておくと概算を聞かれたときに即答できて便利！

XXページ規模の企業サイトの場合は、おおよそ〇〇円
シングルページのサイトの場合は、おおよそ〇〇円
ECサイトの場合は、おおよそ〇〇円(外部システム使うかどうかにもよる）

と、自分のおおよその目安を決めておくと、話が早く進められるので双方よし。ただし、Web制作費の相場は結構かわるので、定期的に同業者さんのサイトで調べたりもしています。

あや

悲しきかな、web制作費の相場はここ10年くらいをみていると下がってきているんですけどね…

STEP1.ヒアリング～要件定義

詳細の見積もり制作する際にはヒアリングが必要です。どれぐらいの規模のサイトを作る予定なのか。デザインからコーディングまで1人で行える規模のサイトなのか。チーム制をとって受注すべき案件なのか…これによって見積もり額が大きく異なるからです。

できる限り内容を聞いた上で、要件定義書と見積もりを作っていきます。

まめまる

このSTEP1の初回打ち合わせで聞いておきたい5つのポイントは以下の記事に書いてみました！合わせて読んでみてください▼

2020年7月2日Web制作-STEP1：初回打ち合わせで聞いておきたい5つのポイント

STEP2.見積もり

見積もりの出し方は大きく分けて二通りあります。

ページ数ベースで出す場合(ページ単価×ページ数)
何日位で出来上がるものか(人日)で出す場合

見積もりの仕方は人それぞれですが、私の場合は

小規模～中規模のサイトの場合はページ数単価で算出しています。

ページ数が見えないような半年〜数年単位の大規模なプロジェクトの場合は人日で算出しています。

ページが予定外に多くなった場合や、想定以上にプロジェクトの期間がかかっている場合などは、見積もりを再度相談させていただくということをはじめにお伝えしています。

これまで大きなトラブルになったことはないのですが、念の為。。

(次回以降更新予定)→[STEP2.見積もり]見積もりの詳しい決め方。マイルール

STEP3.ワイヤフレーム制作

ワイヤーフレームとは、Webページのレイアウトを決める設計図のことです。

「ワイヤー」と言ったり、「WF」ということもあります。ワイヤーフレームはデザイナーが引くこともありますし、ディレクターが立っている場合はディレクターが作ることもあります。私の場合はワイヤーから全て請け負うことが多いです。

あや

ワイヤーから制作させてもらった方が、自分の考えているサイトになるので楽しいし、デザインもしやすいから好きだなー

(次回以降更新予定)→[STEP3.ワイヤーフレーム制作]ワイヤーフレームの簡単な作り方

STEP4.デザインカンプ制作

ワイヤーフレームが固まったら、いよいよデザイン制作です。
使用ソフトは

などのAdobeソフトを使っている人が多いと思います。

私はPhotoshopとXDをメインで使用し、素材はillustoratorで作ることもあります。Adobeソフトについては下の記事でも触れているのでご参照ください。

2020年2月4日サブスク何使ってる？フリーランスデザイナーが使うサブスクリプションサービス14選

(次回以降更新予定)→[STEP4.デザインカンプ制作]デザインカンプを作る時に気をつけているポイント

STEP5.フロントコーディング

デザインをクライアントさんに見ていただきながら、OKをいただいたら、続いてコーディングに入ります。
HTMLとCSSでwebの表示形式を整えていきます。

コーディングソフトはいろいろあってさんによっても使ってるものは異なりますが、私は今はDreamweaverを使っています。(以前は sublime textなどを使っていました)。

STEP6.CMS導入

CMS導入をするかどうかはヒアリングの時に決まりますが、最近はWordPressなどを使ったサイト制作が多いのでこの『STEP6』に入れています。
制作したHTMLファイルを、Wordpressのテーマとして制作しオリジナルデザインのサイトにしていきます。

『CMSってなに？』って方用に、別記事準備中！少々おまちください。。

まめまる

(次回以降更新予定)→[STEP6.CMS導入]WORDPRESSのテーマ化する方法

STEP7.テスト

私はまずは自分のレンタルサーバー上でテスト版を公開し、パスワードをかけた状態でクライアントさんに見てもらっています。
テスト版で問題がなければ、いよいよ本番サーバーへのアップです！

ゴールはもうすぐ!!

あや

Wordpressのテスト版から本番環境への移行方法なども、いいプラグインがあるのでまた記事にしたい…!

STEP8.サーバー設定&リリース

WordPressのテーマを納品する場合はWordpressのログイン情報をいただきアップ。その他、FTP情報などを共有してもらって、直接サーバにアップロードする、、など、クライアントさんによってこの辺りは様々。

セキュリティ上、先方の技術担当の方にアップ周りはお願いする場合もあります。

まとめ

いかがだったでしょうか。これがWebデザインの受注から納品までの流れ8ステップです。どのステップもそれぞれ大変さが違いますが、どれもいいWebサイトを作るためには欠かせないステップです。

各ステップの詳細はまた深堀して書いていきたいと思います。