on:2012年6月8日sponsorsウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。Stay[ad#ad-2]下記は各ポイントを意訳したものです。Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。鋭角と角丸の視線の流れ鋭角の長方形を認識するには4つのポイントを必要とします。上のキャプチャは視線の流れをビジュアル化したもので、4つの角を順番に目で認識します。右の角丸の長方形は、角を認識する必要がなく、1つのフローを処理するだけです。AtkinsonはOS上で円と楕円を描くことを成功させました。Jobsはそれだけでは満足せず、角丸の長方形もリクエストしました。Jobsは、角丸の長方形はフレンドリーで、どこにでもあるものだ、と強く主張しました。Atkinsonは日常のあらゆるものを観察し、このリクエストがJobsの気まぐれではないことを確信し、角丸の長方形を作り出しました。その時からAppleのボタンやウインドウは丸くなりました。角丸はAppleのインターフェイスに「Safe」を定義づけ、今日の数多くのプロダクトに貢献しています。「触るな」「立ち去れ」「引っ掻く」など鋭いオブジェクトから連想されるネガティブなイメージへ展開する傾向があります。神経科学者はこの鋭角への嫌悪感を「回避反応」と呼んでいます。角丸はいつ使用するべきかいつ角丸を使うべきかは、あなたのユーザーに信頼や安心をいつ与えるのかに依存します。角丸の長方形を信頼や安心を与えるので、「フレンドリーな長方形」と呼んでもよいでしょう。「フレンドリーな長方形」の具体的な使い方としては、アクションボタンなどにぴったりです。これはブランドでビジネスすることについて、ユーザーに安心感を与えます。Wufoo角丸は理解することを容易にする効果もあり、地図や図にも役立ちます。上で述べたように、私たちの目の自然な動きはカーブに慣れています。鋭角に方向を変えてしまうと、突然すぎて驚いてしまうことがあります。[ad#ad-2]角丸の実装:CSS3多くのウェブ制作者はブラウザの互換性のため、CSS3の使用を避けます。CSS3にはIE9を含め、全てのモダンブラウザで機能する角丸のプロパティがあります。「border-radius」を使えば、半径を指定するだけでエレメントに角丸を簡単に加えることができます。実装方法をみてみましょう。HTML角丸のボックスを作成するために、1つのdiv要素と2つのclassを使用します。impediments</p></div>CSSclassは一つはボックスの定義、もう一つは角丸の指定をします。10px;}ボックスの角は全て半径10pxの角丸になります。デモページスタイルシートの角丸の箇所に使用している「-webkit-」「-moz-」はベンダープレフィックスでそれぞれWebkit系ブラウザ用、Firefox用です。IEはプレフィックスのない最後のものを使用しています。このベンダープレフィックスはなくなる予定なので、プレフィックスのない指定を一番最後に記述することで将来もうまくいくことを保証します。角丸の実装:古い方法CSS3の前は画像を利用して実装していました。円形の画像を使い、角丸用のdivを加え、それぞれに背景画像として表示させます。-10px;}デモページこの方法は不要なdiv要素を加えたり、背景と画像の色を同じにするなど、問題があります。CSS3を使った方法を優先的に利用したほうがよいでしょう。終わりに角丸がなぜ一時的なトレンド以上であるのか、なぜ心理的なレベルで訴えてくるのか、ウェブコンテンツでどのように使われるべきか、この記事が角丸への理解を深めることに役立てば嬉しいです。あなたのデザインでの角丸の長方形の使用は、ユーザーに安心・快適を感じさせるでしょう。角丸の使いすぎには注意してください。Posts関連記事が見つかりませんでした。