Brand Identity
ブランド
share.dev cloud の顔を構成する要素です。このページに書かれた値は 説明ではなく、実際に画面が使っている値そのものです。この文書と製品が 食い違っていれば、間違っているのは文書のほうです。
報道・提携資料でご利用の際は、このページの規則に従ってください。 変更が必要な場合は、まず devops@share.dev までご連絡ください。
ワードマーク
基本形
SHARE.DEV Cloud
ドメインを大文字でまとめてロゴとして固定し、Cloud
は説明語なので一歩下がります。アクセントカラーを受けるのは中央の点だけです。
| 書体 | Source Code Pro — 等幅で組みます。この製品は画面の半分が アドレスと識別子なので、ワードマークが同じ顔をしていれば、何を扱う場所なのかが 一目で伝わります |
|---|---|
| 字間 | 大文字部分に 0.12em — 大文字はもともと字間が狭く、
そのままでは詰まって見えます |
| ウェイト | ドメイン 600 · Cloud 400 |
| 最小サイズ | 横幅 96px。それより小さくなると点が消え、 ワードマークではなく文字になります — その場合はアイコンをお使いください |
| 余白 | 四方に SHARE の S の高さ分を空けます |
小サイズ — ヘッダー・フッターで使う大きさ
SHARE.DEV Cloud
SHARE.DEV Cloud
色
明るい画面と暗い画面がそれぞれの値を持ちます。下のチップは、ご覧の テーマに関わらずその値そのものを表示します。
アクセントカラー
ブランドを代表する色です。リンク、ボタン、ワードマークの点に使います。 広い面を塗るのには使いません — 強調は稀であってこそ強調です。
#0b5fff#6aa5ffニュートラル
文字と罫線です。4段階で階層を作り、それ以外のグレーを増やしません。
#111418#6b727d#99a0aa#c7ccd4#e2e5ea#ffffff#f5f6f8#e8ebf0#99a1ac#6d747f#3a414b#22262d#0e1013#0b0d10状態色
色だけで状態を伝えません。文字や記号を必ず添えます — 色を 区別できない方にも、画面は同じことを伝えなければなりません。
#1e8449#8a6100#c0392b#4ade80#e5be6a#ff7a70第2のアクセントカラー
運用者向けツールにのみ使う色です。お客様が見る画面と運用者が見る 画面を目で区別するためのものなので、対外資料には使いません。
#6d28d9#a78bfa書体
SUIT · 本文と画面 — 400 / 600
クラウド基盤を自ら作り、自ら運用します
Regular 400 · いろはにほへとちりぬるを · The quick brown fox 0123456789
Source Code Pro · アドレスと識別子 — 400
203.0.113.24 / 10.0.0.0/24
c4.8 · 2026-08-13T09:41:02Z · 0123456789
| SUIT | ハングルとラテン文字が一体で設計されているため、混植しても
大きさ・太さ・ベースラインがぶれません。2書体を混ぜると
サーバー c4.8 のような行でラテン文字だけが小さく見えます |
|---|---|
| Source Code Pro | アドレス・容量・時刻など桁を合わせて読むものに 使います。ワードマークも同じ書体です |
| ダッシュ | 韓国語本文のダッシュは ―(U+2015) を使います。
SUIT に em dash (U+2014) がなく、使うとその文字だけ代替書体に落ちて
太さが揃わなくなります |
| ライセンス | いずれも SIL Open Font License 1.1 — SUIT © 2022 Sun · Source Code Pro © Adobe |
| 代替書体 | 書体を読み込めない環境では、システム標準
(-apple-system、Apple SD Gothic Neo、Noto Sans KR) に切り替わります |
アイコン
favicon · アプリアイコン
ワードマークを小さくすれば、文字はいずれ読めなくなります。そこで アイコンには読めるもの一つ — アクセントカラーの点だけを残しました。 16pxまで縮む場所では、ワードマークではなくこちらをお使いください。
使用にあたって
○ してよいこと
- 背景と十分なコントラストがある場所に置く
- 明るい背景には基本形、暗い背景にはダークの値をそのまま
- 四方の余白を S の高さ分確保する
- 縦横比を保ったまま拡大・縮小する
× してはいけないこと
- ワードマークの色を変える — 点のアクセントカラーを外す、別の色にする
- 別の書体で組み直す — 等幅でなければワードマークではありません
- 字間を詰めて団子にする
- 斜体にする、影・縁取り・グラデーションを付ける、縦組みにする
- 縦横比を個別に伸縮する
- 写真の上にコントラストなく重ねる
- 他のロゴと並べて一つのロックアップにする
ダウンロード
- アイコン (SVG) ベクター · 452バイト
- brand.css ワードマークと書体を定義するファイルそのもの
- SUIT 400 woff2 · OFL 1.1
- SUIT 600 woff2 · OFL 1.1
- Source Code Pro 400 woff2 · OFL 1.1
- SUIT ライセンス全文 書体を再配布される際は同梱が必要です
- Source Code Pro ライセンス全文 書体を再配布される際は同梱が必要です
ワードマークとアイコンは ShareDev の資産です。当社およびサービスを 指す用途で原形のままご使用いただけますが、後援・提携・認証の関係を示す用途には ご使用いただけません。書体はそれぞれ OFL 1.1 に従います。