差別的優位点を生かしたWebワークフロー

2019年10月16日 18:08

コンテンツを立案するところを中心に、ウェブ制作のワークフローを再考してみる。まだメモ段階。経営戦略を、いかに情報設計に接続し、その後の実装へ流していくかがポイント。

組織や案件の大きさによって、関わる人やタスクは変化すると思うので、柔軟に考えて参考して下さい。こうやって整理すると、ディレクターへの業務依存が大きく、大変な仕事であることがわかるともいます。

上流工程（要件定義）

そもそも論を把握する

ウェブサイトの目指すところや、経営者の価値観をきちんと把握する。すべてはこれを実現するために行うのだから。

担当：ウェブコンサルタント／ディレクター

AB3Cで戦略を立案する

ウェブサイトに戦略がないのはおかしい。AB3Cで戦略を分析する。お客様、自社、競合を分析し、お客様にとってのベネフィットと、競合に対する差別的優位点を抽出する。この差別的優位点が、競合の多いインタネーットで、これから作ろうとしているサイトが集客ができる根拠となるので重要。

担当：ウェブコンサルタント／ディレクター

仮説を立案し、プロトタイプを作成する

前提条件を整理し、サイトの目的を仮説として立案する。ペルソナを作成し、ペルソナがどの様な行動を行うかシナリオを作成する。それに基づいて、サイトのデザイン案をプロトタイプとして作成し、早い段階で検証を行う

プロトタイプは、初期は広く浅く、手書きでよいが、作成、検証の繰り返しの過程でより深く、忠実度をあげて、UXデザイン上の問題点を洗い出し、改善を行う。

プロトタイプは、特にナビゲーションの設計に力をいれる。そのため次のフェーズであるハイレベルサイトマップを参考にする。

担当：UXデザイナー／コンサルタント／ディレクター

中流工程（設計工程）

差別的優位点を生かした
ハイレベルサイトマップを作成する

プロトタイプの制作と並行して、ここで始めてサイト全体の設計にはいる。ありがちな構成のサイトマップを作るのはなく、差別的優位点を全面におしだしたハイレベルサイトマップを作成する。

図書館分類的階層と、ウェブサイトの階層は異なる点に注意して、極力階層を浅く、クリック数すくなくコンテンツがみれるように工夫する。

担当：インフォーメーションアーキテクト／ディレクター

全画面一覧（コンテンツインベトリー）を作成する

ハイレベルサイトマップを参考に、サイトを構成する全ページの一覧を作成する。コンテンツの階層を意識して、重要なコンテンツは少ないクリックで表示できるように心がける。

今後のプロジェクトマネージメントの助けとするため、原稿、ワイヤー、デザイン、コーディング、CMS投入の各項目を作成し、マーキングが出来るようにする。

またこの段階で本番ページのURL（ファイル名）を決定し、以降、原稿やデザインデータも同名のファイル名で共有するようにする。（ここ重要）

担当：インフォメーションアーキテクト／ディレクター

字コンテを作成する

画像等の指示をあとで行う場合は、テキストエディターで、画像や図版のレイアウトまで指示したい場合は、ワードで、全画面一覧のページ単位でコンテンツをまとめる。リニューアルの場合は古いサイトから流用できるところは、コピペし、新規サイトの場合は、コンテンツの構成を考えながら作成する。

この段階では、見出しのコピーは仮見出しとして入れておき、リード文などは文字数だけ決定し、ダミーテキストを入れておく。テキストで説明するのか、図版やイラストで説明するのか等を検討し、わかるようにしておく。

テキストはMarkdown記法を使って書くと、文章構造が明示できて、共有しやすい。

ファイルは、全画面一覧で決めたファイル名.拡張子で、画面単位で作成する（ここ重要）

担当：編集者／コンテンツエディター／ディレクター

デザインガイドライン（スタイルガイド）を試作する

ビジュアルデザインまで完成したものではなくてもよいので、見出しや本文のジャンプ率や、リストやテーブルの見せ方など、主要な構成要素の大きさや余白を決定し、ワイヤフレームを複数人で作る場合、見た目が統一感があるようにする。（もう少し後でも良いか）

