BUSINESS TIPSビジネスに役立つ情報がきっと見つかる

  • WEBデザイン・制作
  • HTML・CSSコーディング

コーディングを外注する際の見積もり依頼方法

ホームページ制作においてデザインとセットで重要なのがコーディングになります。最近は、検索サイトからのHTMLチェックも高度化しており、SEO対策としてもコーディングは注視しておくべき事項です。そこで、ここではコーディングを外注するメリットとともに見積り依頼方法について紹介します。

1. コーディングとは?

コーディングとは、デザインされたWEBページのイメージをサーバが読み込みインターネット上で確認ができるように、HTML・CSS、Javascript言語を用いてコードとして記述することを言います。
HTMLは、1990年代に開発された比較的、歴史の浅い言語になります。とは言っても、常に進化しているのもHTMLです。最新情報を取り逃がしてしまうと、SEO対策へも影響を及ぼしかねず、非常に勿体無いものになってしまうこともあります。

2. コーディングを外注するメリット

WEBサイトページを制作する際、検索エンジンから検索され結果として上位に表示されることで、人の目に触れられ、新規顧客の獲得や既存顧客の満足度向上などを図れる位置づけでもあります。自社内でコーディングを出来る人材がいる場合は、それで良いですが、そうとも言っていられない場合もあります。
企業によっては、デザインに関しては社内で制作し、コーディングのみを外注したいという場合もあるでしょう。ここでは、コーディングを外注するメリットについて紹介します。

結果的にコストを抑えられる

コーディングといっても、最近ではSEO対策を強く意識したHTML化が求められています。したがって、最新のコーディング情報を調べながら制作するのはとても時間がかかってしまいます。社内リソースも人件費になりますので、外注を行なって社内リソースは別の業務に当てるなどを行うことで、結果的にコストを抑えることができるのです。

クオリティを高められる

コーディング業務を数多く行なっている外注先であれば、実績があるだけのノウハウを持ち合わせています。高いノウハウとスキルを持つ外注先へ依頼することで、HTML全体のクオリティを高められます。

スピード重視

社内でコーディングを行おうとすると、他業務との兼業になる可能性も多々あります。しかし、外注先へ期限を設けて仕事として依頼することで、納期内に確実に仕上がってきます。結果的にクオリティが高くスピード感を持って仕上がってきます。

外部のノウハウを活かす

コーディング作業で重要になることは、ユーザビリティ良く仕上げられるかというのが一つあります。日々、HTML・CSS等の技術は進化しており、それらは外部の専門知識を活かしながら制作した方が良いものに仕上げることができます。

社内の業務過多を回避する

外注で依頼することで、社内リソースを別の業務へ投下できます。特に忙しい時などは、外のリソースに頼ることで、社内の業務方を防げます。

3. コーディングを外注する際に準備することまとめ

コーディングを外注するにあたり、準備することは大きく4つあります。

⑴ デザインデータの準備

デザインを作成する作業を社内で行う場合でも、またはデザイン作成自体も外注する場合でも、コーディングを行う制作会社へデザインデータを渡します。データ自体は、フォトショップやファイヤーワークス、イラストレーターソフトなどで作成していると思いますので、jpg等のデザインラフデータを、コーディングを行う外注先へ渡して確認してもらいます。

⑵ サイトマップ作成

コーディングを行う際には、サイト全体の構成がどうなっているかを理解してからの方がスムーズです。また、その後にコンテンツを追加する場合でも、そして運用していく場合でもまとまった資料があると便利です。したがって、ディレクトリ構造やファイル名など記載したサイトマップを作成してコーディングの外注先へ渡します。

⑶ 指示書作成

ここで言う指示書とは、コーディング作業における仕様書のようなものになります。コーディング依頼といっても、効果的なタグの設定や、画像の分類、ページ名、リンクのパス設定等、WEBページとして動かすための設定は数多くあります。

⑷ 見積り依頼

デザインデータとサイトマップができたら、コーディングを依頼したい制作会社へ見積り依頼をします。コーディング作業における見積りは、SEO対策を含めた金額を算出してもらいます。見積り金額の算出方法として、1ページ単価で出す制作会社もあれば、ページごとに分けて算出している制作会社もあります。どちらが良いというのはありませんので、納得できる説明と金額のバランス、そして数社の見積り比較をすることで最適なものを選ぶようにするのが良いでしょう。

4. 発注後の制作進行、納品まで

発注先が決まったら発注書を発行し、契約書の締結を行います。あとから揉めないためにも書面関連の手続きはとても重要です。また、納品後に不具合などが出た場合のためにも、瑕疵担保期間を予め設けて契約書の中に盛り込んでおいたほうが良いでしょう。

では、実際に納品されるものを確認しましょう。
・HTML一式(サイトに表示するもの)
・CSS(スタイルを記述したもの)
・画像ファイル


上記3つの視点で各素材等を準備してもらうのが良さそうです。

最近は、情報漏洩対策もホームページを持つ者たちにとっては決して避けて通れません。外注先となる制作会社のセキュリティポリシーを確認して、外注先となる制作会社から個人情報の漏えいなど起きないようにコンセンサスを取ることが重要です。

納品について

コーディングを行う制作会社からくる納品形態は大きく3つに分けることができます。

