龍弥デザインブログ

WordPressやレスポンシブWebデザインでのスマホ対応など、Webサイト制作の全体の料金はいくらになるのかを解説を踏まえて内訳をお伝えしようと思います。

ホームページ制作料金の仕組みをご紹介します。

Sponserd link

こんにちわ。 最近首のコリがひどくて左を向くたびに激痛がします。
・・・病院いこう。

さて龍弥デザインはホームページ・Webサイト制作の料金表を単価で表示しているんですが、全体の制作の料金はいくらになるのかがちょっとわかりづらいかな?と思いまして、解説を踏まえて内訳内容をお伝えしようと思います。

デザイン・コーディング・ディレクションとは?

Webサイト制作会社が主に行うのは「デザイン・コーディング・ディレクション」ですが、一言でデザイン・コーディング・ディレクションと言っても具体的にどんな作業内容かわかりづらいかもしれませんね。

デザイン作業

デザインと聞いてみなさんがパッと思いつくのはきっと「見た目」だと思いますが、Webサイトにおいてデザインとは「見た目」だけではありません。

Webサイトの機能性やコンテンツの導線、目線の移動を予測した設計など、仕組みを設計することをデザインと呼称しています。

訪問してくれるであろうターゲットを予測し、よりお問い合わせに導く設計を行うことがWebサイトにおいて最も重要な作業です。

コーディング作業

コーディングはデザインをインターネット上で公開してブラウザで見られるように、専用の言語でテキストファイルを作り上げる作業です。

・・・と言われてもわかりませんよね。 以下の画像をごらんください。

20150307_01こういったものを手書きで書き込んでいく作業がコーディング作業になります。

画像のものはブラウザで表示するために必要な「html」ファイルです。これは冒頭でも出てきましたね。

この他にも、「html」にデザインを反映させるために必要な「CSS」ファイル、ページにアニメーションなどを追加していく「Javascript」ファイル、メールフォームなどのプログラムを制御する「PHP」ファイルなど・・・それぞれに役割があり、それぞれの言語で書かなければいけないものが多数あります。

これらを総称してコーディング作業としています。

ディレクション

Startup Stock Photos ディレクションとは、プロジェクトの最初から最後まで一貫して行う「企画・設計・提案・管理・対応」などの作業です。

Webサイト制作は実際に手を動かしているだけではありません。

クライアント様からご依頼頂いたプロジェクトの管理をするために、制作作業に入る前から頭が痛くなるほど(笑)プランを練りに練っています。

制作が進み始めてからも、何度も打ち合わせを行ったり電話やメールで確認を行ったり、頭と足を常に動かしています。

デザイン会社によっては、このディレクション費に最も予算を使うこともあります。
どんなプロジェクトにも、やらなければ進まない極めて重要な作業になります。

龍弥デザインのホームページ制作料金の仕組みをご紹介!

では早速パターン別に見た制作料金のご紹介を行っていきますね。

パターン1:静的Webサイト

パターンとしてはWordPressほど多くはないんですが、静的Webサイトの制作は基本プランですので、ひとまずこちらからご紹介します。 「静的」と言われても、それってなんなの??と思われるかもしれませんね。

静的Webサイトとは?

「静的Webサイト」とは簡単に言うと、サイトの内容を「管理画面から更新できない」サイトになります。 この場合、WordPressなどのシステムで制御された更新部分は導入せず、更新を行うとしても、htmlファイルを直接編集する必要があります。 htmlファイルを直接編集するとどうなるのか? 知識のあるプロが編集すれば問題ありませんが、もしクライアント様ご自身で編集される場合はとても危険で、レイアウトが崩れてしまったり、最悪の場合ページが真っ白になって全く表示されなくなってしまうこともあります。 じゃあ更新しなければいいんでしょ?うちは更新するようなところはないから大丈夫!という声もあるかもしれません。 はっきり言って「大丈夫」ではありません。

戦うためには更新が不可欠

Webサイトは世界中で日々更新され、ユーザーにとって役立つ情報が公開されたページから、より検索上位に表示してくれるようになっています。中でも情報の鮮度は重要な要素です。 Webサイトを開設してから更新しなければ、鮮度がまったくない不利な状態で競合と戦うことになり、検索順位の下落は避けられません。 僕の先輩がよく言うのが、「Webサイトは更新しなければ死んだも同然」という重い言葉です。厳しいですがその通りです。 ・・・少し話がそれましたね(笑)

