MENU

カテゴリ

おすすめの記事

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

こんにちは、としです!

とし

突然ですが、トンマナという言葉はご存知でしょうか?

デザインのことを少しでも勉強されている方であれば、1度くらいは耳にしたことがあるかもしれません。

正式にはトーンアンドマナーといい、簡単にいうと、「デザインの方向性や全体の世界観」に関するルールのようなものです。これはデザインをするにあたり非常に重要な要素なのですが、一方で初心者にとっては難しく感じられることが多い現実も。。

今回は自分の経験を生かしながら、トンマナの重要性やポイントなどをお伝えしていきますので「いまいち理解できていない…」という方は参考にしていただければ幸いです!

目次

トンマナとはどんなもの?

先ほど「デザインの方向性や全体の世界観」と言いましたが、これだけではなかなかピンとこないですよね?

なんとなくフワッとしていてわかりづらいと感じられた方が多いのではないかと思います。

実際、明確な定義はなく、「一貫性を持たせるためのもの」や「秩序を保つ」などいろいろな言い方をされており、個々のデザイナーによっても使い方は微妙に違うことがほとんどです。

でも、「それじゃあ気をつけようがないじゃないか。。」となってしまうと思うので、まずは具体例をみていただけたらなと思います!デザインの作業レベルに落とし込んで、気をつけていきたいポイントを僕なりにまとめてみました。

とし

早速みていきたいところなのですが、その前に1つだけ、そもそもなんでこのような暗黙のルールがあるのでしょうか?

これがわかっていた方が、下記のポイントの理解もかなり深まると思いますので、簡単にご説明します。

なんでトンマナを合わせる必要があるの?

その答えはずばり、

「トンマナが守られないと、伝わりやすさに影響を与えてしまうから」

なんですね。

例えば下記、トンマナが合っている例と、崩れてしまっている例を掲載しました。

簡単ですが、子どもの誕生日パーティーの招待カードをイメージしています。子どもの誕生日会なので、楽しげな雰囲気を伝えようと写真もポップにしていますが、フォントだけ左は明朝、右はポップなゴシック体となっています。

フォントを変えたことにより、全体の雰囲気はどう変わったでしょうか?

左の例でいうと、本来なら伝えたいはずの子どもの誕生日会の楽しさの様子右と比べて薄れている(違和感がある)のではないかと思います。

例えば、大人のパーティーで、おしゃれでモダンなパーティーをイメージしている場合には、明朝体でもいいかなと思いますが、今回は子どもの誕生日会。楽しく明るいイメージを持たせたいですよね。

ちなみにフォントを外すと、

伝わり方は同じになりました。このように、デザインを構成される要素全てにおいて、

「伝えたいこと」を100%伝えられるように、要素同士の相性などを考え、精査していく。

このプロセスがトンマナであり、これが守られないと「デザインの完成度」が最大化できないのです。

そのため、デザインを大局的にみて、伝えたいことが全て伝わっているのか、そのためにルールを乱している要素はないか、などをデザイナーは常に考える必要があります。

さて、トンマナの存在意義がわかったところで、続いては具体的にどのようなポイントに気をつけていくのかをみていきましょう!

【ポイントその1】線の太さ

まずは線の太さから。

とし

これが1番簡単に統一感を出せる要素であると思っています。

具体的には線が太いと男性的、ポップな印象になり、逆に細いと女性的、繊細な印象になります。また、線を極力使わないデザインもあり、ミニマルな印象になります。

太さを変えるだけでだいぶ違った世界観を表現することができるため、この太さが入り混じってしまうと世界観にブレが出やすくなります。

【ポイントその2】影の付け方

影に関しては、「広がり(スプレッド)」「距離」の2つの要素で、おおよそのトンマナが規定されます。

たとえば広がりをもたせてやわらかい「フワッとした」影を落とすと、上品や先進的なイメージになりますし、逆に影をくっきりつけて、距離も多めにつけるとポップな印象になりやすいです。

影はサブ的なデザイン処理なので丁寧に考えることは少ないと思いますが、表現したい世界観に応じて揃えることを心がけましょう。

【ポイントその3】フォントの世界観・統一感

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

これも細かいですが、ユーザーに違和感を与える原因になってしまうので気をつけましょう。

フォントに種類や選び方に関する記事は下記でまとめています!よろしければご参照ください。

【ポイントその4】色あいが合っているか(写真含む)

続いては色のトーンです。

今回の記事ではこの項目が最も難易度が高いかもしれません。気をつけて欲しいポイントは、「使いたい色の中で、極端に彩度や明度がずれている色はないか」というのをチェックするよう心がけるといいと思います。

色で世界観を作り上げる際に、当然、色相に関しては選んでいくと思いますが、明度彩度に関しては調整が難しいので、慣れないうちはAdobe Colorなどを利用し、色がずれてしまわないようにしましょう!

色に関して気をつけるべきポイントは下記の記事で詳しく解説しています。

【ポイントその5】図形の角丸

最後は角丸についてです。

まき

Webサイトでは、ボタンや各種オブジェクトの囲み線などにあたりますね。

角丸が大きいとポップ、女性的、という印象になり、角丸が無くなっていくにつれて、男性的、真面目さなどが強調されていきます。

角丸の有無で、両極端の印象になってしまうので、混在しないようにチェックすることを心がけましょう!

まとめ

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

僕もそうでしたが、特に初心者の方にとってはなかなか掴みづらい概念で、感覚をつかむのが大変かと思います。まずは今回ご説明したような、5つのポイントだけでも意識してみてください。慣れてくるとほかにもどんどん気づけるようになっていきます。

是非トンマナを意識して、伝えるべき情報を、伝えるべき人に的確に伝わるよう、デザインを楽しんで見ていただければ幸いです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる