見出し画像

Web制作の流れ(草案)

このページはお客様との認識を合わせることを目的としています。
草案なので、変更する箇所が出てくるかと思います。
※仮の内容です※


お問い合わせ

まずはお問い合わせください。

お客様にて
お問い合わせいただく前にご準備いただきたいもの

・サイト制作の目的
・参考サイト
・予算
・納期目安
ざっくりでもいいので、お伝えいただくことで
スムーズに対応できます。


ヒアリング

当方からヒアリングシートを支給させていただきます。

当方にて
ヒアリングシートを支給させていただきます。

・ヒアリングシート
・WordPressヒアリングシート

※ヒアリングシートに記入する内容がわからない場合もございますので、当方の担当者がサポートしながらヒアリングシートを埋めていくことも可能ですのでご安心ください。


お見積書作成

ヒアリングシートをもとに、お見積りを行います。


制作開始

お見積り内容と金額にご納得いただければ、制作開始となります。

当方にて
重要事項のご説明をさせていただきます。
Webサイトを制作するにあたり、
お客様と認識を合わせることを目的としています。

重要事項説明


企画・ディレクション

ヒアリングシートをもとに、担当ディレクターがお客様のニーズから目的を達成するためのご提案を行います。

お客様と一緒に目的を達成できるためのWebサイトの設計を行います。
具体的にはサイトマップ作成や、SEO契約を前提とする場合はキーワードの選定などを行います。

ディレクターが考えた内容をもとに、デザイナーと連携しお客様の課題を解決するためのWebサイトを制作いたします。

具体的な内容
・市場・競合調査
・ゴールの設定
・ゴールに最適なコンテンツ設計
・ページ構成/サイトマップ作成
・集客方法を考える
・SEOキーワード調査
・進捗管理


支給素材の校正(原稿・写真)

お客様にてWebサイトで使用する原稿と写真を目標の期日までにご用意ください。
Webサイトに訪れた人に魅力が伝わる文章を載せることで目的を達成しやすくなります。Webサイトで文章と写真のクオリティは目的を達成するためには大切な部分となります。

・原稿がご用意できない場合は、当方にてコピーライターを手配してお客様にヒアリングして原稿を作成するサービスもございます。(別途お見積り)
・写真に関しても当方にてプロのカメラマンを手配することも可能です。
(別途お見積り)

※注意事項※
デザインやコーディング時点の原稿や写真の追加に伴うレイアウトの大幅な変更に関しては別途費用が発生いたしますので、Webサイト制作の早い段階で原稿と写真をご用意いただきますようお願いいたします。


ワイヤーフレーム作成

支給いただいた原稿と写真をもとに、当方にてワイヤーフレームを作成いたします。Webサイトの設計図になります。

例えば、会社概要ページに①会社の概要と②沿革と③社長挨拶を掲載すると決めたとして、実際にどのように配置するのかを画面で見れるようにしたものをワイヤーフレームと呼びます。

ワイヤーフレームでは原稿と写真の配置を行っていきます。
画面で見れるので、どんな内容がどのページに掲載されるのか?
どんな写真を掲載するのか?がわかるため、サイトマップよりも
Webサイトが完成したときのイメージがつかめます。

ワイヤーフレームを作成する目的
・お客様と掲載する内容を擦り合わせるため
・ページ掲載内容を確定させるため
・デザイン前にページに掲載する内容を確定させるため
 (デザイン段階での修正を無くすため)


ワイヤーフレームのご確認&修正指示

お客様にてワイヤーフレームをご確認いただきます。
掲載する原稿や写真や配置などチェックしていたきます。
ワイヤーフレームの段階ではどんどんお客様のご意見をお聞かせください。
お客様のご意見をもとに担当ディレクターが目的を達成するためのサイト設計の提案をさせていただきます。
ワイヤーフレームでどのページにどの内容を掲載するかが決まりましたら、
掲載内容を確定とさせていただきます。ワイヤーフレームが確定したらデザインへ進ます。

お客様のチェックポイント
・掲載する原稿
・掲載する写真
・ページに合った掲載内容かどうか?
・追加で掲載したい内容はないか?
・目的を達成できそうか?

