今年(2012年)のwebデザインのトレンドのひとつとして予想されているサークル(円)エレメントを使用したwebデザインについての個人的なメモです。

Web Design Trends in 2012 | Web Design Ledger」のエントリーで紹介されている今年のwebデザインのトレンド予想のひとつが、サークル(円)エレメントを使用したwebデザインです。
サイトのワンポイントとして配置されていたり、サムネイル画像を円形にトリミングしていたり、ナビゲーションに使用してマウスオン時にふわっと領域が拡大したりと、いろいろ見てみると様々な箇所でサークルエレメントは使われているなと感じます。

以前から個人的にサークルエレメントを使用したデザインは気になっていたのに加えて今年のトレンド予想にも上がっているので、使用時に参考になりそうなデザインやTipsなんかを少しまとめておこうと思います。

サークルエレメントをwebデザインで効果的に使う

トレンドになっているからというだけでただ単にサークルエレメントを使用しても、当然ながら良いデザインは生まれません。
サークルエレメントに限ったことではないですが、素晴らしいデザインのサイトはひとつひとつの各要素が細部まで作り込まれており、それらが効果的に配置されています。

Web design Ideas and Tips in Using Circles

Web design Ideas and Tips in Using Circles

このエントリーではサークルエレメントを効果的に使う15のTipsを実例をあげながら紹介しており、簡単に項目部分のみを紹介すると下記のようになっています。

  1. 複数のレイヤーで重ねたサークル
  2. 半透明のサークル
  3. かなり大きなサークル
  4. ナビゲーション用のサークル
  5. ヘッダに使うサークル
  6. 複数のカラーを使ったサークル
  7. 繊細なサークル
  8. 背景に使う数多くのサークル
  9. ギャラリーに使うサークル
  10. クリエイティブなサークル
  11. レトロなサークル
  12. テクスチャと一緒に使うサークル
  13. ラベルに使うサークル
  14. アクションに使うサークル
  15. パターンを使ったサークル

役立ちそうなjQueryプラグイン

もちろん使い方次第だとは思いますが、個人的にサークルエレメントと組み合わせると良いのではないかと思うjQueryプラグインです。

Bubble Navigation with jQuery

Bubble Navigation with jQuery

丸いアイコンにマウスオーバーするとふわっと広がり、サブメニューが表示されます。

Extremes

Extremes

円周上に要素を設置できます。

jQuery Radmenu Plugin

jQuery Radmenu Plugin

上と同じく円周上に要素を設置できます。
こちらのプラグインはナビゲーションがついていて、要素を回転させたりシャッフルしたりできます。

BubbleSlider

BubbleSlider

このプラグインは有料ですが、各要素やスライドの仕方など至る所にサークルが使用されているスライダーです。

配布終了したようです。

Lightweight Circle slideshow

Lightweight Circle slideshow

つまみ部分を選択してくるくると回すと、画像が切り替わっていくスライドです。

Circle Menu

Circle Menu

様々なアニメーションで隠れた要素が出てきます。
Circle Menuという名前の通り、メニュー部分で使えそうなプラグインです。

Bubble Slideshow

Bubble Slideshow

バブルアニメーション効果で切り替わるスライドです。

デザイン参考

サークルエレメントを上手く取り入れた参考になるwebデザインです。

vlog.it

vlog.it

Column Five

Column Five

About | Helen & Har

About | Helen & Har

Cloudberry

Cloudberry

Mickaël Larchevêque

Mickaël Larchevêque

In Motion

In Motion

Chimp Chomp

Chimp Chomp

Always With Honor

Always With Honor

THIS IS TEIXIDó

THIS IS TEIXIDó

Gesture Theory

Gesture Theory

JWT

JWT

RaNa design associates

RaNa design associates

Messages for Japan

Messages for Japan

ESTHETIC SALON ARIA

ESTHETIC SALON ARIA

TOLI-LIFE.com

TOLI-LIFE.com

glück

glück

注意: 音が出ます

i kitchen.jp PALETTE

i kitchen.jp PALETTE

Styiens

Styiens

1minus1

1minus1

Curious Generation Group

Curious Generation Group

Personal Portfolio of Rakesh

Personal Portfolio of Rakesh

Digital Agency

Digital Agency

Project Green

Project Green

New Majestic Hotel

New Majestic Hotel

Yann Pochet Portfolio

Yann Pochet Portfolio

C’EST MOI WEB SITE

C’EST MOI WEB SITE

SAKURA SELECTION

SAKURA SELECTION

mon cifaka online store

mon cifaka online store

Hello Hello Hi

Hello Hello Hi

Webey

Webey

BOMBASTISK

BOMBASTISK