静的Webサイト制作の一般的な費用感

静的Webサイト制作では以下の場合を例にとり解説しますね。

  • トップページ/1ページ
  • 下層(トップ以外)ページ/10ページ
  • お問い合わせフォーム1件(確認ページ・完了ページ含む)
  • トップページにJavaScriptを使ったアニメーションを実装
作業 件数(単位) 単価 小計
打ち合わせ/ディレクション 実費
トップページ デザイン・コーディング 1(ページ) 35,000円 35,000円(税別)
JSアニメーション 1(件) 10,000円 10,000円(税別)
下層ページ デザイン・コーディング 重要 1(ページ) 30,000円 30,000円(税別)
標準 7(ページ) 20,000円 140,000円(税別)
簡易 2(ページ) 8,000円 16,000円(税別)
お問い合わせ フォーム実装・確認画面・完了画面 1(件) 30,000円  30,000円(税別)
合計 261,000円(税別)

以上のようになります。 静的Webサイトの制作で下層ページが10ページもあるものは大抵WordPressで制作するので静的に構築を行うことはそんなにありませんが、標準的なもので多いのはこういった感じです。 今回のパターンでは、トップページは一般的なもの、下層ページはアピール要素のある造り込みが必要な重要なページが30,000円、標準的なページが20,000円、デザイン要素の少ない簡易的なページが8,000円で計算を行っています。

パターン2:WordPressサイト

次にみなさんが気になっておられるであろうWordPressを導入したWebサイトの費用パターンです。WordPressは最低限使えるようにする導入と設定、固定ページ5ページまでのコーディング、ブログ部分の構築を内訳に含めた金額が基本料金になります。 それぞれを解説させていただきますね。

導入と設定

WordPressを使い始めるには、レンタルサーバーへのデータベースの生成と、サーバーへのインストール、そして初期設定が必要になります。 これら一連の導入作業を内訳に含めています。

固定ページ5ページのコーディング

固定ページですが、=下層ページと思っていただいて問題ありません。 WordPressでご依頼いただいた場合、固定ページ5ページまではコーディング作業の費用をWordPress構築の基本料金の内訳に含めるようになります。 なので今回のように下層ページが10ページある場合は5ページ分のコーディング費用が発生します。 ただWordPressを導入しての作業になりますので、金額は1ページ/8,000円〜と、ちょっと安くなっています。

ブログ部分の構築

一言でブログといってもブログの記事のページだけではなく一覧ページ、カテゴリーページ、タグページ、月別アーカイブページ、検索結果ページ、404ページなど、多くの部分のカスタマイズが必要になります。 こういったブログの基本構造の構築に関しては内訳に含めるようにしています。ただ、投稿形式を追加したいなどといった場合は別途お見積もりを取らせていただくようになります。

WordPressサイト制作の一般的な費用感

WordPressサイト制作でも静的Webサイト制作と同じパターンで計算してみます。

  • トップページ/1ページ
  • 下層(トップ以外)ページ/10ページ
  • お問い合わせフォーム1件(確認ページ・完了ページ含む)
  • トップページにJavaScriptを使ったアニメーションを実装
作業 件数(単位) 単価 小計
打ち合わせ/ディレクション 実費
トップページ デザイン 1(ページ) 30,000円 30,000円(税別)
JSアニメーション 1(件) 10,000円 10,000円(税別)
下層ページ デザイン 重要 1(ページ) 18,000円 18,000円(税別)
標準 7(ページ) 12,000円 84,000円(税別)
簡易 2(ページ) 0円 0円
WordPress 導入・固定ページ(〜5ページ)・ブログ 1(件) 150,000円  150,000円(税別)
5ページ 5(ページ) 8,000円 40,000円(税別)
お問い合わせ フォーム実装・確認画面・完了画面 1(件) 30,000円  30,000円(税別)
合計 362,000円(税別)

こういった内容になりますね。 WordPressに関しては、導入と固定ページ(追加などを行わない、内容を更新していくページ)を5ページまで、またブログシステムを組み込むことまでは標準の150,000円、今回は10ページの下層ページがあるので、5ページ分は追加のコーディング費用がかかりますが、8,000円に設定しています。 ・・・10ページもあるプロジェクトには最近なかなかお目にかかってないですけどね(笑)

