Webデザインの「トーン」とは何か｜上品・親しみ・信頼感の作り分け

デザインの打ち合わせで「もう少し上品な感じで」「もっと親しみやすく」という言葉が出ることがあります。制作側はうなずいて修正案を出しますが、また「そうじゃない」となる。

これは、トーンという言葉が指すものが、当事者間で共有されていないために起きます。トーンは感覚的なものに見えて、実際にはいくつかの具体的な要素の組み合わせで決まります。分解できれば、注文も修正もずっと正確になります。

トーンを作っている5つの要素

最も影響が大きい要素です。要素と要素の間隔を広く取ると、上品・高級・落ち着きの方向に振れます。狭く詰めると、情報量が多い・活発・お得感の方向に振れます。

高級ブランドのサイトが余白だらけなのも、量販店のサイトが情報でぎっしりなのも、意図的な選択です。「もっと上品に」と言われたときに最初に試すべきは、色や書体ではなく余白を広げることです。

明朝体は、伝統・格式・落ち着き。ゴシック体は、明快・現代的・読みやすさ。同じ文章でも、明朝体で組めば重く、ゴシック体で組めば軽く見えます。

太さも効きます。細い書体は繊細で上品、太い書体は力強く親しみやすい。書体を変えずに太さだけ変えるのは、トーン調整の有効な手段です。

同じ「青」でも、鮮やかな青と、彩度を落とした青では別物です。彩度が高い＝元気・若い・カジュアル。彩度が低い＝落ち着き・上質・大人。

「親しみやすく」という要望に対して、色を増やすのではなく彩度を少し上げるだけで解決することがあります。逆に「上品に」なら、彩度を落とすのが定石です。

丸みが強い＝やわらかい・親しみ・安心。直角＝硬質・誠実・専門的。ボタンやカードの角丸を数ピクセル変えるだけで、印象は動きます。子ども向け、医療、飲食では丸みが選ばれ、金融、建築、BtoBでは直角に近い形が選ばれる傾向があります。

明るく彩度の高い写真は、元気で健康的な印象。彩度を落とし、コントラストを抑えた写真は、静かで上質な印象。同じ写真でも、加工の方向で印象が変わります。サイト内の写真の色調が揃っていないと、どれだけレイアウトが整っていてもトーンがぼやけます。

避けるもの：装飾の多用、複数色の併用、太い書体、強い影。

避けるもの：黒に近い色の多用、鋭角、細すぎる文字。

避けるもの：派手な演出、流行の装飾、過度なアニメーション。「新しさ」より「変わらなさ」を出すのがこのトーンです。

トーンの指定は2つまでに絞ってください。3つ以上を同時に満たそうとすると、どれも中途半端になります。

たとえば「上品」と「親しみ」は、余白と彩度の方向が逆です。両立させるには、どちらかを主、どちらかを従にする必要があります。打ち合わせでトーンを伝えるときは、「上品を7割、親しみを3割」のように比率で伝えると、意図が正確に届きます。

右側の言い方をすると、修正が1回で終わることが増えます。

TEHON では、掲載サイトをトーンの軸で分類しています。「上品」「親しみ」「信頼感」「明るい」「モダン」「温かみ」といったタグから絞り込めます。

同じトーンのサイトを5件並べて見ると、そのトーンを作っている要素が具体的に見えてきます。言葉で覚えるより、実例を並べたほうが早い領域です。参考デザインギャラリーから、トーンで絞り込んでご覧ください。

トーンを分解できるようになると、デザインの打ち合わせが「好き嫌い」から「合っているかどうか」の会話に変わります。

マザーハンズでは、広島・東京を拠点にWebサイトのデザインとブランディング支援を行っています。お問い合わせよりご相談ください。