イラスト

概要

イラストは一目で意味が伝わるため、複雑なアイデアを簡素化し、視覚的なストーリーテリングを通じてユーザーの理解度を高めます。技術的概念とユーザーの理解のギャップを埋め、抽象的なアイデアをより具体的で魅力的なものにします。

Cloudflareの製品やサービスでは、イラストは注意を引き、好奇心を喚起し、ユーザーを効果的に誘導するものです。無形の概念を身近なビジュアルに変換し、明瞭で理解しやすいものにします。

基本原則

シンプルでわかりやすく

本質以外の不要な情報を削り、伝えたい内容を明確化しましょう。クリーンな線、シンプルな形、最小限のカラーパレットを使用して、視覚的に理解しやすいデザインにします。

言葉で説明するのではなく、見せる

比喩や例えを使って、複雑なアイデアを表現しましょう。イラストは、読み手が長い文章を読まなくても、概念を素早く理解するのに役立ちます。

鍵となるのは一貫性

Cloudflareブランドのカラーパレット、書体、線の太さを厳守してください。既存のライブラリにあるアイコニックな画像を再利用しましょう。こうすることで、ブランドの視覚言語をうまく溶け込ませることができます。

拡張性を確保する

イラストは大小問わず、読みやすく効果的である必要があります。

誰もが利用できるようにする

アクセシビリティを考慮しましょう。パターンやラベルで要素を区別することで、線、形、色を明確にわかるようにしましょう。要素の目的が異なる場合は特に注意します。色には十分なコントラストを持たせ、装飾でないイラストには代替テキストを付けて、スクリーンリーダー（画面の読み上げ機能）を使う人も内容を理解できるようにします。

ブランドの個性を反映する

イラストはブランドの個性を表現します。イラストは分かりやすさだけでなく、一目で当社のものと認識できるものでなければなりません。当社固有の視覚言語を取り入れ、当社独自のカラーパレット、ユーモア、特徴的な要素をすべてのピースに溶け込ませます。

スタイルと構図

人物と個性

Cloudflareが使う人物のイラストでは、多様性が重要な要素です。さまざまな特徴、肌の色、ヘアスタイル、服装などでイラストに個性を加え、従業員やお客様の多様性を表現します。

人物イラストのガイドラインをダウンロード

2Dとアイソメトリック

スタイルは主に二次元（2D）ですが、一部のイラストは微妙なグラデーションや陰影を使うことで、奥行きや立体感を表現しています。これにより、単純すぎる印象を避けることができます。場合によっては、アイソメトリック（等角投影）イラストの方が意味を伝えやすいこともあります。

禁止事項

不要な要素で見た目をゴチャゴチャさせない。混乱や、注意をそらす元となります。

無関係なスタイルやカラースキームを導入しない。混乱を招き、ブランド認知度や信頼を損なう可能性があります。

オリジナリティに欠けるありきたりな画像や使い古された画像を使用しない。Cloudflareにはユニークな点がたくさんあります。差別化に焦点を当てましょう。

同じようなユーザーや環境ばかりを紹介しない。できる限りさまざまなユーザーを代表するように努めましょう。文化的偏見を助長するような固定観念、偏り、誤解を広めないようにしましょう。

カラーパレット

イラストのカラーパレットは、Cloudflareのブランド色を基調にしています。主にタンジェリン、マンゴー、ルビーを使用し、ラズベリーやチェリーを加えることで、温かみと前向きな印象を演出しています。これに対して、ブラックベリー、パープル、ライトグレー、ライトブルーなどの寒色系で補完することで、バランスとコントラストを保っています。ホワイトを基調色として使用することで、イラスト全体に清潔感と現代的な印象を与えています。全体的にプロフェッショナルで信頼性が高く、さりげなくエキサイティングな印象を与えたものになります。

当社のブランドのイラストでは、赤と緑の色を意図的に使用しています。赤は明確な危険または脅威を表し、サイバー攻撃、セキュリティ侵害、失敗した操作を効果的に示します。逆に、緑は安全、成功、保護を表わし、安全な接続、効果的な防御、完了した操作などを示します。これらの色をすべてのビジュアルで一貫して使用することで、お客様が全体を通して直感的に理解できる統一性のある体験を提供します。これによりセキュリティの状態も素早く理解することができます。