パターン3:レスポンシブWebデザイン(スマートフォン対応サイト)

龍弥デザインではスマートフォンでの表示に対応するために、ブラウザの横幅で見え方が変わる「レスポンシブWebデザイン」での制作を行っております。

レスポンシブWebデザインとは

レスポンシブWebデザインとは前述したとおり、ブラウザのサイズによってデザインや機能がそれぞれのサイズに最適化される手法です。 PCとスマートフォンはアクセスした端末によって別々のURLに飛ばすという手法もありますが、その場合飛ばす先のページをそれぞれ編集する必要があり、更新の手間を考えるとあまり好ましくありません。 その点レスポンシブWebデザインは画面幅を基準として同一ページでデザインと機能を切り替えるため、更新するファイルが少なく、更新性にも長けています。

レスポンシブWebデザイン対応サイトの一般的な費用感

レスポンシブWebデザイン対応サイト制作でも以下の例で解説しますね。

  • トップページ/1ページ
  • 下層(トップ以外)ページ/10ページ
  • お問い合わせフォーム1件(確認ページ・完了ページ含む)
  • トップページにJavaScriptを使ったアニメーションを実装
作業 件数(単位) 単価 小計
打ち合わせ/ディレクション 実費
トップページ (スマホ対応) デザイン・コーディング 1(ページ) 55,000円 55,000円(税別)
JSアニメーション 1(件) 10,000円 10,000円(税別)
下層ページ (スマホ対応) デザイン・コーディング 重要 1(ページ) 40,000円 40,000円(税別)
標準 7(ページ) 25,000円 175,000円(税別)
簡易 2(ページ) 8,000円 16,000円(税別)
お問い合わせ フォーム実装・確認画面・完了画面 1(件) 30,000円  30,000円(税別)
合計 326,000円(税別)

以上のようになります。

パターン4:パララックスエフェクトによるスペシャルページのWebデザイン

パララックスエフェクトという「視差」によるアニメーションを施したもので、スクロールしてくたびに背景画像が逆スクロールしたり、イラストやキャラクターが動き回ったりするアレです。少し前に流行ってましたね。 だいたいトップページや1ページもののサイトでよく使われる手法ですが、スクロールしてくたびにアニメーションを行うのでアピールポイントは高く、レイアウトを決め込まないので自由度は高いんです。 ただ、効果的に使うのが非常に難しく、計算した上で表現を行わないとただのうるさいページになりますね。

パララックスエフェクトによるスペシャルページのWebデザインの一般的な費用感

パララックスサイトの特性上、1ページものがとても多いので、そのパターンで算出してみようと思います。

  • トップページ/1ページ
  • お問い合わせフォーム1件(確認ページ・完了ページ含む)
  • トップページにJavaScriptを使ったパララックスアニメーションを実装
作業 件数(単位) 単価 小計
打ち合わせ/ディレクション 実費
トップページ デザイン・コーディング 1(ページ) 100,000円 100,000円(税別)
JSアニメーション 1(件) 70,000円 70,000円(税別)
お問い合わせ フォーム実装・確認画面・完了画面 1(件) 30,000円  30,000円(税別)
合計 200,000円(税別)

こういったスペシャルページは正直金額の上下幅がとても大きく、憶測でしか金額の算出ができずにとてもざっくりしたものになってしまいました。 ただ、パララックスエフェクトを使用したWebサイトの制作時間は簡単な静的Webサイトとそんなに変わらないため費用面ではちょっと高くなります。 面白いことをしたい!という方にはオススメです。

終わりに

いかがでしたか?龍弥デザインでご依頼いただく一般的な費用感のものを掲載させていただきましたが、あくまで一般的なもので、もちろんこのパターンよりも大幅に安くなったり大幅に高くなったりします。 ご要望内容やご予算にあったご提案を別途させていただくようにはしていますので、お気軽にお声がけ頂ければと思います。 → 龍弥デザインへのお問い合わせはこちら

Sponserd link

一覧に戻る

岡山 ホームページ制作龍弥デザイン

〒700-0953
岡山県岡山市南区西市668-20

閉じる