今年（2012年）のwebデザインのトレンドのひとつとして予想されているサークル（円）エレメントを使用したwebデザインについての個人的なメモです。
「Web Design Trends in 2012 | Web Design Ledger」のエントリーで紹介されている今年のwebデザインのトレンド予想のひとつが、サークル（円）エレメントを使用したwebデザインです。
サイトのワンポイントとして配置されていたり、サムネイル画像を円形にトリミングしていたり、ナビゲーションに使用してマウスオン時にふわっと領域が拡大したりと、いろいろ見てみると様々な箇所でサークルエレメントは使われているなと感じます。
以前から個人的にサークルエレメントを使用したデザインは気になっていたのに加えて今年のトレンド予想にも上がっているので、使用時に参考になりそうなデザインやTipsなんかを少しまとめておこうと思います。
サークルエレメントをwebデザインで効果的に使う
トレンドになっているからというだけでただ単にサークルエレメントを使用しても、当然ながら良いデザインは生まれません。
サークルエレメントに限ったことではないですが、素晴らしいデザインのサイトはひとつひとつの各要素が細部まで作り込まれており、それらが効果的に配置されています。
Web design Ideas and Tips in Using Circles
このエントリーではサークルエレメントを効果的に使う15のTipsを実例をあげながら紹介しており、簡単に項目部分のみを紹介すると下記のようになっています。
- 複数のレイヤーで重ねたサークル
- 半透明のサークル
- かなり大きなサークル
- ナビゲーション用のサークル
- ヘッダに使うサークル
- 複数のカラーを使ったサークル
- 繊細なサークル
- 背景に使う数多くのサークル
- ギャラリーに使うサークル
- クリエイティブなサークル
- レトロなサークル
- テクスチャと一緒に使うサークル
- ラベルに使うサークル
- アクションに使うサークル
- パターンを使ったサークル
役立ちそうなjQueryプラグイン
もちろん使い方次第だとは思いますが、個人的にサークルエレメントと組み合わせると良いのではないかと思うjQueryプラグインです。
Bubble Navigation with jQuery
丸いアイコンにマウスオーバーするとふわっと広がり、サブメニューが表示されます。
Extremes
円周上に要素を設置できます。
jQuery Radmenu Plugin
上と同じく円周上に要素を設置できます。
こちらのプラグインはナビゲーションがついていて、要素を回転させたりシャッフルしたりできます。
BubbleSlider
このプラグインは有料ですが、各要素やスライドの仕方など至る所にサークルが使用されているスライダーです。
配布終了したようです。
Lightweight Circle slideshow
つまみ部分を選択してくるくると回すと、画像が切り替わっていくスライドです。
Circle Menu
様々なアニメーションで隠れた要素が出てきます。
Circle Menuという名前の通り、メニュー部分で使えそうなプラグインです。
Bubble Slideshow
バブルアニメーション効果で切り替わるスライドです。
デザイン参考
サークルエレメントを上手く取り入れた参考になるwebデザインです。
vlog.it
Column Five
About | Helen & Har
Cloudberry
Mickaël Larchevêque
In Motion
Chimp Chomp
Always With Honor
THIS IS TEIXIDó
Gesture Theory
JWT
RaNa design associates
Messages for Japan
ESTHETIC SALON ARIA
TOLI-LIFE.com
glück
注意: 音が出ます
i kitchen.jp PALETTE
Styiens
1minus1
Curious Generation Group
Personal Portfolio of Rakesh
Digital Agency
Project Green
New Majestic Hotel
Yann Pochet Portfolio
C’EST MOI WEB SITE
SAKURA SELECTION
mon cifaka online store
Hello Hello Hi
Webey
BOMBASTISK
