ビジュアルブランドガイド

ひとつのシンボルで、一貫した印象を。

角を丸めたひし形を、時計回りに23.44°傾けたシンボルです。形、丸い先端、縦横比をすべてのバリエーションで保ちます。

シンボル＋名称

会社を紹介するときは、名称を含むロゴを使用します。シンボルと文字の間隔は、配布データのまま保ってください。

シンボル単体

背景に合わせて、明るい背景用・暗い背景用のグラデーションを選びます。単色で使用する場合は、青または白を使います。

アプリアイコン

青いタイルに白いシンボルを配置したアイコンです。ブラウザーのタブ、アプリ、アバターには、配布サイズをご使用ください。

名称の表記
ブランド名：Supasaito。日本語：Supasaito（スーパーサイト）。会社名：Supasaito株式会社。英語の会社名：Supasaito Inc.

使用シーン

背景に合うデータを選んで配置します。以下は配置例であり、新しいロゴのバリエーションではありません。

½ ×

シンボルの周りに余白を

シンボル単体の周囲には、シンボルの幅の半分以上の余白を確保し、文字や図形を置かないでください。名称を含むロゴの内部の間隔は、配布データを保ちます。

16px24px32px48px

小さなサイズで使うとき

静止したシンボルは16px以上で使用します。暗い背景や複雑な背景に20px未満で置く場合は白いシンボルを選びます。製品内の小型ローディング表示は別の例外です。

Supasaitoブルー

シンボルには中心から広がる放射状グラデーションを使用します。明るい背景では中心を明るく、外周を暗く。暗い背景では中心を暗く、外周を明るくします。

明るい背景用#57ACFF → #0082FC → #0053A1

暗い背景用#0068CA → #2996FC → #8AC5FF

白い小さなボタン文字の背景や、白地の小さなアクセント文字には#0068CAを使用します。グラデーションはシンボルの内側だけに使用し、UIの面は単色にします。

意味のある動き

基本は静止。動きは、待機・反応・処理中などの状態を伝えます。それぞれの動きをプレビューできます。

動きを減らす設定が有効です。すべての例を静止表示します。

共通の周期は1.7秒。周期の88%で回転し、残りは静止します。このページのプレビューは自動で終了します。製品内でも、処理が終わったら動きを止めます。

ブランドの形を守る

• 23.44°の傾き、丸い先端、元の縦横比を保ってください。
• 背景に合う、明るい背景用・暗い背景用のグラデーションを選んでください。
• 単色で再現するときは、配布されている青または白を使用してください。
• 描き直し、縦横比の変更、色の変更、影の追加はしないでください。
• 放射状グラデーションを線形グラデーションに置き換えないでください。
• 処理中の動きを装飾として常時再生しないでください。動きを減らす設定にも対応してください。