今年(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プラグインです。
BubbleSlider
このプラグインは有料ですが、各要素やスライドの仕方など至る所にサークルが使用されているスライダーです。
配布終了したようです。
デザイン参考
サークルエレメントを上手く取り入れた参考になるwebデザインです。
About | Helen & Har
JWT
ESTHETIC SALON ARIA