ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

【WEBデザイン10選】丸を効果的に使ったデザインのサイトまとめ

  • WEBデザイン

WEBデザインの基本構造は、画像やテキストなどの、四角のボックスを組み合わせたもの。最近、多くのサイトで取り入れられているレスポンシブWEBデザインも作りとしては同じで、それぞれのボックスを可変にし、組み合わせ方を変化させることによって、デバイスごとにページを見やすく表示するというしくみになっています。

というわけで、WEBデザインでは四角をベースにしたものが圧倒的に多いのですが、そんな中で、見た目に変化をつけたり雰囲気を柔らかく変えたりしたい…という時に、「丸」を効果的に使うという方法があります。今回は、丸をうまく活かしたサイトを使われ方ごとに分けてご紹介していきます。

画像を丸くトリミングしたデザイン

画像のトリミングも、長方形や正方形などの四角形が一般的。一味変えて丸でトリミングすることによって、動きを出したり優しい印象を与えたりすることができます。

街ピタ(ピタットハウス)

01
http://www.pitat.com/machipita

業種:不動産業
サイトの目的:地域別の物件情報発信
サイトの特長:カード型デザイン、動画

不動産売買・賃貸業の「ピタットハウス」が運営する地域のオススメ情報ブログです。トップページのメインビジュアルに全国各地を象徴する写真や動画が使われていますが、それらを四角ではなく丸でトリミング。柔らかな印象を与え、それぞれの地域に親しみを覚えやすい作りになっています。物件情報はカード型デザインでわかりやすく整理されていますが、トップページに丸いモチーフを使うだけで、サイト全体の印象を楽しく親しみやすいものにする効果が生まれています。

社会福祉法人富士会 富士保育園

02
http://atami-fujihoikuen.jp/

業種:保育園
サイトの目的:園紹介、園児募集
サイトの特長:パララックス、アニメーション、イラスト

静岡県にある保育園のWEBサイトです。サイト全体が、水彩絵の具で描かれた手書きイラストのようなトーンでまとめられており、グローバルナビゲーションやボタン、写真のトリミングフレームなどの随所に丸のモチーフが使われています。トップページのメインビジュアルも、丸を変形させたような有機的な形でトリミング。このように丸を使うことで、保育園という小さな子供たちが学ぶ場所の雰囲気にあったデザインを表現しています。

背景に丸のモチーフを使ったデザイン

背景のパターンやアニメーションに丸や曲線のモチーフを使ってデザインしているサイトです。

FLOWFUSHI(フローフシ)

03
http://flow-fushi.jp/

業種:美容
サイトの目的:コーポレートサイト
サイトの特長:ワンカラムデザイン、アニメーション

モテマスカラをはじめとした化粧品を開発、販売している「フローフシ」のコーポレートサイトです。トップページの背景として、丸い泡のようなモチーフが下から上に浮かび上がるアニメーションが使われています。そこにオーバーラップする商品や技術の美しい写真も丸でトリミング。化粧品は女性が使用するもの。動きを付けた丸を多く使うことで、女性らしさや柔らかさを上手く表現しながらも、同時に未来志向や科学的イメージも感じさせるところが、絶妙な仕上がりになっています。

ながの内科

04
http://www.naganonaika.com/

業種:医療
サイトの目的:病院の紹介
サイトの特長:WordPressでの構築

福岡県にある「ながの内科」のWEBサイトです。ロゴマークに使われているブルー系で、サイト全体のトーンを統一。さらに、ページ背景のモチーフとして、ロゴマークのフォルムである円形を大胆に使っています。シンプルにまとまったサイトに少しだけアクセントを出したい…。そんな場合に、このようなワンポイントを加える方法は効果的です。ロゴの色やかたちをデザイン全体に反映していくことで、視覚的なアイデンティティを統一させているというデザインテクニックも参考になります。

商品やテーマの象徴として丸を使ったデザイン

商品の特徴をページにも表現したい。テーマをシンボリックに表したい。そのような目的で丸をモチーフに使ったサイトです。

加湿.net

05
http://xn--yfro26d.net/

業種:健康
サイトの目的:加湿の基礎知識の訴求
サイトの特長:イラスト

環境関連機器の製造販売を行っている三協エアテックが、加湿についての基本理解を深めてもらうために開設しているサイトです。加湿というテーマに合わせて、水滴の色やオブジェクトを随所に使用。四角い図形も角丸でブルーにするなど、細部まで水滴のイメージで統一されています。サイトの案内キャラクター「うるリン」も、丸をベースに作られたデザインになっています。

一六本舗

06
http://www.itm-gr.co.jp/

業種:食品
サイトの目的:商品・会社紹介、EC
サイトの特長:写真

愛媛県にある製菓メーカー「一六本舗」は、渦巻き型の「一六タルト」で有名な老舗。それが、円形のロゴマークの元にもなっています。サイトデザインでは、グローバルメニュー下に配したイメージ写真のトリミングや、ページ内の見出し、フッター部分の切り替えなどに、なだらかないくつもの曲線が使われているのが印象的。半径が異なる複数の大きな円の円周の一部を曲線として表現することで、ダイレクトに丸をモチーフとするよりも、洗練されたイメージになっています。画一的になりがちな商品紹介サイトの中で、やりすぎない程度のほどよい遊び心が感じられ、商品の魅力が引き立つ作りになっています。

デザインのメインオブジェクトとして丸を使ったデザイン

サイトデザインの象徴となるメインオブジェクトに丸を使ったサイトです。

Cocoro Care for Children

07
http://www.cocoro-cc.com/

業種:医療分野の任意団体
サイトの目的:活動紹介
サイトの特長:ワンカラムデザイン

東日本大震災を体験した子供たちの心のケアを行う、医師たちによる任意団体のサイト。活動コンセプトや趣旨を伝え、支援を得ることを目的としています。シンプルな作りのサイトですが、全体の色味をピンク一色に統一。丸をシンボリックに使ったデザインを採用することで、心をテーマにしている団体らしい優しい印象を与えています。このように、サイトの意図を伝えるために象徴的な形をモチーフとして使うケースは良くありますが、これは丸というかたちの効果的な使用例として参考になります。

株式会社ファーストブランド ブランドデザイン部

08
https://bd.firstbrand-lab.com/

業種:クリエイティブ
サイトの目的:事業紹介
サイトの特長:レスポンシブWebデザイン、ワンカラムデザイン

WEBブランディングなどを手掛けるファーストブランドという会社のブランドデザイン部門を紹介するページです。会社紹介サイトとは別に、クリエイターのリクルートや営業のためのランディングページのような役割のページになっています。モノクロでシャープなイメージの配色に、丸を使ったオブジェクトが印象的。この丸は左上にある「brand design」というメガネをモチーフにしたシンボルマークとも連携しており、さすがブランディング専門の会社らしい、メッセージ力のあるページになっています。

同心円を使った先進的なデザイン

丸のモチーフの中でも、独特な雰囲気を醸し出す同心円を使ったデザインです。

Next Stage with you(メルセデスベンツA-Class)

09_2
http://app.aclass-next-stage-with-you.jp/

業種:自動車
サイトの目的:メルセデスベンツA-Classのプロモーション
サイトの特長:レスポンシブWebデザイン、パララックス、アニメーション

メルセデスベンツA-Classのプロモーションサイト。ファーストビューで、メルセデスのマークをイメージさせる丸を使った4つのリンクメニューが印象的です。このサイトは、パフォーマンスとテクノロジーで感動を生み出すテクノポップユニットPerfumeとのコラボレーションにより、A-Classが最新技術で進化したクルマであることをアピールしています。ページをスクロールしていくと、アニメーションの中でも円が多く使われており、iPhoneアプリの紹介部分の背景では、同心円がインパクトのあるビジュアルになっています。

20rpm

10
http://20rpm.sweetrice.com/

業種:音楽
サイトの目的:音楽CD、LPのプロモーション
サイトの特長:レスポンシブWEBデザイン、アニメーション

アーティストのCD、LPのプロモーションサイトです。音楽レーベルのロゴマークであり、このアルバムのジャケットでもある同心円が大胆に使われています。アナログレコードの動きをモチーフにしたと思われますが、画面全体に丸が配置され、それぞれが激しく動くアニメーションはかなりのインパクト。優しい印象の表現のためにいられることが多い丸も、使い方次第ではこのようなアーティスティックな印象にもなるという一例です。

今回のまとめ

今回は 「丸」というモチーフを効果的に使ったサイトを紹介していきました。丸を使ったデザインのサイトは予想以上に多く、そのバリエーションも数多くあることに驚かれたのではないでしょうか。

色だけでなく、かたちにもそれぞれが与えるイメージというものがあります。丸のモチーフを使ったこれらのサイトで、もしそれが四角だったら…と考えると、印象は大きく異なるはず。丸には丸を使っている理由があります。そのような点も考えながら見ていくと、デザイナーではない方にとっても、デザインチェックをする際のデザインの良し悪しを考えるヒントになるかもしれません!

<関連記事>
【WEBデザイン10選】ページ遷移のエフェクトが心地よいサイトまとめ
これは上手い!縦の文字組みを効果的に使ったサイトまとめ
【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

<PR>
WEBに関する情報をまとめたキュレーションサイトSeleQt(セレキュト)

 

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  5. 5

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  6. 6

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  7. 7

    わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!

  8. 8

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    歯科クリニックのホームページを徹底調査!24サイトに見る集患力のポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  7. 7

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND