コーディング・テスト・実装

Webサイトのデザイン制作がどのように進むのかについては、以前お話しさせていただきました。今回はその続き、いよいよ「コーディング」から「公開」までの流れについてです。

デザインが完成すると、次はいよいよエンジニアが登場し、「コーディング」という作業を進めていくことになります。ここからが、デザインという設計図を、実際に触れるウェブサイトとして組み立てていく重要なフェーズです。

デザイン制作中に行うべき「素材の準備」

その前に、前回お話し忘れてしまった重要なことがあります。それは、写真や動画といった「素材」の準備です。

デザイン制作の段階で、「ここに動画を使いましょう」「ここに社員の方の写真を使いましょう」といった計画が決まります。この素材の用意は、デザイン制作と並行して行うこともあれば、デザインの段階では一旦仮の画像（アタリ画像などと呼ばれます）を入れておくこともあります。

「こんなイメージの写真が入る予定です」と共有しておき、デザイン完成後、コーディングに入る直前に撮影した本番の素材に差し替えて最終確認を取る、という進め方もあります。この素材準備のフローも、制作において欠かせない工程の一つです。

いよいよエンジニアの出番！「コーディング」とは何か？

さて、本題の「コーディング」です。サイト制作を依頼する側からすると、この工程は一体何をしているのか、なかなか見えにくい部分ではないでしょうか。

コーディングについて全てを解説するわけではありませんが、ざっくりとどんなことをするのかご紹介したいと思います。

一枚のWebデザインが「動くサイト」になるまで

Webデザインは、最初の段階では一枚の画像データとして作られます。例えば、左上にロゴがあって、その隣にボタン、中央にキャッチコピーと写真、その下に強みが1、2、3と紹介されている、といったデザインがあったとします。

この一枚の画像から、エンジニアがロゴの部分だけを画像として切り出し、ボタンも画像として切り出す、といった作業を行います。背景の写真も切り出し、キャッチコピーの部分はコンピューターが認識できる「文字（テキスト）」として、コピー＆ペーストができるようにしていきます。

このように、デザインをパーツごとにバラバラにして、それらをブラウザ上で再構築していくのがコーディングの基本です。

マウスオーバーで変化する！インタラクティブな要素の実装

ただ組み立てるだけではありません。例えば、ボタンにマウスカーソルを合わせたときに少し色や形が変わったり、クリックできるようになったりしますよね。そういった「インタラクティブな要素」、つまりユーザーの操作によって反応する動きを、決められた仕様に基づいてエンジニアが実装していきます。

お客様自身で更新可能に！CMSの導入

ウェブサイトには、お知らせやニュースといった、お客様自身で情報を更新したい部分があるかと思います。そういったご要望がある場合、CMS（コンテンツ・マネジメント・システム）と呼ばれる仕組みを導入することがあります。

CMSを導入することで、Webにあまり詳しくない方でも、ブログを更新するような感覚で気軽にWebページの更新や新規ページの追加が行えるようになります。デザインをバラバラに組み立てた後、さらにこのCMSに組み込むという作業が発生することもあるのです。

予約システムや決済システムの組み込み

CMSの導入だけでなく、場合によってはお知らせの更新程度にとどまらず、予約システムや、ECサイトのような定期購入システム、セミナーの予約機能などをウェブサイトに搭載することもあります。こうした複雑なシステムを入れる場合は、それも裏側でエンジニアがシステムを組み立てて、ウェブサイトに組み込んでいく作業を行います。

コーディングが目指すもの：ブラウザで閲覧できるということ

かなりざっくりとした解説になりましたが、コーディングとは、Photoshopなどで作られた一枚の画像データを、実際に皆さんが使っているChromeやMicrosoft Edge、Firefoxといった「ブラウザ」で閲覧できるようにする作業、と捉えていただければと思います。

いきなり公開はしない！「テスト環境」での入念なチェック

