クリエイターのための
トーン＆マナー設計について

はじめに

自己紹介

山口 陽一郎
株式会社コンセント アートディレクター/デザイナー
2011年入社（前職は映像デザイナー）
担当範囲：
•
webサイトの設計/デザイン
•
モバイルアプリの設計/デザイン
•
映像制作
など

コンセントの主なアプローチ
雑誌・書籍・ウェブサイトの企画／編集
!
雑誌・書籍のエディトリアルデザイン
!
ウェブサイトの設計／デザイン／実装／運用
!
各種ユーザーインターフェイスの設計・デザイン
!
電子書籍・デジタルコンテンツ制作
など

「モノ（＝成果物）」だけではなく
「コト（＝体験・しくみ）」のデザインで
長く良い関係を
企業と消費者との間に築いていく

誰に
幸せにになって
ほしい？
伝えたいことは
なんだろう？
クリエイターの
自己満足に
なってないか？
そもそも
やる必要が
ある？
２秒で
伝わる？
Output!
競合にない
魅力はある？
10年後も
使える？
ほんとうに必要なものを導きだして、かたちを与える。

私見
つくりかたを
つくる会社

NEW
The ustwo™
Pixel Perfect Precision Handbook 2 日本語版
弊社サイトの「ラボ」からダウンロードできます。

本日のメニュー

1. はじめに
2. 実践してみる
• トーン&マナーとは
• いろんなサイトのビジュアルを
マッピングして比較しよう
• なぜ大事なのか
• 概念のエンコード
• 同じゴールを見続けるために
• どのタイミングで行うか
• ウェブサイトに人格を与えよう
• フォントは声色
• カラースキーム
• ムードボードを作る
• まずは一番「素直」なものを
作ってみる
!
3. 毎日の中で
• 世にある幾多のサイト、
ただ見るだけじゃもったいない
• ややこしくないです

トーン＆マナーとは

トーン＆マナー
=
デザインの属性・キャラクター

デザインの役割
【トーン＆マナーの演出】
・属性や世界観を伝える要素
・メッセージを伝えるための
色・形・言葉の軸となるもの
【機能性を高める】
・理解しやすくする
・目的を達成しやすくする
・迷わせない
・一貫性のあるルール

つまり…
webサイト制作における
トーン＆マナーとは
サイトの目的にふさわしい
属性・キャラクターづくり

なぜ大事なのか

なぜ大事なのか
1. 概念のエンコード

なんのためのサイトを作るか
＆
どんなサイトを作るか
ふたつは異なる問題

なんのためのサイトか
たとえば…
•
商品をもっと売りたい
•
新しいサービスを認知させたい
など。
サイトを作る目的。サイトコンセプトの定義

どんなサイトか
導きだされたコンセプトに
温度や肌触りを与える

どんなサイトか
導きだされたコンセプトに
温度や肌触りを与える
!
概念を目に見えるものに
変換するのが
デザイナーの役割

なぜ大事なのか
2. 同じゴールを見続けるために

「なんのためのサイトを作るか」の段階では
合意をとれたクライアントも…

実際に絵をみていく段階になると
いろいろな欲が出てきます。
!
可愛く！
!
もっと
強そうなやつ！
!
ドーン！！！
!
もっと派手に！

事前にクライアントやチーム内で
トーンについての共通認識を資料化し、
共有しておくことが大事（詳しくは後述）

事前にクライアントやチーム内で
トーンについての共通認識を資料化し、共有しておく（詳しくは後述）
設計からリリースまで
同じゴールを見て
プロジェクトを進められる

どのタイミングで行うか

ビジネス要件定義
クライアントになにを
提供しよう？
掲載する
コンテンツの整理
なにをいくつやるのか
（ページ数でなくコンテンツ数）
サイトコンセプト定義
プロジェクトの指針・
このサイトはなにを大切にする？
サイト設計
ページをどう分ける？
どんなナビゲーションが最適？
トーン＆マナー設計
デザイン
コーディング・
システム実装
リリース！

サイトの構造設計と並行して
（もしくはちょっと後に）
トーン＆マナーの設計を行い
クライアントと合意をとっておく。
これにより、実際のデザインを起こしたとき
話をスムーズに進めやすい。

実践してみる

いろんなサイトの
ビジュアルを
マッピングして
比較しよう

競合サイトのキャプチャ画像を
座標軸上に並べて比較する

Hard
座標軸は
Warm
Soft←→Hard
Warm←→Cool
を用いることが多いが
場合によって自由に定義
Soft
Cool

Hard
Warm
Cool
Soft

マッピングすると競合サイトの印象を
俯瞰して認識することができる。
そのうえで、競合との差別化をはかるのか、
もしくはどこかに寄せてゆくのか、座標上で
大まかなデザインの目的地を決める。

Hard
!
このあたりかな…
Warm
Cool
Soft

•
マッピングは複数人で行うとより効果的。
•
「正解を探す」ことより「間違っているものを取り除く」ことの
ほうが簡単であり、ヒントとなりやすい。
•
クライアントとの打ち合わせの場で用いると、具体的なイメージの
共有ができるので便利。ロジックだけで話が停滞することを防げる。

ウェブサイトに
人格を与えよう

メッセージはどのように届けられるべきか。
サイトに人格があり、
彼/彼女が語りかけていると想像してみる。
ラベリングや細部のあしらいを決めるときの
指針となる。

人格を想定することで、
メッセージの投げかけ方を
イメージしやすくなる。
たとえば
世話好きの近所のおばちゃん
落ち着いた振る舞いの紳士
上品で都会的なお姉さん
聞けばなんでも答えてくれる博士

たとえば
上品で都会的なお姉さん
上品だけど
彩度が高すぎない
可愛さもある
落ちついた色
言葉遣い
余白の多い
太すぎる
すっきりした画面
フォントは禁物

•
有効な手段ではあるが、あくまで思考の補助として用いる。
•
案件によってはノイズになる場合も。

フォントは声色

あなただけの、憩いの空間 あなただけの、憩いの空間
あなただけの、憩いの空間 あなただけの、憩いの空間
あなただけの、憩いの空間 あなただけの、憩いの空間
あなただけの、憩いの空間 あなただけの、憩いの空間
あなただけの、憩いの空間 あなただけの、憩いの空間

Hard
Warm
ここでも座標が登場。
軸に沿って書体のマッピングを
行ってみる。
Soft
Cool

Hard
憩いの空間
憩いの空間
憩いの空間
憩いの空間
憩いの空間
Warm
Cool
憩いの空間
憩いの空間
憩いの空間
憩いの空間
憩いの空間
憩いの空間
Soft
憩いの空間

カラースキーム

デザインの中で使用する色をまとめた資料。
とりわけウェブサイトでは、色によって
機能や状態の違いを示すのでとても重要。

多くの場合必要になる色
メインカラー
サブカラー
バックグラウンド
カラー
リンクカラー
!
web特有で
非常に大事な色
テキストカラー

メインカラー
サブカラー
バックグラウンド
カラー
リンクカラー
テキストカラー

メインカラー
サブカラー
バックグラウンド
カラー
リンクカラー
テキストカラー

メインカラー
サブカラー
バックグラウンド
カラー
リンクカラー
テキストカラー

カラースキームの参考になるサービス
例：Adobe Kuler

•
デザインを始めると同時にカラースキーム専用のpsdを作り、常に
使用している色を管理しておくことが大事。
•
リンクカラーは周囲に埋没しない色にする。
•
トップページだけでなく下層でも同じ色で展開できるか検証する。
•
色見本などはそのまま使おうとするのではなく、「これは違う」と
いうサンプルを除外してゆくために使うことをオススメします。

ムードボードを作る

ムードボードとは
イメージに近い属性をもった
絵や写真や文字などを
ひとつの画面にまとめた資料。
イメージを複数人で共有するうえで
強力なツール。

イメージ

ムードボードの強み
デザイン案よりも短時間で作成できるため、
トーン＆マナーの比較検討が楽になる

最初からデザイン案を作った場合
いくつか
雰囲気が違うのを
見比べたいな
スケジュール的に
２案が限界かな…
はいっ！
Client
Designer

最初からデザイン案を作った場合
できた？
２案
持ってきました！
design
B
えっ
design
A
他にはないの？
design
design
A
B

自分の中ではA案／B案で
しっかりトーンを振り分けたつもりでも
お客さんにとっては
さほど印象は離れていない場合は多い。

そんなときに
ムードボード作りからはじめた場合
いくつか
雰囲気が違うのを
見比べたいな
みんなで
作ってみよう！
はいっ！
Client
Designer
Project Team

