ホームページ制作の工程・流れは?HP制作の全体像を掴む【WEB制作】

こんにちは、土日休み.com運営部です。

「ホームページの制作工程にはどういうものがあるの?」
「ホームページを制作するために必要な業務は?」
「完成するまでの流れを知りたい」

今回の記事では、こういった疑問を持ったサイト制作を検討している方のために、ホームページ制作が完了するまでの工程・流れを徹底解説していきます。

この記事を見れば、ホームページ制作に関して何も知識がない方でもホームページの作成手順を把握することができ、制作を依頼する際も制作の全体像を知っていることでスムーズに話を進めることができるようになると思います。

悪質な業者に騙されないためにもぜひ参考にして下さい。

内容
  • ホームページ制作の完成するまでの流れ
  • 制作段階で行われるヒアリングの主な内容
  • 開発側が行う主な業務

ホームページ制作の完成するまでの流れ

ホームページの制作工程は主に以下の四つに分類することができます。

ホームページの制作工程
  1. 構想:クライアントの要望をまとめ仕様書を作成
  2. 設計:サイトのデザイン・仕様を固める
  3. 制作:画像作成・コーディング作業などを行う
  4. 公開:制作したサイトを環境を整えネットに公開する
一つ一つの工程について解説していきます。

Step①構想:クライアントの要望をまとめ仕様書を作成

まずは、クライアントの要望をもとに制作を進める上で必要な、下記のような情報を軸に話し合いを進めていきます。

これらの情報をもとにサイトの方向性を決めていきます。

構想を練る
  • サイトを制作する目的
  • ユーザーのペルソナ・ターゲットを決める
  • サイトのコンセプト・キャッチコピーを決める

サイトを制作する目的を決める

最初に決めることは、どのような目的を持ってWEBサイトを制作するのか?ということです。

・企業の信頼性を上げるためのコーポレートサイトを制作したいのか?
・企業として独自のサービスを行うためのサイトを制作したいのか?
・採用を活性化させるようなデザイン性のあるサイトを制作したいのか?

クライアントのサイト制作の目的を知ることで、この後の話をスムーズに進めることができます。

ユーザーのペルソナ・ターゲットを決める

どのようなユーザーに向けてサイトを制作していくのか?ということを決めます。

ECサイトであれば、若い女性を狙ったデザインにするのか?それとも、30代の女性を狙ったデザインにするのか?、このように目的のユーザー属性を明確にすることによって、よりサイトと販売している商品との一貫性が保たれたサイトを制作することができます。

サイトのコンセプト・キャッチコピーを決める

キャッチコピーは必ずしも必要ではありませんが、ワンフレーズでそのサイトの目的を伝えられる印象的なフレーズであれば、どのような理念や目的でその企業やサービスがあるのかをユーザーに理解させることができます。

JR東海の「そうだ京都、行こう。」や、四谷学院の「なんで、私が東大に?」などそのフレーズからユーザーの興味が借りたてられるようなものから、「英語を話せるうようになりたい、あなたへ」など、目的のユーザーに向けたフレーズもサイトがどのようなユーザーに向けてのものかを、瞬時に相手に伝えることができます。

このようなキャッチコピーを用いることによって、「あなたと、コンビに、ファミリーマート」ように企業やサービスにブランド価値を持たせることができることも、キャッチコピーのいいところです。

Step②設計:サイトのデザイン・仕様を固める

クライアントとの構想がまとまったら、それらの情報をもとにデザインをまとめていきます。

具体的な設計を行う
  • 仕様検討
  • ワイヤーフレーム作成
  • デザイン・原稿作成

仕様検討

どのような構造のサイトを制作していくか?というものを明確にしていきます。

下記のように、サイト内の構造を可視化するためのサイトマップを作成することで、サイト内でページごとの規則性や統一感を持たせる指針を決めるための参考にすることができます。

ワイヤーフレーム作成

ワイヤーフレームと言われる、サイトの骨組みになる部分を設計していきます。

また、サイトマップをもとに階層ごとにデザインを固め、ユーザーが分かりやすい構造に設計することもこの段階で考えながら制作を始めていきます。

デザイン・原稿作成

ワイヤーフレームが完成したら、それをもとに画像をペーストしたり、サンプル原稿を作成するなどして、完成するサイトのイメージを全体で厳格化していきます。

さらに配色や使用するフォント、モバイル端末ではどのように表示されるようにするのか?といったことも考えていきます。

Step③制作:画像作成・コーディング作業などを行う

ワイヤーフレームなどでデザインを具体化した後は、開発作業を進めていきます。

コーディング・開発
  • 画像作成
  • 原稿作成
  • コーディング作業

画像作成

サイトに必要な画像素材を作成していきます。

制作会社が企業に直接足を運び写真撮影を行ったり、必要な画像素材は依頼者側に自主的に用意してもらいそれらを加工するといった方法もあります。

自主的に画像素材を用意する際に気をつけなければいけない点は、著作権を侵害していないかの確認が取れる素材を用意することです。画像素材作成に慣れていない場合、見落としがしなポイントなので注意しましょう。

原稿作成

クライアントと話を進めながらサイトに記載する内容を固めていきます

企業のイメージをうまく伝えるにはどのような表現を用いればいいのか?アクセスを集めるためのコンテンツとしてはどのようなものが考えられるのか?といったものを具体的に決めていきます。

コーディング作業

デザインをもとに、サイトを構成するHTMLやCSSといったプログラミング言語を用いてコーディングをしていきます。

ボタンを押した時にどのようなエフェクトが出るようにするのか?といったことも事前に決められうことも多いですが、オリジナルの要素が多い場合、クラアントとの柔軟な対応が重要になってきます。

Step④公開:制作したサイトを環境を整えネットに公開する

最後に、公開するための準備をしデータをアップロードすることで、インターネット上にサイトを公開することができます。

公開環境の構築
  • サーバー
  • ドメイン
  • データのアップロード

サーバー

WEBサイトを公開するためには、サーバーにサイトを構成するプログラミングファイルなどのシステムファイルを保管する必要があります。

サーバーの種類や性能によって金額が異なるため、アクセス数が多いサイトではより性能の高いサーバーが必要になります。

ドメイン

ドメインとは、インターネット上の住所なようなもので、サイトのURLの部分を指します。

「.com」や「.jp」などのURLの一番右の部分をトップレベルドメイン(TLD)といい、世界で230種類以上のトップレベルドメインが存在しています。

ドメイン名は、同じものは存在してはならないため、同じドメイン名は取得することができません。

データのアップロード

サーバーとドメインと取得することができたら、その二つの情報を結び付けます。

その後、システムファイルをサーバーにアップロードすることでインターネット上にWEBサイトを公開することができます。

まとめ

今回は、WEBサイトが制作される工程の流れを解説しました。

WEBサイト制作の全体像を知ることで、依頼する際にスムーズに資料の内容を理解できたり、現在どのような段階の業務に取り組んでいるのだろうか?という不安をなくすことができます。

「土日休み.com」では、他にもWEB制作に関する解説をしているので、ぜひ参考にしてください。

▼おすすめのホームページ制作会社ランキングは、こちらの記事で紹介しています。

【2020年最新版】おすすめのホームページ制作会社ランキング!料金・サービスの違いを徹底比較!

2020年4月8日
土日休み.comのHP制作


土日休み.comのHP制作サービスでは、集客を意識したサイト制作・運営を徹底します。


「会社のサイトを制作したけど、アクセスが全く集まらない・・」
「制作した費用を全く取り返せていない・・」
サイトを運営している方でこんな悩みを持っている方も多いのではないでしょうか?

 

土日休み.comでは、こういった企業様の悩みを解決するために、利益を生み出すサイトを制作することを徹底します。

サイトを制作することが重要なのではなく、そのサイトから本当に人を集めることができるのか?成果を生み出さないサイトでは、制作した意味がありません。

 

利益を生み出すまで、サイト運営を徹底的にサポートさせていただきます。

ほとんどの制作会社が何のためにHPを制作するのかを意識したサイト制作をできていません。私たちは徹底的に成果にこだわります。

 

サービスの詳細や無料お申込みは下の記事にまとめているので、現在ホームページ運営でお困りの方はご活用ください。

集客特化のホームページ制作サービス!集客サポートも全てコミコミで月額17,800円~

2020.01.21

【ビジフォンサーチサービス】会社の『規模』と『業務』に合わせたビジネスフォンを見つけます!

毎月のビジネスフォンの維持費、
知らないうちにボッタクられてはいませんか?
ビジフォンサーチサービスでは、あなたの会社の『規模』や『業務』に合わせたビジネスフォンをお探しします。

自社に合ったビジネスフォンを利用することで、

・毎月の維持費が安くなる。
・会社の業務効率がアップ
・今払っている人権費をカット

など、ビジネスフォンを自社に合ったものを利用するだけで、本来払う必要の無いコストを削減できたりします。

逆に、自社に合っていないビジネスフォンを利用しているとほぼ確実に維持費が膨らみます。

現代のビジネスフォンは、会社の規模や業務内容によっておすすめできるビジネスフォンが全く違ってくるのです。

特に、仕事をする上で必需品とも言えるビジネスフォンは毎月の維持費が1000円違うだけで結果的にあなたが支払う額は大幅に変わります。

現在、ビジネスフォンの導入を検討している人や現在使っているビジネスフォンが自社に合っているのかを調べてほしい人は是非ビジフォンサーチサービスを利用してみてください。
 

ビジフォンサーチサービスは、計1200社以上の会社様からご好評を頂いております。

✔サービスは完全無料!
✔無駄なコストを見つけて解消します!
✔オフィス製品を20年以上扱ってきているプロが直接アドバイス!
✔その会社に合ったビジネスフォンを見つけます!
✔月額3,000円から利用可能なビジネスフォンもあり!

【ビジフォンサーチサービス】会社の『規模』と『業務内容』に合わせたビジネスフォンを探します!

2019.03.27


業界NO.1安さを実現した法人格安スマホ!

業界最安値の法人スマホプランを土日休み.comでは取り扱っております。

✓業界NO.1の最安値プランを実現!
✓大手キャリアソフトバンクの高品質回線!
✓月額1980円から利用可能!
✓iPhoneの最新機種も利用可能!
✓保証やアフターケアも完備!
✓1台から導入可能!

【業界NO.1の安さを実現!】すべてコミコミで月額1,980円から使えるソフトバンク法人スマホ!

2019.02.19

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です