実例から学ぶ、円・サークルをウェブデザインで効果的に使う15のTips
Post on:2011年12月19日
最近のウェブデザインで多く見られる円・サークルを実例と共に、どのように効果的に使うか15のTipsを紹介します。

Web design Ideas and Tips in Using Circles
[ad#ad-2]
下記は各ポイントを意訳したものです。
- 複数のレイヤーで重ねたサークル
- 半透明のサークル
- かなり大きなサークル
- ナビゲーション用のサークル
- ヘッダに使うサークル
- 複数のカラーを使ったサークル
- 繊細なサークル
- 背景に使う数多くのサークル
- ギャラリーに使うサークル
- クリエイティブなサークル
- レトロなサークル
- テクスチャと一緒に使うサークル
- ラベルに使うサークル
- アクションに使うサークル
- パターンを使ったサークル
複数のレイヤーで重ねたサークル

さまざまな異なる種類のサークルを重ねたエレメントです。異なるカラーを使いダイナミックに見せたり、単一のカラーでモノクロームを演出することができます。また、より少ない数のレイヤーにすることで、よりシンプルに見せることもできます。配置としては、背景やヘッダなどがよいでしょう。
半透明のサークル

半透明のサークルは最近、多くのウェブサイトで見かけます。使い方としてはカラフルなサークルか、いくつかのカラーだけにしたサークルが多く、主に背景として利用されています。他にもページ内の適切な箇所のみをハイライトする役割もあり、ユーザーの注意を惹きつける有益な方法です。
かなり大きなサークル

サークルをすごく大きくして使用するとウェブサイトの見栄えをユニークし、魅力的にすることができます。サークルはインフォメーションとコミュニケーションのために効果的で、何か特別なメッセージを届けるためにこの大きなサークルを利用するとよいでしょう。
ナビゲーション用のサークル

ナビゲーションのボタンをサークルにしても面白いものができます。サークルにすることでスペースを多く占めますが、ナビゲーションはより明確になり、ナビゲーションとして効果的でより簡単に見つけることができます。これはユーザーを導くのに苦労することがない、ということです。
ヘッダに使うサークル

ヘッダにデコラティブなサークルを使用すると、ヘッダを魅力的に見せることができます。また、シンプルなサークルを使ってもよいでしょう。サークルを使う時は、ウェブサイトのコンセプトとデザインスタイルに適したサークルを使うようにしてください。
[ad#ad-2]
複数のカラーを使ったサークル

虹はとっても魅力的に見えるものです、それと同様にサークルでもさまざまなカラーを使って魅力的に見せることができます。このサークルを背景として使った場合、ページのコンテンツに向けてユーザーの視線を誘導できます。そして、カラーを多く使うことで、ページの見栄えをいっそう楽しく見せることができます。
繊細なサークル

繊細なデザインのサークルを使うことでも、ウェブサイトの見栄えを美しくすることができます。使い方のポイントは一つのエリアに絞ることで、例えばロゴあるいはサイト名だけに使います。サークルの形状だけがそこにあるとユーザーの目を惹きつけます。
背景に使う数多くのサークル

ウェブページの背景に数多くのサークルを配置します。半透明なサークルにするとより魅力的な見栄えになります。また、サイトのコンセプトに適合するのであれば、さまざまなカラーを使うこともできます。
ギャラリーに使うサークル

写真などのギャラリーサイトで、単なる矩形のグリッドスタイルではなく、サークル状のエレメントを使うこともできます。これはギャラリーだけでなく、カテゴリのために使用してもサークルは効果的です。
クリエイティブなサークル

サークルを美しくするために、スワールやレイヤーやテクスチャやハーフトーンなどを加えて利用することもできます。こういったサークルを使用することで、ウェブサイトをより美しくクリエイティブにすることができます。
レトロなサークル

サイトの見た目をレトロ風にする際、サークルをレトロ風に使うと素晴らしい効果が得られます。サークルをレトロカラーにするだけでなく、他のエレメントを加えて利用するとより魅力的にできるでしょう。サイトの背景や装飾用のエレメントとして若干の箇所のみ使うようにしてください。
テクスチャと一緒に使うサークル

テクスチャだけでも見栄えはよいですが、サークルと組み合わせるとより見栄えがよくなります。特に背景として利用するときは、たいていの場合効果的です。
ラベルに使うサークル

サークルはラベルに使うこともできます。これは簡単に見つけられ、ユーザーに知ってほしいことを適切に伝えることができます。ラベルに使うサークルには異なるカラーを適用することもできますが、一様なカラーを使うほうがより効果的でしょう。
アクションに使うサークル

ユーザーのアクションへの呼びかけにサークルを使うことで、いっそうユーザーの目を惹きつけることができます。使用するカラーはユーザーの行動を促すカラーを使ってください。
パターンを使ったサークル

サークルはパターンと一緒に使用しても美しく見えます。使用するときはデザインにあった正しい種類のパターンにしてください。もちろん、サークルをパターンとして利用することもできます。
sponsors