【WEBデザイン】制作の進め方・依頼時のポイント

WEBデザイン制作では、どのような制作工程を経ることでサイトが出来上がるのか。
ここでは、基本的な制作工程と、サイトタイプごとのWEBデザインの特徴、サイトデザインのトレンドについて紹介します。

WEB制作については、依頼先が制作会社のみならず、フリーランスやテンプレートパッケージになっているものなど、数多の情報があるため、今回はよりリアリティのあるご案内ができるよう、ブランディング視点からWEB制作に携わられているキュア合同会社様にお話を伺いました。

WEBデザイン制作の流れから費用感の考え方について、プロの視点を交えてご紹介していきます。

WEBデザインの相談ができる会社一覧を見たいという方は、「見積依頼が可能なホームページ・WEBサイト制作の会社一覧」をご覧ください。

1.WEBデザイン制作の工程・流れを確認

まずは、WEB制作およびWEBデザイン制作の流れについて見ていきましょう。
WEB制作の工程を大きく6つに分けて紹介していきます。
ポイントとなる部分については、キュア合同会社からのコメントを記載しておりますので、あわせてご確認ください。

①目的の明確化

まずは、「なぜ今回WEB制作を行うのか」という目的を整理しましょう。

②方向性・コンセプトの言語化

続いて、WEBサイトをどのように見せていきたいかという印象付けの方向性・コンセプトを決めていきます。

③サイトマップ（構成図）の作成

方向性が決まったら、それを表現するために必要なコンテンツを洗い出し、サイトマップとよばれるサイトの構成図を作成します。
トップページからどのように次のページへ遷移したいか、訪れるユーザーが気になる情報はどんな内容かなど、カテゴリごとに必要な情報をまとめてみると、全体の構成が組み立てやすくなります。

④テキスト・ビジュアルの用意

サイトマップの枠組みがきまったら、デザインを制作する際に必要な素材（テキスト情報、写真、ロゴ、イラストなど）を準備します。
ビジュアルは写真がよいか、イラストがよいかなど、②で決めた方向性・コンセプトがその判断を支える役割を果たします。
テキストコンテンツは、ユーザーが必要とする情報が、必要な量で、わかりやすく書かれているか推敲して作成しましょう。

⑤デザイン制作

ここからWEBサイトにおけるデザイン制作がスタートしていきます。
④のビジュアルの要素もこのデザインに関わる内容でもあるため、順序として④と⑤が同時進行で進む場合もあります。

ページ数のあるWEBサイトでは、TOPページと下層ページなどいくつかのページのデザイン案を先に作成し、イメージのすり合わせを行います。

WEBデザインでは、ワイヤーフレーム（WF）と呼ばれるWEBページのレイアウトの設計図をまず用意します。
ワイヤーフレームの作成では、メインビジュアル、コンテンツ、ボタンなどの配置を決めます。
ワイヤーフレームに沿って、ビジュアル画像を配置、配色、装飾を進め、WEBサイトのデザインとしてかたちにしていきます。

近年ではデバイスの多様化が進み、ユーザーがPC(横長画面)で閲覧するだけでなく、スマートフォンやタブレット(縦長画面)で閲覧するケースがスタンダードになっていることから、各種デバイスによってデザインレイアウトを最適化するレスポンシブ対応が必須となっています。

新たに構築するサイトのサービスやユーザーの年齢層などの傾向を鑑み、横長デザインをメインにレスポンシブ化するか、縦長デザインをメインにレスポンシブ化するかなど、レスポンシブ対応にも注意が必要です。こうした繊細な設計が機能するWEBサイト構築に直結します。

⑥コーディング

デザインが仕上がったら、実際にWEB上でサイトとして表示させるため、コーディングという作業を行います。
HTML・CSS、Javascriptなどの言語を使用し、見た目の装飾やサイトにして見たときの動きが再現できるように制作します。

⑤でも触れましたが、スマートフォンやタブレットなど、画面のサイズが切り替わったときにも適切なレイアウトデザインの表示ができるように、コーディングの際に調整を行います。

ここまで見てきたような流れで、WEBサイトのデザインが制作されています。

準備の段階で何から始めたら良いか分からない、実績のある会社に相談しながら進めたい場合もリカイゼンにご相談下さい。
無料で実績のある会社のご案内いたします。ご要望は、専任担当がお電話にてヒアリングさせていただきますので、初めてのご発注でも心配なくご利用いただけます。

2.WEBデザイン制作の依頼と費用感

さて、ここまでWEBデザイン制作の流れを見てきました。
この一連の流れを把握しておくことによって、WEBデザイン制作にかかる費用感についてイメージしやすくなります。

実際に体験された方もいらっしゃるかもしれませんが、WEBデザイン制作において、ページ数が同じにも関わらず、制作費用が倍以上違うケースは往々にして見受けられます。

なぜこのような費用の違いが出てくるのでしょうか？
費用差が生まれる理由はいくつかありますが、その中でもわかりやすいのが「依頼範囲」の違いによるものです。

WEBデザイン制作における費用差は依頼範囲の違い

前述にて、WEBデザイン制作の流れを見てきましたが、実は発注者によって、⑤デザイン制作〜⑥コーディングをWEB制作の範囲と思っている人もいれば、①目的の明確化〜⑥コーディングを依頼範囲と捉えている人もいます。
⑤⑥のみを行う場合と①〜⑥までを行う場合では、対応する内容が異なるので、費用も異なります。

つまり、発注側としてどこまでを依頼範囲として捉えているかによって、見積費用が大きく変わるため、WEBデザイン制作の依頼を行う際は、依頼範囲を的確に伝える必要があります。

WEB制作会社に依頼の相談をすると、目的から依頼範囲までヒアリングされる場合がありますが、それは的確な見積もりを作成するために必要なことですので、答えられる範囲で構わないので、しっかりと回答するようにしましょう。

また、先述した制作の工程における⑤デザイン制作⑥コーディングだけを依頼する場合であれば、制作会社側の対応範囲が狭くなるため、出来上がりに対して制作会社の差は出づらく、反対に①目的の明確化〜⑥コーディングを制作会社に依頼すると、デザイン会社の力量や会社のカラーが大きく影響することになります。

依頼内容に応じて適した会社を見つけることが必要

費用の違いは、大きく「依頼範囲の差」と説明しましたが、実際のところWEB制作会社にも違いがあり、依頼内容に合う考え方の制作会社を探す必要があります。

基本的にWEB制作においての費用は、人の稼働費として捉えることができるので、同じコストをどのような使い方をするかの内容・提案によって、制作会社の違いが出るとも言えます。

例えば、マーケティングに強いとしている制作会社の場合は、事前の競合調査やユーザーインタビューなどの戦略部分にコストの比重が大きくなり、クリエイティブに強い制作会社はキービジュアルの作成やコピーなどの素材制作にコストの比重が大きくなり、リソースを多く持つ会社はページ数を担保するなど「制作（複数のページ制作・コーディングなど）」にかけるコスト比重が大きくなるなど特徴があります。

すべてが上記のように極端というわけではありませんが、比較的その傾向が出やすいところがあります。

WEBデザインを見直す周期

コーポレートサイトなど、一度公開してからサイトを見直す周期として、5年〜10年が目安となります。

3.WEBデザイン制作における実際の事例

では、これまで見てきた工程を踏まえながら、何もないところからWEBサイトがどのように出来上がっていくのかということをキュア様が実際にご対応された事例で紹介していきます。
具体的なイメージが湧きやすいかと思います。

コーポレートサイト制作（合同会社 監査D&Iコンソーシアム様）

事例リンク：合同会社 監査D&Iコンソーシアム様サイト

コーポレートサイト＆採用サイト制作（トータルシステムエンジニアリング株式会社様）

事例リンク：トータルシステムエンジニアリング株式会社サイト

4.WEBデザイン制作のまとめ

WEBデザイン制作について、全体の流れから、実際にサイト制作を進めた事例も含めて紹介してきました。実際にWEB制作業務をされているキュア様のお話も聞きながら、WEB制作に関するリアルな考え方にも触れてきました。

WEBデザイン制作は、依頼先の会社選びがその成功への道を分けることにつながります。
「なかなか思っていた提案をもらえない…」というときは、そもそもお願いしているWEB制作会社様の強みや価値観がアンマッチであり、制作会社様の選び方を見直すことで解決することもあります。
とはいえ、WEBデザイン制作の依頼は、専門部署にいないと発注経験も少なく、WEB制作会社様と接点を持つ機会も少ないため、どこに依頼をしたらよいかわからないということも少なくありません。

その際は、制作特化型のマッチングサービスである「リカイゼン」にご相談ください！
サポートデスクという専門担当がおり、ご相談内容を丁寧にヒアリングし、内容に応じて適した制作会社様の候補をご案内いたします。無料でご利用いただけますので、まずはお気軽に「ご相談フォーム」よりご連絡くださいませ。

また、今回取材にご協力をいただきましたキュア合同会社様は、WEBサイトに必要なコンテンツづくり（コピー制作や画像撮影など）からご相談が可能な制作会社様です。 下記より、より詳しい企業情報をご確認いただけますので、ぜひご覧ください。