共有2012年のWebのトレンドに円があるらしいです。円という表現がなかったというわけではありませんが、CSS3(border-radius)で簡単に円を表現できるようになったことで、「矩形と同じように円が使える」ってことですからねー。トレンドというよりは、より一般化していくんだと思います。そこで今回の記事では、円をサイトに使うためのアイディアを紹介します。そちらも合わせ読んでください。すべてがCSS3で作られたということでなく、あくまで表現の参考として見てください。アクセントとして使う一般にWebというメディアは、矩形で構成されるため、円という形を視線誘導のためのアクセントとして使用することができます。Nona中心の円が視線を誘導するだけではなく、ページ全体のバランスをとるための要素としてデザインされています。Agencyアイキャッチが円で構成されています。円には、放射状に並べるなど矩形にはない、表現があります。Creativeただの円ですが、矩形で構成されたグリッドの中では、これだけ視線を誘導します。サムネイルに使うサムネイルの装飾としても使えそうです。Mall円を少し重ねることで、隙間なく配置しています。Designsたくさん並べることで、独特の世界観がでます。Reserved色使いがかっこいいです。ネビゲーションにも円が使われています。Wallこちらは、記事下のコメント欄のプロフィール画像が円になっています。ナビゲーションに使う円形のボタンって、なんだかクリックしたくなりますよね。ボタンというものは円形ですから、「クリックできる」というアフォーダンスが、矩形よりも強いんだと思います。いうことでナビゲーションに適しています。Digitz大きさを変えて配置することで、単調にならないように工夫しています。Blogメニューが円で作られいます。こちらも単調にならないように、動きをつけて配置されています。Rakeshこんな感じにメニューを並べることもできますね。白丸の部分はクリックできませんが、アイディアとして見てください。モチーフとして使うグリッドを外してすべて円にしてみるといったこともできますね。全体のバランスととるのが難しそうです。India円が流体パーティクルのように、流れを生み出しています。Group円がメニューでもありビジュアルでもあり...うぅかっこいい。Wetteシンプルですが、不思議な世界観がありあます。細かいパーツまで円が使われています。FiveCSS3でこれできるかなぁ?とか思ってみると面白いです。↑はというと真ん中の重なった円が難しそうだなぁー。まとめこういった表現ができるようになることは、とてもうれしいことです。みなさんも、この記事を参考にしながら、円を表現に取り入れるアイディアを磨いてください。Tweetnambaど田舎でプログラマーとかWebデザイナーとかやりながらWebサービスを作る人。PHP、jQueryなどの技術系の記事担当してます。がんばって記事を書くので、リアクションしてくれると嬉しいです。スマートフォンスマートフォンからも最新のロケットをチェックできます。同じURLからアクセスできます。記事をチェック基本、毎日記事を書いています。よかったらチェックしてください。素材を最大限に活かすデザインアイデア50。