マナという言葉はご存知でしょうか?デザインのことを少しでも勉強されている方であれば、1度くらいは耳にしたことがあるかもしれません。正式にはトーンアンドマナーといい、簡単にいうと、「デザインの方向性や全体の世界観」に関するルールのようなものです。これはデザインをするにあたり非常に重要な要素なのですが、一方で初心者にとっては難しく感じられることが多い現実も。今回は自分の経験を生かしながら、トンマナの重要性やポイントなどをお伝えしていきますので「いまいち理解できていない...」という方は参考にしていただければ幸いです!目次トンマナとはどんなもの?先ほど「デザインの方向性や全体の世界観」と言いましたが、これだけではなかなかピンとこないですよね?なんとなくフワッとしていてわかりづらいと感じられた方が多いのではないかと思います。実際、明確な定義はなく、「一貫性を持たせるためのもの」や「秩序を保つ」などいろいろな言い方をされており、個々のデザイナーによっても使い方は微妙に違うことがほとんどです。「それじゃあ気をつけようがないじゃないか。」となってしまうと思うので、まずは具体例をみていただけたらなと思います!デザインの作業レベルに落とし込んで、気をつけていきたいポイントを僕なりにまとめてみました。みていきたいところなのですが、その前に1つだけ、そもそもなんでこのような暗黙のルールがあるのでしょうか?これがわかっていた方が、下記のポイントの理解もかなり深まると思いますので、簡単にご説明します。「トンマナが守られないと、伝わりやすさに影響を与えてしまうから」なんですね。下記、トンマナが合っている例と、崩れてしまっている例を掲載しました。簡単ですが、子どもの誕生日パーティーの招待カードをイメージしています。子どもの誕生日会なので、楽しげな雰囲気を伝えようと写真もポップにしていますが、フォントだけ左は明朝、右はポップなゴシック体となっています。フォントを変えたことにより、全体の雰囲気はどう変わったでしょうか?左の例でいうと、本来なら伝えたいはずの子どもの誕生日会の楽しさの様子が右と比べて薄れている(違和感がある)のではないかと思います。大人のパーティーで、おしゃれでモダンなパーティーをイメージしている場合には、明朝体でもいいかなと思いますが、今回は子どもの誕生日会。とっしーせっかくなら、楽しく明るいイメージを持たせたいですよね。伝わり方は同じになりました。「伝えたいこと」を100%伝えられるように、要素同士の相性などを考え、精査していく。このプロセスがトンマナであり、これが守られないと「デザインの完成度」が最大化できないのです。そのため、デザインを大局的にみて、伝えたいことが全て伝わっているのか、そのためにルールを乱している要素はないか、などをデザイナーは常に考える必要があります。マナの存在意義がわかったところで、続いては具体的にどのようなポイントに気をつけていくのかをみていきましょう!【ポイントその1】線の太さまずは線の太さから。「デザインの統一感」を比較的イメージしやすいのがこの「線の太さ」ではないかと思っています!具体的には線が太いと男性的、ポップな印象になり、逆に細いと女性的、繊細な印象になります。線を極力使わないデザインもあり、ミニマルな印象になります。太さを変えるだけで、だいぶ違った世界観を表現することができるため、この太さが入り混じってしまうと世界観にブレが出やすくなります。影に関しては、「広がり(スプレッド)」「距離」の2つの要素で、おおよそのトンマナが規定されます。広がりをもたせてやわらかい「フワッとした」影を落とすと、上品や先進的なイメージになりますし、逆に影をくっきりつけて、距離も多めにつけるとポップな印象になりやすいです。影はサブ的なデザイン処理なので丁寧に考えることは少ないと思いますが、表現したい世界観に応じて揃えることを心がけましょう。【ポイントその3】フォントの世界観・統一感フォントに関していうと、みて明らかにわかるレベルではどのデザイナーも揃えるとは思うのですが、問題は一部の文章でヒラギノ角ゴシックを用いていながら、別の文では游ゴシックを用いている、といった具合に、似たようなフォントが気づかぬうちに混在していることが多いです。とっしーこれも細かいですが、ユーザーに違和感を与える原因になってしまうので、フォントの統一感は重要な要素!フォントに種類や選び方に関する記事は下記でまとめています!よろしければご参照ください。フォント選びって難しいですよね?感覚を頼りにいろいろなフォントを試してみても、「なんか違うなぁ〜...」とデザインが止まってしまう経験...【ポイントその4】色あいが合っているか(写真含む)続いては色のトーンです。今回の記事ではこの項目が最も難易度が高いかもしれません。Colorなどを利用し、色がずれてしまわないようにしましょう!色に関して気をつけるべきポイントは下記の記事で詳しく解説しています。こんにちは、とっしーです。最後は角丸についてです。まきすずWebサイトでは、ボタンや各種オブジェクトの囲み線などにあたりますね。角丸が大きいとポップ、女性的、という印象になり、逆に角丸が無くなっていくにつれて、男性的、真面目さなどが強調されていきます。角丸の有無で、両極端の印象になってしまうので、混在しないようにチェックすることを心がけましょう!まとめ以上、トンマナの重要性を解説させていただきました。僕もそうでしたが、特に初心者の方にとってはなかなか掴みづらい概念で、感覚をつかむのが大変だと思います。実際、デザイン学習でも時間がかかるところです!まずは今回ご説明したような、5つのポイントだけでも意識してみてください。慣れてくるとほかにもどんどん気づけるようになっていきます。トンマナを意識して、伝えるべき情報を、伝えるべき人に的確に伝わるよう、デザインを楽しんで見ていただければ幸いです。デザイン添削、承っております!近くにデザイナーがいない。自分1人だと上達が実感できない。勉強法があっているか不安...などのお悩みに応えたいと思い、個別にメンター活動を行っております。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。共働きのWebクリエイター夫婦が、経済的自由を目指す!Webデザインのスキルアップやブログ運営に関すること、家計管理や暮らしの知恵、子育てなど、自分たちの価値観を大事にした無駄のない暮らしかたを発信しています。まきすず*Webデザイナーとっしー*Webマーケターふーちゃん*長女(2021年3月誕生)たいちゃん*長男(2023年4月誕生)「自然とともに生きる」ことをモットーに、田舎に自然素材を使った注文住宅を建築予定。移住後は家の畑で野菜と果物の木を育てたい。キャンプとピクニックと川遊びなど、自然の中でゆったり過ごすことが好き。