foriioアドバイスが登場しました!アドバイスが必要、またはアドバイスを提供したい場合は、ここをクリックしてください。

  1. foriio owned media
  2. foriio
  3. デザイン×お金の話〜WEB制作費ってどういう内訳なの?編〜

デザイン×お金の話〜WEB制作費ってどういう内訳なの?編〜

デザイン×お金の話〜WEB制作費ってどういう内訳なの?編〜
  1. foriio Creator Match
  2. Tips

お仕事も推し事も全力投球120%💙🔫
foriioで働く27歳OLアイドル、推せるセールスこと、三村です。

今日のテーマは、デザインとお金。
例えば、いくらぐらい稼いでいるのか、このデザイン物がどれぐらいの予算で作られているのか、はたまた「実際どうやって、お仕事を獲得しているの?」といった話題って、なぜかタブー視されがちですよね。
他の職業であれば「営業 年収」とか「飲食店 原価」みたいなキーワードで調べればネットにいくらでも情報が入るのに、ことクリエイターはあまりそういった話が表立っては出てきません..。

しかし、お金はクリエイターにとってもクライアントにとっても、避けては通れない話
だって、依頼するときも、依頼を受けるときも、最終的にはやっぱり「予算はいくら?」が気になりますよね!
今回は、最近foriioでもよくご相談・ご質問をいただく「WEBサイトの制作費の内訳」について、実際何にいくらかかるのか、を明らかにしていきたいと思います!

■WEBサイトを作る工程

簡単に「WEBサイトを作る」といっても、実は出来上がるまでには様々な工程があります。
例えばこんな感じ。

ディレクション
 - 全体のイメージがどういう感じにするべきか、アイデアをまとめる

デザインの制作
 - 実際にデザインを決めていく

フロントエンドの開発
 - WEBサイトの見た目を構築していく

バックエンドの開発
 - WEBサイトのシステム部分を構築していく

ブラウザでの検証
 – デザインが崩れていないか、システムにおかしなところはないか確認していく

そして、それぞれにかかるお金はざっくりこんな感じです。

ディレクション費・・・25万
デザイン制作費・・・20万
※内訳:トップページデザイン10万 トップ以外のページ:2万×5ページ
フロントエンド開発費・・・20万
バックエンド開発費・・・20万
ブラウザ検証費・・・10万
総計90万円

「え!こんなにかかるの?!」「もっと安く済む会社もあったような…」
という声が聞こえて来そうですね。。
もちろん、予算が100万以上ないと門前払い、というわけではありません。
まずはそれぞれの工程で、一体何が行われているのか、詳しく見て行きましょう!

■ディレクションについて

WEBに関する言葉はとにかくカタカナが多いですね…。ディレクションとは、直訳すると「指示」という意味。
これから作るWEBサイトがどういうものになるのか、その方向性を指し示していくことです。
どういうWEBサイトにしたいのか、そのWEBサイトを作ることでどんな方に情報を届けたいのか、といったヒアリング、その内容をもとにプランとコンセプトを設計し、お客様にご提案。実際に制作スタートとなればスケジュール管理も行います。
WEBサイト制作の中でももっともお金がかかっていますが、ここを節約してしまうと「なんのためのサイトなのか」「誰に情報を届けるためのサイトなのか」といった、根本の部分がブレてしまい、せっかく作ったのになんだかよくわからない…ということになりがちです。
「ディレクションってよくわからないけど値段が高いから、オマケしてよ!」は、結局、そのWEBサイトのクオリティを下げてしまうだけなので、やめておく方が無難です。

■デザイン制作

読んで字のごとく、デザインを制作していくのがこのパート。WEBサイトの見た目を作っていく作業となります。しかし、ただ単に「かっこいい」「美しい」ものを作るだけではありません。
クライアントが届けたい情報は何か?このWEBサイトを訪れてどんなアクションを取ってもらいたいか(例えば、無料登録なのか、購買なのか等)を考え、形にしていく、ここが、デザイナーの腕の見せ所です!

もし、手元にWEBサイトに使えそうな写真がない場合は、新たに素材サイトで購入する必要が出てきます。
例えばECサイトの場合、実際の商品の写真の良し悪しが売り上げに直結するので、新たに撮る必要が出てくることがあります。こういった場合、デザイン制作費はさらにかかってきます。
なので、少しでも不安がある場合は、事前に相談・連絡をすることをオススメします。

■フロントエンド開発

HTMLやCSS,Javaといった言語を使ってデザインの見た目を構築していく作業のことをさします。
といっても、デザイナーの作ったデザインを再現するためだけに、言語を書き並べていくわけではありません。
実際にサイトを訪れた人が「違和感がない」「操作していて気持ちいい」と感じるような表現・動きを追加していくことで、より魅力的なWEBサイトにしていきます。

