- #コラム
サイト構築とは?サイト構築の全工程を解説!
Webサイト構築の基本から公開・運用まで、要件定義、設計、デザイン、開発、テストの各段階をわかりやすく解説。あなたのサイトを成功に導くための具体的なステップをご紹介します。
46
公開日
/
更新日

サイトの構築とは、その名の通り、EC・WEBサイトを、HTMLHTML
"HyperText Markup Language"の略で、Webページの土台となる構造を定義する言語です。以前解説したCSSがサイトの...もっとみるやCSSCSS
"Cascading Style Sheets"の略で、Webサイトの見た目を定義するための言語です。HTMLがサイトの構造や文章などを決...もっとみる、JavaScriptJavaScript
「JavaScript」(ジャバスクリプト)は、Webサイトに動的な機能を追加するプログラミング言語です。HTMLが「骨格」、CSSが「装...もっとみるといった専用の言語を用いて制作することを指していますが、制作に着手するためには、その前にいくつかの段階を踏む必要があります。
サイト構築の段階
- サイトの要件定義
- サイトの設計
- サイトデザインの作成
- サイトの開発
- サイトのテスト
- サイトの公開・運用
1.サイトの要件定義
- 【目的】サイトを公開・運用する目的の決定
使用するシステムや初期・運用のコストを策定するための重要ポイント。 - 【対象】サイト訪問者の人物像(ペルソナペルソナ
(persona) 1990年代です。アラン・クーパーという人物がソフトウェアにおけるデザイン(設計)を考えるための手法として、具体...もっとみる)の決定
既存のプロジェクトであれば優良顧客、新規のプロジェクトであれば、象徴的な顧客モデル。 - 【目標】目的や課題に対する、指標の決定
競合や参考とする競合などの定性的な課題や、売上や会員登録数などの定量的な指標。 - 【日程】サイトを公開するまでのタスクとスケジュールの決定
サイトの公開までに必要なタスクの整理と、それぞれにかかる日数の算出。優先順位と順序だて。 - 【選定】サイトの制作担当者の決定
サイトの要件定義を元に、社内や外注先へ提案を依頼し、要望にあった担当者を選定。
2.サイトの設計
サイトの要件定義と、依頼者からのヒアリング内容を元に、サイトの制作担当者が、サイトに必要なコンテンツや、システムの仕様に合わせた設計を、サイトマップサイトマップ
「サイトマップ」とは、Webサイト全体のページ構成を一覧にした「地図」です。これには大きく2種類あります。 一つは人間(ユーザー)向けのサ...もっとみるやワイヤーフレームワイヤーフレーム
(wireframe)
WebサイトやアプリケーションのUI(ユーザーインターフェース)を、線や枠を用いて視覚的に表現した設計図のこ...もっとみるを利用し作成します。
サイトに訪問したユーザーに伝えたい情報の整理や、強調すべきポイントなど、依頼者と制作者との、認識のずれが発生しないよう、念入りに内容を精査する必要があります。
- 【サイトマップ】
サイトの全体像を階層構造で整理します。各ページをカテゴリ毎に整理し、サイトに訪問したユーザーがどのようにページを遷移して目的にたどり着けるのかを視覚化して、サイトの目的を果たせるのかを検証。 - 【ワイヤーフレーム】
ページ毎のレイアウトやデザインの方向性を視覚化します。ページで伝いたい情報の優先度や、サイト訪問者の視線の動きの法則を考慮して、テキスト・画像・動画など情報を配置。ペルソナペルソナ
(persona) 1990年代です。アラン・クーパーという人物がソフトウェアにおけるデザイン(設計)を考えるための手法として、具体...もっとみるに合わせた、サイトのコンセプトや配色などの付加情報を集約。
3.サイトデザインの作成
サイトマップとワイヤーフレームを元に、WEBデザイナーがサイトの見た目を制作していきます。そのデザインをサイトに組み込んでいきますので、この段階で、イメージのすり合わせ、修正対応を完了させておくことが望ましいです。
デザインが決定すると、そのデザインを元に、専用の言語を用いてコーディングし、サイトに組み込んでいきます。
ブラウザやデバイスにより、見た目が異なる場合がある為、環境に合わせて、見た目が大きく変わらないように、調整をする必要があります。ただ、環境は日々変化し、多様化していますので、サイトとして、どういった環境で閲覧されることを推奨するのかを明示する必要があることと、変化に合わせたメンテナンスが必要となります。
4.サイトの開発
サイトをWEB上に公開するために必要な、サーバーサーバー
「サーバー」とは、PCやスマホなどの「クライアント」からの要求に応じ、データやサービスを提供するコンピュータです。 Webサイトの情報を保...もっとみる・ドメインドメイン
(domain)
ドメインは、WEBサイトの名前のようなものです。WEBサイトがどこにあるかを示すものは、「000.000.000....もっとみる・SSLSSL
"Secure Sockets Layer"の略で、インターネット上の通信を暗号化する技術です。個人情報やクレジットカード番号などを第三者...もっとみるの準備と設定。使用するシステムとの繋ぎこみや、必要な機能の開発を行います。
CMSやECカートシステムを利用することで、上記の手間を省くこともできますが、その場合も利用するシステムごとに機能がことなりますので、内容を理解して、対応する必要があります。
5.サイトのテスト
1~4の工程が終わると、WEB・ECサイトとしての準備が整いましたので、動作確認を行います。
動作確認は、サイトを運営していく中で、修正や追加開発が発生した場合も行う必要がありますので、aroundsでは、テスト用の環境を用意することを推奨していますが、コストにもかかわりますので、検討が必要です。
動作確認では、ページがデザイン通りに表示できているかや、機能が思った通りに動いているかなど、サイトの目的を提供できるのかを、推奨環境で実際に操作していく必要があります。
6.サイトの公開・運営
サイトのテストで問題がなければ、本番環境にすべての情報を設定して、ページを公開します。
ここまでの工程でおおよそ、3ヶ月~6ヶ月程度とかなり長い期間を要します。その為、途中段階で、認識の齟齬やミスが多発しないよう、aroundsでは、情報共有やダブルチェックを徹底し、丁寧な対応を心掛けています。
また、サイトは、公開がゴールではなく、目的を達成するためのスタートですので、運営面を考慮したサイトの構築提案をさせていただくことも、aroundsの特徴です。
サイト運営について