今さらですが「トンマナ」って何ですか?
こんにちは。
ajikeでUI/UXデザインを担当しているハラです。
最近の趣味は、夏が終わるまでにプールに何回行けるか挑戦することです。
がんばります。
はじめに
最近、ajikeには2名の新人デザイナーと1名のディレクターが入りました(ようこそ、ajikeへ!)
今回は、同じように新しくデザイナーになった新人の方に向けて、「トンマナ」について書いていきたいと思います。
「トンマナ」って何?
「このトンマナで下層デザインお願いします!」
新人の頃、その聞き慣れないカタカナに「???」となり、頭を悩ませていたことを思い出します。
【トンマナ】
「トーン&マナー」の略で、デザインの方針やルールのこと
トーン(調子)とマナー(作法)を定義し、それに則ってデザインをすることで、一貫性のある表現が可能になる、というものです。
それではその「トンマナ」とはどうやって決めるのでしょうか?
「トンマナ」を作成する前に
私がデザインをする時に大事にしているのは、言語化をすることです。
どんなユーザーがいて、どんな課題があって、どうやってそれを解決するのか、まずはデザインに入る前段の部分を言語化し、チーム内の認識を合わせることが重要だと考えています。
そして、言語化された課題を解決する手段(デザイン)の方針を定めるのがトンマナです。
なので、まずはトンマナを定義する前にプロジェクトの方針を言語化し、チームの共通認識を統一することから始めてみてください。
それでは、さらに具体的に「トンマナ」を細分化していきましょう。
トンマナを形作るもの
1. 色
「色」を言葉にしてみてください、どんな言葉を思い浮かべますか?
「赤」 … 温かい、情熱的、りんご などでしょうか?
人によってパッと思い浮かべるものは違うと思います。
色についても詳細な言語化をすることで、「共通の赤」=「トンマナ」を決めることができます。
また、色は「色相」「彩度」「明度」3つの性質からできています。(色の三属性といいます)
この3つの性質が与える印象を理解していると抽出したキーワードから色を決めることができるようになります。
2. 線
「線」と一言で言っても種類は色々あります。
細いのか、太いのか、直線なのか、斜線なのか、実線なのか、点線なのか。
細ければ繊細な印象になったり、太ければポップな印象になったり。
線が与える印象を理解して、キーワードに合った「線」を選ぶことが重要です。
3. 形
「丸」や「四角」「三角」など、それぞれ与える印象がまったく違います。「四角」は安定感や信頼感がありますし、「丸」は柔らかさや楽しさなどを表現することができます。
こちらもキーワードに合わせて、選んでいくことが重要です。
4. 文字
セリフ体なのか、サンセリフ体なのか、普遍的なタイプなのか個性的なタイプなのか、太いのか細いのか。
フォント選びはデザインの中で重要な分、頭を悩ませる部分だと思います。
ajikeのデザイナーがフォントに関する記事を投稿しているので、ぜひご覧ください。
5. 質感
材質が持つ視覚的・触覚的な性質のことで、触って感じる質感と視覚で感じる質感、動きで感じる質感などがあります。
サイトの中でのボタンや背景の表現、アニメーションなどで表現することができます。
6. 空間
代表的なのは、ネガティブスペースと呼ばれるものです。
スペースを有効的に使うことで、視線の動きや印象付けたいものを強調することができる方法です。その反対に形のあるスペースをポジティブスペースと呼びます。
7.立体
3次元の考え方のことです。
影を付けてパーツごとに階層を表現するなど、マテリアルデザインなどの考え方が参考になります。
マテリアルデザインについてもajikeのデザイナーがまとめていますので、ぜひご覧ください。
まとめ
7つの要素はデザインを形作る基本の要素と呼ばれ、この要素を意識してトンマナを作成していくと、サービス全体で一貫性のあるデザインができるようになります。
新人の頃は、大きな壁になるのがこのトンマナ作成だと思いますが、できるようになるととても楽しい作業なので、上記の考え方を参考にしていただけたら幸いです。
ここまで読んでいただき、ありがとうございました!
この記事が気に入ったらサポートをしてみませんか?