ホームページを作るときの工程は大きく4段階に分かれます。
1.企画する
2.デザインをつくる
3.HTMLでページをつくる
4.システム化し実装する
今回はホームページの制作工程について、4段階に分けて簡単にご紹介させていただきます
[ 目次 ]
1.企画する
まずホームページをつくる目的と目標を明確にする
ホームページを新しく作る場合や既存サイトをリニューアルする場合、まずは作る(リニューアルする)「目的」と、作って得たい成果＝「目標」を明確にすることが重要です。
なぜなら「目的」と「目標」によって、作るホームページの内容や方向性、公開後の取組が異なってくるからです。
目的・目標に合わせてホームページの方針を決める
まずは「目的」と「目標」でホームページの方向性が変わる例をご紹介させていただきます。
- 例えば「目的」が認知獲得・「目標」がサイト訪問数の店舗ページの場合
- サイトの内容：お店の雰囲気・場所・メニューが分かる
- 必要なページ：アクセス、メニュー(サービス)、お店の写真
- あると良い機能：SNSとの連携、ブログやお知らせなどの情報発信コンテンツなど
- デザインの方向性：お店の雰囲気や良さが分かるデザイン
- 公開後の取組：SNSやGoogleMap、口コミサイトなど、外部サイトからの訪問促進。ブログなどを更新しSEOによる検索エンジンからの訪問獲得の取り組み
- 例えば「目的」が新規獲得・「目標」がお問い合わせのサービスサイトの場合
- サイトの内容：サービスの紹介・メリットの説明・事例の紹介など
- 必要なページ：サービス紹介・お問い合わせフォーム
- あると良い機能：事例紹介・コラムなど
- デザインの方向性：読みやすく分かりやすいデザイン
- 公開後の取組：SEOや広告等により、サービスを求めている検索ユーザーの訪問獲得と増加の取り組み。また訪問ユーザーのお問い合わせ率を向上させるためのページ改善・サイト改善
- 例えば「目的」が売上向上・「目標」が月〇〇円のECサイト(ネットショップ)の場合
- サイトの内容：商品のネット販売
- 必要なページ：商品紹介・カート機能
- あると良い機能：レコメンド機能、メルマガ機能
- デザインの方向性：商品が探しやすく商品の詳細が分かりやすいデザイン
- 公開後の取組：商品を求めているユーザーの訪問獲得。また訪問したユーザーの購入率改善のための取り組み及び購入単価向上のための取り組み
その他（制作費用やホームページの内容・依頼する制作会社など）も決める
目的・目標が定まり、デザインの方向性や公開後の取り組みについて明確なると、次に「費用はいくらかけるのか」「どんな内容にするのか」などもある程度決めておくとスムーズです。
ホームページの制作を外部委託する場合は委託先のホームページ制作会社やシステム開発会社を探しておきます。
外部の制作会社に依頼する場合、依頼前に決めておくとスムーズなものと、依頼後に決めなければならないことを簡単にご紹介いたします。
[依頼前]制作会社を探している段階
- 予算：制作予算および公開後の運用予算
- 公開日：おおよその公開スケジュール
- 制作会社：どのような会社に委託するのか
[依頼後]制作会社と契約締結後
- どんなサイト構造にするのか
- どんなデザインにするのか
- 公開後の運用はどうするのか
●企画段階のまとめ
まずは「目標」と「目的」を明確にする。
次に目標を達成するための方向性や取り組みを決める。
また、制作会社を探す場合は予算や公開希望日について決めておくとスムーズです。
２.デザインをつくる
デザインをつくる手順
ホームページのデザイン案をつくる手順は２通りあります。
①はじめから完成形に近いモックアップ（模造品）と呼ぶものを作る
②まず線画で画面構成をつくるワイヤーフレームを作成した上で、モックアップアップを作る
ページボリュームが多く、コンテンツの重複を防ぐ必要がある場合や、複数のデザイナーで作っていく場合などは②のワイヤーフレームを作成した方がスムーズです。
ページ数が多くない場合は①のモックアップから作りはじめるほうがスピーディーに進めることが出来ます。
デザインはトップページを完成させてから下層ページ
まずホームページ全体のデザインの方向性を定めるため、トップページを完成させます。
この時、文章や写真がまだそろっていない場合、仮の文章や画像を使用します。
次にヘッダーやフッター、お問い合わせボタンなどの共通パーツを仕上げた後、下層ページを順に制作していきます。
●デザイン段階のまとめ
デザインの作成手順はワイヤーフレームを作る場合と作らない場合の２通りあり、ページ数や関わる人数、要望・要件でどちらにするか決める。
デザインの着手はトップページから。トップページを確定させることで全体の印象が決まる。
3. HTMLでページをつくる
デザイン案をテキストベースのHTMLで再現する
画像であるデザイン案をテキストベースのHTMLで記述し、cssでレイアウトの指示を作り、ページの見た目をデザイン案に合わせていきます。
なお、HTMLやcssはすべて文字列で書かれています。
HTML(テキスト・マークアップ・ランゲージ)とは
文字列の構成や役割をコンピューターが理解できるようにするためのマークアップ言語です。
例えば、大見出しなら＜h1＞～＜/h1＞で囲む、段落は＜p＞～＜/p＞、改行する場合は＜br＞を入れます。
css（カスケーディングスタイルシート）とは
文字や要素の大きさ・色・背景・配置などを指定する言語です。
例えば、文字を赤くしたい場合はcolor: #FF0000や color:red;と指定します。
HTML作業中の大幅なデザイン変更は原則NG
１度デザインを確定し、HTMLコーディングに入った後、HTMLやcssを変更しなくてもよい文字や画像の差し替え等であれば問題ないのですが、そうではなく再度デザインを変更したいとなった場合、NGとされるケースがよくあります。
その理由について簡単にご説明させていただきます。
まず、デザインは画像データに対して、HTMLやcssはテキストデータです。
HTMLコーディングとは画像と同じ見た目になるようにcssで装飾を指示する作業になります。
そのため、再度デザインを作り直す必要がある場合、今まで行った作業の延長ではなく、今までの作業を捨て、改めてHTMLとcssをゼロから作る作業になってしまいます。
制作作業が大幅に遅れる可能性があり、それによる人件費の増加はもちろん、他案件に影響が出る場合もあるため、デザインが確定しHTML作業に移行した後のデザイン変更は原則NGとなっているケースが一般的です。当社でも原則NGとなっております。
アニメーションの実装やスマートフォンでの閲覧を最適化させる
スクロールしていくと文字が浮き出てきたり、要素がフェードインしてくるようなアニメーションはこの段階で実装していきます。
また、スマートフォンで閲覧したとき、デザインが最適化されるようにすることもこの段階の作業です。
システム化しない場合、作成したHTMLページをサーバーにアップロードすれば公開完了となります。
●HTML作成段階のまとめ
デザイン画をもとにテキストベース(HTML/css/JavaScript等)でページを作る作業になります
アニメーションの実装・スマートフォン最適化もここで行います。
システム開発がなければ、ここで作ったHTMLやcssなどをサーバーにアップロードすれば公開は完了です。
4.システム化し実装する
HTMLをベースにシステムを構築する
管理画面付きホームページにするなど、システム構築が必要な場合、制作したHTMLをパーツに分けてシステム化するなどの開発作業が発生いたします。
管理画面付きのホームページを、簡単に作れるWordpress(ワードプレス)の場合、まずHTMLページをパーツごとに分解していきます。その後、訪問するページごとに必要なパーツを呼び出す処理を作りこみます。
オリジナルで管理画面付きホームページ（CMS）を制作する場合、実装する機能などの仕様を確定させる要件定義を事前におこなったうえで開発に着手します。
テスト環境で動作を確認する
開発したシステムが問題なくサーバーで動くかどうか、テスト環境を準備して確認します。テスト環境は基本的に制作会社や開発会社が準備することが一般的です。
問題なく動作することが確認出来たら、リリース日に本番サーバーへアップロードし、同じく動作確認を行います。ここでも問題がなければリ公開完了となります。
●システム構築段階のまとめ
HTMLをもとにシステムを構築します。Wordpressなど既存の仕組みを利用する場合とオリジナルの開発を行う場合では作業工程は大きく異なります。
テストでの動作確認・本番での動作確認を経て、問題なければ無事納品完了となります。
まとめ
以上がホームページをつくるときの一般的な流れとなります。
ホームページの規模や関わる人数によって必要工程は変わりますが、大きな流れとしては4段階になります。
ホームページ制作をご検討の際はお気軽にご相談ください。
