丸(円)を使ったWEBデザイン

 

html5+css3が普及してきたことで、丸(円)を使ったサイトが増えています。

やわらかい雰囲気づくり、適度な余白、ポイントとしてのアクセントなど、ホームページづくりの参考にどうぞ。

 

丸(円)を使ったWEBデザイン

 

 

RaNa design associates, inc.

RaNa design associates, inc.

株式会社ラナデザインアソシエイツのホームページ。
トップページに実績を円形のサムネイル画像で敷き詰めています。
四角形と違って、円は敷き詰めても圧迫感がないですね。

http://www.ranadesign.com/

 

 

 

南女組 甲南女子大学情報ポータルサイト

南女組 甲南女子大学情報ポータルサイト

甲南女子大学の情報ポータルサイト。
パステルカラーを使った明るい雰囲気が魅力的です。
丸を並べることでポップな感じを際立たせています。

http://www.konan-wu.jp/

 

 

 

七田チャイルドアカデミー

七田チャイルドアカデミー

七田チャイルドアカデミーが運営する幼児教室の特設サイト。
ボタンやアイコンなど、丸を使うことで優しい雰囲気が伝わってきます。

http://baby.shichida.ne.jp/age_0/

 

 

 

あひる保育園

あひる保育園

兵庫県にあるあひる保育園のサイト。
子供の元気さをイメージさせる黄色をメインカラーに、丸く加工した写真を使うことでかわいらしさを演出しています。

http://www.ahiru-net.jp/

 

 

 

中央ろうきん「お悩み解決!住宅ローン」サイト

中央ろうきん「お悩み解決!住宅ローン」サイト

中央ろうきんの住宅ローンに関するサイト。
沢山の人の疑問がセリフのようにカラフルな円で配置されています。
四角だと、隙間ができにくく窮屈な感じになりますが丸なら適度な余白ができますね。

http://chuo.rokin.com/2009jutaku/#/top/all

 

 

 

生命保険のITコンサルティング|ACU

生命保険のITコンサルティング|ACU

生命保険のシステム構築とコンサルティングをしているACUのサイト。
丸いデザインが色々なところで使われています。
ロゴが丸いフォントなので、ロゴに合わせたバランスの良いデザインですね。

http://www.acu.co.jp/index.html

 

 

 

キユーピー マスタード | キユーピー

キユーピー マスタード | キユーピー

キューピーマスタードの商品サイト。
商品にちなんだマスタード色の背景に、商品の使用例として丸い写真が沢山並んでいます。
黄色い色と沢山並んだ写真が楽しい雰囲気を演出しています。

http://www.kewpie.co.jp/mustard/index.html#back

 

 

 

givery RECRUITING SITE Synapse

givery RECRUITING SITE Synapse

株式会社ギブリーの採用情報サイト。
「ツナガリ*うごかす」というコンセプトを、見事に表現しています。
丸を使うことで、堅苦しさを感じさせない、印象的なサイトです。

http://givery.co.jp/special/

 

 

 

KGグループ

KGグループ

タクシー会社、KGグループのWEBサイト。
円の大小で重要度(目立たせたいもの)が感覚的に分かるように工夫してあります。

http://gurin.co.jp/

 

 

 

カラベジ 八重瀬町カラフルベジタブル

カラベジ 八重瀬町カラフルベジタブル

沖縄県八重瀬町のPRサイト。
黄色をメインに、カラフルな色使いと円を使った、町の元気が伝わるサイトです。

http://www.karabezi.net/

 

 

 

こまねこ公式サイト

こまねこ公式サイト

こまねこ公式サイト。
丸をタイトル部分だけに使うことで、タイトルに目がいくようになっています。
子供向けやキャラクター関係は、丸を使うことで親しみやすさがアップするので便利ですね。

http://www.komaneko.com/index.shtml

 

 

 

東北最大級の遊園地 リナワールド

東北最大級の遊園地 リナワールド

東北最大級の遊園地リナワールドのサイト。
テーマパークなので、元気で明るい色遣いになっています。
ちょっとくずした円の形が、親しみやすさや子供らしさを演出しています。

http://www.linaworld.co.jp/