ウェブサイト制作の一連の流れ
ウェブサイト制作の基本的な流れは次のように進めていきます。
要件定義 → 設計 → デザイン → コンテンツ作成 → 開発 → テスト → 公開
このページでは、それぞれの項目について、どのような作業が必要か、また具体的にどういったツールを使ってウェブサイトを行うかについて解説します。
1.制作目的と何をやるべきかの洗い出し
ウェブサイトを作成する際に最初にやるべき作業は、ウェブサイトの制作目的の明確化と、その目的に向けてどういった作業が必要かの洗い出しです。
目的がなければゴールとなる指標が見えずらいため、何の目的で制作を行うかについて認識しておくことは大切です。
また、目的に応じてどのようなウェブサイトのタイプが最適か、どういったマーケティングが必要かについても検討しておくと、その後の運用がスムーズにスタートしやすくなります。
デザインの方向性、どのような情報を掲載するかについても事前に検討を行っておきます。
2.ウェブサイトの設計
サイトの設計作業は、タイトル・キーワードの選定・ページ数とページの役割（階層構造）・URLの選定など、Webページの基本情報を洗い出し、それをまとめて1つのサイトとして機能するように設計を行います。
5ページ程度のシンプルなウェブサイトであれば複雑な設計書は必要ありませんが、システム的な機能を付与したり、ページ数が膨大になりそうな場合、あらかじめ整理整頓をしておき、それぞれの役割についてまとめておきます。
依頼主、開発者の相互で理解ができるよう、Excelなどにサイト情報をまとめ、一覧にするのが一般的です。
3.デザインとレイアウトの作成
構成するページが決まったら、デザインのコンセプトを固め、トップページのデザインを作成していきます。
カラースキーム（配色チャート）、フォント、ロゴ、アイコン、画像なども選定を行い、どのようなテーマで制作を行うかの方針を決めておきます。
また、各ページのレイアウトは「ワイヤーフレーム」という白黒のレイアウト図を作成し、どのようなレイアウトでページ情報を掲載するのかを作りこむ前に用意しておきます。
4.コンテンツ作成
ワイヤーフレームのレイアウトにしたがって、ページのコンテンツを作成し、流し込みを行います。
タイトル、文章、画像、動画等、ページの構成にしたがって1ページ1ページを作り込み、バランス良くデザインを調整して作りこんでいきます。
5.フロントエンド・バックエンド開発
デザイン案を元に、HTMLとCSSでフロントエンドのコーディングを行います。CSSはあらかじめルールを策定しておき、「色1」が変更になった場合は、全ての「色1」が変更できるようにするなど、SASSやSCSSなどのCSSプリプロセッサで開発を行うと便利です。
また、フロントのコーディングと同時にバックエンドの開発も行います。ECサイトや、会員制サイトなど動的ページが含まれるウェブサイトの場合、フロントエンドのコーディングはフレームワークのテンプレート仕様にしたがう必要があることもあります。
コーディングはサイト設計に合わせて、適宜実装を行いましょう。
フロントエンド開発とは？
フロントエンド開発は、ウェブサイトの表側にでてくる情報（見た目や動作）を制作する開発です。主にHTML・CSS・Javascriptを使用して、ページの色やレイアウト、スクロールやクリック時の動きの部分を調整します。また、レスポンシブデザインやアニメーションなどの制御も行います。
バックエンド開発とは？
バックエンド開発は、Webサーバー上で動くデータベースやプログラムによる処理を実装する作業です。データベース、セキュリティ、サーバーサイドプログラミングを実装し、フロント側へ応答を返すなどの処理を行います。
ウェブサイトは、表と裏でどちらも連携しています。どちらの技術も合わせてWebページとして動作します。
6.テストと修正
ページを実装したら、実際にウェブサイトとして動作するか、各ブラウザを使って動作テストを行っていきます。
ユーザーによって閲覧環境は異なるため、GoogleChrome、Edge、SafariなどのPC用ブラウザ、それからiPhoneやAndroid端末の実機でテストサイトを確認します。
このタイミングではページはテスト用にWebサーバー上で公開されている必要があります。アクセス制限をかける際は「.htaccess」と「.htpasswd」いう2つのファイルを用意し、ベーシック認証という方法をつかってIDとパスワードの入力を要求する方法が一般的です。
不具合が見つかった場合、不具合の修正を行い、公開に向けてページ全体を整えていきます。
7.公開作業
WebサーバーにHTMLやCSS、画像ファイルなどの一式をアップロードし、ドメインの設定を行って公開作業を行います。
ドメインは事前に取得しておく必要があり、利用しているWebサーバーのIPアドレスに向けてDNSの「Aレコード（IPv4）」を設定する必要があります。
レンタルサーバーでサーバーレンタル契約とドメイン取得を同時に行った場合、ドメインの設定は自動で対応してくれることが多いので、同じをサービスを使う方が便利です。
また、SSLの設定も行い、「https:」形式で暗号化された通信が行えるようにしておきます。
サイトのアクセス数や規模によっては、ロードバランサーの設置を行うなど、ネットワークエンジニアリングの技術が必要になる場合もあります。
ウェブサイトをどうやって作る？
上記で解説したWeb制作の流れは、Web制作会社が現場で行う一連の作業フローです。
初心者向けに最初からツール化されたホームページ制作サービスもあるので、全ての知識を身に着ける必要はありません。
自分でホームページ作成サービスを使う場合
無料または月額費用を支払うことで、Webサーバーのレンタルに加えて、ウェブサイト自体をビルダーを使って作成できるサービスがあります。
国内ではWix、Jimdo、Goope、AmebaOwndなどが人気が高く、あらかじめテンプレートが用意されており、テキストや画像を変更するだけで簡単にウェブサイトとして公開できます。
各サービスごとに使い方や内容は異なりますが、ウェブサイトを名刺のように使いたい場合、高額な費用をかけずにウェブサイトを作成できます。
無料ツールを使用しても、ある程度のカスタマイズをしてオリジナリティを出したい場合は、フリーランスのクリエイターに依頼するなどして費用を抑えながら対応することも可能です。
個人やフリーランスのポートフォリオとしてウェブサイトを作成したい場合は、この方法がおすすめです。
WordpressなどのCMSを使って構築する場合
Web制作の知識がある人にとっては、WordPressなどのCMSを利用することで、手頃な価格で自身のウェブサイトを作成することができます。
例えば、ブログを始めたい方やアフィリエイトサイトを構築したい方など、個人でも副業としてウェブサイト制作を行う場合、この方法が人気です。
オープンソースのCMSには、さまざまなテンプレートが用意されており、ブログだけでなくコーポレートサイトやランディングページなど、目的に応じたテンプレートを選択することもできます。
さらに、有料のテンプレートを使用すると、高度な機能が組み込まれていたり、SEO対策に優れていたり、サポートなどの特典も提供されているため、選択肢がさらに広がります。
Web制作会社に依頼する場合
本格的に、整理された情報と洗練されたデザインのウェブサイトを作成したい場合は、プロに依頼することが最善の方法です。
プロに依頼することで、ゼロから知識を身につける必要がなくなり、自分が実現したいことに素早くアプローチすることができます。
さらに、無料ツールやテンプレートでは実現できないカスタマイズやオリジナリティのあるデザイン、充実したコンテンツを提供することができます。これにより、他社との差別化を図ることができます。
長期的なブランディングやマーケティングを通じて事業を成長させたい場合は、しっかりとしたウェブサイトを用意し、ユーザーとのコミュニケーションの中心として活用することが重要です。
ウェブサイト制作が完了したら？
ウェブサイトを公開したら、アクセス解析ツールなどを使用して、訪問者がサイトをどのように利用しているかを確認しながら、定期的な情報発信を行います。
定期的なメンテナンスと運用を行う
お知らせの追加やプレスリリース、ブログ記事の追加など、広報活動を通じて新しい情報を提供することは、SEO対策にも効果的で、常に新しい情報発信をすることにつながります。
さらに、Webサーバーの環境は言語やOSのバージョンアップによって変化する場合があります。インターネットは常にセキュリティ上の脅威にさらされており、不正な改ざんやデータの漏洩などのリスクが存在します。
そのため、配信環境を常に最新の状態に保ち、適切なセキュリティ対策を行うことが重要です。