ムードボード作りからはじめた場合
できた？
ひとまず
方向性を探る
資料を持って
きました
じゃあEの方向で
頼むよ
かしこまりました！
次回はデザイン案を
持参します
Mood
Board
Mood
Board
Mood
Board
Mood
Board
Mood
Board
Mood
Board
A
B
C
A
B
C
Mood
Board
Mood
Board
Mood
Board
Mood
Board
D
E
F
D
Mood
Board
E
Mood
Board
F

•
スケジュールに比較的余裕があるプロジェクトの場合に有効。
（すぐにデザイン案を見せる必要があるときには使うことが難しい）
•
デザイナー以外のメンバーでも作ることができるので、ディレクター
やディベロッパーと認識を合わせるためのコミュニケーション手段
にもなる。

ムードボード作成に役立つツール
Mural.ly
Mood Board Creator

Pinterestをムードボード代わりに使う
自分一人のイメージを超えて、世界中の人がもつイメージでムードボードを作成可能。

とはいえ…

いきなり
ジャンプはできない

まずは一番
「素直」なものを
作ってみる

例
新しいサプリメント
「NatureBits」の販促サイト

訴求したい商品価値
•
国産の自然栽培原料だからカラダに優しい！
•
規則的に栄養をとれない社会人を助ける！

主なコンテンツ
•
NatureBitsとは
•
商品ラインナップ
•
コラム
•
よくある質問

与えられている素材
ロゴタイプ
パッケージ

ワイヤーフレーム
ロゴ
NatureBitsとは
商品ラインナップ
コラム
よくあるご質問
一粒で栄養補給！
リード文が入りますリード文が
NatureBitsとは
リード文が入りますリード文が入り
入ります
ます
商品ラインナップ
コラム
ライフスタイルに合わせた
「最近、疲れがとれにくい…」そんなあなたに
NatureBitsをご用意しています
心と身体の両方に効く耳寄り情報！
フッター（コピーライト・関連リンク・よくあるご質問への動線）

エリアの定義
ロゴ
グローバルナビゲーション
（ホームへの動線）
イメージ訴求エリア
NatureBitsとは
商品概要への誘導
商品ラインナップへの誘導
コラムへの誘導
補助的なナビゲーション・補助的な情報

ワイヤーを噛み砕いて、
どこにどんな目的をもったエリアがあるのか
それぞれの優先度はどういう順番か
といった点を簡単な図にしてみよう。
こうしておくと、
「デザインでなにをやるべきか」が
クリアに見える。

トーンの方向を探る
商品の特徴
想起されるトーン
国産自然栽培原料
安全・ナチュラル
健康を補助する
やさしい・信頼感
手軽に摂取できる
親しみやすさ

トーンの方向を探る
安全・ナチュラル
やさしい・信頼感
親しみやすさ
重厚ではない
ゴシック体
アースカラーを
基調にした
色づかい
直線的な
余裕のある
レイアウト
構成
見出しでも
太すぎない
フォント

アースカラーを
基調にした
色づかい

やさしい・信頼感
親しみやすさ
一粒で栄養補給！
Warm
一粒で栄養補給！
一粒で栄養補給！
重厚ではない
一粒で栄養補給！
ゴシック体
一粒で栄養補給！
見出しでも
一粒で栄養補給！
太すぎない
フォント
一粒で栄養補給！
Cool

ひとつめの案を作ったら、考えを整理
食品なのになんだか堅苦しい?
日常的に使うものなのに
ちょっと事務的な匂いがする
直線的な要素が多いから。
グリッド感を弱めて
開放的な画面にしてみよう
フォントをもう少し
暖かみがあるものに
変えてみよう

大事なのは、ひとつめの案を作ることで
それに対してカウンターとなる
別の案を作りやすくなるということ。
また、心理的な負担も減らしてくれる。

毎日の中で

世にある幾多のサイト
ただ見るだけじゃ
もったいない

なにかひとつ
いいところを探して
言葉にしてみる！

•
ブックマークサービスを利用しているなら、登録するときにトーン
のタグをつけてゆくと、感覚を整理できるし後々引っ張りだしてく
るのも楽。
•
「これはあの本のトーンに似ている」「これはあの建物の印象に
似ている」など、web以外のものに例えてみると、htmlに限定され
ないイメージをつかみやすい。

ややこしくないです

誰でも日常的にやっている
トーン＆マナー設計
友人へのプレゼント、なにをあげると喜んでくれるだろう？
結婚式の二次会、どんな服が場にふさわしいだろう？
ホームパーティーでみんながテンション上がる料理はなんだろう？

ありがとうございました！