⑴ ファイル一式送付、もしくはダウンロード

コーディングを完了したHTML・CSS・画像等のファイルを一式、圧縮等されて送られてくる、容量が大きい場合はダウンロードするなどして納品の確認を行います。この場合は、自社内にてダウンロードしたファイルをサーバへアップロードし稼動確認ができるスタッフがいることは前提となります。

⑵ 発注先の専用サーバ等へアクセスし、ファイルをダウンロード

コーディングの依頼先に設置しているサーバ等よりFTP経由でダウンロードする方法になります。この場合も、ダウンロードしたファイルを自社で後悔するサーバへアップロードする必要があるため、それらが対応できるスタッフが必要になります。

⑶ 自社サーバへ直接アップロード

自社内に、納品されたコーディングデータをサーバへアップロードするスタッフがいない場合は、発注先から直接、自社サーバへアップロードして確認する方法になります。この場合、サーバへアクセスするためのパスワード情報を外部へ知らせることになりますので、機密保持契約や納品後のパスワード変更などセキュリティ対策を考えておく必要はあります。

5. まとめ

コーディング作業を外注する際の見積りから納品までの流れを説明してきました。外注するということは、社内のリソースを別の業務へ割り振れることや、最新のノウハウを踏襲できたりすることはメリットがあります。但し、外注先で投げっぱなしはよくないですので、作業する上でのスケジュール管理やクオリティ管理などはしっかりと行う必要があります。
コーディングの外注先探し、見積り依頼の仕方、見積り比較、発注方法など、ビジネスマッチングサービスを使うことで、様々な手間を省くことができ業務効率化がはかれます。

HTML・CSSコーディングでお困りではありませんか?

仕事の発注先探しや、新規顧客開拓など、ビジネスパートナー探しに役立つ総合ビジネスマッチングプラットフォーム。
それがリカイゼンです。

無料で相談する

HTML・CSSコーディングの関連記事

HTML、CSSの基本と役割の違い、外注へ求めるレベルまとめ

WEB制作をする際、デザインを作成したのち、そのデザインをインターネット上で閲覧できるようにコンピュータが読み込める者へ変換する必要があります。それをコーディングと言います。 コンピュータが読めるようになるには、HTML、CSSを使って記述します。ただ、HTMLとCSSに馴染みがないと、それが何なのか、何が違うのかが分かりづらいです。 ここでは、HTMLとCSSのそれぞれの基本と役割の違い、また外注へコーディングを依頼する際のレベルについてまとめています。 1. HTMLとは?HTMLの役割 HTMLは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略です。文書構造を定義するもので、骨組みや構造となるマークアップ言語としてホームページ等を制作する際に用いられます。コンピュータに画像やテキスト、ロゴなどを認識させるための役割を担っています。 認識させたいテキストなどの前後をHTMLタグと呼ばれるコードで囲むことで、コンピュータがその命令に従って表示します。タグには、文字を太文字で表示させたりテキスト文にURLをリンクさせたりするコードがあります。 2. CSSとは?CSSの役割 CSSは、Cascading Style Sheets(カスケーティング・スタイル・シート)の略で、ホームページの見た目やスタイルを定義する言語になります。HTMLで画面に表示する文書構造などを定義されたものに、CSSでは表現方法や装飾などを定義します。CSSはデザインを作るもので、テキストに下線を引いたり、枠で囲ったり、フォントサイズを変えたりします。 HTMLで作成したものを装飾して見やすくする役割を担い、ます。HTML+CSSの組み合わせで、WEBページを見やすくすることができます。 3. HTMLとCSSの違い HTMLとCSSは、何が違うのかが初めて触れる人からすると分かりづらいものです。その理由は、昔はHTMLとCSSを区別していなかったからです。つまり、HTMLコードにCSSが混在していたからです。 しかし、最新のHTML5では、CSSとは分離されて役割の違うものとして明確になっています。すなわち、HTMLは文書構造を作るもので、CSSはデザインやスタイルを作るものとして理解するのが分かりやすいです。 インターネットの普及とともにウエブは急激に進化し、企業などもウエブサイトを持つようになりました。同時にウエブページは一気に複雑化し、効率化のためにウエブデザインは分業されて、文書構造とスタイルを分離する需要が高まったものと考えられています。今は、文書構造とスタイルを分離するのは一般的なものとなっています。 文書構造とスタイルの違い 文書構造(HTML)とスタイル(CSS)の違いについて説明します。 文書構造は、ウエブに表示する文字や文章に対して、その文章がタイトルなのか、見出しなのか、今日長文であるのか、単純なテキスト文章であるのか、そういた文書の役割をタグで指示をすることです。それぞれ役割を持った文字をHTMLタグで囲むことで役割を果たします。例えば、タイトルの場合は、titleタグをタイトル文となる文字を挟むというやり方です。 一方のスタイルというのは、見た目やデザインを指示します。見出しなのかどうかなどではなく、赤色の文字にするのか青色の文字にするのかという指示です。また、文字の大きさや、画面のどの場所に置くのかというのもスタイルで指示します。 ただし、HTMLだけだったとしても、ブラウザはスタイルを表現します。例えば、見出しを示すh1というスタイルを指定していなかったとしても、ブラウザが勝手に見出しとして表現します。このような動きが、HTMLとCSSの違いを曖昧にしているとも言えます。 HTMLとCSSを分離するメリット HTMLとCSSを分離させるには、コーディングを進める中で大きなメリットがあります。いくつかあるのですが、まず、スタイルを制御しようとすると、文書内容にそぐわないHTMLタグを使用して文書構造がわからなくなる問題を回避できます。CSSを使用することで、文書構造に影響を与えずにスタイルを制御できるようになるからです。スタイル指定することで、文書構造がわからなくなるということがありません。 メンテナンス性の向上 また、メンテナンス性が向上することもメリットの一つです。HTMLでスタイルを指定しようとした場合、例えば見出しが使われている全ての箇所を変更する必要が出てきますが、CSSではスタイルを一括管理することができます。複数の文書を共有できるので、修正や追加などのメンテナンス性が向上するのです。 SEO効果が期待できる HTMLタグの中では、スタイルなどの見栄え指示を行える制御をやめて、文書構造としての情報を適切にマークアップすることで、検索エンジンに正しく解釈されるウエブページになります。また、CSSスタイル指定で、文書から余分なマークアップを排除し、スタイルに関する記述をまとめることで、ウエブページを軽量化することができます。これらの対処は、SEO効果やアクセシビリティの向上が期待できます。 特定メディアに依存しないウエブページ CSSでは、パソコン画面、スマホ、テレビ、音声など、メディアごとに適用するスタイルを指定し分けることが可能です。メディアごとにスタイルの指定をすることで、特定のメディアに依存しないウエブページを表示させることができるようになります。 4. 外注へ求めるコーディングレベル コーディングを外注する際、誰にお願いするかを迷う場合があります。フリーランスへ依頼するのか、制作会社へ依頼するのか。何れにしてもコーディングのレベルが分かっていれば、フリーランスでも制作会社でもどちらへ依頼しても構いませんが、レベルがわからない場合は、求めるコーディングレベルを実現できるかどうかを確認する必要があります。 一番分かりやすいのは、過去の実績を見せてもらうことです。そして、実績として出されたサイトは、いつ頃制作したのかの時期を確認することが重要です。デザイントレンドやSEOトレンドは、日々変化しているのがWEB業界でもありますので、その時のデザイン性をうまく掴みながらSEO対策としてしっかりコーディングできているかということの確認をします。 フリーランスも制作会社も実績に問題がなければ、あとは見積もり比較、コミュニケーション力、スケジュール確認になります。フリーランスで気をつけなければいけないのは、途中で連絡が取れなくなったりしないかなどです。 しっかり比較ができて、納得のいく外注先が定まったら発注を行い、作業を進めていきます。 5. まとめ HTMLとCSSの違いについて、分かりにくかった部分を説明してきました。インターネットの普及とともにHTML、CSSができることは進化しています。HTMLとCSSは、文書構造と文書スタイルという違いがあり、分離させることで様々なメリットが生まれます。それは、業務効率性、メンテナンスの向上、SEO効果への期待向上など、コーディングによってウエブサイトとしての価値が決まると言っても過言ではありません。 そして、コーディングを外注する際は、過去の実績をコーディングレベルでしっかり確認するということです。HTMLとCSSの役割と違いを理解した上で、コーディングを外注依頼して、検証を行えることが、発注者としてウエブ上の価値あるページに押し上げることができるのではないでしょうか。

HTMLコーディングの最新情報まとめ【2019年版】

WEBページは、デザイン制作をしただけでは完了しません。 デザインをもとに、HTML、CSSなどのマークアップ言語を使ってWEBブラウザで見える形にして初めてインターネット上で閲覧できるようになります。この一連の作業を「コーディング」と言います。コーディングは、HTML、CSSのルールに沿って作成していく作業で、WEB制作には欠かせない工程です。 ここでは、HTMLコーディングとは何か、HTMLのトレンド、そしてコーダーが使っているHTMLエディタツールなどを紹介します。 1. HTMLコーディングとは そもそもHTMLとは何でしょうか。HTMLは、Hyper Text Markup Languageの略でウエブページを作るために開発された、最も基本的なマークアップ言語の一つになっています。 HTMLの役割は、コンピュータが人間に代わって文書を適切に分析できるようにするための言語です。 現在、インターネット上で公開されているウエブページのほとんどが、HTMLで作成されています。 2. HTMLコーディングのトレンド HTMLにはバージョンがあり、現在はHTML5が最新版として使われており、改訂第5版になります。HTML5では、API(Application Programming Interface)機能が新たに追加されたことで、高度な機能を持ったアプリケーションの構築が可能になりました。例えば、これまでウエブ上で表現できなかった動画や音声、グラフィックの描画などが簡単に表現できるようになっているのが特徴です。 HTML5で実現できるようになったポイントをまとめると ✔︎文章構造を意味づけする新しいタグ(section、article、nav)が使えるようになっています。 ✔︎Flashを利用しなくてもマルチメディア対応できるタグ・機能(video、audio)が使えるようになっています。 ✔︎デバイスの位置情報や、カメラ・マイクのリソースにアクセスできる機能が使えるようになっています。 3. HTMLエディタツール HTMLなどの構文を記述するには、専用のテキストエディタというものがあります。最近は、様々なテキストエディタが出ていますが、ここでは業界で人気のあるテキストエディタをいくつか紹介します。 Dreamweaver かなり古くからWEB業界で使われてきている定番のツールになります。WEB制作ツールとして高機能であるということで人気があります。具体的には、WEBアプリケーション用ツールであるBootstrapと連携してレスポンシブのサイトが作れることや、PHPやGitにも対応しています。また、Dreamweaverでは、グローバルナビゲーションなどの各ページで共有する部分をテンプレート化することができます。これは、ページが増えた場合でもテンプレートに手を加えることで一気に修正が可能となります。大規模サイトの制作や効率的な制作を行いたい場合は、テキストエディタ機能に留まらないので、とても便利なツールと言えます。 Visual Studio Code マイクロソフトが提供しているオープンソースのテキストエディタツールがVisual Studio Codeになります。オープンソースなので、拡張機能をインストールすることで自分の好みのエディタにすることができるのが特徴です。しかし、マイナーなツールなので、拡張機能の種類はさほど多くありません。また癖があるので、そのほかのツールとも比較してみることをオススメします。 Atom GitHubが提供しているオープンソースのエディタツールです。拡張機能のプラグインが豊富で、プラグインをインストールすれば、自分好みのエディタにすることが可能です。 Coda2 Dremweaverの代替えエディタとして注目されているのがCodaになります。インターフェースがわかりやすいことと、手打ちするコードを予測して自動補完してくれるところが人気の秘訣です。 また、Codaが登場してきたころからオープンソースのエディタが主流になってきました。Atomなどは拡張機能をインストールすることが前提のエディタですが、Codaは最初から多くの機能を備えているので、初めて使う場合でも迷いなくスタートすることができます。 Liveweave オンラインで使えるエディタになります。HTML、CSS、Javascript、仮想ブラウザの4分割画面になっていて、JQueryを選ぶとHTMLへすぐに反映されたり、公式サイトへアクセスするだけですぐに使えるので使い勝手が良いです。また、ユーザ招待機能があるのでチーム開発も可能です。作成したコードはアカウント作成することで共有URL化ができるようになっています。 Brackets Adobeが提供しているオープンソースのHTMLエディタになります。Backetsの特徴は、拡張機能のプラグインが豊富に揃っているところですが、最初のインストールした直後でもクオリティが高いので、何の設定をしなくても使えるところが便利です。 また、HTMLとCSSは基本的には別ファイルなので、行ったり来たりするのが当たり前ですが、Bracketsのクイック編集機能を使うと、HTML編集中に該当するCSS部分がすぐ下に表示されるので、直接編集が可能なのです。作業効率は大幅に上がります。更に、画像編集ソフトPhotoshopのPSDファイルから直接画像を書き出せるので、Adobe Creative Cloudとの親和性も高いです。 4. HTMLコーディングを外注依頼 デザイン制作同様にコーディング作業も専門的知識が必要です。上でも説明したようにHTML5では、APIが使われていることもあり、かなりプログラム開発に近い要素も含まれています。それだけ高度な表現ができるようになっているということでもあります。もちろん自社制作でコーディングを行っても良いのですが、プロの制作会社へ依頼することで、社内の手間を省けますし、最新のコーディングでSEO対策をできるのであれば、コスト的にも高いものではないかもしれません。 また、最近ではコーデイングのみでも請け負ってくれる制作会社も少なくないですので、もし外注する場合は、下記の点に注意して依頼するようにしましょう。 ✔︎コーディングを行うWEBページに関する目的を伝えるようにしましょう。集客なのか、売り上げを上げるのか、そのページがどのような目的で役割を持っているか伝えることで、コーディングのみの作業とは言え、プロの制作会社として気づくことがあれば提案をもらえます。 ✔︎制作スケジュールを確認して、依頼者側から提出しなければいけない情報や素材を遅れないように準備しておく必要があります。 ✔︎WEBページはリリースして終わりではなく、タグの使い方やキーワード設定等含めて、修正を繰り返す必要がありますので、その辺りのフォローが可能かどうかも費用含めて確認しておくと良いでしょう。 コーディングは、検索エンジンからの評価を左右する大事な作業になります。検索エンジンに好かれるコーディングを行なって、検索上位に行けるようなページ作りをできることが、自社にとって最善ではないでしょうか。 5. まとめ ここでは、HTMLコーディングについての最新情報を説明してきました。HTMLコーディングは、検索エンジンからの評価、そして上位表示がされるかどうかが決まる大事な作業になります。最新のHTML5になってからは、高度な機能が使えるようになり、リッチなWEBページを制作することができるようになりました。 WEBページのSEO対策は、効果測定をしながら常に改善をしなければいけないので自社内にHTMLコーダーを抱えてノウハウをためていくことも一つの方法ではあります。しかし、様々なサイトの制作を行なっている制作会社では、最新の情報やノウハウを持ち合わせています。内製で行うか、外注に依頼するのか、コーディングに関するノウハウ、人件費(コスト)、スピード感など総合的に判断してコーディング戦略を立てる必要がありそうです。

スマホサイトをレスポンシブデザインで外注する理由

この数年のスマートフォンの普及によって、国民のほとんどがスマートフォンを利用する時代へと変化しました。それとともにスマートフォン専用のサイトも日々公開されている状況です。それは小さな画面サイズでも快適に見えるように作られたWEBサイトです。スマホ専用サイトのデザインにするべきか、それともレスポンシブデザインにするべきか、制作する際に迷うこともあるようです。ただ、最近ではスマホでもそれ以外のデバイスでもそのデバイスに応じたデザインで崩れることがないレスポンシブデザインが一般的になりつつあります。> ここでは、スマホサイトをレスポンシブデザインで外注する理由について説明します。 1. レスポンシブとは 最近の企業の多くは、自社のホームページや採用サイトなど、パソコンだけではなくスマートフォンにも対応したサイトを作成することが必要になっています。そのほか、タブレットの普及も進んでいるため、どのようなデバイスから閲覧されても、デザインが崩れることなく表示されることが必須になっているのです。 そこで最近のサイト制作の手法として主流になりつつあるのが、レスポンシブデザインになります。レスポンシブは、一つのHTML、CSSによって制御できるようになっていて、ユーザがどのようなデバイスから閲覧されても、そのデバイスの画面サイズに応じてレイアウトやデザインが最適化されるようになっています。つまり、デバイスのウインドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことを言います。 検索エンジンのGoogleは、2015年4月、モバイルフレンドリーアップデートというのを行いました。これは、モバイル対応済みの検索順位を引き上げるということになります。すなわち、Google自体がWEBサイトをモバイルフレンドリーにする方法として、レスポンシブなテンプレートやテーマを利用することを推奨しているのです。 こういった流れを受けて、レスポンシブは、スマホやタブレットが普及している現代において必要な技術なのです。 2. スマホ専用サイトとレスポンシブデザインの仕組み、メリットとデメリット スマホ専用サイトは、その名の通りスマホで閲覧することに特化したWEBサイトになります。これは、PCなどのレイアウトとは違うスマホ用に特化した設計になっているため、スマホで見る場合は快適に閲覧しやすくなっています。 ただ、スマホ以外のデバイスで対応しようとするとスマホ専用サイトとは別のHTMLファイルを作成し管理する必要があるため、更新や追加を行う場合は単純に2倍の手間がかかります。 一方のレスポンシブサイトは、上でも説明したようにパソコンでもスマホでもタブレットでもデバイスに偏らず、それぞれのデバイスでデザインが崩れることなく閲覧することができます。ただ、様々なデバイスに対応させる必要があるのでHTMLファイルのソースは長くなります。結果的に、WEBサイトの表示に時間がかかりやすくなってしまうというデメリットがあります。 サイトの仕組みですが、スマホ専用サイトに関してはスマホに特化した制作をしていて、また古いブラウザ対応をする必要がないのでHTMLやCSSの最新バージョンをふんだんに使っており軽くて見やすいです。 しかしスマホ専用サイトは、スマホ以外のデバイスで閲覧しようとするとレイアウトが崩れるというような現象が発生してしまいます。更に、スマホ専用サイトとほぼ同じ内容のものがパソコンサイトなどでも表示されるように作られますので、Googleなどの検索エンジンから見た際にコピーサイトとして誤認識を受ける可能性が高くなります。そうなると、ペナルティを受けて検索結果の上位に表示されなくなるという現象が発生します。重複サイトであるという認識を回避するために、タグの埋込やパソコンユーザへリダイレクト設定をしたりする必要が出てきて、思わぬ工数がかかってしまうのです。 レスポンシブサイトは、基本的にはHTMLファイル1つで全てのデバイスに対応できるように作っていますので、複数のHTMLファイルを書き換える必要がありません。これは、メディアクエリという記述方法によるもので、横幅ごとの見せ方を変更することで、パソコン、タブレット、スマホの3種類のCSSを記述します。 こうした実情から、スマホ専用サイトを、スマホ以外のデバイスでも見られるようにレスポンシブサイトへ移行するケースも出てきているのです。レスポンシブサイトは、1つのHTMLで管理をするため、編集効率もアップし、削除などの作業も簡単に済みます。 3. レスポンシブ対応の料金相場、制作会社の選定 スマホ専用サイトからレスポンシブデザインへの変更は、どれくらいの費用がかかるのでしょうか。外注した場合の費用相場を紹介します。 制作会社の規模や、サイト構成によって費用は異なりますが、1ページあたり1〜2万円程度で見積もっておくのが良いでしょう。必要ページ数分が加算される費用感になります。 では、レスポンシブ移行を依頼する制作会社はどのように選定すれば良いでしょうか。 今回の場合、レスポンシブデザインへの移行になりますので、過去の実績としてどのようなレスポンシブサイトを制作したかを確認した方が良いです。デザインクオリティも確認した方が良いですが、これはデザイナー個人のクオリティに寄ることが多いですので、そこまで聞けるのであれば確認した方が良いです。 あと、デザインはターゲットや傾向がありますので、移行しようと考えている傾向のデザイン実績があるかどうかというところが重要になります。 例えば、30代向けビジネスマンを得意とする制作会社へ、女子高生向けのデザインを無理にお願いしてもなかなか良いものが挙がってくるのは難しいということです。 制作会社の選定をする際は、数社へ見積もり依頼を行って比較をされると思いますが、ただ安いからという会社へ依頼するのは避けた方が良いです。とは言っても金額が高いからクオリティも高いというわけでもありません。 見積額、制作会社の実績クオリティ、レスポンシブ対応の技術力、コミュニケーション力、提案力など総合的にバランスの良い会社を選定されるのが良いでしょう。 4. まとめ スマホ専用サイトとレスポンシブサイトの違い、そしてスマホ専用サイトからレスポンシブサイトへの移行方法、会社選定についてまとめたものを紹介してきました。 デバイスごとのHTMLソース管理は、手間がかかるということ、Googleが推奨しているモバイルフレンドリーに反してしまうということなど、企業にとってあまり効果的ではないサイトになってしまっている可能性があります。 レスポンシブサイトへ移行するには、少なくとも数十万円からコストがかかってしまいますが、ただGoogleから重複サイトとして認識されてしまう可能性があり、検索結果順位が落ちることがあれば、損害は数十万円では終わらないでしょう。 まだレスポンシブサイトへ移行していないサイトがある場合は、これを機に早めにレスポンシブサイトへ移行することをオススメします。