■バックエンド開発

先ほどのフロントエンド開発はWEBサイトの見た目でしたが、今度はPHPやRubyといった言語を使って、WEBサイトの「裏側」を作っていく作業です。
目に見えない部分なので想像するのが少し難しいかもしれませんが…。
例えば、「IDとパスワードを入れるとログインできるようにする」とか「パスワードが間違っていたら警告ページを出す」とか、「在庫切れになったら、SOLDOUTと自動的に表示させる」とか、そういった機能を作っていきます。
あれもこれも機能をつけたい!と思ってしまいますが、そこは「本当に必要なのか?」をよく考えましょう。機能が増えれば増えるほど、予算も上がってきてしまいます。
もし、どんな機能が必要なのか、よくわからない…という場合は、ディレクターやエンジニアに相談することをオススメします!

■ブラウザ検証

見た目も完成、システムも抜かりなく構築した。よし、バッチリ!
・・・ではありません!
最後にどのブラウザから見ても、見た目が崩れていないか・システムはちゃんと作動するか?を確認していく作業が必要です。これが、ブラウザ検証です。
せっかく作ったのに、見た目がおかしかったり、システムがうまく動いていなかったらなんの意味もありません。
検証して欲しいブラウザの種類が多くなるほど、費用が上がってきます。
最後の検証まで終えて、問題がなければ完成です!

■値段の差はどこから?

この一連の仕事の対価が、ざっくりと100万前後となります。
冒頭にも書きましたが「もっと安くでできる!」という制作会社さんは、実は多数存在します。いったい、何が違うのでしょうか?

例えば、ディレクションで行くと「こちらのやりたいデザインを聞く」か、それとも「このWEBサイトを使って、事業をどういう方向性に持って行きたいのかまで引き出してくれる」か、で価格が変わってきます。
つまり、ディレクターの力量ですね。
ディレクターが情報を引き出し、整理し、アイデアを出せるかどうかでWEBサイトの良し悪しは決まるといっても過言ではありません。

デザインに関してはゼロからデザインを起こすのではなく、何種類かのテンプレートを用意してあり、そこに当てはめていく仕組みをとる会社もあります。
こうしたテンプレートを利用したデザインだと、費用を抑えることが可能です。
シンプルに会社の情報と事業内容だけを伝えられたらそれで良い!という場合は問題ないかもしれませんが、予約機能や決済機能などをつけたい場合は、テンプレートでは対応できない可能性があるので、制作前に確認した方が良いでしょう。
また「WEBサイト用の素材は全部自分で用意できている」という場合も費用を抑えられます。

値段の高い・安いは、こうした部分で決まってきます。
事業やサービスのフェーズ、WEBサイトに求めるものによって、何が必要でどこにこだわるかを見極めて行きましょう。

気をつけなければならないのが「最初の見積もりでは30万だったのに、要望していくうちにすごく高くなっていた!」というパターン。
これを防ぐには「本当に必要な機能?」「このページを作る意味はある?」と常に意識しておくことが大事です。

冒頭にもお伝えした通り、予算が100万以上ないと絶対にダメ、というわけでは決してありません。
高いには高いなりの、安いには安いなりの理由がある、そこを納得した上での発注であれば何の問題もないと思います。
最も大事なのは、かけることのできる予算と、WEBサイトを作ることで何を実現したいのか?をしっかりと考えることです。
予算と実現したいことの軸があって初めて「自分にあった依頼先」を選ぶことができます。

せっかくお金をかけて作るWEBサイト。自分にあった依頼先を選んで、二人三脚で進めて行きましょう!

そんなわけで、今日はWEB制作費の内訳についてお伝えしました。

Text&Edit:Ikuko Mimura

ーーー

WEBサイトやアプリ、ロゴなど、クリエイターにどのように頼んだら良いかわからないというお悩みをお持ちの方。まずは一度、foriioチームまでお気軽にお問い合わせください。無料相談をお受けしております。
今回のように「うちに必要なWEBってどれぐらいの予算なの?」といったご相談も大歓迎です!

foriioお問い合わせ先:sales@foriio.com

◇関連記事

*WEBサイトリニューアルにおける大切な3つの判断基準について

「思ってたデザインと違う!」となる前に知っておきたい、適切な依頼の出し方

◇過去のnoteを一気に読みたい方はこちらから↓
foriio insights|foriio|noteクリエイティブの力をあらためて考えるforiioのもう一つのnoteマガジン。 主にセールスチームが担当しています。note.com