サークル(円)デザイン[circle design]とは、そのネーミングの通り、デザインに円形を取り入れたデザイン手法。
四角形が基本のWEBデザインにおいて、これまでは円を表現するには画像で作るしかなかったが、CSS3の普及に伴い、border-radiusなどによって簡単に角丸や円をCSSだけで表現することができるようになり、2012年から2013年を境に急激にサークルデザインを採用するWEBサイトが増えました。
http://www.hiroshima-hirobiro.jp/
広島への移住を後押しするウェブメディア。 半円形に切り取られたメインビジュアルのギャラリーや、メニュー部分が印象的ですね。 コンテンツのリスト部分はMasonryでタイル敷き詰め型のレイアウトになっています。
http://www.pecotoy.com/shop/main/index.php
韓国の紙製のフィギュア(ペーパートイ)PECOTOYのウェブサイト。 立体感のあるロゴマークや、ポリゴン風の背景、サークルデザイン、背景動画など、最近のトレンドをふんだんに取り込んだオシャレなデザインに仕上がっています。
東京に複数店舗を展開するガーデニングショップのウェブサイト。 要所要所で登場するカルーセルパネルや、サークルデザイン、全画面背景の使い方がうまく、 高級感がありつつも親しみやすい女性的なデザインに仕上がっています。
http://www.to-bi.ac.jp/lp/evening/
美術学校のランディングページ。 メインビジュアルの特大配置のキャラクターが目を引きます。 円形に切り取られた画像やモコモコの吹き出しなど、かわいらしい印象に仕上がっています。 アダプティブWEBデザイン(スマホ用のブレイ […]
http://murakamifarm.com/myouken/
豆苗の特設ページ。 手書き風な区切り線、ナチュラルな色使い、アニメーションする人物のコラージュ、ゆるいイラストなど、可愛らしい世界観に仕上がっています。
パステル調の色使いと、サークルデザイン、曲線を取り入れた波のようなデザイン、ストライプなど、女性が好みそうなファンシーなデザインに仕上がっています。 メインビジュアル部分は、マウスの移動に合わせてパララックスにふわふわと […]
フラットデザイン×フラットなイラストアイコン主体のシンプルなデザイン。 トレンドのサークルデザインも取り入れており、カラフルでスタイリッシュな印象に仕上がっています。残念ながらレスポンシブWEBデザインには非対応。 個人 […]
油を使わないヘルシーな焼きドーナツ専門店ということとで、オーガニックな印象のフッターや、サークルデザインがしっくりときますね。 背景のテクスチャ使いや、境界のクレヨンで縁取ったようななナチュラルな仕上げ、バナーのかすれ加 […]
http://www.nijikaisatsuei.com/
ザラっとした質感のテクスチャながら、パステルな色遣いとストライプやサークルデザインで、結婚式の賑やかなイメージを表現しています。 各要素が大きめで、ダイナミックに配置されているのもポイントですね。
女性ターゲットのフリーマーケットアプリのウェブサイト。 素材感のあるチェックやストライプ・レースをモチーフにした可愛らしいデザイン。 ヘッダー部分のグラデーションだけなぜか無機質でモッコリしてるのが残念ですが、若い女性 […]
http://urawa-tsukushi.com/recruit/
幼稚園の求人特設サイト。 手書き風のかわいらしいイラストと、手書きのゆがんだ円(サークル)で、やわらかい印象に仕上がっています。