2.トンマナ(Tone & Manner)を決める

こんにちは!karen.k デザイナーのカレンです。

早くも3記事目になる「初めてのワードプレス」今日は2. トンマナを決めるです!トンマナを語るには、沢山の予備知識が必要、かつ、考えるべきことも膨大にあるのですが、ボリューミーになりすぎないよう、初心者のサイト制作に必須のpointを厳選して書いていきます。

今日の内容はいつもに増してサイト制作初心者の方に向けて書いています。仕事としてデザイナーをしたい方/している方は、デザインを勉強するためだけにこの記事を参考にし、実際の案件ではこの方法を使用しないでください。腕が鈍り成長も止まります。「初めてのワードプレス」シリーズがひと段落したら、デザインコラムを書いていきますので、そちらをご参照ください。

トンマナ(Tone & Manner)とは?

トンマナは「Tone & Manner(トーン&マナー)」の略で、デザインの一貫性を保つための“ルール”のことです。ブランディングの為にとても重要で、ルールをあらかじめ決めておくことで、一つの印象(ブラントイメージ)を作ることができます。例えば、karen.k が目指すブランドイメージと、それを達成するためのトンマナは以下のようになります。また、ブランドイメージがそのままターゲット層になります。

ブラントイメージ
 ・シンプルモダン/おしゃれ
 ・女性らしい柔らかさ
 ・丁寧/こだわり/ゆとり

トンマナ
 ・基本の色は白とグレーで全体的に淡いトーン
 ・差し色は①ピンク②水色③オレンジ④グリーン
 ・フォントは全てゴシック体
 ・文字の行間は2.4px開ける
 ・大見出し(h1)32px/中見出し(h2)24px/小見出し(h1)20px/本文(p)16px
 ・ですます調で丁寧な日本語

リストにしてあげると、たくさんのルールがありますが、初心者のみなさんがまず一番に考えるべきことはブランドイメージとそれを表現するための色合い/色のトーンです。それ以外の項目は頭の隅に置いて、まずは色合い/色のトーンを決め、サイト全体を通して統一させることを意識しましょう。

色合い/色のトーン(Tone)を決める

では、実際に色を決めていきましょう!好きな色は青と黄色なので、青をベースに黄色をちょろっと……

ちょっと待ってください!!

色合いを決める際に初心者が最もやってはいけないことは、お手本を見ずに自分の感覚だけで決めてしまうことです。色は色鉛筆のように12種類だけではありません。微妙な違いを含めると数えきれない数の色が存在します。青と黄色の二色を取っても、どのトーンの青や黄色を使うかで印象はかなり変わってきます。色合いについてもっと詳しく書きたいのですが、日が暮れてしまうので、簡単に綺麗な色合いを決める方法をご紹介します。

簡単に綺麗な色合いを決める方法、それは、参考サイトを探すことです。そして、その参考サイトの色を真似ましょう。そんなのパクリじゃないかって?デザインは、パクってパクってパクリまくっていいとこ取りをしてより良くなっていくものです。デザインだけではなく、人間の所業は全てそうではないでしょうか?またこんなことを書いていると、進まないので話を戻しますが、参考サイトを探すのにはピンタレストがオススメです。

探し方は、まず、あなたが作りたいブランドイメージを言語化しましょう。私の場合は「シンプルモダン/おしゃれ」「女性らしさ」「丁寧/こだわり/ゆったり」です。言語化できたら「サイト おしゃれ デザイン」「サイト レディース デザイン」「サイト シンプル デザイン」といった具合に、キーワード検索をしてください。検索結果の中からあなたの好きなサイトデザインを1つピックアップして、そのサイトの色使いを参考に色を決めていきましょう。

これだけでOKです。難しいことは考えずに、最短距離で進みましょう。カラーコーディネートの勉強をする必要はありません。色は#f4f4f4という具合に6桁のアルファベットと数字で表されます。目視で似た色を選択するのではなく、1色1色コードを確認して完コピしてください。サイト内の全ての色を調べる必要はありません。まずは、多く使われている順に2~3色ピックアップしましょう。

色のコードを確認する方法は以下を参考にしてください。Google Cromeでの確認がオススメです。

カラーコードの確認方法


数字 ピンタレストに表示されているURLからそのサイトに移動する

カラーコードの確認方法

検証ツールを使ってカラーコードを調べる

検証ツールはGoogle Cromeが使いやすくてオススメです。
「option+command+I」で検証ツールを画面下に表示したら、左上の矢印ボタンをクリックし、カラーコードを調べたい箇所にカーソルを合わせてください。そうすると#〇〇〇〇〇〇で表記されているカラーコードを見ることができます。

カラーコードの確認方法

色にルール(Manner)を与える

使用する色が決まったら、色にルールを与えます。ルールも完璧を目指すと永遠にサイトが完成しなくなってしまいますので、最低限必要な4つのルールのみ決めていきます。

見出しの色(メインカラー)
・本文の色 ※時にこだわりがない場合 #333333 のグレーがオススメ
・背景の色(ベースカラー)
・差し色/アクセントカラー

ルールを決める時も、色を決める時と同じように、参考サイトを真似ましょう。

このサイトのルールは以下のようになっています。

・見出しの色(メインカラー) : グレー(#333333)
・本文の色
: グレー(#777777)
・背景の色(ベースカラー)
: 白(#ffffff)/グレー(#f9f9f9)
・差し色
: ピンク(#f98c8c)/水色(#9dd1cd)/オレンジ(#f9ad62)/グリーン(#7fd6ac)

ここまで決めて、ようやくサイト制作の下準備の半分が完了です!多少めんどくさいですが、この工程をやるとやらないとでは、サイトの完成度が全く違います。色が決まったら、フォント→レイアウトの順に決めていきます。フォントについては、4.テーマを決めるの記事で触れていますので、そちらをご参照ください。

まとめ

今日のまとめは、賛否両論あるかと思いますが参考サイトを決め、徹底的に真似る!です。相当センスに自身のある方でも、自己流でデザインをするというのはかなりリスキーです。サイト制作の際には必ずお手本にするサイトを見つけておきましょう。

次回は、ワイヤーフレームについて解説していきます!紙とペンを用意して待ていてくださいね!

コメントを残す