担当：UXデザイナー

ワイヤーフレームを作成する

字コンテをもとに、各ページのワイヤフレームを作成する。ワイヤーフレームの構成は、先に作成したデザインガイドラインに準拠するようにする。
原則、全レイアウトパターンの画面を作成する。

担当：インフォメーションアーキテクト／ディレクター

下流工程（実装工程）

ビジュアルデザインを作成する

デザインガイドラインにビジュアルデザインを反映し、ワイヤーフレームを参考に、差別的優位点に関するページはもちろん、主要ページのビジュアルデザインを作成する。

担当：UXデザイナー／グラフィックデザイナー

コンテンツの作成をする

原稿にもとづいて、取材等を経てライティングや写真の撮影を行い、図版やイラスト、インフォグラフィック等の作成を行う。写真素材は、高精細液晶に耐えうるように2倍サイズも作成し、スマホとPCで出し分けできるようにする。

当然、コンテンツは、差別的優位点を全面におしだしたものにする。

担当：コピーライター、カメラマン、グラフィックデザイナー

コーディングを行うか、発注する

デザインガイドライン、ワイヤーフレーム、ビジュアルデザインを元に、コーディングを行うか、発注する。コーディングは、SASSなどのCSSプリプロセッサーをつかって効率化を行い、クラス等の命名規則もFLOCSSやBEMなどをつかって、メンテナンス性がよいものを作成する。

担当：フロントエンドエンジニア

CMSの実装を行う

コンテンツ作成段階から、並行して、サーバーの構築や、CMSのインストール作業を行い、コーディングデーターが上がってきたところで、CMSのテーマテンプレートの開発を行う。仮データを投入し、想定していた見た目を再現できているか確認する。

WordPressなど、動的生成のCMSはもちろん、Movable Typeなどの静的生成のCMSの場合でも、キャッシュプラグインの実装や、サーバー側での圧縮など、高速化の施策を行うようにする。

担当：エンジニア

CMSにコンテンツを投入する

実装が完成したCMSに、本番原稿を投入する。WordPressであれば、ブロックエディターを使って、原稿の指示通り、見出しレベルを設定し、画像も投入する。SEO対策として、ディスクリプションのような表示されない原稿の投入や、画像のaltなども確実に入力するようにする。

リニューアルの場合は、旧CMSからコンテンツをエクスポートし、新環境にインポートできるかテストを行い、インポート後、正常にインポートされているか確認、修正を行うようにする。URLが変わる場合は、リダイレクトの設定を忘れないようにする。

担当：編集者／コンテンツエディター／お客様／ディレクター

運用ツールを設定する

CMSの実装段階で行うことだが、Googleアナリティクスや、Googleコンソール、sitmap.xmlの生成等を行い、運営段階で困らないようにする。

担当：エンジニア

公開して、運用フェーズへ移行する

一通りサイトを確認して、問題がなければ、ステークフォルダーの承認を経てサイトを公開する。公開はDNSの切替で行うことが多い。

公開後は、SEOキーワードで検索されるようになったか等を監視し、1月たったら、ログ解析の報告を行う。

また、CMSのメンテナンスを常に監視して行うようにし、バージョンアップの場合は、データーベースのバックアップ等を確実に行い、バージョンアップすること。

担当：エンジニア／ディレクター

コンテンツの更新を継続して行う

コンテンツSEOの考え方に基づいて、品質の高いコンテンツを継続的に更新する。更新コンテンツは、差別的優位点を参考に、更新リストとしてコンテンツの一覧を作成しておき、どのぐらいの頻度で配信するか計画を立て、執筆依頼も含めて、コンテンツの収集に努める。

計画的に配信したコンテンツは、SNS等でも配信し、シェアやいいねがどのくらいついたかを一覧にしてまとめ、ユーザーのコンテンツニーズを把握するようにする。

また、短期的な集客のため、リスティング広告、SNS広告等についても検討を行い、計画的な集客を行い、PDCAのループを回す。