見出し画像

今さらですが「トンマナ」って何ですか?

こんにちは。
ajikeでUI/UXデザインを担当しているハラです。
最近の趣味は、夏が終わるまでにプールに何回行けるか挑戦することです。
がんばります。

はじめに

最近、ajikeには2名の新人デザイナーと1名のディレクターが入りました(ようこそ、ajikeへ!)

今回は、同じように新しくデザイナーになった新人の方に向けて、「トンマナ」について書いていきたいと思います。

「トンマナ」って何?

「このトンマナで下層デザインお願いします!」

新人の頃、その聞き慣れないカタカナに「???」となり、頭を悩ませていたことを思い出します。

【トンマナ】
「トーン&マナー」の略で、デザインの方針やルールのこと

トーン(調子)とマナー(作法)を定義し、それに則ってデザインをすることで、一貫性のある表現が可能になる、というものです。

それではその「トンマナ」とはどうやって決めるのでしょうか?

「トンマナ」を作成する前に

私がデザインをする時に大事にしているのは、言語化をすることです。

どんなユーザーがいて、どんな課題があって、どうやってそれを解決するのか、まずはデザインに入る前段の部分を言語化し、チーム内の認識を合わせることが重要だと考えています。

そして、言語化された課題解決する手段(デザイン)の方針を定めるのがトンマナです。

なので、まずはトンマナを定義する前にプロジェクトの方針を言語化し、チームの共通認識を統一することから始めてみてください。

それでは、さらに具体的に「トンマナ」を細分化していきましょう。

トンマナを形作るもの

1. 色

「色」を言葉にしてみてください、どんな言葉を思い浮かべますか?

「赤」 … 温かい、情熱的、りんご などでしょうか?

人によってパッと思い浮かべるものは違うと思います。
色についても詳細な言語化をすることで、「共通の赤」=「トンマナ」を決めることができます。

また、色は「色相」「彩度」「明度」3つの性質からできています。(色の三属性といいます)
この3つの性質が与える印象を理解していると抽出したキーワードから色を決めることができるようになります。

2. 線

「線」と一言で言っても種類は色々あります。
細いのか、太いのか、直線なのか、斜線なのか、実線なのか、点線なのか。
細ければ繊細な印象になったり、太ければポップな印象になったり。
線が与える印象を理解して、キーワードに合った「線」を選ぶことが重要です。

3. 形

「丸」や「四角」「三角」など、それぞれ与える印象がまったく違います。「四角」は安定感や信頼感がありますし、「丸」は柔らかさや楽しさなどを表現することができます。
こちらもキーワードに合わせて、選んでいくことが重要です。

4. 文字

セリフ体なのか、サンセリフ体なのか、普遍的なタイプなのか個性的なタイプなのか、太いのか細いのか。
フォント選びはデザインの中で重要な分、頭を悩ませる部分だと思います。
ajikeのデザイナーがフォントに関する記事を投稿しているので、ぜひご覧ください。

5. 質感

材質が持つ視覚的・触覚的な性質のことで、触って感じる質感と視覚で感じる質感、動きで感じる質感などがあります。
サイトの中でのボタンや背景の表現、アニメーションなどで表現することができます。

6. 空間

代表的なのは、ネガティブスペースと呼ばれるものです。
スペースを有効的に使うことで、視線の動きや印象付けたいものを強調することができる方法です。その反対に形のあるスペースをポジティブスペースと呼びます。

7.立体

3次元の考え方のことです。
影を付けてパーツごとに階層を表現するなど、マテリアルデザインなどの考え方が参考になります。
マテリアルデザインについてもajikeのデザイナーがまとめていますので、ぜひご覧ください。

まとめ

7つの要素はデザインを形作る基本の要素と呼ばれ、この要素を意識してトンマナを作成していくと、サービス全体で一貫性のあるデザインができるようになります。

新人の頃は、大きな壁になるのがこのトンマナ作成だと思いますが、できるようになるととても楽しい作業なので、上記の考え方を参考にしていただけたら幸いです。

ここまで読んでいただき、ありがとうございました!

#デザイナー #デザイン #UIデザイン #WEBデザイナー

この記事が気に入ったらサポートをしてみませんか?