連載
» 2013年02月27日 12時49分 公開

ズルいデザイン(2):SassやCompassを使って、ズルいデザインテクニック (2/2)

[赤塚 妙子,フリーランス]
前のページへ 1|2       

2:ズルい角丸

 CSS3から、角丸がCSSで書けるようになり、さらに手軽に使えるようになりました。角丸にするだけで少しかわいらしく洗練された雰囲気が出るため、よく利用されますが、これも使うのに少しコツが必要です。

NGなのは半径が大き過ぎる角丸

 先にNG例を紹介しましょう。角のR半径が大き過ぎる角丸は、やぼったいデザインになりがちです。

 必ずしもダメなわけではなく、ビシっとキマるとカッコイイのですが、半径に比例した大きさの広い空間が必要になる上級テクです。多くの場合、最適な角丸の半径の大きさは、そのパーツの大きさに比例します。その具体的な例を下記で見ていきましょう。

本文を囲むBOX:5〜6px

 よくWebページの本文などに利用されるような、1つのSectionを囲むような通常サイズのBOXは、

border-radius: 5px〜6px

ぐらいが最も無難できれいです。大きめの写真などもこのくらいのサイズの角丸が適切です。

ボタン:4px

 Submitボタンなどの通常サイズのボタンは、

border-radius: 4px

くらいが適切な角丸半径です。

小さなアイコン:2〜3px

 ボタンよりさらに小さなオブジェクトで、小さなアイコンなどに付けるコーナーなら、

border-radius: 2px〜3px

ぐらいが適当です。

角丸は大き過ぎないサイズがお勧め。原則6px以内。

 上記のように、適切な角丸の半径は、オブジェクトのサイズに比例します。なぜなら、ボックスが描く直線の部分が、画面に区切りとなるラインを描いて、暗黙的に画面に締まりを与えているので、角丸が大き過ぎると直線部分が減ってしまうため、そのラインを崩してしまい、結果締まりのない画面となってしまいがちなのです。

 半径の大きな角丸をうまく利用するためには、画面の区切りに相当するような広いホワイトスペースが必要となりますが、限られたスペースの中でホワイトスペースをバランスよく確保するのは、熟練のデザイナーでも結構難しいので、避けておいた方が無難です。

 一般的なWebページのパーツの大きさから逆算して、無難な角丸サイズは6px以内といってよいと思います。

パーツごとの適切な角丸の大きさまとめ

  • 本文を囲むBOX、大きめの写真:5〜6px
  • ボタン:4px
  • 小さなアイコン:2〜3px

Compassを使えば、角丸は1行で書ける

 Compassの回し者のようになってきましたが、Compassを使うと各ベンダプレフィックスをいちいち書く必要がなく、下記のように1行で済むのでお勧めです。

.box{
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;	
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}

 これが、Compassを使うと以下のようにすっきりします。

.box{
  @include border-radius(6px);
}

 第1回から第2回までだいぶ間が開いてしまいましたが……。次回は、ズルいボックスシャドウ、ズルいボタンについて解説します。

著者紹介

赤塚 妙子twitter:@ken_c_lo フリーランスのWebデザイナー、グラフィックデザイナー。Webサービスのデザイン、UI・IA設計、コーディング実装から、コンテンツ企画・編集、ディレクション、紙媒体のデザイン、装丁等幅広く手掛ける。いぬとSassとHamlとGitが好き。エディタはVim(初心者)。


前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。