SEOに強いコーディングを外注する際に知っておくべきポイント

自社のWEBサイトが検索結果上位へ位置することで、安定的なアクセス流入とサイト価値向上を図れます。このために企業はSEOに力を入れています。しかし、具体的なSEOの知識が自社に無いことから、外部のコンサルタントへ任せっきりにしたり、無駄にSEO対策へコストをかけたりという企業も少なくないようです。 そう言った中でも、検索エンジンは度々アップデートを行い、今日まで有効だったSEOが明日には減点対象になるケースも多いのです。 ここでは、SEOに強いコーディングを外注する際に知っておいたほうが良いポイントをまとめて説明します。 1. SEO対策におけるHTMLコーディングとは 昨今のSEOは、コンテンツ重視の傾向が強いですが、最低限のHTMLコーディングを行って、コンテンツの質を担保する動きを取ることが重要です。3つのポイントを紹介します。もしこれからSEOに携わるのであれば、最低限知っておいて損がない内容になります。 ✔︎W3C標準に準拠する W3Cは、HTML、CSSの規格、WEB標準を決めている団体になります。WEBサイトは、W3Cの標準を守るべきとされています。HTMLコーディングを行う場合は、W3Cの標準に準拠して作業を行うことは最低限知っていなければいけないことなのです。 W3Cの準拠は、SEOにおいて少なくともマイナスの評価になることはなく、一定の品質は担保されることになります。 ✔︎HTMLタグの意味に準拠 HTMLは、人間からの見た目とコンピュータからの見た目は違います。人が見たときに「これは見出しだろう」「ここは強調されている」となっても、見出しタグ、強調タグを適切に使っていないとロボットは判断できないのです。 ロボットが理解できるのは、文字を囲っているHTMLタグというものになります。コーダーのように全てのタグを理解する必要はありませんが、基本的なタグの意味は覚えておいて損はないでしょう。 ✔︎構造化データを埋め込む 構造化データの設定は、Googleが推奨するSEOの上位概念になります。構造化データを設定することで、いわゆるパンくずリストをGoogleへ認識させることができます。認識されると、検索結果のタイトル下にパンくずリストが表示されるようになります。ユーザから見てもとても見やすい検索結果になります。 2. SEO対策で結果を出すために知っておくべきポイント SEOで結果を出すための基本概念として、いくつかポイントを説明します。 ✔︎急激にリンクを増やしすぎない SEOの一つの施策として被リンクを増やすというものがあります。しかし、被リンクを急激に増やすと、増やすスピードを落とすことで同時に検索順位も急落する可能性があります。もし、被リンクを増やす場合は、時間をかけて定期的に増やしていく施策が重要です。 ✔︎Descriptionタグは設定内容が重要 最近は、メタデスクリプションタグは、検索ランキングに直接的な効果はないと言われていますが、検索結果に表示されるリード文としてはとても重要な意味を持っています。ユーザがクリックをするかどうかは、デスクリプション設定した内容次第だからです。 ✔︎SEOの効果は月単位で計画し、計測する SEOの計画や検索順位の変動計測は、日・週単位ではなく、月単位で見たほうが良いと言われています。 ✔︎多様なリンク戦略を持つ Googleでは、同質のサイトから大量のリンクが貼られている場合は減点として見ています。多様なリンク戦略を組み立てる必要があります。 ✔︎ユーザーが求めるコンテンツを用意 どんなに検索上位になってもユーザが求めていないコンテンツでは意味がありませんし、いずれ順位落ちしてしまうでしょう。ユーザにとって役に立つコンテンツを提供することが重要です。 ✔︎googleアップデートをチェックする よく耳にするのが、パンダアップデート、ペンギンアップデートなど、アップデートが行われると順位変動が起きます。アップデートの情報は常にチェックし、アップデートが行われた際に順位が落ちているかどうかの確認を行いましょう。 ✔︎キーワードリサーチはマスト SEOは最初のキーワードリサーチが全てと言われています。最初にしっかりとキーワードリサーチを行いましょう。 ✔︎良質コンテンツが全て やはり、ユーザーにとって為になる良質コンテンツは、Googleから見ても魅力的なものです。 ✔︎ナチュラルリンクこそ被リンクの最高峰 自作自演の被リンクが増えたことによって、Googleも自作自演のリンク対策に警告しています。ナチュラルリンクに勝るものはありません。 ✔︎301リダイレクトと404エラーページの設定 サイトの引越しやページのリニューアルなどでURLが変更される場合は、必ず301リダイレクトを行いましょう。また、URLがないページは404エラーページの設定は必要です。これらの設定は、実は大きなSEO戦略になります。 ✔︎サイトスピードの改善 基本的に、サイトスピードが早いだけでSEOにプラスの影響を与えます。もし、サイトスピードが遅い場合はスピード改善を行うだけでも変化は現れます。 ✔︎競合サイトから学ぶ 同一キーワードで上位5位に上がっている競合サイトは、リサーチを行って真似ができるものがあれば取り入れるべきです。 ✔︎サイトの関係性がSEOでは大事 サイト内の関係性、リンク元とリンク先の関係性は、SEOを大きく左右します。一貫したコンテンツ作成、関係性の強いサイトから被リンクを獲得するのなど、関係性を意識した対策が重要です。 ✔︎SEOは長期で見ること SEOは短期の結果を求めると首を絞めることになります。あくまでもコンバージョンと売り上げを上げるための戦略と施策を行うという意思のもと、長期的な戦略を立てて実行と改善を繰り返すことが重要です。 3. コーディングの外注、見積もり依頼 SEOの基本として、HTMLコーディングの作り方によって順位に影響する可能性が高いです。そこで、コーディングを外注する場合、SEOに強い制作会社へ依頼することが正しいです。 コーディングの外注を行う場合、見積もり依頼は比較検討のためにも、複数社へ依頼を行うことをオススメしています。また、上で記載してきた内容をもとに、SEO対策として、どのようなコンテンツを押し出したいのかを要件をまとめ、制作会社へ見積もり依頼時に渡しましょう。 見積書が来たら、とても安すぎるところや高すぎるところをチェックし、それぞれ確認します。安すぎたり高すぎたりするのは、理由があるからです。 また、制作会社の比較を行う場合、過去の実績を確認します。SEO対策においてのHTMLコーディングの考え方を確認するのも良いでしょう。 実績、ノウハウ、コミュニケーションともに、バランスが取れて自社の意向に合った制作会社を選定して発注を行います。 4. まとめ ここまで、SEOに強いコーディングを外注する際に知っておくべきポイントについてまとめてきました。見積もり依頼時に、SEOやコーディングの知識が何もない状態では提案内容を全て正しいものだと理解してしまう恐れがあります。基本的な知識を持って依頼を行い、交渉を行うことで制作会社側も引き締まります。 SEO関係は、なかなか一つの正解を短期で出すことが難しい分野のため、外注先へ丸投げにしてしまいがちです。そして毎月報告のあるレポートで、結果が思うように出ていないと不信感のみを募らせてしまう担当者も決して少なくありません。SEOに対しての知識、長期間しっかりとPDCAを回して施策を打ち続けることが必要だということを社内でも理解を促すこと。長期的な視点で戦略を打っていかなければいけないので、より信頼のおける制作会社を選定する必要があります。

