デザイン要素

概要

「Cloud(雲)」のロゴマークの中にある「Flare(フレア:閃光)」は、デザインシステムのヒーロー要素です。フレアでブランドを大きく大胆に印象づけています。洗練と成熟を感じさせる流れのある形は、当社の自信とシンプルさを企業界に伝えています。

フレアアーク
デザイン要素 - フレアアーク - ポジティブフレアアーク - 画像

ポジティブフレアアーク
フレアは4つのアーク(弧)に視覚的に分解することができます。これらのアークは視覚システムの基本的な要素です。

クロップしてレイアウトされ、オーバーラップによってアークの交点が作られます。
レイアウト内で完全なフレアを見せることは決してありません。一つのフレアで見せていいアークは2つまでです。

デザイン要素 - フレアアーク - ネガティブフレアアーク - 画像

ネガティブフレアアーク
フレアはポジティブでもネガティブでも見ることができます。どちらの視点にも利点があります。

例えば、ネガティブな形は、活字に読みやすい場所を与えるコンテナとして使用できます。あるいは、写真の上に配置することもできます。

シングル
デザイン要素 - シングル - シングルフレア - 画像

シングルフレア
これはデザインシステムの最も基本的なバージョンです。ここではブランドカラーのグラデーションで表示されています。 フラットカラーにすることもできます。

デザイン要素 - シングル - フレアポジショニング - 画像

フレアの位置設定
シングルフレアのアークの位置設定は非常に柔軟です。アークは、どんな長方形フォーマットのどの角にでも配置できます。

マルチ
デザイン要素 - マルチ - ダブルフレア - 画像

ダブルフレア
2つ以上のフレアを重ねることで奥行きと広がりを加えます。それによって、Cloudflareの機能とサービスの幅広さを表現します。

デザイン要素 - マルチ - トリプルフレア - 画像

トリプルフレア
交差によって、多様でグローバルなエコシステムの複雑さを(調和のとれた方法で)解決する多面的なアプローチを表現します。

ライブラリ
概要

このライブラリは、幅広いアセットにわたってさまざまな方法で使用できる既製のフレア画像で構成されています。状況はすべて同じではないため、パターンの配置やクロップをアセットに応じて変えることは可能です。そうすることで、ブランドの新鮮味を保つことができます。その結果、洗練されていて大胆で興味を引くものができるのです。

デザイン要素 - ライブラリ - マルチフレア01 - 画像

マルチフレア01

デザイン要素 - ライブラリ - マルチフレア03 - 画像

マルチフレア03

デザイン要素 - ライブラリ - マルチフレア05 - 画像

マルチフレア05

デザイン要素 - ライブラリ - マルチフレア02 - 画像

マルチフレア02

デザイン要素 - ライブラリ - マルチフレア04 - 画像

マルチフレア04

デザイン要素 - ライブラリ - マルチフレア06 - 画像

マルチフレア06

クロップ
概要

マルチフレア画像は、あらゆる形とサイズの動的コンポジションを作成できる柔軟性と多様性を提供します。全体、フルブリード、クロップ(例参照)、180度回転での使用が可能です。ブランド画像の代わりにブランドグラデーションを使用する場合:

  • 使用できないクロップ画像が発生する場合

  • 小スペースのフォーマットで、画像の細部が不明瞭になる場合

  • ミニマルな(気が散る要素を排除した)ブランディングのタッチ(フレームの縁に沿った細いグラデーションの境界線など)が必要なデザインの場合

デザイン要素 - クロッピング - 長方形 - 画像
デザイン要素 - クロッピング - 長方形 - 右 - 画像

長方形
マルチフレア画像は、あらゆる形とサイズの動的コンポジションを作成できる柔軟性と多様性を提供します。下に例示するように、全体、反転、フルブリード、クロップでの使用が可能です。

デザイン要素 - クロッピング - 正方形 - 2カラム - 左 - 画像
デザイン要素 - クロッピング - 正方形 - 2カラム - 右 - 画像

正方形
画像はオーバークロッピングしないでください。きつくクロップしすぎると、解像度が低下して細部がぼやける(オレンジ色の階調がフラットになる、フレアアークの形状認識が難しくなるなど)可能性があるほか、動的なフローを制限することもあります。

デザイン要素 - クロッピング - 縦長 - 左 - 画像
デザイン要素 - クロッピング - 縦長 - 右 - 画像

縦長
切り取った画像に、オーバーラップするフレアの交点が1つ以上含まれるようにします。オーバークロッピングを避けるため、x軸とy軸のいずれかの方向の少なくとも20%を使用します。

デザイナーのアップグレード
デザイン要素 - デザイナーアップグレード - グラデーションにストローク - 画像

グラデーションにストローク
レモン色の線のストローク(線描)はフレアを際立たせ、シャープで鮮明なものにします。デザインによりますが、レモン色の線は2本までとします。ほとんどの場合は1本で十分です。

デザイン要素 - デザイナーアップグレード - フラットにストローク - 画像

フラットにストローク
グラデーションのマルチフレアの背景に、フレアストロークとホワイトフレアを使用しました。

デザイン要素 - デザイナーアップグレード - グラデーション、ストローク、ネガティブ - 画像

グラデーション、ストローク、ネガティブ
ホワイトを加えることで、コンポジションは大胆でダイナミックになり、目を惹きつけることができます。オレンジ色のバランスもよくなります。

デザイン要素 - デザイナーアップグレード - フラット、ストローク、ネガティブ - 画像

フラット、ストローク、ネガティブ
グラデーションのマルチフレアの背景に、フレアストロークとホワイトフレアを使用しました。

応用
グラデーションの例

ビルボードやプレゼンテーションの表紙といった大フォーマットでは、より大きくより大胆にします。サイズが大きければ、思いきりダイナミックで表現豊かな奥行きと広がりのあるデザインが可能です。ホワイトスペースをたっぷりとって、色のついたグラデーションのフレアアートが目に飛び込んでくるようにします。

デザイン要素 - アプリケーション - 左 - 画像
デザイン要素 - アプリケーション - 右 - 画像
デザイン要素 - アプリケーション - 3カラム - 左 - 画像
ブランドガイドライン - デザイン要素 - アプリケーション - 3カラム - 中央 - 画像
デザイン要素 - アプリケーション - 3カラム - 右 - 画像
デザイン要素 - アプリケーション - 下部2カラム - 左 - 画像
デザイン要素 - アプリケーション - 下部2カラム - 右 - 画像
フラットの例

ソリッドカラー(2D)は、デジタルバナーなど小さいフォーマットでのみ使用します。そうすることで、より深い範囲のコンテンツをシンプルかつ明瞭に提示できます。

デザイン要素 - フラットの例 - 左 - 画像
デザイン要素 - フラットの例 - 右 - 画像

ビジュアルリソースが必要ですか?

ロゴ、写真、背景、バナー、動画、イラストなどのクリエイティブアセットをダウンロードしてください。