--- title: "ブランド" description: "Tanrei という名前、2 つのマークとその使い方、そしてシステムの描き方を決めている性格。" url: "https://tanrei.chnotchy.com/ja/foundations/brand/" last_updated: 2026-10-17T15:47:59.000Z --- # ブランド > Tanrei という名前、2 つのマークとその使い方、そしてシステムの描き方を決めている性格。 Tanrei（端麗）は、すっきりと整っていることを意味します。この名前は、そのままシステムへの要求です。静かで、正確で、読みやすいインターフェースを、プロダクトが出ていくすべてのプラットフォームで実現します。Tanrei は独立したプロジェクトです。 ## マーク Tanrei には 2 つのマークがあり、一度に 1 つだけ使います。 - **シンボル**は、しっぽり明朝の T の角をやわらげたものです。正方形や円の形が求められる場所だけで使います。favicon、アプリのアイコン、デザインファイルの隅の飾りのような素材の透かしです。控えめな宣伝や装飾にも使います。 - **ワードマーク**は、シンボルの T に続けて Outfit SemiBold の「anrei」を組み、1 つの描画にしたものです。名前が読まれる場所での Tanrei のロゴです。このサイトのヘッダー（どの幅でも）、表紙、ページのタイトル、共有されたリンクの画像です。 マークは一度に 1 つだけ使い、シンボルとワードマークを組み合わせたロックアップは作りません。これは Tanrei 自身のマークについての規則です。[アプリバー](https://tanrei.chnotchy.com/ja/components/app-bar/)そのものは、プロダクトが自分のロゴを、そのロゴに必要な形で、ロックアップも含めて表示できるようにしています。 シンボルは、正方形のフレームの中心より少し下に置かれています。これは光学的な補正です。T は上に重さがあるので、少し下げると中央にあるように見えます。 ## 色 どちらのマークも 1 色、`sys.color.on-surface` で、置かれたサーフェスの上に描きます。色は描画の一部ではなくトークンなので、マークはライトとダークのスキーム、そしてすべてのコントラストの段階に従います。使う場所ではそれぞれ on-surface を取ります。このサイトのヘッダーは、ワードマークを `comp.app-bar.brand.color` で塗っており、これは on-surface です。 ## クリアスペース シンボルの四方に、その高さの 4 分の 1 を空けます。フレームではなく、インクから測ります。ワードマークの周りには、その x ハイトの半分を空けます。この空間には、ほかのものを入れません。テキストも、ほかのマークも、画面の端もです。 ## 最小サイズ シンボルは 24 px のフレームより小さく描かず、ワードマークは大文字の高さが 24 px 未満になるように描きません。 例外は favicon だけです。ブラウザは favicon を 16 px で描くからです。favicon は 1 枚の SVG です。その横にある ICO と PNG のファイルは、同じ画像をブラウザが求める大きさで描いたもので、別のデザインではありません。16 px では輪郭がやわらぎますが、それは受け入れています。 ## 推奨と非推奨 ### 推奨 - マークは一度に 1 つだけ使います。名前が読まれる場所にはワードマーク、正方形や円の形が求められる場所だけにシンボルです。 - マークは on-surface で、置かれたスキームのサーフェスの上に描きます。 - ホーム画面やラスター画像の favicon のように、プラットフォームが不透明なアイコンを求める場所では、シンボルをライトのスキームのサーフェスの上に置きます。その正方形はプラットフォームのもので、マークの一部ではありません。 - シンボルはフレームの中の位置のままにします。フレームの中心へ動かしません。 ### 非推奨 - マークの色を変えたり、グラデーション、輪郭線、影、背景の図形を加えたりしません。 - マークを引き伸ばしたり、回転させたり、切り取ったりしません。 - シンボルとワードマークを組み合わせたロックアップを作らず、シンボルの横に名前をテキストで組みません。 - ワードマークをほかの書体で組み直しません。その描画を使います。 - 「端麗」の文字をマークとして使いません。デザインファイルの表紙の装飾であり、アイデンティティの一部ではありません。 ## システムの性格 ブランドは、システムの見た目でもあります。 ### コンテンツが先、クロームは後 サーフェスはほぼモノクロームで、枠線は 1 ピクセルの細い線です。そのため、画面の中で最も色のあるものは、プロダクトのコンテンツになります。プライマリのアクションは、白の上の黒か、黒の上の白です。青のアクセントが 1 つだけあり、すぐに見つけられなければならないただ 1 つのもの、つまりキーボードのフォーカスリングのために取っておきます。リンクは下線で、選ばれている項目はプライマリの色で見分けられるので、画面の中でほかに青いものはありません。 ### 見える構造 階層は、重い影や色を重ねたパネルではなく、整列、スペーシング、細い線から生まれます。エレベーションは、リングとごく柔らかい影です。 ### 表現は足し算で 既定は控えめです。より強い強調の段階、より大きくなめらかな角、より弾むモーションといった表現的な選択は、同じ構造の上に重ねる追加のトークンであり、構造を分岐させるものではありません。 ## ほかの人によるマークの使用 Tanrei のコードとドキュメントは、Apache License 2.0 でライセンスされています。このライセンスの第 6 条は、作品の出どころを説明することと NOTICE ファイルを再現することを除いて、ライセンサーの名称、商標、製品名を使う許可を与えていません。 - あなたの作品が Tanrei を使っている、または Tanrei で作られていると、文章で書くことはできます。 - シンボルとワードマークは Tanrei Authors のものであり、ほかの人にはライセンスされていません。あなたのプロダクトの中、パッケージの名前やアイコンの中で使ったり、あなたの作品が Tanrei である、または Tanrei に推薦されていると思わせる形で使ったりしないでください。