人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方

Post on:2012年6月8日

角丸は目に、そして脳に優しい

ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。

鋭角と角丸の視線の流れ

鋭角の長方形を認識するには4つのポイントを必要とします。上のキャプチャは視線の流れをビジュアル化したもので、4つの角を順番に目で認識します。
右の角丸の長方形は、角を認識する必要がなく、1つのフローを処理するだけです。

角丸のイメージは安心 -Appleのこだわり

時は1981年、Appleがまだ初期の頃、Bill AtkinsonはOS上で円と楕円を描くことを成功させました。しかし、Steve Jobsはそれだけでは満足せず、角丸の長方形もリクエストしました。
Jobsは、角丸の長方形はフレンドリーで、どこにでもあるものだ、と強く主張しました。

Atkinsonは日常のあらゆるものを観察し、このリクエストがJobsの気まぐれではないことを確信し、角丸の長方形を作り出しました。その時からAppleのボタンやウインドウは丸くなりました。

角丸はAppleのインターフェイスに「Safe」を定義づけ、今日の数多くのプロダクトに貢献しています。

子供に触れさせるのはどっち？

鋭角はどんなイメージがあるでしょうか？「触るな」「立ち去れ」「引っ掻く」など鋭いオブジェクトから連想されるネガティブなイメージへ展開する傾向があります。
神経科学者はこの鋭角への嫌悪感を「回避反応」と呼んでいます。

角丸はいつ使用するべきか

いつ角丸を使うべきかは、あなたのユーザーに信頼や安心をいつ与えるのかに依存します。角丸の長方形を信頼や安心を与えるので、「フレンドリーな長方形」と呼んでもよいでしょう。
「フレンドリーな長方形」の具体的な使い方としては、アクションボタンなどにぴったりです。これはブランドでビジネスすることについて、ユーザーに安心感を与えます。

Wufoo

角丸は理解することを容易にする効果もあり、地図や図にも役立ちます。上で述べたように、私たちの目の自然な動きはカーブに慣れています。鋭角に方向を変えてしまうと、突然すぎて驚いてしまうことがあります。

角丸の実装：CSS3

多くのウェブ制作者はブラウザの互換性のため、CSS3の使用を避けます。しかしながら、CSS3にはIE9を含め、全てのモダンブラウザで機能する角丸のプロパティがあります。
「border-radius」を使えば、半径を指定するだけでエレメントに角丸を簡単に加えることができます。
実装方法をみてみましょう。

HTML

角丸のボックスを作成するために、1つのdiv要素と2つのclassを使用します。

<div class="rounded box">
   <p>Let me not to the marriage of true minds admit impediments</p>
</div>

CSS

classは一つはボックスの定義、もう一つは角丸の指定をします。

.box {
	width: 200px;
	height: 150px;
	background-color: #FC5D8A;
	color: #fff;
	margin: 3em auto;
}

.rounded {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

ボックスの角は全て半径10pxの角丸になります。

デモページ

スタイルシートの角丸の箇所に使用している「-webkit-」「-moz-」はベンダープレフィックスでそれぞれWebkit系ブラウザ用、Firefox用です。IEはプレフィックスのない最後のものを使用しています。
このベンダープレフィックスはなくなる予定なので、プレフィックスのない指定を一番最後に記述することで将来もうまくいくことを保証します。

角丸の実装：古い方法

CSS3の前は画像を利用して実装していました。
円形の画像を使い、角丸用のdivを加え、それぞれに背景画像として表示させます。

HTML

<div class="rounded-box">
    <div class="corner NW"></div>
    <div class="corner NE"></div>
    <div class="corner SW"></div>
    <div class="corner SE"></div>
    <div class="rounded-box-content">
        <p>Love's not love that alters when it alteration finds.</p>
    </div>
</div>

CSS

.rounded-box {
	position: relative;
	background: #FC5D8A;
	width: 100%;
}

.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url('corners.gif') no-repeat;
	font-size: 0%;
}

.rounded-box-content {
	padding: 10px;
}

.NW {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.NE {
	top: 0;
	right: 0;
	background-position: -10px 0;
}
.SW {
	bottom: 0;
	left: 0;
	background-position: 0 -10px;
}
.SE {
	bottom: 0;
	right: 0;
	background-position: -10px -10px;
}