こんにちはディーメイクでwebデザイナーをしている鈴木です。
今回もさらっと説明する【Webサイトに関する基礎知識シリーズ】です。
このシリーズはWeb制作の現場でよく使われる言葉や
基本的な知識などをさらっと書いています。
第3回目となる今回はWebサイトを作る段階に沿って
ざっくり書いてみたいと思います。
※Webサイトの作り方と言っても色々なので必ずしもこの通りではありません。
目次
1.Webサイトを作る流れ
ざっくりと段階別にやることを書き出してみたいと思います。
もっと工程がたくさんあるサイトもありますがここでは一般的な良くある流れを想定して書いています。
コンテンツの制作などもスコープ外です。
企画・調査
- 目的を決めてどんなサイトを作りたいか決める
- 競合のサイトを調べたり、ドメインなどを決める
- 企画をまとめる
設計・計画
- サイトのコンテンツを決めていく
⇨サイトマップ、ワイヤーフレームなど - システム設計が伴う場合は仕様などを決めていく
⇨要件定義、仕様書など
制作１フロント（デザイン＆コーディング）
- 主要なページのデザインを決める
⇨デザインカンプ - コーディング
- 表示確認
制作２バックエンド（開発）
- パッケージシステム（パッケージソフトウェア）の導入や最適化
または独自システムの構築 - サーバー設定、ドメイン設定
- 動作確認
公開、公開後
- 公開
- 運用、保守、更新
- 評価、解析、改善
2.それぞれの工程について
それぞれの工程について簡単に解説します。
内容や担当はあくまでも参考としてみていただければと思います。
企画・調査
この段階はサイトの軸になる部分です。
これから先、制作や運営をする上で考え方や判断の指針となるよう
しっかりと認識をすり合わせておきましょう。
【目的やどんなサイトを作りたいかを検討する】
なんのためにサイトを作るのかや実現したい目的などを整理して
どんなサイト（ECサイト、オウンドメディア、LP 等）を作るのかなどを決める。
クライアント、サイト担当者 等
【競合のサイトを調べたり、ドメインなどを決める】
競合サイトついて調べたり、ターゲットを決めるなど
サイトのイメージを具体的にするために調査、検討する。
⇨カスタマージャーニー、イメージマップなど
サイト名やドメインなども検討し、他に被ってないかなど調べる。
クライアント、サイト担当者 等 （場合によってはディレクターも）
【企画をまとめる】
ある程度サイトのイメージや検討結果がまとまったら
コンセプトややりたい事を企画書にまとめる。
クライアント、サイト担当者、ディレクター 等
設計・計画
企画に基づいてサイトを設計したり、タスクを整理してスケジュールなどを決めていきます。
この段階での見通しがサイトそのものの出来を大きく左右します。
抜けや漏れがないように、しっかり検討しましょう！
【サイトのコンテンツを決めていく】
目的に合わせて必要なコンテンツを検討します。
コンテンツが決まってきたら、サイトマップやワイヤーフレームなどに
落とし込んで可視化していきます。
必要なコンテンツはできるだけこの段階で洗い出し
優先順位やスケジュールを検討します。
クライアント、サイト担当者
ディレクター、デザイナー（UI/UX）、システムエンジニア 等
【システム設計が伴う場合は仕様などを決めていく】
更新やカートなど、必要な機能を整理して要件や仕様を決めていきます。
決まったことは要件定義や仕様書などにしっかりとまとめておきます。
開発系の設計は、工期や費用に大きく影響することが多いので
しっかりとした知見を持った人と検討することが望ましいです。
クライアント、サイト担当者
ディレクター、システムエンジニア 等
制作１フロント（デザイン＆コーディング）
見た目のイメージやユーザビリティに大きな影響がある工程です。
ターゲットや目的を意識してしっかりと固めていきます。
【主要なページのデザインを決める】
トップページやメインとなるコンテンツなどのページをデザインし
デザインカンプを作っていきます。
カラーやフォントサイズなども大体ここで決まっていきます。
クライアントやサイト担当者は、素材の確保もこのあたりで
並行して行います。
デザイナー、ディレクター
クライアント、サイト担当者（確認と素材確保）
【コーディング】
デザインが決まったら、デザインカンプを元にHTMLやcss、JavaScriptでコード化して
Web上で公開できるようにしていきます。
表示上の動き（ホバーアクションやスライドショーなど）もここでつけられます。
フロントエンドエンジニア、コーダー、デザイナー 等
【表示確認】
コーディングまでできたら、様々なブラウザ（Chrome , safari 等）や
パソコン、スマホなどできちんと表示できるか確認します。
動作確認とまとめてやることも多いですが
デザイナーやコーダーは、開発に渡す前に最低限確認した方が良いと思います。
デザイナー、コーダー、ディレクター 等
制作２バックエンド（開発）
サーバー側の設計や設定をする段階です。
必要な機能を実装したり、ユーザーがサイトを見れるように
サーバーの設定をしたりします。
【パッケージシステム（パッケージソフトウェア）の導入や最適化、または独自システムの構築】
ブログやカートシステムなどの機能を実装します。
wordpressやec cubeなどのパッケージシステムを使えるようにしたり
サイトに合わせてカスタマイズする方法と
フルスクラッチ開発で独自にシステムを構築する方法があります。
SE、Webプログラマー 等
【サーバー設定、ドメイン設定】
ユーザーがサイトを見れるようにするためにサーバーにアップします。
その為の設定などを行います。
ドメインの設定（このブログだとd-make.co.jp）もこの段階でします。
SE、Webプログラマー 等
【動作確認】
サイトの機能がきちんと動いているかだけではなく
表示の崩れやリンクは切れてないかなども含め確認していきます。
SE、Webプログラマー、ディレクター、デザイナー（できれば全員）
公開、公開後
全て準備できたら公開します。
公開後は更新や検証を繰り返して改善を続けます。
【公開】
ユーザーが見ることができるように、Web上に公開します。
公開して初めてバグや問題に気づくこともあるので
その日はデザイナーやコーダーなどの作業者も対応できるように待機しておくと安心です。
SE、ディレクター 等
【運用、保守、更新】
誰が更新するのか、どのようにチェックするのかなど
運用しやすようにルールを決めてサイトを保守しましょう。
Web担当者、クライアント （契約によってはディレクターやデザイナー） 等
【評価、解析、改善】
サイトのアクセス解析などを行い、それを元に改善計画を立てたり
マーケティング戦略を考えます。
Web担当者、クライアント、プロデューサー、Webマーケター 等
3.まとめ
今回はWebサイトの作り方について
流れに沿って簡単にまとめてみました。
この流れの中の、企画・デザイン・システム設計あたりを
よく上流工程と言ったりしますが
近年の多様化するサイト制作の現場の中で
上流工程での見通しが、サイトの出来をいかに左右するかを
感じる場面が多くなってきています。
その一方、コーディングや実装などもどんどん複雑化して
技術もどんどん進化してきているなとも思います。
D-make ではディレクションからデザイン、システム開発まで
社内で一貫して行なっています。
どの工程の相談でも社内で答えを出せる
エキスパートが揃っていることが強みです。
サイト作りで困ったことがあれば、お気軽にご相談ください。
一緒にサイト制作をしてくれる仲間も募集しています！
こちらの記事もチェック！
アクセス解析やディレクションに興味も持ったらこちら
稼げるフリーランスエンジニアになりたくなったらこちら