ピクトグラム
主要なウェブコンポーネントを強化し、アイデアを素早く効果的に伝える小さくシンプルなグラフィック素材です。
リテラルで機能的、そして幾何学的な私たちのピクトグラムは、アイデアを最も純粋な形にまでそぎ落とし、明確な目的と時代を超えたシンプルさを伝えます。
タイプ
Spaceshipのピクトグラムには2つのタイプがあります: regular とcompです。compタイプは、通常のピクトグラムとSpaceshipのIconography Libraryのアイコンを組み合わせたもので、より複雑で特定性の高い概念を伝えることができます。
バージョン
すべてのSpaceshipピクトグラムは、filled（プライマリ）とoutlined（セカンダリ）の2つのバージョンで利用できます。アウトライン版は、近くにある他のピクトグラム、テキスト、またはUIコンポーネントよりも視覚的な重みを軽くする必要がある場合にのみ使用してください。これにより、複雑なレイアウトで視覚的階層を確立できます。
構成
ピクトグラムは、ベースグリッドからグラデーションやストロークのパラメーターに至るまで、一貫性がありバランスの取れた結果を確保するための一連のルールに基づいています。
サイズ
Spaceshipのピクトグラムは拡張可能に設計されており、視覚的一貫性を保ちながら、最適な可読性を確保します。私たちのデザインシステムには5つのピクトグラムサイズがあります。
カラー
ピクトグラムは通常、単一の色相を使用します。唯一の例外はcompタイプで、ブランドカラーまたは通知カラーを含める場合があります。これらについての詳細は以下で確認できます。UIコンテキストで一貫性を確保するため、ピクトグラムはSpaceship Design Systemのカラー参照に従います。
デフォルトカラー
グレーはピクトグラムのデフォルトカラーであり、メッセージ、アクション、または機能を表すために使用する必要があります。例外的なケースでは、製品にも使用できます。アウトライン版のピクトグラムはデフォルトカラーでのみ利用可能です。
ブランドカラー
より強い視覚的インパクトが必要な場合や、Spaceshipのアイデンティティを強化するために、SPS Blue、SPS Dark Gray、または白をデフォルトカラーの代わりに使用することもできます。詳細はカラーページをご確認ください。
製品カラー
現在および今後のすべての製品について、製品専用のコンテキスト（製品ページ、製品カードなど）では、ピクトグラムにメインの製品カラーを使用する必要があります。
通知カラー
これらの色は、通知メッセージを強調するために使用する必要があります。compバージョンは一般的なシステムメッセージでのみ使用し、警告状態では使用しないでください。
ガイダンス
ここでは、ピクトグラムを作成および使用する際に避けるべき例をいくつか紹介します。
regularピクトグラムの主要要素が右下隅に来ないようにしてください。
塗りつぶし版では、複雑なグラデーションや多色グラデーションを使用しないでください。
compタイプでは、塗りつぶし要素とアウトライン要素を混在させないでください。
塗りつぶし版では、上記で示したもの以外の色を使用しないでください。
アウトライン版では、デフォルトカラー以外の色を使用しないでください。
デフォルトカラーを、Spaceshipブランドのプライマリカラーおよび通知カラー以外の色と組み合わせないでください。