※注意事項※
デザイン段階での修正はワイヤーフレームでの修正に比べて、工数が掛かるため、ワイヤーフレーム段階で掲載内容や配置やレイアウトなど、後から追加する内容がないかを慎重にご確認をお願いいたします。

ワイヤーフレームの段階で、掲載内容を確定させておくことは、後々の制作がスムーズに進むかどうかが関わってくるポイントになりますので、掲載内容の過不足をこの段階でチェックしていただきますようお願いいたします。

デザイン段階やコーディング段階で掲載内容の追加やレイアウトの変更など発生する場合には別途修正費用が必要になることがございます。


ワイヤーフレーム段階での修正内容
◎テキストの修正
◎写真の差し替え
◎ヘッダー・フッター共通部分の修正
◎サイトの構造が変わる(ページが追加・削除)
◎掲載内容の追加・削除
◎レイアウトの変更

◎・・・対応可能  △・・・要相談  ×・・・別途修正費用


デザイン制作

ワイヤーフレームをもとにデザイナーがデザイン制作を行います。


デザインのご確認&修正指示

お客様にてデザインをご確認いただきます。まずはTOPページのデザインをご確認いただき、TOPページを校了いただいてから下層ページのデザインを行っていきます。デザインイメージや文字の記載ミス他ご確認の上、修正指示をいただきます。

修正回数は基本的に2回+最終チェックとなっておりますので、
慎重にチェックしていただきますようお願いいたします。
何度も回数を分けて修正指示をいただきますと、すぐに対応できず納品が遅くなる可能性が大きくなりますため、その点ご了承の上確認をお願いいたします。
 
出来る限りお客様の負担がないように対応させていただいておりますが、
下記の場合は追加料金となりますので、ご注意ください。

・修正指示4目以降は有料となります。
 何度も修正指示を繰り返すお客様の場合、追加料金の
 ご相談をさせていただくことがございます。
・最初の指示から大幅に異なる指示は有料となります。(特に画像関係)
・内容の追加に関しましては追加ボリュームにより
 追加料金が発生いたします。
・最初に伺った内容と異なる作業、スクリプトの追加などは作業に
 応じて追加見積の対象となります。

デザイン段階での修正内容
◎テキストの修正
◎写真の差し替え
◎ヘッダー・フッター共通部分の修正
◎制作バナーの修正・追加
×サイトの構造が変わる(ページが追加・削除)
×掲載内容の追加・削除
×レイアウトの変更

◎・・・対応可能  △・・・要相談  ×・・・別途修正費用


※デザイン段階で修正をおっしゃるお客様多くいらっしゃいます。
 デザイン段階での掲載内容の追加や削除などの修正は、
 前段階のワイヤーフレームに戻るため、別途修正費用で
 対応させていただきますのでご注意くださいませ。



コーディング制作

校了したデザインをもとにプログラミングしていきます。ブラウザで見れるようにコーディングをしていきます。コーディング完了後は、動作確認を行います。


テストサイトのご確認&修正指示

お客様にてコーディングしたぺージをご確認いただきます。
スライダーの動きやボタンにマウスカーソルが触れたときの動きをご確認いただきます。

コーディング段階での修正内容
△テキストの修正(5箇所以上は別途修正費用)
△写真の差し替え(2箇所以上は別途修正費用)
×ヘッダー・フッター共通部分の修正
×制作バナーの修正・追加
×サイトの構造が変わる(ページが追加・削除)
×掲載内容の追加・削除
×レイアウトの変更

◎・・・対応可能  △・・・要相談  ×・・・別途修正費用


本番アップ

お客様にて原稿の文章の言い回しや誤字脱字チェックなど加えて、動作確認の最終確認を行っていただき、校了となりいよいよ本番アップとなります。


本番アップ作業

当方にて以下の作業を行います。

【Googleの各種ツールの登録】
・Googleサーチコンソール登録
・Googleアナリティクス設置

【独自SSL設定ありの場合】
・独自SSL設定/.htaccessで「http」から「https」へ自動転送設定

