2-1．コンテンツ設計のロードマップ【サイトマップ・カラースキーム】【ホームページ制作】

アカイです。今回はホームページ制作でのコンテンツ設計（サイトマップ・カラースキームなど）のまとめ方流れを説明します。

お客さんとのやり取りを密に行う必要があるため、

過去に8年以上システム開発プロジェクトを行った私が、お客さんとモメないコツもお伝えします。

 

☆コンテンツ設計の詳細ロードマップ

詳細ロードマップに入る前に、用語の定義をします。

・本記事の言葉の定義

本記事の用語前提として、以下の言葉を使います。

ユーザ：Webサイトを作りたいお客さん

PM（プロジェクトマネージャー）：Webサイトを企画する人

デザイナー：Webサイトを設計・デザインする人

コーダー：Webサイトをプログラミングする人

 

・コンテンツ設計の詳細ロードマップ

詳細ロードマップは以下の通りになります。

１．サイトマップを設計する

　・必要なページと内容を議論する

　・サイトマップを作成する

２．カラースキームを設計する

　・サイトカラーを議論する

　・カラースキームを作成する

３．未決定事項の管理する

　・未決定事項を洗い出す

　・未決定事項の期限を設定する

　・プロジェクト管理を更新する

 

STEP１：サイトマップを設計する

Webデザインの設計に入ります。

いきなりサイトイメージを提示するのではなく、ユーザとどのようなサイトを作りたいか、サイトイメージの認識合わせを行います。

 

　・必要なページと内容を議論する

どのようばWebページが必要か議論します。

トップページのほか、何の説明ページがいるのか、問い合わせフォームは必要か、など洗い出していきます。

 

　・サイトマップを作成する

必要なページを洗い出したら、ページ同士のつながりや重要度などの構成を図にまとめていきます。

うまくグループ分け、ページに優先順位をつけるといったことを意識してサイトマップを作ります。

 

サイトマップのまとめ方は、以下の記事にまとめてあります。

https://www.kuroyukiblog.com/webdesign-202sitemap/

STEP２：カラースキームを設計する

サイトイメージの認識合わせで確認すべきポイントとして、どのような色をサイトに盛り込むか決めていきます。

　・サイトカラーを議論する

ホームページの色合いをユーザと相談します。

色合いに関する資料や、参考Webサイトを見せつつ、Webサイトで使う色を決定します。

サイトカラーのサンプルは、以下の記事にまとめてあります。

https://www.kuroyukiblog.com/webdesign-203color/

 

　・カラースキームを作成する

ユーザとシステム担当者でサイトカラーの認識が合いましたら、ホームページ制作で必要な色をカラースキームとしてまとめていきます。

メインカラーから文字の色まで綿密に作成します。

 

カラースキームのまとめ方は、以下の記事にまとめてあります。

https://www.kuroyukiblog.com/webdesign-204colorscheme/

 

STEP３：未決定事項の管理

要件事項、サイトマップ、カラースキームの設計まで行えれば、Webデザインの制作へ本格的に取り掛かることができます。

しかし要件事項、サイトマップ、カラースキームの一部が決まらないということも、ユーザの事情で発生します。

そのために未決定事項の管理を行うと、残りの決定事項を把握することが容易となります。

 

　・未決定事項を洗い出す

項目の通り未決定事項を洗い出します。

例えば「必要ページが洗い出せていない」「カラースキームが決まっていない」などがあります。

 

　・未決定事項の解決担当者と期限を設定する

解決担当者と期限を設定するというのは、ユーザにおしりを叩かせるという意味ではありません。

未決定事項はいつまでに終わることを前提約束させて、デザイナーはWebデザインに取り掛かるといった手法となります。

スケジュールに一貫性を持たせることが大きな役割となります。

https://www.kuroyukiblog.com/webdesign-205undecided/

 

☆まとめ

・サイトマップ設計とカラースキーム設計ではユーザとの綿密なやり取りが必要。

・やり取りで決まらなかったものは未決定事項で管理する。

[word_balloon id=”unset” src=”https://www.kuroyukiblog.com/wp-content/uploads/2021/04/Logo02.png” size=”M” position=”L” name_position=”under_avatar” radius=”true” name=”アカイ” avatar_flip=”h” balloon=”talk” balloon_shadow=”true”]次回からは、サイトマップ設計のより詳細な方法を説明するよ！　[/word_balloon]