Webデザインで重要なトンマナの基本と5つのポイント

こんにちは、とっしーです!



突然ですが、トンマナという言葉はご存知でしょうか?
デザインのことを少しでも勉強されている方であれば、1度くらいは耳にしたことがあるかもしれません。
これはデザインをするにあたり非常に重要な要素なのですが、一方で初心者にとっては難しく感じられることが多い現実も。。
今回は自分の経験を生かしながら、トンマナの重要性やポイントなどをお伝えしていきますので「いまいち理解できていない…」という方は参考にしていただければ幸いです!
トンマナとはどんなもの?
先ほど「デザインの方向性や全体の世界観」と言いましたが、これだけではなかなかピンとこないですよね?
なんとなくフワッとしていてわかりづらいと感じられた方が多いのではないかと思います。
実際、明確な定義はなく、「一貫性を持たせるためのもの」や「秩序を保つ」などいろいろな言い方をされており、個々のデザイナーによっても使い方は微妙に違うことがほとんどです。
でも、「それじゃあ気をつけようがないじゃないか。。」となってしまうと思うので、まずは具体例をみていただけたらなと思います!デザインの作業レベルに落とし込んで、気をつけていきたいポイントを僕なりにまとめてみました。



早速みていきたいところなのですが、その前に1つだけ、そもそもなんでこのような暗黙のルールがあるのでしょうか?
これがわかっていた方が、下記のポイントの理解もかなり深まると思いますので、簡単にご説明します。
なんでトンマナを合わせる必要があるの?
その答えはずばり、
なんですね。
例えば下記、トンマナが合っている例と、崩れてしまっている例を掲載しました。
簡単ですが、子どもの誕生日パーティーの招待カードをイメージしています。子どもの誕生日会なので、楽しげな雰囲気を伝えようと写真もポップにしていますが、フォントだけ左は明朝、右はポップなゴシック体となっています。


フォントを変えたことにより、全体の雰囲気はどう変わったでしょうか?
例えば、大人のパーティーで、おしゃれでモダンなパーティーをイメージしている場合には、明朝体でもいいかなと思いますが、今回は子どもの誕生日会。



せっかくなら、楽しく明るいイメージを持たせたいですよね。
ちなみにフォントを外すと、


伝わり方は同じになりました。このように、デザインを構成される要素全てにおいて、
このプロセスがトンマナであり、これが守られないと「デザインの完成度」が最大化できないのです。
そのため、デザインを大局的にみて、伝えたいことが全て伝わっているのか、そのためにルールを乱している要素はないか、などをデザイナーは常に考える必要があります。
さて、トンマナの存在意義がわかったところで、続いては具体的にどのようなポイントに気をつけていくのかをみていきましょう!
【ポイントその1】線の太さ
まずは線の太さから。



「デザインの統一感」を比較的イメージしやすいのがこの「線の太さ」ではないかと思っています!
太さを変えるだけで、だいぶ違った世界観を表現することができるため、この太さが入り混じってしまうと世界観にブレが出やすくなります。


【ポイントその2】影の付け方
影に関しては、「広がり(スプレッド)」「距離」の2つの要素で、おおよそのトンマナが規定されます。
例えば、
影はサブ的なデザイン処理なので丁寧に考えることは少ないと思いますが、表現したい世界観に応じて揃えることを心がけましょう。


【ポイントその3】フォントの世界観・統一感
フォントに関していうと、みて明らかにわかるレベルではどのデザイナーも揃えるとは思うのですが、問題は一部の文章でヒラギノ角ゴシックを用いていながら、別の文では游ゴシックを用いている、といった具合に、似たようなフォントが気づかぬうちに混在していることが多いです。



これも細かいですが、ユーザーに違和感を与える原因になってしまうので、フォントの統一感は重要な要素!
フォントに種類や選び方に関する記事は下記でまとめています!よろしければご参照ください。


【ポイントその4】色あいが合っているか(写真含む)
続いては色のトーンです。今回の記事ではこの項目が最も難易度が高いかもしれません。
気をつけて欲しいポイントは、
色で世界観を作り上げる際に、当然、色相に関しては選んでいくと思いますが、明度彩度に関しては調整が難しいので、慣れないうちはAdobe Colorなどを利用し、色がずれてしまわないようにしましょう!
色に関して気をつけるべきポイントは下記の記事で詳しく解説しています。


【ポイントその5】図形の角丸
最後は角丸についてです。



Webサイトでは、ボタンや各種オブジェクトの囲み線などにあたりますね。
角丸の有無で、両極端の印象になってしまうので、混在しないようにチェックすることを心がけましょう!


まとめ
以上、トンマナの重要性を解説させていただきました。



僕もそうでしたが、特に初心者の方にとってはなかなか掴みづらい概念で、感覚をつかむのが大変だと思います。実際、デザイン学習でも時間がかかるところです!
まずは今回ご説明したような、5つのポイントだけでも意識してみてください。慣れてくるとほかにもどんどん気づけるようになっていきます。
是非トンマナを意識して、伝えるべき情報を、伝えるべき人に的確に伝わるよう、デザインを楽しんで見ていただければ幸いです。
デザイン添削、承っております!
- 近くにデザイナーがいない。。
- 自分1人だと上達が実感できない。
- 勉強法があっているか不安…
などのお悩みに応えたいと思い、個別にメンター活動を行っております。ご興味がございましたら、下記の記事からご覧ください!


コメント