web制作

ホームページ制作の流れを説明します【制作依頼者向け】

本ページにはプロモーションが含まれています。

こんにちは、web制作フリーランスのしょーごです。

ありがたいことに、最近ホームページ作成のお話をいただくことが増えてきました。

今までは手探りで進めてきたところも多かったのですが、大まかな流れが自分の中で構築できてきましたので、こちらで情報を共有したいと思います。

このページの意図

  • 制作依頼者の方に制作の流れを共有し(本ページリンクの送付)、どのようにホームページを一緒に構築していくか、理解していただく
  • その他制作依頼者の方にお伝えしたいこと
  • 具体的な制作手順を開示することによって、制作依頼者の方に安心感を持っていただきたい

それでは早速見ていきましょう。

制作側の方へ

構築側のフリーランスの方はこの記事ではなく、以下の記事を御覧ください。

ヒアリングシートへの記入

まずはこちらをご覧ください。


制作の依頼、ご相談を頂いたのち、最初にこのようなアンケートを送付させていただきます。

サイトの制作上必要になってくる情報ですので、入力していただきます。

お見積もり概算を送付

ヒアリングシートを元に、サイトの規模感、工数を大まかに計算し、概算価格を算定します。

大きく作用してくるのは、

  • サイト内の情報を頻繁に更新するかどうか(WordPressかHTMLか)
  • webでの集客に力を入れたいか(SEOやプラグインなど)
  • 凝ったデザインか否か

見積書の内容に承諾していただけましたら、開発を開始いたします。

なお、この時点での費用は多めに見積もらせていただきます。

完成後の請求段階で、当初のお見積もり金額を越えることがないようにするためです。

サイトマップ作成

サイトに必要な要素、構成を決定します

どのページを作るのか、どのような導線にするのかを決めていきます。

ヒアリングシートを元に作成しますので、確認をしていただき、要望があれば追加いたします。

追加で搭載情報が当初の見込みより大幅に多くなると、お見積もり金額より費用が上がる場合がありますので、予算を抑えたい方は搭載情報の優先順位にお気をつけください。

デザイン作成

参考サイト数種類から、イメージに近い物を選択

最終的に選択していただいたサイトの雰囲気に近い物を目指します。

ワイヤーフレーム作成

参考元URL:https://www.powercms.jp/blog/2018/07/xd-wiresjp.html

次に、トップページや商品紹介のページ、会社概要のページなど、様々なページのレイアウトを決めていきます。この具体的なページの設計図のことを、ワイヤーフレームと呼ぶことがあります。

全体のワイヤーフレームを確認していただき、よろしければ本格的にデザインを作り込んでいきます。

ワイヤーフレーム内のテキストや写真はダミーなため、このタイミングでテキストや写真データをいただきます。

デザイン完成

参考元URL:https://liginc.co.jp/437151

まずトップページを作成しますのでご確認いただきます。

その後下層ページを作成し、全体ができたら最終確認をしていただきます。

修正があればその時にお願いいたします。デザインの修正はこのタイミングで最後とさせていただきます。

コーディング作業

HTML、CSS、JavaScriptによるコーディングを行い、デザインデータをweb上で表示できるように組み上げていきます。

WordPress化

お問い合わせフォームや、ブログなど更新機能などが必要な場合、wordpressにしていきます。

ドメイン、サーバー取得【ここから共通】

最終的に作成したホームページをインターネット上に公開する場合は、サーバーやドメイン(このサイトで言えば、shogo-log.comの部分)を手配する必要があります。

特に希望がなければこちらで適切なドメイン会社やサーバーを決めさせていただきます。

その後お客様自身にドメイン、サーバーを取得していただきます。(支払い情報や名義上の問題のため)

取得方法はわかりやすい手順のページを共有します。難しいものではございません。

その後のサーバーやドメインの設定作業などは、こちらで全て一任させていただきます。

守秘義務に乗っ取り個人情報はドメイン、サーバー設定以外のいかなる目的にも利用しません。

テスト環境でブラウザチェック

ブラウザチェックとは、色々なブラウザでサイトを確認し、レイアウトが崩れていたり、表示のおかしいところがないかを確認する作業です。

世の中にはたくさんのブラウザがありますが、Internet Explorer、Microsoft Edge、Google Chrome、Mozilla Firefox、Safariは多くの人が使っているので、チェックさせていただきます。

また、スマートフォンやタブレットでも想定どおりに表示されるか確認を行います。

私の自前のサーバーでテストアップロードし、正常に表示されることを確認したのちに、取得したドメインで本番アップロードさせていただき、サイト公開となります。

サイト公開後

検索エンジンに公開を知らせる

苦労して公開したホームページなので、より多くの人に見てもらいたいですよね。

実はホームページは公開しただけではなかなか検索結果に表示されません。

Googleの巡回ロボットが新しくできたwebページを検知できていないからです。

Fetch as Googleやサイトマップの送信によりなるべく早く、検索して表示されるようにします。

統計サービスをチェックする

Google アナリティクスを導入することで、何人が自分のサイトを訪問してくれたか、どの地域の人が、どんな端末で見ているか、

自分のサイトを見る人がどういうルートで入ってきて、どういうページを見ているのかをチェックすることができます。

要望がなければ基本的に導入させていただきます。

ホームページ、サーバードメイン情報のお渡し

取得したドメインでの正常な表示を確認していただき、最終確認とさせていただきます。

問題がないようでしたら、ログイン情報などをお渡しし、ご依頼を終了させていただきます。

最初の1ヶ月間のみ無料でバグ対応を行いますので、問題が起こった場合はご連絡ください。

またwordpressの場合、ブログなどの投稿機能を利用することとなりますので、簡単な操作マニュアルをお渡しします。

請求書のお渡し→お支払い

後日、請求書をお渡ししますのでお支払いをお願いします。

金額は基本的に、最初の見積もりと相違ありませんが制作途中に大きなデザインの変更があったり、後ほど説明するオプションをご利用の際は値段が上下することもあります。

その際はその時にこちらからご相談させていただきますので、ご安心ください。

銀行口座振込を想定しています。

オプションについて

ここまでで記載していない工程もいくつか存在します。

ドメイン、サーバー、wordpress保守

基本的に納品後はサイト保持者の方に更新を行っていただきます。

基本的な操作はお教えしますので、ご安心ください。

ただもしドメインやサーバーの保守、wordpressの各種プラグインなどの更新が煩わしいのであれば、代行することが可能です。

別途お見積もりしますのでご相談ください。

検索上位を目指すためのSEO対策

ホームページを運営していると、なかなか自分のサイトが上位表示されないことがあるかもしれません。

サイト自体の基本的なSEO対策は行っておりますが、ブログ機能付きの場合は文章の書き方も影響してきます。

お見積もりが必要かは場合によりますので、まずはご相談ください。

ロゴ制作

お見積もりが必要になりますが、オリジナルのロゴを作成することも可能です。

もし参考にしたい実際のロゴがあれば、共有頂ければ近いイメージの物を作成することができます。

難易度によっては仲間のwebデザイナーに作成を依頼する場合もあります。

さいごに

出来る限り、必要な工程を簡潔にまとめましたが、実際のご依頼ではこの流れ通りにはいかないかもしれません。

ただ、大まかな流れをご理解頂ければいらぬトラブルを招かないと思い、今回まとめさせて頂きました。

改善できる部分がありましたら、随時内容を改善し分かりやすくしていこうと思います。

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする