設計・仕様策定フェーズの進め方。上手くいくかどうかはこれ次第！

ウェブ制作の進め方について、フェーズごとにまとめ全3回にわたってお伝えしています。

今回は第2回「設計・仕様策定フェーズ」についてお届けします。

前回はサイトの方向づけに重要な戦略作成や企画のフェーズについてお話ししました。

ここでは、主にターゲットの決め方やメッセージの作り方などサイトが機能するために大切なことをまとめています。

前回の記事がまだの方は、こちらに目を通していただいてから本記事を読んでいただくほうがより理解しやすいと思います。

関連記事
戦略策定・企画フェーズの進め方。サイトを方向づける最初の一歩。

設計・仕様策定で決めること

設計・仕様策定フェーズとは、戦略・企画に基づき、目的を達成するために必要となるサイトの構造や画面の構成要素などを定義したり、機能などを洗い出し、仕様としてまとめるフェーズです。

実際にウェブ制作ではこれらの設計が必要になります。

• シナリオ・導線設計
• サイト構造設計
• コンテンツの企画・設計
• ファイルリスト作成・URL設計
• 画面設計・ワイヤーフレーム作成
• ビジュアルデザイン設計
• 機能要件定義・設計
• 外部サービスの仕様確認

ここからは各種設計をどのように進めていくのかについて話を進めます。

シナリオ・導線設計

シナリオをつくるには、企業側がユーザーにとってほしい行動と、ターゲットがとるであろう行動をどのようにマッチングさせるかを考えます。

ターゲットが何を求めてサイトに流入し、サイト上でどのような行動を取るのかを考えていくのですが、ここで重要なのはユーザは企業側にとって理想の行動をすることはほとんどないということです。

このフェーズでは、企業側の都合のいいようなシナリオをつくるのではなく、ユーザーの感じることを想像しながらリアルに考えていくことが重要です。

ユーザーの視点に立って考えるために、カスタマージャーニーなどのフレームワークを用いることもあります。

どんな情報をどのタイミングで置くことでユーザーの役に立つことができるのか、導線を設計する大切なフェーズです。

サイトの構造設計／コンテンツ企画・設計

サイト全体の構造を決めるためには、伝えたい情報を届けるのに必要なコンテンツを洗い出すところから始めます。

初期段階から必要だとわかっているコンテンツもあれば、情報を効果的に伝えるためにユーザーの興味を引くような企画を盛り込みコンテンツ化することもあります。

サイト全体に必要なコンテンツはどこに出せばユーザーが欲しいタイミングでたどり着くのかを考えたものを「コンテンツマップ」と呼ばれるようなもので整理・可視化していきます。

そして、コンテンツを通して伝えたい情報・ユーザーが欲しい情報を過不足なく表現するには、どのようなページがどれくらいあればいいのかを具体的にするため「サイトマップ」としてサイト全体の構成を落とし込みます。

サイトマップを考える時は、どのページにどのような役割を持たせるかということを考えることも重要です。

例えばトップページの役割は「ユーザーの興味を惹き、より見て欲しいページに引き込むための役割」だとすると、次にどのようなページを用意すればいいかを考えることができます。

このようにサイト全体で必要なコンテンツからをページに割り振り、サイトの構造を設計していきます。

ファイルリスト作成・URL設計

ファイルリストとは、一般的にはページ構成やURL、ページタイトル、ページの概要（ディスクリプション）など、ウェブサイトに関わる情報を表にまとめたシートです。

サイトの全体の構造やページ構成が決まると、各ページのURLを決めていくことができます。

「URL設計」と書きましたが、それはページ数が多いなればなるほど、URLの命名にもルールが必要になるからです。重複や対応関係、ユーザーにとってのわかりやすさを考慮することも重要です。

画面構成・ワイヤーフレームの作成

これまではサイト全体の構造を検討していましたが、ここからの検討事項はページの中に移っていきます。

伝えたい情報・ユーザーが知りたい情報を伝えるために、ページごとに必要な要素・順番・配置を検討し、画面の構成を決めていきます。

各画面の構成をより具体的にしたワイヤーフレームに落とし込んでいきます。ワイヤーフレームでは内容や配置以外にも、情報を出す大きさや優先度、どんなメッセージを置くとよいのかがわかるような仮原稿を入れていき、ページ全体の構成を詰めていきます。

ビジュアルデザイン設計

サイト全体のデザイン、トーン&マナーを決めるフェーズです。

ビジュアルデザインの役割の一つは、ウェブを通じて伝えたいメッセージをビジュアルを通じて効果的に伝えることです。

また、他にもユーザーにどんな企業だと思われたいかを表現する役割もあります。

地に足をつけた誠実・堅実な会社だと感じてほしい場合と、急成長している勢いのある会社だと思ってもらいたい場合ではトーン&マナーが大きく違ってきます。

私たちは選ばれるためには、違いを感じてもらうことが重要だと考えています。

どのようなビジュアルであれば、メッセージや「らしさ」が効果的に伝わるのか、を検討することが重要です。

機能要件定義・設計／外部サービスの仕様確認

ウェブサイトに必要な機能があれば、なるべく早いタイミングで検討を進めましょう。

どのようなCMSの導入が必要か、システムの開発が必要なのか、サードパーティを導入すれば満たせるのか。

必要な機能を洗い出すし、機能を満たすための仕様を検討します。

設計次第次第で上手くいくかどうかは決まる

設計・仕様策定フェーズで決めるべき各種設計事項をお伝えしました。

制作フェーズや運用フェーズにダイレクトに影響を与えるのがこの設計フェーズです。

機能するウェブサイトをつくるためには、サイト全体の構造から、ユーザーにとって有益だと感じてもらうための情報の出し方や、見せ方を検討・決定をしながら制作を進めることが重要です。

次回は「制作・実装フェーズ」から「運用フェーズ」までの進め方についてです。

最終成果物の制作・実装作業で行うこと、サイト公開後の運用で行うことなどについてお伝えします。

次回も一週間後に更新予定！