【SEO契約がある場合】
・外部SEO対策
・リンクページにあるサイトと相互リンクする
・当方のナビサイトと相互リンクする


ワードプレス(更新機能付き)サイトの場合

デザインとコーディングが完了すると、ワードプレス用のデザインテーマを制作します。案件ごとにお客様のニーズに対応するために必要なプラグインを導入して動作検証を行います。

テーマとは
デザイン・コーディング済みのデータをワードプレスで使用するために、
ワードプレスの独自のタグを入れてファイルをテンプレート化する必要があります。この作業をテーマ化すると言います。ワードプレス用のファイルを作成して、ブラウザで表示できるような状態にすることです。

プラグインとは
ワードプレスをインストールした段階では、お問い合わせフォーム用の
プログラムが入っていません。
お問い合わせフォームの機能を使うには、専用のプログラムが必要になります。ワードプレスが便利なところは、0から専用のプログラムを作らなくても、お問い合わせフォームの機能を使うことができるプログラムのセットがが配布されています。配布されているプログラムを追加することをプラグインを追加するといいます。

具体的な作業内容
・インストール
・基本設定
・テーマ作成
・お問い合わせフォームのプラグイン追加
・セキュリティプラグイン追加
・バックアッププラグイン追加(バックアップ契約のお客様のみ)
・固定ページ利用の場合
 固定ページにHTMLを登録する
・記事カテゴリー設定

ヒアリングさせていただく内容
・記事一覧ページはサムネイル あり/なし
・記事をカテゴリーで分けるか その場合のカテゴリーの種類
・サイドナビの項目(月別アーカイブ・カテゴリー別・最新の投稿など)
・記事一覧では1ページに何件まで記事を表示させるか(10件、12件など)


※※ 制作前の注意事項 ※※

Webサイトを制作するにあたり、注意事項がございます。
より良いWebサイトを制作し、目的を達成したいので、
ご協力をお願いいたします。

―― 原稿支給について

・基本的に原稿作成は、お客様側で行っていただきます。
 原稿作成をご依頼の場合、別途費用が発生します。
・支給原稿の校正をさせていただく場合がございます。
・原稿ご支給が遅れると、希望納期もずれ込む可能性があります。
・原稿は校了済みのものを支給していただくようにお願いいたします。
 担当ディレクターより校了済原稿かどうかの確認をさせていただきます。
 デザイン、コーディング済みの段階での原稿の修正は誤字脱字の修正
 程度の修正が理想的です。制作の初段階で、最終チェック済みの原稿の
 ご支給にご協力お願いいたいます。
・お客様で、原稿を当方に支給されるご担当者様は、必ず決定者様の
 校了済み原稿をご支給お願いいたします。
(過去に原稿支給者様とやりとりで、コーディングまで終わらせた段階で
 最終決定者のチェック後、大量の原稿修正が発生したことがあり、その事態を防ぐ目的があります。最悪の場合、制作完成時期が延期になります)
 

以下の原稿支給方法は受け付けておりません。

・電話による口頭で説明した内容の原稿化
 修正指示の場合も同様です。
 ※聞き間違いなどが発生し、トラブルのもとになります。
  原稿や修正指示はメールやチャットワークなど
  文章によるやりとりでお願いいたします。


以下の原稿支給方法は別途料金を頂戴いたします。

・FAXでの原稿入稿は文字起こし料金を別途頂戴いたします。
 ※手書きによる原稿入稿は、読めない文字などがある場合が多く
  トラブルのもとになります。修正指示の場合も同様です。
  原稿は必ずWordなどのテキストデータをご支給ください。

・パワーポイントなどの資料をご支給していただく場合、Webサイトに
 掲載する内容をお客様の方でピックアップしてご支給ください。
 そのままパワーポイントなどの資料などを支給される場合は、
 別途、原稿制作費をいただくことになりますので、お客様にて
 ホームページで使用する原稿をご用意くださいませ。
 これは、ホームページに使う原稿を社内資料から必要な文章を
 ピックアップする作業に加えて、お客様による掲載内容のご確認・
 修正対応が発生するためです。
 他社のホームページ上に記載されている原稿や写真を
 取ってきてまとめる作業も同様です。
 URLだけご支給した状態で、該当のサイトのページから原稿と写真を
 取ってまとめるという作業も、別途、資料をまとめる作業と確認・修正
 の作業が発生するため、費用をいただきます。


原稿の文章の長さについて

原稿の文章の長さがデザインに関わるところになります。
例えば、
文章の長さが違う場合

文字数が統一されていない場合

文字数が統一されていない場合、サービス2、3の文章の下の余白が気になります。バランスが悪くなり、見た目が綺麗ではありません。

文章の長さがほぼ同じの場合

文字数が統一されている場合

同じグループのことを説明する文章の文字数はできるだけ揃える方が見た目が綺麗にできます。


―― 原稿支給のタイミングについて

原稿や写真はできるだけまとめてご支給ください。
原稿を都度、送っていただく場合、トラブルの原因となりますし、プロジェクトを管理していく上で、非効率なやりとりが発生いたしますので、ご協力のほど、よろしくお願いいたします。


―― 原稿の精度について

お客様にご準備していただく原稿のクオリティで、出来上がるWebサイトのクオリティが左右されます。当方でも誤字脱字などのチェックを行いますが、お客様にて原稿の正確性などのご確認をお願いしております。
FIXされた状態の原稿をご支給いただくことで、制作の作業スピードが早くなりますので、ご協力の程よろしくお願いいたします。

理想的な原稿
・誤字脱字がない
・文字量が一定して見出しが均等に付いている
 文字量を一定にする理由は、サイトデザインに影響があるため。
 同じくらいの文字量であれば、バランスも取りやすくなるため。 
・文体が統一されている「です。である。」
・どのページの原稿なのかサイトマップの名前と一致している
・原稿がそのままWebサイトに使うことができる


―― 写真撮影について(お客様で撮影する場合)

スマホで撮影する場合、縦向きで撮影されますと、Webサイトで使う場合、背景が切れてしまうことが多くなりますので、スマホで撮影される際は、横向きで撮影した写真を支給していただくようにお願い申し上げます。

また、写真は3パターンほどあると、デザイナーは制作しやすくなりますので、ご協力をお願いいたします。

写真の3パターン
・ノーマルパターン・・・対象物が真ん中に映っている
・寄りパターン・・・対象物がアップで映っている
・引きパターン・・・対象物が小さく映っている(背景が多く映っている)
・その他・・・斜めのアングル、下から煽りパターン、上からパターン

人を撮影する場合、笑顔の写真をおすすめしております。特に求人を目的とするWebサイトの場合は、社員様の笑顔の写真をご用意お願いいたします。


―― 修正指示がある場合について

修正箇所がある場合は、必ず、修正の理由を担当ディレクターにお伝えください。修正の理由が明確な場合、担当デザイナーがお客様のニーズに応えるための解決法をご提案することができます。修正の理由があるのとないのでは制作の進捗スピードに影響でてくるところです。


―― XDの共有URLのコメント追加でワイヤーフレームやデザインの修正指示が可能

当方の制作ソフトXDを使用します。
ワイヤーフレームとデザインはXDの共有URLよりプレビューが可能です。
プレビューだけではなく、コメントを残すことも可能ですので、
修正指示の際にお使いいただけます。


―― 修正内容のご確認 キャッシュについて

Web制作では何度か修正を行うことがあります。

お客様とのやりとりの中で
「~について修正しました。ご確認よろしくお願いします。」
というやりとりが頻繁に発生いたします。

GoogleクロームやSafariなどのブラウザには、前回開いたページの情報を覚える「キャッシュ」という機能が備わっています。

そのため、修正前のページの情報を記憶していて、修正内容が更新されないまま表示される現象があります。
こちらは、当方が修正を行っていない訳ではなく、ブラウザに前回のデータが残っている状態です。

前回のデータを削除して、新しいデータをWebサーバーから取得することができます。そのためのショートカットキーをご案内いたします。