コーディングの種類、費用相場、見積もり依頼まとめ

WEB制作の中でもコーディングだけ外注で依頼したいというニーズは多くあります。例えば、自社ページでもデザイナーはいるけれど、コーディングする人材がいないため外注したい、またはSEO対策に特化してコーディングのみをプロの制作会社へ依頼したいなどです。 ここでは、コーディングのみの費用はどのように決まってくるのか、コーディングの種類、費用相場、見積もり依頼の仕方などを説明します。 1. WEBサイト制作の見積書の見方 WEBサイト制作では、コーディングだけではWEBサイトは出来上がりません。コーディングのみを外注するにしても、WEBサイト制作全体の見積もり手法を理解しておいた方が、コーディングにどれくらいの仕事量がかかるのかを知ることができます。 まず、WEBサイト制作における見積額を決定する要素について紹介します。 ✔︎制作体制 WEBサイトを制作する際、制作会社へ外注する場合に大きく費用が変わってくる要素として、制作体制があります。それは、ディレクション業務だけ一次受け制作会社が請け負い、実際のデザインやコーディングなどの実務部隊を外注へ依頼するか、ディレクション業務も制作業務も全てを一次受け制作会社が全て請け負うか。制作を外注すると、もちろんマージンが上乗せされるため、その分費用はかかってきます。 ✔︎プランニング WEBサイトの制作を行う場合、どのようなサイトを制作するのか?についてプラニンングが必要になります。発注元の方である程度のプランニングをしてから制作会社に渡す場合は、そのベースプラニンングの部分は費用がかかりません。0から依頼する場合は、プラニング費がかかってきます。 ✔︎制作内容の算出方法 制作費用の算出方法は、制作作業項目と項目単価とボリュームの掛け算で算出されます。1ページデザイン=○円、コーディング=○円、というような見積もり項目です。これは、一般的なホームページ制作で規模が小規模の場合で、サーバアクセス等が必要ないWEBサイトの場合です。 しかし、規模が大きくなってくると、デザイナー、コーダー、エンジニアなど、サイト制作に関わる人材をある程度の期間、確保しなければいけないので、工数単位での見積もり算出になります。工数計算という考え方で、単位としては人日(一人日=一人の一人にかかる人件費)として、人月(一人月=一人の1ヶ月の人件費)などが使われます。 ◆WEBサイト制作の見積書に登場する基本用語 WEBサイト制作で見積書に記載される基本用語について紹介します。 ✔︎ディレクション 全体のプランニングから制作、納品までを行うチームを取りまとめスケジュール管理を行います。担当窓口の役割を担います。 ✔︎プランニング ブランディング、マーケティングを考慮して、サイト制作の企画から構成提案を行います。 ✔︎デザイン制作 デザイナーが画面デザインを制作します。デザインに入る前に一般的にワイヤーフレームを作成します。 ✔︎コーディング デザインが完了したのち、WEBサイトにするためのHTML、CSS、Javascriptによってコーディングを行います。 ✔︎システム構築、システム導入 例えば、パッケージ化されたシステムを導入したり、WordPressを導入したりする場合に見積もりに入ります。 ✔︎画像レンタル 発注者から画像提供がない場合、画像レンタルを行うなどすると項目に入ります。 ✔︎コピーライティング、ライティング WEBサイトのトップページ等で使用するキャッチコピーなど、コピーライティングを行う場合、またリード文などのライティングを行う場合、項目に入ります。 ✔︎メールフォーム制作 メール等のお問い合わせフォームを作成する場合に項目として入ります。 ✔︎アクセス分析ツール設定 SEO対策を行うサイトがほとんどなので、トラッキングコードを埋めたりする際は、分析ツールと合わせて設定を行います。 ✔︎サーバ設定、運用(SSL設定、DNS設定) 初めてサーバを準備する際に、サーバ設定とサイトを搭載するためのセキュリティ対策であるSSL設定を行います。 ✔ドメイン設定 ドメインを取得していない場合や、ドメインだけ取得している状態の場合、サーバ側にて設定が必要になるので、見積もり項目に入ります。 2. コーディングの種類と費用相場 コーディングを専門にしている制作会社では1ページあたりの料金を決めるための単位としているのが、1ページの縦の長さにしていることが多いです。1ページあたり何pxまでがいくらになるかという決め方です。 1ページあたり縦サイズ3000〜4000pxで定めている制作会社が多いです。 ✔︎通常のHTMLコーディング 一般的なページのHTMLコーディングは、5,000円以内が費用相場になっています。 ✔︎レスポンシブコーディング PC、スマホ、タブレット向けのレスポンシブコーディングでは、10,000円以内が費用相場になっています。 ✔︎リキッドデザインコーディング レスポンシブコーディングと同様で、10,000円以内が費用相場になっています。 ✔︎流し込み、複製 1ページ単位で費用を設定している場合が多く、ボリューム等によって1,000〜10,000円が費用相場になっています。 3. コーディングの見積もり依頼 これまでWEBサイト制作の見積書の見方に関するポイント説明、コーディングの種類と費用相場について説明してきました。WEBサイトは、コーディングだけで構成されているわけではなく、コーディングの前後で様々な業務が行われています。そういったものを分かった上でコーディングがどのような工程の位置にあり、かかる費用がどれくらいなのかを考えられることが、スムーズに進行することができます。 尚、コーディングのみの見積もり依頼をする場合も、その他の見積もり依頼とさほどやり方は変わりません。 コーディングの場合、どれくらいのページ数なのかサイトマップがあると見積もり算出がしやすいです。もし、見積もり依頼をする時点でサイトマップがない場合は、トップページの他に、下層ページが何ページあるかを伝えます。その他、閲覧だけではなく、例えば問い合わせページなどユーザに何かアクションを起こさせるページがある場合は、それらの要件をまとめておきます。 上記のようなページの概要とページ数がまとまったら、制作会社へ見積もり依頼します。見積もり依頼する場合は、数社へお願いします。コーディングは費用相場があまりブレることはないですが、どちらかというとSEO対策や、コードが整った構造になっているか、また今後カスタマイズしやすいコードにできているか、というのが大事になってきますので、これまでのコーディング実績や、SEO対策の部分など質問をして確認しておくことが重要です。 各社より見積書が届いたら、比較を行って発注先を決めます。 4. まとめ これまで、WEBサイト制作に関する見積書項目の見方、コーディングの種類と費用相場、見積もり依頼の仕方について説明してきました。 コーディング業務に関しては、デザイン業務とは違い目立たない部分ではあるものの、コーディングのやり方次第ではSEOで強くなれるか弱いかを左右する重要なものになります。 安くできるという視点だけで探してしまうと失敗する可能性もありますので、実績やノウハウのある制作会社へ依頼することをオススメしています。SEOは、ルールの移り変わりも早くWEBサイトを持っている企業も個人も多くが対策していることになりますので、手を抜いてしまうと、なかなか認知のされないサイトになってしまう可能性があります。効果のあるコーディングを行う必要があります。

HTML・CSSコーディングに関連する記事を見る

記事を探す

キーワードで探す

カテゴリーで探す

無料¥0

業者の選定や案件について、お気軽にコンシェルジュにご相談ください。