アンブログ | WEB制作会社アンのメンバーがお届けする情報メディア

アンブログ/株式会社アンのスタッフブログ

Webマーケティング デザイン

丸が効いてる◎Webサイト8選

2018/07/12

こんにちは、Webデザイナーのさざなみです。
新規サイトのデザインや既存サイトのプロモーションページ制作などに企画からかかわっています。
常に変化するWebトレンドを取り入れたデザインで貢献します!

-------------------------------------------------------------

丸を使ったデザインが“WEBトレンド”と謳われた2012年から2年の歳月が流れ、
丸の使い方がさらに進化中です。

今回は4種類のバリエーションをご紹介します♪

 

【1】 半円型

メイン画像に半円を持ってくることによって、曲線が印象的なデザインを実現した2サイト。

京都麻袋  http://www.kyoto-matai.com/
やさしいデザインの中に品質も充分伝わってきます。

201405-1

 

ビアードパパ  http://www.beardpapa.jp/
丸を使った親しみやすいデザインの中に「おいしそう」が溢れています。
丸と矩形の両方をバランス良く使っているのも特徴です。

201405-2

 

-------------------------------------------------------

【2】 スライダー型

スライダーに丸を持ってきた2サイト。

子ども写真スタジオハピスタ  http://happy-photo-studio.jp/
ピーナッツみたいに丸く加工した画像を使うことでかわいらしさを演出しています。

201405-3

 

大阪樟蔭女子大学  http://cheer.osaka-shoin.ac.jp/
丸を組み合わせた画像で、ポップでオシャレな雰囲気を出しています。

201405-4

 

-------------------------------------------------------

【3】 散りばめ型

大小の丸を散りばめた2サイト

街ピタ  http://www.pitat.com/machipita
丸で切り抜いた画像に大小を付けておくことでリズミカルなデザインを実現しています。
丸の中が動画のものもあり、さらに動きがあって興味が沸きます。

201405-5

 

東リ  http://www.toli-life.com/
正円ではない歪みのある丸が左右に流れていきます。
どこか浮遊感があり、たくさん流れてきても圧迫感がありません。

201405-6

 

-------------------------------------------------------

【4】 縦曲線型

丸を感じさせる曲線を、縦スクロールの楽しさと効果的に融合した2サイト

ほそやのまる豚  http://marubuta.jp/

201405-7

 

コトハコーヒー  http://www.cotoha-coffee.com/

201405-8

-------------------------------------------------------

【5】 丸のデザイン まとめ

丸を使うと、やわらかく優しいイメージになることから
女性向けのWEBサイトに使われることが多いです。

また、矩形よりも余白が生まれやすく、余白の多い今風のデザインに向いています。

矩形だらけのデザインに丸をひとつ加えることでアクセントとしての効果も期待できるため、
私も丸をつい多用してしまいますが、今回パターン分けしたサイトに倣って
効果をよく考えた上で使いたいと思います♪

漣

 

 

 


目次