エンジニアの頑張りによって、デザインがブラウザで見える状態になったとしても、いきなり一般公開することはありません。なぜなら、制作の過程でミスがあったり、抜け漏れがあったりする可能性があるからです。

また、世の中にはパソコン、スマートフォン、タブレットなど様々な端末（デバイス）があります。それらのどの環境でも正常に見えるのかをチェックしていかなければなりません。そこで、まずは「テスト環境」でサイトを公開し、入念なチェックを行います。

テストサイトで何を確認するのか？

テスト環境とは、制作会社の関係者や依頼したクライアント様など、限られた人だけが見える状態のテストサイトのことです。公開予定のサーバー内にテスト用の場所を作ったり、そっくり同じような別のサーバーを契約してテスト環境を構築したりと、やり方は様々です。

このテストサイトで、私たちは色々なことをチェックしていきます。

デザインとの一致からリンク切れまで、地道な確認作業

まずは、見た目です。元のデザインと寸分違わず再現できているかを確認します。そのほか、デザインの段階では気づかなかった文字の間違い（誤字脱字）がないか、設置されているリンクが全てきちんと機能するか、お問い合わせフォームから問題なくメールが送信されるか、といった細かい部分を一つひとつ確認していく、非常に地道で大変な作業が発生します。

全デバイスで確認は不可能？テスト範囲の重要性

さらに、iPhoneで見ても、WindowsパソコンのMicrosoft Edgeで見ても、正常に閲覧できるか、といった複数環境でのチェックも行います。

しかし、現実問題として、世の中にある全てのスマートフォンやタブレット、ブラウザのバージョンを制作会社が保有しているわけではありません。全てで完璧に表示させることを確認するのは不可能に近いのです。

そこで重要になるのが、事前に「どのデバイス、どのブラウザのバージョンまでをテストの対象とします」という取り決めをしておくことです。この取り決めに基づいて、テストとチェックを進めていきます。もしこの取り決めをしておかないと、後から「普段使っている自分の古いスマートフォンで見えない」といったトラブルになりかねません。どの範囲までを保証するのか、事前に握っておくことは非常に重要です。

いよいよ「公開」！その方法は一つじゃない

テストも無事に完了し、「これでバッチリだ！」となったら、いよいよウェブサイトの「公開」作業に移ります。

この公開作業は、全く新しいサイトを作る「新規制作」なのか、既存のサイトを作り直す「リニューアル」なのかで、少し手順が異なります。

新規の場合は特に問題ありません。予め取得しておいたドメイン（「〇〇.com」のようなウェブサイトのアドレス）に、制作したデータをアップロードすれば完了です。

サーバーはどうする？リニューアル時の2つの選択肢

一方で、リニューアルの場合は少し大変になってきます。

選択肢は大きく2つあります。一つは、元々使っていたサーバーとは別に、リニューアル後のサイトを置くための新しいサーバーを用意しておく方法です。公開のタイミングで、ドメインへのアクセスを古いサーバーから新しいサーバーへ切り替える、というやり方です。何かあった時にすぐに元に戻せるので、この方法がおすすめではあります。

もう一つの方法は、サーバーを2つ契約すると管理が煩雑になるため、元々使っていた一つのサーバー内で、古いデータと新しいデータを入れ替えるという方法です。多くの場合はこちらを選択されることが多いかもしれません。どちらの方法を取るかは、状況に応じて相談しながら決めていく部分になります。

公開後の最終チェック

公開したら、それで終わりではありません。ちゃんと検索エンジンに認識されるようになっているか、といったチェックを加え、お客様の方でも最終確認をしていただき、問題がなければ「納品完了」となり、プロジェクトは終了です。

この時、ついでにSSL証明書（URLを「http://」から暗号化された「https://」にする設定）を適用したり、前の制作会社からドメインの管理を引き継ぐ「ドメイン移管」という作業が発生したりすることもあります。

まとめ：ホームページ制作はなぜ大変なのか？

ここまで、コーディングから公開までの流れを解説してきました。

エンジニアがデザインをパーツに分解して組み立て、場合によってはCMSを組み込み、まずはテスト環境で入念にチェックする。様々な規定に基づいてテストを行った後、サーバーの状況に合わせて公開作業を進めていく、というのが大まかな流れです。

ここまで来るのには、本当にたくさんの工程があります。ホームページというと、無料や格安で簡単に作れるサービスがたくさんあるので、意外と手軽にできるような気がするかもしれません。それらのサービスが悪いわけでは決してないのですが、オーダーメイドで一から作ろうとすると、どうしても確認事項が膨大に増えるのです。

その一つひとつの確認事項をすり合わせていく過程で、コミュニケーションの齟齬が起きたり、思わぬトラブルが発生したりしがちです。

一番の敵は「手戻り」

制作プロジェクトにおいて、一番の敵は「手戻り」です。一つ前の段階に戻ってやり直す、という作業が発生すると、時間もコストも大幅にロスしてしまいます。そうならないためにも、ぜひ「ウェブサイト制作は、結構大変なプロジェクトなんだ」という気持ちで構えて取り組んでいただけると、失敗しにくく、スムーズに進行できるのではないかと思います。

おわりに

今回は、ウェブサイト制作のコーディングから公開までの裏側をお話しさせていただきました。また別の機会に、サイト公開後の「保守」ではどんなことをしていくのか、といった点についても解説していければと思います。

ウェブサイト制作プロセスにおける「開発と実装」の段階は、デザインコンセプトとコンテンツ戦略を具体的なウェブサイトに変換する過程です。このフェーズでは、ウェブサイトの構造、機能、およびユーザーインターフェースが開発され、最終的なウェブサイトが形成されます。以下では、この重要なプロセスについて詳しく説明します。

フロントエンド開発

• ユーザーインターフェースの構築: 承認されたデザインコンセプトに基づき、HTML、CSS、JavaScriptなどを使用してウェブサイトのフロントエンドを構築します。
• レスポンシブデザイン: デバイスの種類に関係なく、ウェブサイトが適切に表示されるようにレスポンシブデザインを実装します。

バックエンド開発

• サーバーサイドのロジック: サーバーサイドのプログラミング言語とデータベース技術を使用して、ウェブサイトのバックエンドを開発します。
• 機能の実装: データベース統合、ユーザー認証、eコマース機能など、必要な機能を実装します。

コンテンツの統合

• コンテンツの配置: 作成されたコンテンツをウェブサイトに統合し、適切な位置に配置します。
• CMSの活用: コンテンツ管理システムを使用して、コンテンツの管理と更新を容易にします。

インタラクティブ要素の追加

• ユーザーインタラクション: フォーム、スライダー、インタラクティブなメニューなど、ユーザーインタラクションを促進する要素を追加します。
• 動的なコンテンツ: ユーザーの行動に応じて変化する動的なコンテンツを実装します。

テストとデバッグ

• 機能テスト: すべての機能が正しく動作するかをテストします。
• クロスブラウザテスト: 異なるブラウザでウェブサイトが正しく表示されるかを確認します。
• デバッグ: 発見されたバグや問題を修正します。

セキュリティと最適化

• セキュリティ対策: ウェブサイトのセキュリティを強化し、潜在的な脅威から保護します。
• パフォーマンス最適化: ロード時間の短縮とパフォーマンスの向上を目指して、ウェブサイトを最適化します。

最終レビューと承認

• クライアントのレビュー: 完成したウェブサイトをクライアントに提示し、最終的なフィードバックと承認を得ます。

「開発と実装」の段階は、ウェブサイト制作の中核をなすプロセスであり、技術的な専門知識と創造性が求められます。この段階での丁寧な作業と厳密なテストは、機能的でユーザーフレンドリーなウェブサイトを実現するために不可欠です。