実例から学ぶ、円・サークルをウェブデザインで効果的に使う15のTips

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

サイトのキャプチャ

Web design Ideas and Tips in Using Circles

下記は各ポイントを意訳したものです。

複数のレイヤーで重ねたサークル

サイトのキャプチャ

Matt Webb

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

半透明のサークル

サイトのキャプチャ

Pngised

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

かなり大きなサークル

サイトのキャプチャ

Warszawska-Jesien

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

ナビゲーション用のサークル

サイトのキャプチャ

Jarad Johnson

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

ヘッダに使うサークル

サイトのキャプチャ

Stone Laboratory

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

複数のカラーを使ったサークル

サイトのキャプチャ

Design Zoom

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

繊細なサークル

サイトのキャプチャ

Weissenhorner

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

背景に使う数多くのサークル

サイトのキャプチャ

Karen Hunter Blog

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

ギャラリーに使うサークル

サイトのキャプチャ

Kelly Boyle Designs

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

クリエイティブなサークル

サイトのキャプチャ

Seb Design

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

レトロなサークル

サイトのキャプチャ

Killer Directory

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

テクスチャと一緒に使うサークル

サイトのキャプチャ

STO Solutions

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

ラベルに使うサークル

サイトのキャプチャ

Zoo Advertising

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

アクションに使うサークル

サイトのキャプチャ

Benitos Hat

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

パターンを使ったサークル

サイトのキャプチャ

Hot Cake

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

top of page

©2017 coliss