【ワークフローについて理解しよう!】WEBサイト作りに必要な作業について

こんにちは、kanoです♪

 

現在アパレルブランドのクリエィティブ

ディレクターとしてWebデザインの

仕事を中心にして働いている大学生です^^

 

今回はWEBサイト制作に必要な作業の流れ、

ワークフローについてご紹介します!

 

この記事は

・WEBデザイナーを目指してる方

・WEB制作に関わるお仕事をされている方

に参考になる内容になっています^^

 

是非最後までご覧ください♪

 

 

 

ワークフローとは?                          

 

WEBサイト制作で必要な作業は、

プロジェクトの規模によって異なりますが、

 

大体は、企画→設計→制作→運用準備

流れで作業を行います。

 

そしてこのような流れを

ワークフローといいます。

 

また場合によっては、

これらの仕事業務の他にWEBサイト

公開後運用業務マーケティング

関連の業務を依頼されることもあります。

 

次に、企画 / 設計 / 制作 / 運用準備

それぞれの仕事内容をチェックしてみましょう♪

 

 

 

企画                                                  

企画では以下のことを行います。

 

  • ヒアリング
  • 要件定義
  • 既存サイト調査
  • ペルソナ設定
  • コンテンツ企画
  • マーケティング企画
  • KPI / KGI設定
  • 市場 / 競合調査
  • サイトマップ
  • 制作スケジュールを考える

 

・ヒアリングシートの作成について

ヒアリングでは、目的やターゲット、

その他クライアントの事を知るために

ヒアリングシートを使うと便利です。

 

・要件定義とは

要件定義とはクライアントの

要望とその要望をどのように

叶えるか文章としてまとめたもの。

 

・既存サイト調査について

すでにサイトが存在していて

リニュアールでサイトを改良し直す際のみ

既存サイトの調査が必要。

 

 

・ペルソナ設定とは

ペルソナとは最も重要な

ユーザー像を実在する人物のように

詳細に設定する事のこと。

 

 

・コンテンツ企画とは

コンテンツ企画とは製品やサービスを

販売していくために 多角的に分析して

課題解決に向けたコンテンツを企画すること。

 

 

・マーケティング企画とは

製品やサービスが売れるかなどの

売るための視点を考え企画する事。

 

WEBサイトのデザインによって

売り上げに影響が出ることもあるので

売れるサイトデザインを作るためにも

マーケティング企画は必要。

 

・KPI /KGI設定とは

企画では、クライアントから依頼を受け

クライアントの依頼内容に沿って

・KPI(重要目標達成指標)

・KGI(重要業績評価指標)

を設定していく必要があります。

 

KPI  (重要目標達成指標)とは

それぞれの過程や手段ごとに

設定する複数の目標の事。

(例 : 問い合わせ数 / 会員登録数…)

 

KGI  (重要業績評価指標)とは

WEBサイトで達成したい最終的な目標の事。

(例 : 売り上げ増加などWEBサイトを制作する目的の達成)

 

・サイトマップとは

サイトマップとは、サイト全体の

ページ構成をリスト形式で記述したもので、

 

ユーザーにも検索エンジンにも

サイトの内容をわかりやすく

伝えるという役割を果たします。

 

・制作スケジュールを考える

納期にしっかり間に合うように

全体の制作の流れを把握して

制作スケジュールを立てていきます。

 

以上が、企画の流れになります。

 

 

 

 

 

設計                                                   

 

設計では以下のことを行います。

 

  • 詳細サイトマップ
  • ユーザーシナリオ
  • ワイヤーフレーム
  • デザインカンプ
  • 素材準備(画像素材など)
  • システム / 機能要件定義
  • 制作仕様書

 

・詳細サイトマップとは

詳細サイトマップとは、サイトマップで描いた

サイトの全体像を元に、ページ単位

詳細な構造を定義した設計図のこと。

 

・ユーザーシナリオとは

ユーザーシナリオとは、顧客が商品購入や

サービスの利用などゴールとなる

アクションにたどり着くまでの流れのこと。

 

・ワイヤーフレームとは

ワイヤーフレームとは、

WEBページのレイアウトを

定める設計図のことです。

 

また、ワイヤーフレームは

サイト全体のページを作成する必要はなく、

 

デザインパターンとして代表的なページ、

テンプレートとして必要なページなどを

制作するのが一般的。

 

 

・デザインカンプとは

デザインカンプとはデザイン完成見本のことで

一般的にはワイヤーフレームを作成した後に

デザインカンプ作成を行います。

 

・素材準備

サイト作成に必要な画像素材などの事で、

クライアントからの画像素材の

用意がない場合は自分で写真を撮影するか、

もしくは画像サイトでダウンロードも可能。

 

・システム / 機能要点の定義

システム / 機能要件は、ソフトウェアや

システム開発において必要となる大切な工程。

制作するシステムに盛り込みたい機能を

クライアントから適切に聞き出し、

どのような機能が必要なのかを明確に定義します。

 


・制作仕様書

Webサイトの制作における細かな技術要件や

制作上のルールをまとめた資料のこと。

 

以上が、設計の流れになります。

 

 

 

 

 

 

制作                                                   

制作では以下のことを行います。

  • フロントエンド制作
  • バッグエンド開発
  • CMSの設置とカスタマイズ

 

・フロントエンド制作

設計したデザインを元にHTML & CSS、

JavaScriptなどを駆使して、

ブラウザに表示できるようにコーディングを実施。

 

・バックエンド開発

バックエンドという言葉はフロントエンドに対して

使われることが多くWeb系の会社で良く使われます。

 

一般的にWebサイトの目につかない

裏側の部分のコーディングを実施すること。

 

 案件に応じて裏側の動的な処理やデータベースの

要件定義や設計開発、運用保守などを行う。

 

 

 

・CMSの設置とカスタマイズ

CMS(Contents Management System)とは、

コンテンツ・マネジメント・システムの事で

 

WEB制作に必要な専門的な知識が無くても、

WEBサイトやコンテンツを

構築・管理・更新できるシステムのことを言います。

 

以上が、制作の流れになります。

 

 

 

これらの制作業務に関しては

基本的にコーダーもしくはエンジニア

役割になってくるので

 

これらの業務が

出来なくても問題ないです。

 

フリーランスでデザイナーとして

働く場合はコーディング作業など

外注する事も可能です。

 

 

 

 

 

運用準備                                            

 

デザイン / WEBサイトの実装が終わったら

実際にサイトを使用できるよう

運用準備を行っていきます。

 

運用準備では以下のことを行います。

 

  • Googleの各種サービス設定
  • ソーシャルメディアのアカウント設定
  • 運用計画(更新作業など)
  • テスト公開とフィードバック
  • 本番公開

 

・Googleの各種サービス設定
  • Googleアカウント設定
  • Googleアナリティクス

などの設定などを行っていきます。

 

Googleアナリティクスとは?

Google Analyticsは、

Googleが無料で提供するWEBページの

アクセス解析サービスのこと。

 

 


・ソーシャルメディアのアカウント設定

ソーシャルメディアとは

情報の発信・共有・拡散

繰り返すことによって

 

メディアとしての性質を持つようになった

オンラインコンテンツの総称のことで

 

主にSNSである

Twitter、Instagram、Facebook

などが該当します。

 

これらのアカウントをサイトに

登録してサイトから企業の

SNSにアクセスできるように連携。

 

 

・運用計画(更新作業など)

運用計画とは主に

  • 更新作業
  • アクセス解析
  • サイト改善

などが該当します。

 


・テスト公開とフィードバック

テスト公開では実際に公開し、

サイト上に不備問題点がないか

確認する作業を行います。

 

フィードバッグではテスト公開してみて

発見した不備や問題点を

発見した際に改善を行います。

 


・本番公開

テスト公開、フィードバッグを行った上で

サイトに問題ないことを確認してから

本番公開で実際に公開をします。

 

以上が、運用準備の流れになります。

 

 

 

 

 

まとめ                                               

今回はWEBサイト制作に必要な作業の流れの

企画 / 設計 / 制作 /運用準備

ワークフローについてご紹介しました。

 

それぞれの仕事内容の段階を

しっかり踏んでいくことで

 

より良いWEBサイトを

制作していきましょう♪

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA