現在、円(サークル)をモチーフにしたホームページを制作しておりまして、参考にしたホームページ、webサイトを紹介したいと思います。

ただ単純に、画像などを円(サークル)にしているのではなく、動画にしたり、エフェクトを付けたり、アクションを入れたりするなど、視覚的な効果とともに、動きの要素を追加しているデザインが多い印象を受けました。ぜひ、参考にしてみてください。

【目次】円(サークル)をモチーフにしたホームページ

• RELATIONS INC. RECRUIT
• 株式会社エアー.プラス
• PLAY／UP (プレイアップ)
• 専門学校 岡山情報ビジネス学院
• Always With Honor
• monopo
• the HOUSE
• dot by dot inc.(株式会社ドットバイドット)
• 慶應義塾大学｜SFC Open Research Forum 2018
• vlog.it
• 画像をcssで丸くする方法

RELATIONS INC. RECRUIT

リレーションズ株式会社の採用ページです。ハンバーガーメニューやマウスオーバー、ローディングアニメーションなどにサークル的なデザイン要素を散りばめており、気持ちが良いUI(ユーザー インターフェイス)ですね。

株式会社エアー.プラス

空気の様な存在で毎日の「食べる」を楽しくする提案をプラスする株式会社エアー.プラスのホームページ、コーポレートサイトです。モノクロームでデザインすることで、料理の写真をとても印象的に魅せています。料理の写真もとても美味しそうですね。

PLAY／UP (プレイアップ)

カラーコンタクトレンズブランドのwebサイトです。韓国の男性ヒップホップアイドルグループ防弾少年団(ぼうだんしょうねんだん)(BTS)がイメージモデルとなっています。コンタクトレンズだけに円(サークル)がモチーフになっています。円がさらに円になっているのが素敵ですね。
商品名の「NIGHT POOL PARTY」、「KISS ON THE CHEEK」などカラーコンタクトレンズのコンセプトとサイトのトンマナ(トーン＆マナー)が統一されたホームページです。

専門学校 岡山情報ビジネス学院

専門学校岡山情報ビジネス学院（OIC）はＪＲ岡山駅から徒歩２分、高い資格取得実績と就職実績を誇る総合専門学校です。文科省職業実践専門課程認定。ホテル・ブライダル・医療事務・診療情報管理士・経営・公務員・保育・ＩＴ・情報処理・ゲーム・Web・デザインなどのコースがあります。
珍しいのは、メインビジュアルで円(サークル)は使われていますが、静止画ではなく、動画になっていることですね。また、普通のスライダーではなく、円が引っくり返る仕様になっています。

Always With Honor

Always With Honorは、オレゴン州ポートランドを拠点とするデザイン、ブランディング、イラストレーションのスタジオです。
円(サークル)のサムネイルが印象的で、ロゴはgifアニメーションで表現されています。画像もpngで処理しており、技術的にはとてもシンプルなポートフォリオサイト、ホームページですが、サムネルの見せ方がとても美しいです。

monopo

通称ヤングカンヌと言われる、広告業界の若手登竜門といわれるヤングライオンズコンペティションでファイナリストとして選出されるなど、世界と戦えるグローバルブランドを目指しているカンパニーです。
webサイトからしてかなりクオリティが高いので、クリエイティブへのこだわりはハンパない感じはサイトからもビンビン伝わってきますね。

the HOUSE

the HOUSEは、スポーツを通してライフスタイルを提案するコンセプトショップです。
ロゴ自体が黄色い円(サークル)がシンボルになっているため、webサイトの方でもメインのモチーフになっています。中央の円(サークル)が、次の画面にスライドするまでのローディングの効果も担っており、随所に円(サークル)のオブジェクトが登場するので、ロゴを認識させる役割も果たしています。

dot by dot inc.(株式会社ドットバイドット)

東京の渋谷にあるアイデア、テクノロジー、デザインを武器にこれまで培ってきた広告業界での活動に加え、エンターテイメント・IoT・空間演出・ファッション・TV、ゲームなど新たな領域でデジタルの生かし方を探り続ける集団です。
会社名がすでにdot(ディスプレイやプリンタで文字や画像を構成する最小単位となっている点のこと)なので、全面的にドット、円(サークル)がモチーフになっています。
特徴的なのは、ドットが様々なフォルムに変化することで、多様性や、繋がりみたいなものを表現していることですね。わざと、ドットをレイヤーの最上位に表示することで、特殊性や、印象が残るようなUXを作り上げています。

慶應義塾大学｜SFC Open Research Forum 2018

慶應義塾大学湘南藤沢キャンパス（SFC）で毎年開催している「SFC Open Research Forum (ORF)」のホームページです。
円(サークル)がグラデーションで表現され、また、マウスカーソルに追従するギミックが採用されています。このホームページも円(サークル)がロゴでモチーフになっているため、サイト自体も、それに付随したデザインになっています。

vlog.it

イタリアのフリーランスモーションデザイナーMarco Rosellaのホームページです。これまでの実績が中央の「vlog.it」を囲むように配置されているのが特徴的です。

画像をcssで丸くする方法

ちなみに長方形の画像をcssで丸くする方法は、結構、簡単にできます。画像にclassを与えて、cssで「border-radius: 50%;」と設定すれば、円形で表示ができます。
この50%の数値を、20%、30%などと変えるとサークルの湾曲も変化し、角が丸くなった画像が表示されます。

レッサーパンダ可愛い…

円形(サークル)をモチーフにしたホームページを作りたい！！という方はぜひバケルーンに。以下のようなホームページを提供いたします。

アニメーションや、特殊な動きが必要な場合はご相談ください。

ホームページの作成のご相談、お問合せは以下からお願いします！お気軽にお問い合わせください！

無料相談・無料お見積り

バケルーンの料金ページ
【12選】秀逸なホームページを集めたWEBデザインギャラリー
格安ホームページ制作！テンプレート利用がおすすめできない理由
【10選】ここに決めた！？初期費用10万円以下の格安ホームページ制作会社