Webデザインでサークル(円)エレメントを使用する際に参考になりそうなデザインやTipsまとめ

Webデザインでサークル(円)エレメントを使用する際に参考になりそうなデザインやTipsまとめ

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

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

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

Webデザインで円・サークルを使用する際に参考になりそうなデザインやTipsまとめ 目次

  1. サークルエレメントをWebデザインで効果的に使う
  2. 役立ちそうなjQueryプラグイン
  3. デザイン参考

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

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

Web design Ideas and Tips in Using Circles|Naldz Graphics

Web design Ideas and Tips in Using Circles|Naldz Graphics

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

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

このエントリーは海外ブログのものなので英語で書かれていますが、colissさんが「実例から学ぶ、円・サークルをウェブデザインで効果的に使う15のTips」として各ポイントを意訳していますので、日本語版ではこちらが参考になります。

目次へ

2. 役立ちそうな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

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

目次へ

3. デザイン参考

先日「2012年 Webデザイントレンド:サークル(円)エレメントを使用したサイト 25」というエントリーを書きましたが、これら以外にも参考になるデザインがまとめられている記事があったのでその中から幾つか紹介します。

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

続きは以下。

目次へ


先日このブログで書いた「2012年 Webデザイントレンド:サークル(円)エレメントを使用したサイト 25」では、これらで紹介されていないサイトを選んでまとめまています。
国内サイトやスマートフォンサイトなども幾つか載せていますので、興味ある方はそちらも併せてご覧ください :)

Close the search window,
please press close button or esc key.