ログイン / 登録 アカウント
Jump to section

アイコンは抽象的あるいは具体的な概念を記号化したもので、さまざまなアイデアやテクノロジーの描写に役立ちます。Red Hat のアイコンセットにある各アイコンは特定の意味を持ち、一貫したデザインを施されています。このため、ビジネスに対して一貫性のある効果的なコミュニケーションを実現できます。

サイズに応じて、異なるタイプのアイコンまたはイラストが必要になります。

UI アイコン

ユーザーインタフェース (UI) アイコンは極めて小さく、Web サイトや製品のインタフェースに使用されます。

標準アイコン

アイコンは 1 つのコンセプトまたは 2 つの物事の関係を表現します。

ミニスポット

ミニスポットは小さなイラストで、単純なコンセプトを表現します。

イラスト

イラストではストーリーのある構造を持たせたり、複雑なコンセプトをわかりやすく描写したりできます。

アイコンには、標準と UX の 2 つのタイプがあります。標準アイコンは、マーケティング資料、スライド、インフォグラフィック、図表に使用され、UX アイコンはインタフェースに使用されます。

標準アイコン

Red Hat のアイコンシステムは単純、明確、オープンです。すべてのアイコンは同じ線の太さと曲率を使用し、正面から見た物体を示します。平面図法を使用し、幾何学図形のみを使用して作成されます。デフォルトでは、標準アイコンには塗りつぶしありとなしの 2 つのバージョンがあります。カラーは赤、黒、白の 3 色がありますが、ブランドパレット内の任意の色に変更できます。

マーケティング資料、プレゼンテーション、Web コンテンツ、インフォグラフィック、図表には、標準アイコンを使用します。32 - 100 ピクセルのサイズが最適です。

標準アイコンの作成

アイコンライブラリはコラボレーションによって次第に充実していきます。新しいアイコンを作成したら、Red Hat にご提供ください。作成したアイコンが既存のセットと違和感なく組み合わせられるようにするには、テンプレートを使用して以下のガイドラインに従ってください。

1. 36 ピクセルのアートボードにアイコンを描画します。必要に応じて内部マージンまでは拡大できます。各アイコンの比率とサイズは同程度にそろえます。描画要素が外部マージンにはみだしてはいけません。

2. すべての角度は、0°、45°、90°、またはこれらの角度の ±12° にします。角度 12° を使用するのは、フォントのアセンダーとディセンダーの角度に一致するからです。

3. 塗りつぶしなしのアイコンを先に作成します。線の太さとして 1.5 を使用し、終点と角に丸みを付けます。

4. アイコンの基本フォームの作成には幾何学図形のみを使用します。

5. 点と直線を使用して細部を追加します。ストローク間に 1.5 ポイントの間隔を空けて、開放感または奥行きを表現します。点線には 0 ポイントのダッシュと 2.5 ポイントのギャップを使用します。

6. 小型の矢印は 90° で両端の長さは 2 ピクセルにします。大型の矢印は小型の矢印と同じ比率を維持します。

塗りつぶされたアイコンの作成

1. 塗りつぶされたアイコンを作成するには、輪郭を描画したバージョンから作成し、線と同じ色で塗りつぶし、線のサイズを維持します。

2. 細部を白ヌキにします。

3. 細部のサイズを変更して、要素間のギャップが 1.5 または 0.5 ポイントになるようにします。デザインによっては、その代わりに線を延長します。

UI アイコン

スクリーンベースのインタフェースは、特にサイズとスケールの面でアイコン設計では特殊な課題となります。インタフェースのアイコンは、極めて小さなサイズであってもすぐに理解できる、明確なものでなければなりません。このような小さなサイズでも、標準アイコンと同じ原則を UI アイコンに使用します。すなわち、12° と直角、丸みのある角と終端、幾何学図形です。 

Red Hat の UI アイコンは平面的かつシンプルで、16 ピクセルでも識別できます。主にグレーまたは白で使用されます。

1. 最初に 16 ピクセルのアートボードと 1 ポイントの太さで作成します。デザインの周囲に 1 ピクセルのマージンを確保します。

2. アイコンが 14 ピクセルのグリッド内に収まるようにします。

3. 標準アイコンを参考にして、既存のアイコンを流用します。アイコンを識別するために必要な要素のみを使用します。

パターンとしてのアイコン

パターンは、アイコンを使用して、視覚的に興味深く訴えかけるグラフィックをすばやく作成する方法です。パターンを背景や空白の塗りつぶしに使用します。

パターンに対するアプローチ

パターンを作成するとき、パターン内の 1 つまたは 2 つの要素を変更し、動きを加えます。パターンは動きがあって関心を引くものであるべきで、退屈で単調なものにしてはいけません。 

1 つのアイコンを使って、サイズ、色、塗りつぶしを変えてみます。 

関連性のあるアイコンのセットを同じサイズにして使用します。

ひとまとまりのアイコンに接続線を加えます。

色とスケールに変化を持たせます。

アイコンの使用例

最小限のデザイン要素でアイコンを 2 次元にします。

アイコンを複雑にしたり 3 次元にしたりしてはいけません。

すべてのアイコンについて、どのアイコンにも同じ線の太さを使用します。

複数の線の太さを使用してはいけません。

抽象的なアイデアを表現する具体的なイメージを見つけます。

ユーザーが意味を理解できないほどまでに抽象化してはいけません。

アイコンが表現するコンセプトは 1 つだけにします。

2 つのコンセプトを組み合わせて複雑なコンセプトを描画してはいけません。

パターン内の 1 つまたは 2 つの要素に変化をつけて、リズムを出して関心を引きます。

変化のない同じパターンを使用しないでください。退屈で単調になります。

使用するパターンは複雑すぎず、テキストの邪魔にならないものにします。

メッセージの解読に支障を来すようなパターンは使用してはいけません。

標準アイコンは視覚的な興味を付加し、プレゼンテーション資料の要点を協調する、手軽な手段です。

redhat.com のインタフェースでは、UI アイコンによってユーザーはサイト内をすばやく直感的にナビゲートできます。