Webデザイナーが進行すべき制作工程のまとめ

クライアントと打ち合わせをすると必ず聞かれることがあります。

「Webサイト制作にいくらかかりますか？」

この質問に答えるのは簡単ではありません。 Webサイトのページ数、機能、デザインの複雑性などにより大きく異なりますから、そういったことを無視して見積もりを出すことは不可能です。家を建てる際、プレハブ小屋なのか、庭付き戸建てなのかで大きく価格が変わるように、Webサイトにかかるコストも数万円から数千万円まで多種多様です。

まずは、クライアントの想像している予算感と、現実的なコストをすり合わせましょう。「提案したけど予算がない」という状態を避けるため、必ず最初に確認が必要です。 10万円か12万円か、といった細かな金額は気にせず、「10万円なのか100万円なのか」くらいざっくりとした感覚を掴みましょう。

Webサイトの見積もり作成方法は後ほど解説しますが、Webデザイナーとしてプロジェクトの進行は下記のようになります。工程ひとつひとつには時間がかかります。もちろんそれに応じてコストもかかりますから、予算のないプロジェクトの場合は、工程を省略したり、依頼主であるクライアントにある程度のラフを作成してもらうなど、工夫が必要になります。

企画

コンサルティング、競合調査、ゴール設定、Webサイトのトーン&マナーなどをクライアントと一緒に決めていきます。PCを駆使したデジタル作業というよりは、頭を使って考えたり、地道な調査が主体です。

ワイヤーフレーム設計

Webサイトの枠組みを決めます。どこにどんな要素を配置するのかといった大枠を決めればよく、こだわってデザインする必要はありません。ワイヤーフレームは、複数ページ必要になります。そして「各ページがどのようにリンクされるのか」をまとめた ユーザーフロー をクライアントと共有しておきましょう。

もし複雑な機能が要望にある場合、要素の配置だけでなく、システム仕様も決めておきたいところです。特に、ショッピングカートなどの場合は、画面に現れない状態管理や複雑な条件分岐が必要になるため、システムフローチャートを作成して、設計が破綻していないか予めチェックすることが大切です。

Webデザイン

ウェブサイトの基本デザイン。SketchやPhotoshopなどを使ってグラフィックを作成します。トップページと下層のページではデザインが異なることが普通ですから、作成するパターン数に応じてコストを計算します。

プロトタイピング

出来上がったデザインを利用して、擬似的なWebサイトを作成します。Webサイトとして完全にコードに落とし込む作業は、時間とコストがかかるため出戻りのリスクがあります。そのリスクを軽減するために プロトタイプ を作成し、完成後のWebサイトをよりリアルに体感できる環境を用意するという手法です。ワイヤーフレームの進化版といったところでしょうか。

シンプルなプロジェクトや、予算が限られているプロジェクトの場合は、プロトタイピングをスキップする場合もありますが、気づきにくいユーザーフローのエラーが見つかったりしますので、なるべく作成することをお勧めします。

マークアップ

HTMLとCSSを使って、デザインをコードに落とし込んでいく作業です。各ページ分必要になりますので、時間と労力がかかります。アニメーションを作成したり、ボタンを押した時のインタラクションを設定したりするのも、このタイミングになります。

ツールを使用することで自動化、効率化が可能な工程になります。効率化についてこちらのUdemyオンライン講座を公開していますので、是非参考にしてみてください。

デプロイ

出来上がったWebサイトを本番用のサーバーにアップロードする作業です。 Webデザイナーがそのまま行う場合もあれば、専門のエンジニアが担当する場合もあります。サーバーやドメインを契約する作業もありますし、本番環境でのテストをしっかり行う必要がありますので、思ったよりも時間がかかります。

このように、Webサイト制作には多くの工程が存在します。プロジェクトによって各工程の作業時間は様々ですが、クライアントとの間に齟齬がないよう、こういった工程が存在するということを忘れないでください。