Atlas Support / Brand
ブランドガイドライン
一貫した表現で、情報を正確に伝える。
はじめに
「Atlas Support」の名称、Atlas Supportのロゴ、およびブランドその他のAtlas Supportの商標は、Atlas Supportの所有物です。
本ガイドラインは、当社のパートナー、販売代理店、顧客、開発者、コンサルタント、出版社、その他の第三者が、自身の資産や資料において当社の商標および著作物を使用・表示する方法を理解するためのものです。
Webサイト、提案書、報告書、出版物などに共通する表現の基準を示します。情報の正確さ、読みやすさ、判断のしやすさを優先してください。
名称とロゴ
名称は「Atlas Support」と表記します。AtlasとSupportの間に半角スペースを入れ、頭文字を大文字にします。文章内の会社名と、画像として配置するシンボルを用途に応じて使い分けてください。
Webの名称表示はInter TightのBoldを基準にします。画像のロゴを別の書体で描き直さないでください。
提供データの縦横比と背景を維持して使用します。
- 余白
- シンボル画像の外側に、表示幅の1/8以上の余白を確保します。余白に文字や別のロゴを置かないでください。
- 大きさ
- シンボル画像はWebでは幅128px以上、印刷では幅25mm以上を目安にします。細部を識別できない場合は名称を文字で表示してください。
- 背景と比率
- 提供された背景と縦横比を保ち、周囲の画像や文字と重ならない位置に配置します。
推奨する使い方
- 提供されたデータを使い、縮小・拡大は縦横比を固定する。
- Atlas Supportの紹介や関係するサービスを説明する文脈で使用する。
- 他社と並べる場合は、それぞれの名称と役割が分かるように余白と大きさを調整する。
避ける使い方
- ロゴの変形、回転、切り抜き、色の変更、影や模様の追加。
- 文字を詰めた「AtlasSupport」や、すべて小文字の「atlas support」への表記変更。
- 他社のロゴと一体化し、実際にはない提携・承認・後援を示す表現。
カラーパレット
Webでは白とニュートラルカラーを基調にし、淡いブルーを操作の補助に使います。利休色と生成り色はシンボルの色です。用途を先に決め、装飾のためだけに色を増やさないでください。
- Ink
#030712見出し・主要な本文
- White
#FFFFFF標準の背景
- Surface
#F9FAFB情報をまとめる面
- Text gray
#4B5563補足説明・本文
- Rule
#E5E7EB装飾的な区切り線
- Action tint
#D9ECFF操作を示す背景の補助
- Rikyu
#4A4636シンボルの描画色
- Ivory
#F3F0E6シンボルの背景色
読みやすい組み合わせ
以下は前景色と背景色のコントラスト比です。通常の本文では4.5:1以上を基準にします。淡い区切り線や背景色を、そのまま小さな文字の色に使わないでください。
読める文字、伝わる情報。
#030712 / 背景 #FFFFFF読める文字、伝わる情報。
#4B5563 / 背景 #F9FAFB読める文字、伝わる情報。
#030712 / 背景 #D9ECFF読める文字、伝わる情報。
#4A4636 / 背景 #F3F0E6タイポグラフィ
欧文の基準書体はInter Tightです。日本語には閲覧環境の標準的なゴシック体を組み合わせます。見出しは簡潔に、本文は自然な語順と改行で読みやすく整えます。
根拠を示し、次の判断へ。
何を確認し、どこまで分かり、何が残っているか。読み手が必要な情報を見つけ、次の行動を選べるように伝えます。
Clarity supports better decisions.
| 用途 | サイズ | 太さ | 行間 |
|---|---|---|---|
| ページの見出し | 36–64px | 700 / Bold | 1.2–1.4 |
| セクション見出し | 24–36px | 600 / Semibold | 1.4 |
| 本文 | 16–18px | 400 / Regular | 日本語1.8・英語1.6 |
| 補足・図表の説明 | 14–16px | 400–500 | 1.6以上 |
- 大きさだけで見出しを表現せず、見出しの階層も正しく設定します。
- 強調は重要な語や結論に絞り、段落全体の太字や長文の中央揃えを避けます。
- 資料を共有するときは使用する書体の利用条件を確認し、PDFでは文字の埋め込みや置換後のレイアウトを確認します。
ドキュメント
資料は、読み手が目的・根拠・判断・次の行動を追える順序で構成します。提案、調査結果、作業報告を同じ見た目にそろえるだけでなく、それぞれの情報の役割を明確にします。
対象業務の検討メモ
01 目的
この資料で判断したいことを一文で示す。
02 前提・根拠
対象範囲、参照した資料、未確認事項を記載する。
03 判断・次の行動
選択肢、担当者、期限、次に確認することをまとめる。
説明用のひな型です。実際の検証結果ではありません。
| 項目 | 定義・記載すること |
|---|---|
| 基本情報 | タイトル、作成者、更新日、版、ドラフト・確認済みなどの状態。 |
| 目的と対象 | 誰が、何を判断するための資料か。対象範囲と対象外。 |
| 事実と根拠 | 参照元、確認日、数値の単位と対象期間。事実と解釈を分ける。 |
| 結論と未確認事項 | 現時点の判断、前提条件、残る課題。推測で空欄を埋めない。 |
| 次の行動 | 実施すること、担当者、期限、判断に必要な追加確認。 |
- 余白は8pxを基本単位にし、近い情報はまとめ、別の話題は間隔を空けます。
- スライドは一枚につき一つの主張を基本にします。報告書は見出しと目次で読み進められる構成にします。
- 表には見出し、グラフには単位・期間・出典を付けます。PDFに書き出す際も、文字を選択・検索できる状態を保ちます。
アクセシビリティ
より多くの人が内容を理解し、操作できることを設計の基準にします。WebではWCAG 2.2のレベルAAを参照し、以下の項目を制作時と公開前に確認します。
十分なコントラスト
通常の文字は4.5:1以上。大きな文字は3:1以上を確保します。大きな文字の目安は24px以上、太字では約18.7px以上です。操作や状態の識別に必要な境界・図形も、隣接する色とのコントラストを確認します。
色以外でも伝える
成功・注意・エラーは、色とあわせて文字や形で伝えます。リンクは下線などで本文と区別し、アイコンだけで操作の意味を伝えないようにします。
キーボードと読み上げ
リンクやボタンには意味の分かる名前を付け、キーボードでも操作できるようにします。フォーカス位置を見える状態にし、見出し・リスト・表を適切な要素で表現します。
拡大・小さな画面
文字を200%に拡大しても情報や操作を失わないようにします。小さな画面では並び順を保って折り返し、表などは必要な範囲で横スクロールできるようにします。
操作しやすい大きさ
主要な操作領域は44px四方以上を当社の推奨目安とし、隣の操作と十分に離します。サイズだけでなく、押し間違えにくい配置を確認します。
画像・動画・動き
意味のある画像には代替テキスト、動画には内容に応じた字幕や説明を付けます。装飾画像は読み上げを妨げない設定にし、動きを減らす利用者設定に対応します。
意味的な明確さ
すべてのデザイン要素が意味を持ち、システム全体の理解と使いやすさに貢献する。
要素を追加するときは、「何を伝えるのか」「何を区別するのか」「どの行動を助けるのか」を説明できる状態にします。見た目の違いと情報の違いを対応させてください。
| 要素 | 担う意味 |
|---|---|
| 色 | 操作、分類、状態の補助。色だけで意味を確定させない。 |
| 文字と見出し | 情報の優先順位と文書の構造。同じ階層は同じ表現にする。 |
| アイコン | 操作や情報の種類を補助する。意味が曖昧な場合は文字を添える。 |
| 余白と罫線 | 関連する情報をまとめ、別の情報を区切る。 |
| ボタンとリンク | 実行する操作・移動先を名前で示す。押せる見た目は操作できる要素に使う。 |
| 動き | 状態の変化や位置関係を伝える。読解や操作を妨げる動きを避ける。 |
操作の意味を言葉で示す
避ける表現
“ここをクリック”
この言葉だけでは、移動先や得られる情報が分かりません。
利用・問い合わせ
当社の商標・著作物を紹介する際は、提供データと本ガイドラインに沿って、内容を正確に表示してください。第三者のブランドと組み合わせる場合は、関係性を正確に記載し、承認・提携・後援があると誤認させないでください。
本ガイドラインは、商標や著作物の権利を譲渡するものではありません。個別の契約や利用許諾がある場合は、その条件も確認してください。
共同施策、広告、出版物でのロゴ利用など、判断に迷う場合は、利用目的、掲載先、表示例、使用期間を添えてお問い合わせください。
ブランドの利用について問い合わせる