キャッシュを更新するためのショートカットキー

Windowsのパソコンをお使いの方
「Ctrl」キー+「F5」キー ※同時押し

Macのパソコンをお使いの方
「Shift」キー+更新ボタン ※同時押し

詳しくはこちらのサイトをご覧ください。
http://www.netyasun.com/browser/reload.html


―― 希望納期について

ご希望の納期がある場合は、具体的な納期(例:水曜日の9時までに)を指定していただくことで、スケジュール調整を検討させていただきます。

「なるべく早く」「できるだけ早く」などお互いの認識に個人差のある納期の指定ではトラブルの元になります。
また1社だけを制作しているわけではありませんので、納期のご希望に添えない場合もございますので、ご了承いただけますようお願いいたします。

どうしても急がないといけない場合は、別途、特急料金を頂戴することで、
最優先案件として対応させていただきます。

お客様が支給する原稿・写真が遅くなった場合、納期がスライドし後ろにずれることもございますので、原稿・写真はお早めにご準備のほど、よろしくお願いいたします。


―― 丸投げは禁止とさせていただきます

ホームページ制作は、お客様と当方の力を合わることで完成させることができるものだと思っています。
お客様の情報をもとに、ゴールを設定し、目的を達成するためのご提案をさせていただきます。

デザインについては、お客様の中には「センスいい感じにお願いします」とおっしゃるお客様がいらっしゃいます。
しかし、「センスいい感じ」という表現も人によって捉え方が変わるので、
完成のイメージを提示していただくことで、お互いがスムーズにホームページ制作を行うことができます。

また、「とりあえずデザインしてみてくれませんか?」とおっしゃるお客様がいらっしゃいます。
その場合は、担当ディレクターからデザインする前にデザインの方向性のヒアリングをさせていただき、当方で内容や方向性を考え、デザインする場合は、企画提案費をいただいております。またそのデザインに修正が必要な際は、1度ご確認いただいた内容と方向性に変更が入る場合は、別途費用が掛かりますので、ご注意ください。

当方の経験上、丸投げされて良いホームページが出来上がったことはありません。一緒に目的を達成できるホームページを制作をしましょう。

◆お客様に最低限やっていただきたい内容
・原稿の支給
・写真の支給
・ワイヤーフレームのご確認
・デザインのご確認
・テストサイトのご確認

お客様にやっていただく内容については担当ディレクターから
原稿や写真のご支給・内容のご確認の納期をお伝えさせていただきます。
プロジェクトを円滑に進めるためにご協力よろしくお願いいたします。


―― デザインの修正回数について

デザインの修正は、ワイヤーフレーム時の構成をもとにデザインをさせていただきます。

また、デザインの方向性を確定させてからのデザインとなりますので、できるだけ修正を少なくすることを目指しております。

修正回数が多い場合は、予算における修正可能回数を設けさせておりますので、修正可能回数を超えた場合に、別途費用を頂戴させていただくことがございますので、ご了承くださいませ。


―― 概算お見積もりについて

内容や仕様が決まっていない段階でのお見積りのご依頼がある場合は、当方としては概算お見積りの扱いになります。
概算お見積りを提示する際は、仕様を一緒に提示させていただきます。
また、概算お見積りと内容と仕様が変更になる場合は、追加と変更分の費用が発生しますので、ご了承くださいませ。


―― 追加の作業について

見積もり段階で発生しなかった作業が発生した場合は、後から作業に掛かった時間に応じて追加費用を請求させていただきます。


―― 制作時のコミュニケーションツールについて

当方は、基本的にメールとチャットワークを使用してお客様とのやりとりをさせていただきます。ラインやフェイスブックなどご希望があれば対応させていただきます。
電話での修正指示などはトラブルのもとですので、原則メールかチャットワークなどでやりとりをさせていただきます。


―― 制作時の写真や原稿データの入稿方法ついて

原稿の入稿にFAXは対応しておりません。
また、郵送によるデータの入稿も受け付けておりません。
郵送で送付されたCD、DVD、UBSスティックは返却できかねますのでご了承ください。
ファイル容量が重たいデータでメール添付ができないデータを入稿する場合は、以下のいずれかのファイルストレージサービスをお使いください。

