Webサイトの構築に際して、デザイナーの領域とされていたデザインのトーン＆マナーの方向性を導き出すため、簡便な手法をまとめた資料です。

1. Webデザインのトーン＆マナーを
導き出す手法
2014年7月11日
Webディレクター 田附克巳
k.tazuke@gmail.com

2. １．本資料の概要と対象読者
２．トーン＆マナーとは
３．お客様にキーワードを出していただく
４．お客様にイメージをさらにヒアリング
５．ターゲットユーザーを具体化する
６．マッピング軸を決めていく
７．ムードボードの作成
８．ムードボード作成に使えるネット画像検索の例
９．ポジショニングマップ・ムードボードへのプロット
目次
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

3. １．本資料の概要と対象読者
Webサイトの構築に際して、デザイナーの領域とされていたデザイン
のトーン＆マナーの方向性を導き出すため、簡便な手法をまとめた資
料です。
デザインの専門教育を受けておらず、デザイナー職のキャリアを持た
ないWebディレクター向けに作成しています。
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

4. ２．トーン＆マナーとは
WebデザインにはそのWebサイトを訪れた人にこう感じて欲しい、こ
んな印象を持って欲しいという意図や狙いが必ずあります。
その意図や狙いを咀嚼・分析して、視覚的なビジュアル表現をするた
めの方向性の指針（ガイドライン）となるものがトーン＆マナーで
す。
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

5. ３．お客様にキーワードを出していただく
Webサイトを発注する顧客担当者から、「こうしたい」「こうであっ
て欲しい」というWebサイトへの想いを、短い言葉でキーワードとし
て出していただきます。
スピード
感のある力強い
安心
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

6. ４．お客様にイメージをさらにヒアリング
Webサイトを発注する顧客担当者から、「こうしたい」「こうであっ
て欲しい」というWebサイトへの想いを、『かたちに例える』『オマ
ノトペ（擬声語・擬態語）』『形容詞』などで伝えてもらいます。
丸い
がやがや
暖かみ
のある
ワクワク
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

7. ５．ターゲットユーザーを具体化する
どんな人にこれからデザインするWebサイトを見てもらいたいのか、
その対象となるターゲットユーザーを具体化します。
できれば、「ペルソナ」を構築して、ライフスタイルなどの情報も記
載するのが理想ですが、デザインのトーン＆マナーを作成するには、
下記デモグラフィック属性だけでも十分です。
項目 内容／値
年齢 40～50歳ぐらい
性別 男性
職業 会社員（中小規模）
住所 関東圏
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

8. ６．マッピング軸を決めていく
３．４でお客様から得られたキーワードをもとに、ポジショニング
マップの２つの軸を作成します。まずは複数案を作成し、その中から
キーワードの意図を最も表現している2軸を選定するようにします。
■ポジショニングマップの例
親しみ
やすさ
高級感
情熱的
クール
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

9. ７．ムードボードの作成
３．４でお客様から得られたキーワードおよびターゲットユーザーをも
とに、類語辞典や百科事典、配色辞典を参照するなどして、そのキー
ワード（言葉）に相応しいビジュアルイメージ（写真やイラスト）を多
数収集します。インターネットの画像検索が便利ですが、必ずWebディ
レクター自身が目視でチェックして、Webデザインの参考になる画像だ
けを残すようにします。
■ムードボードの例
※雑誌やパンフレットなど
紙媒体でもOKです。
むしろ画面以外のアナログ
なイメージの方が雰囲気を
つかむこの段階では望まし
いです。
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

10. ８．ムードボード作成に使えるネット画像検索の例
Imagenavi http://imagenavi.jp/
インターネットの画像販売サービスなどで、キーワードを打ち込んで、
その単語に相応しい写真やイラスト画像を表示してくれるWebサイトが
あります。
Googleの画像検索では、トーン＆マナーの参考には的外れの画像も多数
ヒットしてしまいますので、このようなWebサービスを活用するのも一
案です。
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.

11. ９．ポジショニングマップ・ムードボードへのプロット
この作業は、顧客の意見を対面で聞きながらも可能ですし、Webディ
レクター側で案を作成し、案を見ながらプロット位置を変更していく
方法もあります。
最終的には、これから作成するデザインが、ポジショニングマップの
どこに位置づけられるか、ムードボードのイメージ素材のどれに雰囲
気が近いのか、顧客と共有することが重要です。
■ポジショニングマップ
親しみ
やすさ
高級感
情熱的
クール
自社サイト
■ムードボード
Webデザインのトーン＆マナーを導き出す手法
(c) copyright 2014 Katsumi TAZUKE All Rights Reserved.