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

はじめに

自己紹介

株式会社コンセント アートディレクター/デザイナー

2011年入社（前職は映像デザイナー）

担当範囲：

• webサイトの設計/デザイン • モバイルアプリの設計/デザイン • 映像制作

など

山口 陽一郎

雑誌・書籍・ウェブサイトの企画／編集 !

雑誌・書籍のエディトリアルデザイン !

ウェブサイトの設計／デザイン／実装／運用 !

各種ユーザーインターフェイスの設計・デザイン !

電子書籍・デジタルコンテンツ制作

など

コンセントの主なアプローチ

「モノ（＝成果物）」だけではなく

「コト（＝体験・しくみ）」のデザインで

長く良い関係を

企業と消費者との間に築いていく

誰に 幸せにになって ほしい？

伝えたいことは なんだろう？

10年後も 使える？

そもそも やる必要が ある？

クリエイターの 自己満足に なってないか？

競合にない 魅力はある？

２秒で 伝わる？

Output! ほんとうに必要なものを導きだして、かたちを与える。

つくりかたを

つくる会社

私見

The ustwo™ Pixel Perfect Precision Handbook 2 日本語版

弊社サイトの「ラボ」からダウンロードできます。

NEW

本日のメニュー

1. はじめに • トーン&マナーとは

• なぜ大事なのか

• 概念のエンコード

• 同じゴールを見続けるために

• どのタイミングで行うか

2. 実践してみる • いろんなサイトのビジュアルをマッピングして比較しよう

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

• フォントは声色

• カラースキーム

• ムードボードを作る

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

!

3. 毎日の中で • 世にある幾多のサイト、 ただ見るだけじゃもったいない

• ややこしくないです

トーン＆マナーとは

トーン＆マナー

デザインの属性・キャラクター=

【機能性を高める】 ・理解しやすくする ・目的を達成しやすくする ・迷わせない ・一貫性のあるルール

【トーン＆マナーの演出】 ・属性や世界観を伝える要素 ・メッセージを伝えるための 　色・形・言葉の軸となるもの

デザインの役割

サイトの目的にふさわしい

属性・キャラクターづくり

webサイト制作における

トーン＆マナーとは

つまり…

なぜ大事なのか

1. 概念のエンコード

なぜ大事なのか

なんのためのサイトを作るか どんなサイトを作るか＆

ふたつは異なる問題

なんのためのサイトか

たとえば…

• 商品をもっと売りたい

• 新しいサービスを認知させたい

など。

サイトを作る目的。サイトコンセプトの定義

どんなサイトか

導きだされたコンセプトに

温度や肌触りを与える

どんなサイトか

導きだされたコンセプトに

温度や肌触りを与える !

概念を目に見えるものに 変換するのが デザイナーの役割

2. 同じゴールを見続けるために

なぜ大事なのか

「なんのためのサイトを作るか」の段階では

合意をとれたクライアントも…

!もっと派手に！

!もっと

強そうなやつ！

!ドーン！！！

実際に絵をみていく段階になると

いろいろな欲が出てきます。

!可愛く！

事前にクライアントやチーム内で

トーンについての共通認識を資料化し、

共有しておくことが大事（詳しくは後述）

事前にクライアントやチーム内で

トーンについての共通認識を資料化し、共有しておく（詳しくは後述）

設計からリリースまで 同じゴールを見て プロジェクトを進められる

どのタイミングで行うか

ビジネス要件定義 クライアントになにを 提供しよう？

掲載する コンテンツの整理 なにをいくつやるのか

（ページ数でなくコンテンツ数）

サイトコンセプト定義 プロジェクトの指針・

このサイトはなにを大切にする？

サイト設計 ページをどう分ける？

どんなナビゲーションが最適？

トーン＆マナー設計

デザイン

コーディング・ システム実装 リリース！

サイトの構造設計と並行して

（もしくはちょっと後に）

トーン＆マナーの設計を行い

クライアントと合意をとっておく。

これにより、実際のデザインを起こしたとき

話をスムーズに進めやすい。

実践してみる

いろんなサイトの

ビジュアルを

マッピングして

比較しよう

競合サイトのキャプチャ画像を

座標軸上に並べて比較する

座標軸は

Soft←→Hard

Warm←→Cool

を用いることが多いが

場合によって自由に定義

Soft

Hard

Warm Cool

Soft

Hard

Warm Cool

マッピングすると競合サイトの印象を

俯瞰して認識することができる。

そのうえで、競合との差別化をはかるのか、

もしくはどこかに寄せてゆくのか、座標上で

大まかなデザインの目的地を決める。

Soft

Hard

Warm Cool

!このあたりかな…

• マッピングは複数人で行うとより効果的。

• 「正解を探す」ことより「間違っているものを取り除く」ことのほうが簡単であり、ヒントとなりやすい。

• クライアントとの打ち合わせの場で用いると、具体的なイメージの共有ができるので便利。ロジックだけで話が停滞することを防げる。

ウェブサイトに

人格を与えよう

メッセージはどのように届けられるべきか。

サイトに人格があり、

彼/彼女が語りかけていると想像してみる。

ラベリングや細部のあしらいを決めるときの

指針となる。

人格を想定することで、

メッセージの投げかけ方を

イメージしやすくなる。

世話好きの近所のおばちゃん 落ち着いた振る舞いの紳士

上品で都会的なお姉さん 聞けばなんでも答えてくれる博士

たとえば

上品で都会的なお姉さん

たとえば

上品だけど 可愛さもある 言葉遣い

余白の多い すっきりした画面

太すぎる フォントは禁物

彩度が高すぎない 落ちついた色

• 有効な手段ではあるが、あくまで思考の補助として用いる。

• 案件によってはノイズになる場合も。

フォントは声色

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

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

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

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

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

Soft

Hard

Warm Coolここでも座標が登場。

軸に沿って書体のマッピングを

行ってみる。

Soft

Hard

Warm Cool

憩いの空間

憩いの空間

憩いの空間

憩いの空間

憩いの空間

憩いの空間

憩いの空間

憩いの空間 憩いの空間

憩いの空間

憩いの空間

憩いの空間

カラースキーム

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

多くの場合必要になる色

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

!web特有で

非常に大事な色

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

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

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

カラースキームの参考になるサービス

例：Adobe Kuler

• デザインを始めると同時にカラースキーム専用のpsdを作り、常に使用している色を管理しておくことが大事。

• リンクカラーは周囲に埋没しない色にする。

• トップページだけでなく下層でも同じ色で展開できるか検証する。

• 色見本などはそのまま使おうとするのではなく、「これは違う」というサンプルを除外してゆくために使うことをオススメします。

ムードボードを作る

イメージに近い属性をもった 絵や写真や文字などを

ひとつの画面にまとめた資料。 イメージを複数人で共有するうえで

強力なツール。

ムードボードとは

イメージ

ムードボードの強み

デザイン案よりも短時間で作成できるため、

トーン＆マナーの比較検討が楽になる

最初からデザイン案を作った場合

Client Designer

いくつか 雰囲気が違うのを 見比べたいな

はいっ！

スケジュール的に ２案が限界かな…

最初からデザイン案を作った場合

できた？２案

持ってきました！

design

Bdesign

A

えっ

design

Bdesign

A

他にはないの？

自分の中ではA案／B案で しっかりトーンを振り分けたつもりでも

お客さんにとっては さほど印象は離れていない場合は多い。

ムードボード作りからはじめた場合

Client Designer

いくつか 雰囲気が違うのを 見比べたいな

はいっ！

みんなで 作ってみよう！

Project Team

そんなときに

できた？

ひとまず 方向性を探る 資料を持って きました

Mood Board

BMood Board

A

かしこまりました！ 　次回はデザイン案を

持参しますじゃあEの方向で 頼むよ

Mood Board

C

ムードボード作りからはじめた場合

Mood Board

EMood Board

DMood Board