ギガファイル便 https://gigafile.nu/
使い方 https://gigafile.nu/support.php

ファイヤーストレージ https://firestorage.jp/
使い方 https://firestorage.jp/doc/guide_upload

Googleドライブ https://www.google.com/intl/ja_jp/drive/
使い方 http://one-u.jp/gsuite/2019/08/12/google-drive-howto/

ドロップボックス https://www.dropbox.com/ja/
使い方 https://www.sungrove.co.jp/dropbox-how-to-use/


―― 制作期間について

Webサイトの制作期間は、ページ数やシステムの難易度によって案件毎に異なります。お客様の中には、返信が遅くなりがちな方もいらっしゃいます。担当ディレクターから連絡には必ず返答していただくことをお願いいたします。当方から連絡したにも関わらず、連絡を返していただけないことが原因でプロジェクトが長期化した場合は、プロジェクト進行管理費を頂戴する場合もございますので、ご注意くださいませ。


―― 制作費用のお支払いについて

制作開始時に着手金として制作費用総額の半金を頂戴しております。
残りの半額は、業務完了時お支払いいただきます。


―― 対応ブラウザについて

PC:Windows 10(Microsoft Edge、Google Chrome、Firefox最新版)
iOS: (OS10.15以降)(Safari、Google Chrome、Firefox最新版)
Android:Android 6以降(Google Chrome最新版)

・レスポンシブ対応の画面サイズは360px~とさせていただいております。
旧iPhoneSEサイズ(横幅320px)への対応が必要な場合は別途お見積させていただきますので、ご連絡ください。


―― SEO対策について

・サイト構造をSEOに適した構造で制作します。
(目標キーワードに有利になるページを作るなど)
・タイトルを上位表示しやすいタイトルに調整します。
・SEOの一環として、サイト内にリンクページを作成します。
 当方の管理サイトと相互リンクを行います。


―― ドメイン・サーバーの所有権について

ドメインについては、お客様に所有権があります。
サーバーは基本的にはお客様に所有権があります。(当方のサーバーを利用する場合は除く)当方はサーバーの契約を代行をしている立場です。


―― ドメイン・サーバー移行費について

当方で制作したサイトを他社へ乗り換える場合の手数料について
基本的に移行先の業者に、ドメインとサーバー移行をお願いいただくことになります。当方の手続きが発生しますので、移行手続きの手数料を頂戴させていただきます。

当方で新規制作した場合について
当方にてサーバーとドメインの取得を代行した場合、管理費用として月額5,000円を頂戴させていただきます。
基本的にサーバーとドメインはお客様の方でご用意ください。
月額契約なしで、取得だけを代行する場合は、取得代行費用を頂戴させていただきます。


―― 当方の業務範囲

有償でも行わない業務
・電話による口頭で説明した内容の原稿
・手書き原稿の文字起こし

無償で行わない業務(有償になります)
・サイト調査や提案
・デザインパターンの作成
・色パターンの作成
・原稿作成
・原稿校正(お客様の支給原稿の誤字脱字を修正すること)
・写真撮影
・写真素材の検索・ダウンロード
・企画内容をまとめる
 (お客様にて企画内容をまとめた内容を御支給ください)
・Web用にデザイン・レイアウトしたデザインを紙に出力する
 Web用のレイアウトされたものをA4やA3サイズのレイアウトに綺麗に
 見やすくするための再レイアウトする工数が発生しますので、
 印刷用レイアウト作成費を頂戴いたします。
・メールのトラブル対応
・メールソフトの設定(アウトルック等)
・ドメイン・サーバーの新規取得・更新作業
・レンタルサーバー会社から通知に対する調査・対応
 当方が普段使用しているサーバー(エックスサーバー・さくら)以外の
 サーバーにサイトをアップすること
・Youtubeに動画をアップロードする
・SNSアカウント作成(フェイスブックやツイッター等)の代行





この記事が気に入ったらサポートをしてみませんか?