WEBCRE8.jp > 考える > [デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した

[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した

この記事は約14分ぐらいで読めます

webデザインやDTPにおいてボックス的なエレメントのデザインで頻繁に使われる角丸表現。これにはどんな意味があるのか考えてみます。

角丸の話題が盛り上がってましたね

先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！

デザイン時に注意したい角丸の使いかた | Design Color

そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書いたりしていました。

illustratorで角丸を扱う際の注意点 ※追記しました | ナナメウエblog

私も以前デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素という記事を書いたとき、角丸についてはさらっと触れるに留めたのですが、いずれもっとがっつり言語化したいものだと考えていました。

気になることもあったし、ちょうど良いので今回便乗して記事にしてみようと思います。

形状としての角丸

まずエレメントの形状が角丸だとどういう印象を受けるでしょうか。

まず、角が丸いことによってコンテンツに柔らかい印象を持たせられると思います。

直角は男性的、曲線は女性的

文字が丸いと角が取れてかわいらしい印象を受けるように、直線が男性的、曲線が女性的な印象を与えるように、角を丸くすることはかわいらしいデザインに見せる効果があると考えています。

スタイルとしての角丸

角丸かそうでないか、どの程度の角丸か、という事は、色が何色か、線が手書きか直線か、といったものと同じようにそこに含まれるコンテンツの特性を区別、またはグループ化するためのスタイルの一つでもあります。

形状によってコンテンツの性質を差別化する

他の全てのエレメントが直線で構成されている中そのエレメントだけ角丸であるという事は、見るものにもそれらに何らかの違いがあることを暗に伝えます。

例えばWEBCRE8.jpでは基本的にクリックできるエレメントのみに角丸を使っています。ボタン、タグ、アイコン等ですね。画像については全てにうっすらと角丸付きの枠がついているんですが…これはまだエレメントのルールを詰め切れず、考え中に公開してしまった名残ですｗ

慣例・流行としての角丸

通常、HTMLによるデザインでも紙のデザインでも、線を引くとエレメントは当然キレイに直角な角を持った四角形になります。CSS2の頃はCSSで角丸を作ることはできませんでしたし、普通に作るとエレメントには角があるわけです。ひと手間かけたエレメントの処理だと考えています。

何も考えていなければ角は丸くならなかった

ニーズに対してツールが対応していくことでこのバランスは変化していきます。誰でも手軽に使いこなせたり、最初からインターフェースとして使いやすいところにあることで、ごく自然に、仮に何の意図もなかったとしても、角が四角いことと並列の選択肢として角丸が使われていきます。

ちょうどweb2.0風と言われていた様なデザインの流行り(反射する地面やグラデーションの利いたエレメント)の様に、角丸デザインは増えています。モダンな表現、というような印象を私も持っていました。

角丸が垢抜けた印象を作るのは流行りが影響している

Twitter

こうした(一般的な意味での)モダンだという印象を持つデザイン表現は流行り廃りがあります。

日本マイクロソフト│Microsoft Japan: ソフトウェア, オンライン, スマートフォン, サポート, セキュリティ, ダウンロード, アップデート, デバイスとサービス

http://www.microsoft.com/ja-jp/default.aspx

Windows 8が掲げているモダンUIが、今までグラデーション、角丸といった表現の正反対をいく塗りつぶし、直線的なデザインを採用しており、その外見は徐々に受け入れられています。実際のUIとしての評価は置いておいて…。

メタファーとしての角丸

さて、形状として丸さが柔らかさを生むのはそうだと思いますが、現実世界で角の丸さはどういう印象を生んでいるでしょうか。

角をとったプロダクト

机や棚、電化製品等のプロダクトでも、角をとって丸くすることは使いやすさ、安全性を生みます。他にも名刺などでも手の込んでいるように見えますし、ものとしての破損のしにくさも上がります。

柔らかい素材は角をとったほうが破損しにくい

アプリのアイコンなどは角を丸めたり光沢がつくのが当たり前になっていますが、あれは物質感のあるプレートのような形状を想定して作られています。

アプリのアイコン

角がないことで滑らかに動きそうな印象すらある

基本的に現実世界では、人が手を触れるものは角をとるようになっていると思います。角丸がwebデザインにおいてクリック出来るボタンや、ドラッガブルまたはドロッパブルな要素の表現に多用されるのはそういった人の意識的な背景を考慮しているのではないかと考えています。

ちなみにwebデザインにおいて多用される角丸、ボタンについては以下の記事で述べています。

[UI]ボタンや画像のマウスホバー時のアクションはどうあるべきか – WEBCRE8.jp

角丸が大きくなるとダサくなる？

角丸がダサく見えてしまう原因としては前述の彩さんの記事で述べられていることにほぼ同意します。まとめてしまうと

グリッドに合わなくなるほど丸い
角丸のエレメントが角丸を内包する場合の整合性がとりづらい
丸なのか四角なのかわかりにくく(中途半端に)なる

と書かれています。

その他にも原因があると思うので補足させて頂きます。

内包するコンテンツの座りが悪くなる

吹き出しのように最初から形状が楕円や正円である場合を除き、角の丸いエレメントにテキストなどのコンテンツを入れる場合、枠が直線でないエリアにコンテンツが割り込まないように配慮すると思います。

角丸の曲線のエリアとコンテンツのエリア

言葉で表現するのが難しいですが、角丸の大きいボックスのパディング(内側のスペース)を適切にとるのは難しいと思います。この間隔は例えば内包するコンテンツ自体の文字の間隔なども合わせる必要があります。

そしてそれに加え、これらの違和感もやはり実際に存在していて我々の生活の中にあるものの形状に見慣れていることが大きく影響していると思います。

角丸の半径は小さくなるのが正しいかどうか

前述のすずきさんの記事でも、角丸の半径が小さくなっていくほうが自然だとあります。これはなぜでしょうか。

角丸の弧の半径を保つと太さが均一でなくなる

不自然な感じがするのは、まず内側と外側の弧の半径を保っていることにより、線の太さ(内側と外側の距離)が均一になっていないということでしょう。

弧の半径が同じカーブを並べると線の太さが変わる

これは太さや半径をどんどん大きくしていくごとに顕著になっていきます。逆に言えば、線が細く半径が小さければ目立ちにくい問題ではあります。

棒を曲げると内側の曲線の半径が小さくなる

単純な話、例えばゴムの棒(自在定規等)を曲げた場合、内側の曲線の半径は小さくなりますよね。

こうして物質的な観点から見てみても、角丸図形の外側の曲線を太さを保つ線の場合は内側の半径が小さくなるのは自然だという事になります。

錯視的、心理的な問題

自然ではあるのですが、あまりに内側の形状と外側の形状にギャップがあることもまた、不自然には感じてしまいます。これは錯視的、または心理的な問題があるのだと思います。直観的には、カーブしても外側と内側の曲線は全く同じではないにしても、近い半径を持っているであろうと思ってしまうわけです。

同心円の弧が相似な円の弧に見える錯視

そういう意味でも、角丸を大きくすることは違和感を作ってしまう原因になると思います。

三次元で考えると

平面は二次元の出来事なので、絵にかけてしまえばそれがあり得ないという事はありません。ですが実際に存在するものをモチーフにしている以上、三次元らしい見た目のものが三次元で成立しそうにない形状をしていたときその違和感を拭うのは難しいでしょう。

アプリのアイコンを実際の物体として考えると

アプリのアイコンを立体造形物として作ってみるとこの角丸の問題が分かるかもしれません。

アプリアイコンは、角の丸い光沢のあるプレートとして表現されていることが多いですよね。

アプリアイコン的な物体の三面図

これはボタンの様なものでもあるので、やすりがけしたとして角をとってみるとよりボタンらしくなります。

アイコン型の物体の角をとったものの三面図

この様に、角丸な形状を元々ある物体の角をとったものと考えると、自ずとその形状の自然な形が見えてくるのではないでしょうか。

角丸のベース

この角が丸いもの、というものをイメージすると、実際には角丸といっても色んな形状をベースにしているものがあるのが分かると思います。テーブルの角やボタン等は、最初から角丸として作られているもの、四角いものを丸めたもの、まず角を切断したあと丸めたもの、角だけではなく辺の角も切断してから丸めているもの、色んな形状があるわけです。