F

Mood Board

BMood Board

AMood Board

CMood Board

EMood Board

DMood Board

F

• スケジュールに比較的余裕があるプロジェクトの場合に有効。（すぐにデザイン案を見せる必要があるときには使うことが難しい）

• デザイナー以外のメンバーでも作ることができるので、ディレクターやディベロッパーと認識を合わせるためのコミュニケーション手段にもなる。

ムードボード作成に役立つツール

Mural.ly Mood Board Creator

Pinterestをムードボード代わりに使う

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

とはいえ…

いきなり

ジャンプはできない

まずは一番

「素直」なものを

作ってみる

新しいサプリメント

「NatureBits」の販促サイト

例

訴求したい商品価値

• 国産の自然栽培原料だからカラダに優しい！

• 規則的に栄養をとれない社会人を助ける！

• NatureBitsとは

• 商品ラインナップ

• コラム

• よくある質問

主なコンテンツ

与えられている素材

ロゴタイプ パッケージ

ワイヤーフレーム

ロゴ

一粒で栄養補給！ リード文が入りますリード文が

入ります

NatureBitsとは 商品ラインナップ コラム よくあるご質問

NatureBitsとは

リード文が入りますリード文が入り

ます

商品ラインナップ ライフスタイルに合わせた

NatureBitsをご用意しています

コラム

「最近、疲れがとれにくい…」そんなあなたに

心と身体の両方に効く耳寄り情報！

フッター（コピーライト・関連リンク・よくあるご質問への動線）

エリアの定義

ロゴ （ホームへの動線）

イメージ訴求エリア

グローバルナビゲーション

NatureBitsとは

商品概要への誘導

商品ラインナップへの誘導 コラムへの誘導

補助的なナビゲーション・補助的な情報

ワイヤーを噛み砕いて、 どこにどんな目的をもったエリアがあるのか

それぞれの優先度はどういう順番か といった点を簡単な図にしてみよう。

こうしておくと、 「デザインでなにをやるべきか」が

クリアに見える。

トーンの方向を探る

国産自然栽培原料

健康を補助する

手軽に摂取できる

安全・ナチュラル

やさしい・信頼感

親しみやすさ

商品の特徴 想起されるトーン

トーンの方向を探る

安全・ナチュラル やさしい・信頼感 親しみやすさ

余裕のある レイアウト

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

重厚ではない ゴシック体

見出しでも 太すぎない フォント

直線的な 構成

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

重厚ではない ゴシック体

見出しでも 太すぎない フォント

一粒で栄養補給！

一粒で栄養補給！

一粒で栄養補給！

一粒で栄養補給！

一粒で栄養補給！

一粒で栄養補給！やさしい・信頼感

親しみやすさ

Warm

Cool

一粒で栄養補給！

ひとつめの案を作ったら、考えを整理

食品なのになんだか堅苦しい?

日常的に使うものなのに ちょっと事務的な匂いがする

直線的な要素が多いから。 グリッド感を弱めて

開放的な画面にしてみよう

フォントをもう少し 暖かみがあるものに

変えてみよう

大事なのは、ひとつめの案を作ることで それに対してカウンターとなる

別の案を作りやすくなるということ。 また、心理的な負担も減らしてくれる。

毎日の中で

世にある幾多のサイト

ただ見るだけじゃ

もったいない

なにかひとつ

いいところを探して

言葉にしてみる！

• ブックマークサービスを利用しているなら、登録するときにトーンのタグをつけてゆくと、感覚を整理できるし後々引っ張りだしてくるのも楽。

• 「これはあの本のトーンに似ている」「これはあの建物の印象に似ている」など、web以外のものに例えてみると、htmlに限定されないイメージをつかみやすい。

ややこしくないです

誰でも日常的にやっている トーン＆マナー設計

友人へのプレゼント、なにをあげると喜んでくれるだろう？

結婚式の二次会、どんな服が場にふさわしいだろう？

ホームパーティーでみんながテンション上がる料理はなんだろう？

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