本日は、Webサイト制作歴20年の私が、Webサイトを制作する際のワークフローと、Webサイト制作における全てのプロセスをご紹介したいと思います。
制作プロセスの全体像、全体地図、みたいな感じのもので、これらのプロセスが頭の中で組み立てられていれば、途中で迷うことがなくなります。
Webサイト制作には多くの工程がありますので、Webサイト制作の内側を知りたい方、Webサイト制作を学んでいる方のご参考となれば幸いです。
なおワークフローの順序は目次順となっていますので、上から順番に作業を進めていきます。
工程ごとに作業詳細や、必要となるツールやプログラミング言語などについて解説させていただきます。
目次
1. 企画・設計
ウェブ制作プロジェクトは、ウェブサイトが必要な時に発生します。じゃあなぜウェブサイトが必要なのか、それを考えるのが企画と設計のプロセスです。
まず最初に「一体どんなサイトを作るのか」ということを決めるのが「企画」の部分です。
- 〇〇株式会社という〇〇というサービスに特化している会社の〇〇サイトとか、自分のポートフォリオを載せる自分の個人サイト
- ドメイン名は super-website.net（例）
- 新しいサイトを通じて求人応募を増やしたい
のように、実際のWebサイトに出来上がる前の「アイディア」を「企画」する段階です。
そして企画が終わったら、設計です。
設計の段階では、ワイヤーフレーム(デザイン前のレイアウトスケッチ)を作成したり、必要なページや機能を整理して、実際に制作する内容を決めます。
- どんなページが必要？（サイトマップ案）
- どんな機能が必要？（仕様書）
- 参考サイトは？
- お問い合わせフォーム？
- ブログ機能？
- スマートフォンデザインはどうする？
- 写真は必要？
などなど、サイト制作プロジェクトの完成形を、設計図として完成させます。
利用ツール: Notionなどのメモツール または Word, Excelなど
成果: サイトのアイディア、サイトマップ案、仕様書、ワイヤフレーム（あれば）などの資料
2. デザイン
サイトの見た目（ビジュアル）を決める工程です。Figmaというデザインアプリを使って、画面デザインを行います。
ワイヤフレームというレイアウトとコンテンツを合わせたスケッチを作る場合もあるのですが、僕は大体ワイヤフレーム制作がスキップで、いきなりデザイン制作です。（問題なし）
また、スマホ版に関してはデザインは作らず、レスポンシブコーディングの時にCSS上でWebデザインをしています。
長年Webデザインをやってきた私がWebデザインの作業において意識している点は
- どんな印象を与えたいのかを考える
- 自分の得意なデザインパターンでしか作れない
どんな印象を与えたいのかを考える
自分が感じるプロジェクトの印象を元に、デザインを逆算して考えるイメージです。
自分の得意なデザインパターンでしか作れない
デザインは料理や音楽と一緒。食べて美味しい、聞いてて心地いい、というように、デザインも「見ていて気持ちいい」という風に考えていくのですが、やはり自分が気持ちいいと感じる部分は個々のオリジナルなので、その自分の気持ちいいと感じる感覚を探してほしいと思います。
利用ツール: Figma
成果：Webサイトデザインの完成
3. コンテンツ作成
デザインの工程と並行して進めるのがコンテンツ作成です。ページに載せる情報がコンテンツです。設計の段階で出来上がったサイトマップ案を見て、存在する全ページの内容を確定しなければなりません。
コンテンツの作成は、ページの内容を見出しに分けて考えると簡単になるのでおすすめです。
例：会社概要ページのコンテンツ案（見出し一覧）
- 社名の由来
- 沿革
- 会社情報
- 企業理念
- 代表あいさつ
利用ツール: ドキュメント作成ツール（Notion, Word, Excel） 成果：Webサイトコンテンツ（原稿、写真、他素材）考案の完了
4. フロントエンド開発
デザインが完成し、コンテンツも完成したら、フロントエンド開発の工程に移ります。フロントエンド開発の主な目的は、デザインをWebページとして表示できるようにすることです。
Webページは.htmlファイルですので、HTML（ページの内容）をまずコーディングし、その後CSS、JSのコーディングと続きます。
CSSはデザインの指示を出す言語で、JSはページに機能性をもたらすことができる言語になります。いずれもWebページには必須のファイルです。
必要に応じてフォントファイルや画像ファイルなども組み込み、デザイン通りのWebページを構築していきます。
利用ツール: Visual Studio Code, Figma, Chrome, Codekit 成果：WebサイトのHTML版の開発が完了 フォルダの中身例↓
5. WordPressテーマ開発
出来上がったHTML版のWebページを、WordPressテーマに変換します。WordPressテーマ開発は説明が長くなるのでまた別記事にて解説しますが、次のようなフォルダ構成が完成形になります。
成果：WebサイトのWordPressテーマ版の開発が完了 フォルダの中身例↓
また、利用するレンタルサーバーをすでに契約していれば、VSCodeのSFTPプラグインを使って、開発環境とサーバー上のテーマフォルダを同期させることができます。（筆者は必ず同期させています。FTPクライアントアプリを使ってファイルをアップロードしなくて済むので、非常に便利です）
→VSCodeでFTP同期をするセットアップ
後述のWordPressでのページ制作を含め、WordPressテーマ開発とコードの調整はサイトの状態を確認しながら最後まで面倒を見る感じです。
利用ツール: Visual Studio Code, Figma, Chrome, Codekit
6. ドメイン設定
ここまで来たらサイトの公開間近です。では作ったサイトはどのURL（ドメイン）で見れるようにしたいのか？ドメイン名の取得は早い者勝ちですので、企画の段階で決まっていたら、すぐに取得されてしまっても大丈夫かと思います。
ドメインの取得は、ドメインレジストラと呼ばれるサービス（お名前.com）やムームードメインなどにて取得することが可能です。レンタルサーバーサービスでもドメインを取得することはできますが、サーバー変更の可能性を考えるとドメインレジストラでの取得がおすすめです。
利用サービス: お名前.com 成果: ドメイン名取得が完了
7. サーバー設定
ドメインはURLという名前だけで、サーバーは付いてきません。そう、作ったWebページファイルををアップロードして、それを公にWebサイトとして公開してくれるサーバーを別途借りないといけないのです。
そのサーバーを借りられるサービスがレンタルサーバーになります。 ->おすすめのレンタルサーバーはこちら
サーバーの契約ができたら、サーバーの設定画面に入り、Webサイト公開に向けた設定（特にWordPress関連の設定）を行います。
成果: レンタルサーバーの契約が完了、サーバーの設定が完了（ドメイン設定、データベース設定、SSL設定）
8. WordPressをサーバーにインストール
サーバーにWordPressファイル一式をアップロードし、前項で設定したデータベース情報を設定ファイルに記述。そして当該のディレクトリにアクセスすることでWordPressのインストールが行えます。 これは手動インストールと呼ばれるやり方ですが、多くのレンタルサーバーではワンクリックインストール（簡単インストール）機能が用意されており、面倒な方には便利です。
利用ツール: FTPクライアント（Transmit, FFFTP, Filezilla） 成果: WordPressのインストール完了（管理画面に入れるようになること）
9. 各種設定とプラグインインストール（WordPress上での作業）
仕様に基づきWordPressを設定していきます（パーマリンク設定、サイトタイトルやメタ情報の入力など） それに加え、必要なプラグインのインストールと設定も行います。
サイトの構築によく使うプラグイン
- Advanced Custom Fields（カスタムフィールド）
- CPT UI（カスタム投稿タイプ）
- Yoast SEO（SEO対策）
- Contact Form 7（お問い合わせフォーム）
- Google Analytics（アクセス解析）
- Really Simple SSL（セキュリティ）
- BackWPUp または Updraft Plus（バックアップ）
- Better Search Replace（テキスト置換）
→おすすめのWordPressプラグイン
設定とインストールが完了したら、WordPress上でページを作っていける環境が整います。
利用ツール: Google Chrome, WordPress 成果: ページ作成以外のWordPress設定が完了（プラグインのインストール含む）
10. ページ作成（WordPress上での作業）
HTMLで制作したページを、固定ページや投稿ページとしてWordPress上に作っていきます。流し込みのような（簡単なコピペ）作業にはなりますが、HTMLコードをWordPressで問題なく表示させるために画像URLを変更したり、カスタムフィールドで入力すべきコンテンツはカスタムフィールドに入力するなど、サイトの仕様通りにページコンテンツを組み立てていきます。
とは言っても、画像URLとリンクURLが間違わないようにする、くらいの確認しかありません。単純作業ですが、URLが間違ってしまうとサイトが正常動作しませんので、重要な確認作業と言えます。
利用ツール: Google Chrome, WordPress 成果: WordPress上での全ページ作成が完了
11. お問い合わせフォーム設定（WordPress上での作業）
プラグインの設定のひとつですが、作るフォームの内容によっては少し手間がかかりますのがお問い合わせフォーム設定です。
いつも使うお問い合わせフォームプラグインは、Contact Form 7という日本製のプラグインで、設定から運用までは「フォーム設定 → Google reCAPTCHA設定 → テスト送信 → フォーム実装完了」という流れになります。
- フォーム設定（入力画面の設定、送信されるメール内容の設定、自動返信メール内容の設定）の3つの設定が必要となっています。
- Google recaptchaと呼ばれるスパムメール対策機能も実装し、フォームからの迷惑メール送信を防ぎます。
- テスト送信（メールの受信を確認）
- 完了
利用ツール: Google Chrome, WordPress, Contact Form 7 成果: お問い合わせフォーム設定・設置の完了、フォーム送信の確認の完了
12. 検索エンジン最適化に関する作業（SEO対策）
サイトを検索エンジンから見つけやすくすることも、Webサイト制作プロセスの一部です。Webサイトの検索エンジン最適化を行うため、以下の作業を行います。
- SEOプラグインであるYoast SEOのプラグインの各種設定
- サイトタイトルの指定
- サイト概要文の指定
- 画像のAltタグにテキストを指定
- 内部リンクの指定（サイト内のページリンク）
- Google Search Consoleへのサイトマップ送信（Googleにサイトの存在を送信）
- Google Search Consoleにてカバレッジを確認（登録されたページ一覧を確認）
利用ツール: Google Search Console, WordPress, Yoast SEO 成果: SEO対策関連の設定完了、Google Search Consoleへのサイトマップ送信の完了
13. サイト公開作業
最終チェックを行い、サイトを公開してもOK！になったら、公開作業を行います。（大体WordPressのサイトアドレスの変更と、index.phpファイルの設置のみです。）
他にも表示速度の最適化、モバイル対応の確認、セキュリティ関連の最終チェックなども行います。
最後に指定したドメインでサイトが見られることを確認し、サイト内の様々な場所をクリックしてリンク切れになっていないかどうかを確認します。問題がなければ、サイト公開は無事完了、ということでお疲れ様でした。
利用ツール: Google Chrome, WordPress, FTPクライアント 成果: 指定ドメインにてサイトが閲覧できること。サイトの機能にエラーがないように確認すること。
おわりに
以上がウェブサイト制作プロセスの全貌になります。慣れてしまうとここまで大変な作業には感じないのですが、分解してみると、意外と多くのプロセスが関わっていることがわかります。 また、内容がわかるとプロセス重視で仕事ができるようになり、作業途中で迷わなくなると言うのも大きなメリットかと思います。 この記事が少しでもあなたのお役に立てたのであれば幸いです。
もしご不明点があれば、お気軽にコメントやお問い合わせください！
関連記事
→ おすすめのレンタルサーバー → WordPressテーマのおすすめカスタマイズ（カスタム投稿・カスタムフィールド・テーマオプション機能）のご紹介
