Brand Studio

#/start にある Brand Studio は、ロゴ、色、タイプ、その他のトークン、そして保持しているファイルまで、あなたのブランドを形づくる唯一の場所です。ここで一度設定すれば、あらゆるツール、ページ、書き出しは、レビューによってではなく仕組みとしてそれに従います。

変更は、行うそばからアプリ全体でライブにプレビューされるため、確定する前に、色やフォントがあらゆる場所にどう反映されるかを確認できます。すべてはお使いのデバイス上で完結します — あなたのブランドがマシンの外に出ることはなく、単一のブランドパックファイルとして持ち運べます。

ここはエディタです。ダッシュボードは鏡です。 ダッシュボード（#/d）の Design-system タブは、あなたのブランドを読み取り専用で表示するだけです。編集するのはここ、#/start の Brand Studio です。後で色を変更したくなったら、Brand Studio に戻ってきてください。

5つのステップ

スタジオは5つのタブからなるエディタです。左から右へ進んでもよいですし、任意のタブへ直接ジャンプしても構いません：

1. Logos — あらゆる向きと仕上げでの、あなたのマーク。
2. Colours — 1つのプライマリカラーから完全なアクセシブルパレットを導出します。そこから調整、生成、追加ができます。
3. Type — 任意の Google Font を、このデバイスにダウンロードして使用します。
4. Tokens — 角丸、余白、シャドウなど、システムの残りの部分です。
5. Catalogue — ブランドが保持する画像・音声・モーションファイルです。

何かを変更した瞬間に Save & continue ボタンが現れ、次のステップへ進めます（最後のステップでは Save & finish と表示されます）。次のタブがやさしく点灯し、進むよう促してくれます。順番通りに進む必要はありません — どのステップも任意かつ独立しています。

#/start?tab=<key> で、任意のタブへディープリンクできます。キーは logos、color（URL 内ではアメリカ式のスペルになる点に注意）、type、tokens、catalogue です。

Logos

ブランドのマークはすべて、ここに置き場所があります — 向き × 仕上げのグリッド状のスロットです：

• Orientations: Horizontal（ワードマーク＋シンボルを横並びに）と Vertical（正方形や縦長のスペース向けに縦積み）。
• Treatments: Primary、Primary reverse（暗い背景向け）、Mono（単色）、Mono reverse。

これで任意のスロットが8つになります。スロットをクリックして PNG、SVG、JPEG、WebP を追加してください。埋まっているスロットをクリックすると差し替えられます。どのスロットも任意であり、すべてこのデバイス上にとどまります。

• Custom marks — アイコン、紋章、favicon など、ブランド独自の呼び方をするマークは Custom marks の下に追加します。名前を付けてファイルを選んでください。
• More identities — サブブランド、プロダクト、イベントは、それぞれ独自の完全なロゴ一式を持てます。+ Add another logo を使って名前を付けてください。メインのセットは単に "Your logo" と呼ばれます。
• SVG をアップロードすると、Lolly がその色を読み取ります。 まっさらなインストールでは、ロゴからプライマリカラーがそっと設定されます。既存のブランドでは、Colours タブでその色が提案として — "Found in your logo" として — 表示されます。

Colours

最も奥が深いステップです。左ペインは導き出し、生成する場所で、右ペインはあなたのライブパレットです。分割線をドラッグしてリサイズできます。

1つの色から、パレット全体を

プライマリカラーを選ぶと、Lolly はエンジンがどこでも使っているのと同じ知覚的な色彩計算（OKLCH）を用いて、ライト／ダークのサーフェス、テキスト、アクセント、そして完全なティント／シェードのランプを含む、完全なパレットを導出します。導出のチューニング：

• Scheme — Mono、Complement、Analogous、Triad のいずれか — セカンダリカラーがプライマリとどう関係するかを決めます。
• Shades — 3〜20（既定 5）のスライダーで、各ランプが生成するステップ数を制御します。
• Fine-tune（折りたたみ） — UI intensity（Muted / Deep）、Contrast（Comfort / High）、Text on brand（Auto / Light / Dark）。

重要な2つのボタンがあり、この違いには意味があります：

• Use this colour はパレットをライブドラフトへ再導出します — アプリは更新されて確認できますが、まだ何も保存されていません。
• Save colour が、実際に保存を行うボタンです。

このタブでのすべての操作は保存するまではドラフトの状態なので、自由に試すことができます。実際にブランドへ書き込むのは Save colour だけです。（Logos、Type、Tokens、パレットの編集といった他のタブは、即座に保存されます。）

プライマリの下には、ライブの Primary / Neutral / Secondary / Blend ランプと、WCAG コントラスト比付きのライト／ダークのサンプルカードが表示されます。Neutral または Secondary のランプの任意のステップをクリックすると、導出された既定値の代わりにそのシェードを選べます。

Build your palette（配色ジェネレーター）

Build your palette では、プライマリカラーから調和するアクセントカラーを生成します。配色パターン — Complementary、Adjacent、Triad、Tetrad — を選ぶと、それぞれの候補に自動生成された人が読める名前と + Add ボタンが付いてきます。追加した色はすぐにパレットに反映されます。"Your palette, applied" が、実際のグラフィック上でそれらをプレビューします。

パレット、ホイール、そして各スウォッチ

右ペインには、あなたのブランドが持つすべての色が、グループ分けされて（Primary、Neutral、Secondary、Spectrum、Custom、Roles）一覧表示されます。各グループは折りたためて、それぞれに専用の + Add があります。Colour chart を開くと OKLCH ホイールが表示されます — ドットをドラッグして色を変え、ドットをクリックして編集し、空いた場所をクリックして新しいスウォッチを追加できます。

任意のスウォッチをクリックすると、そのエディタが開きます：

• Rename — 名前を変更します。
• Set by value — Hex、RGB、RGBA、HSL、OKLCH、CMYK のいずれかで色を入力します。（CMYK 値を入力すると、それがそのスウォッチの印刷用代替色にもなります — 詳細は後述。）
• Stored as — スウォッチをどの形式で保存するかを選びます: LCH（既定 — 知覚的で広色域、編集に最適な選択肢）、Hex、RGB、HSL のいずれかです。既存の hex 値を正確に固定したい場合や sRGB の値に一致させたい場合は、これを上書きしてください。
• Print substitutes（折りたたみ） — 色の印刷時の挙動を固定します：
• CMYK — チェックすると、自動の sRGB→CMYK 変換を、正確なインク値（C/M/Y/K、0〜100）で上書きします。
• Spot — チェックすると、スウォッチをスポットカラーに固定します。Name（例: PANTONE 186 C）と、任意で Book を指定してください。

これらの印刷用ロックは、CMYK の PDF や TIFF を書き出す際に印刷会社が使う値です — 詳しくは 書き出し を参照してください。

スウォッチの削除は安全です。導出されたランプのステップやテーマロールは非表示になるだけで（元となるトークンは解決され続けるため、下流で何かが壊れることはありません）、自分で追加した色は完全に削除されます。

Gradients

任意の Gradients パネルは、背景やアクセント用に、パレットからブレンドトークンを生成します。ブランドにグラデーションが不要であれば、まるごとスキップして構いません。各グラデーションには、プレビュー、名前付きのストップ（2〜8個）、そして角度があります。重要な挙動として、ストップはスウォッチを参照するため、そのスウォッチの色を変えるとグラデーションもそれに追従します。補間はきれいなブレンドのために OKLCH で行われます。ストップを削除すると、その分を減らせます。

パレットを外部へ持ち出す

パレットペイン下部のフローティングピルから、パレット全体を デザイントークン（JSON）、CSS 変数、CSS クラス、GIMP パレット（.gpl）、または Adobe Swatch Exchange（.ase） としてダウンロードできます — ブランドがそのまま Illustrator、Figma、GIMP、スタイルシートに取り込めます。（パレットは Catalogue ビューからもダウンロードできます。）

Type

任意の Google Font を追加すると、このデバイスにダウンロードされます — アプリ内、ツール内、あらゆる書き出しでレンダリングされ、永久にオフラインで使え、ブランドパックにも同梱されます。レンダリング時に何かを取得することもありません。

ファミリーを検索し（Inter、Fraunces、Space Grotesk…）、Add font。リスト内の各フォントには役割を割り当てられます：

• Primary — メインのブランド書体・本文書体です（Make primary）。
• Code — コードやデータ用の任意の等幅書体です（Use for code）。

Type roles パネルには、Heading、Body、Code のライブなサンプルが表示され、それぞれの書体が実際に使われる様子を確認できます。Google Fonts にあるものはすべて、オープンライセンス（OFL/Apache/UFL）のもとで提供されています。

Tokens

デザインシステムの残りの部分を、コードに触れることなく編集できます：

• Rounded corners — 1つの半径スライダー（0〜1.5rem）で、アプリ全体のカード、ボタン、パネルがこれに従います。
• More tokens — spacing、sizing、stroke width、opacity、rotation、単純な numbers、shadows を追加・編集できます。種類を選び、名前を付け（Gutter、Card shadow…）、値を設定してください。これらは標準的なデザイントークン（DTCG）として保存され、ブランドとともに持ち運ばれます。

Catalogue

ロゴ以外であなたのブランドが保持するファイルは、ここにドロップしてください: ベクター、画像、音声、モーション（動画、Lottie、アニメーション）のアセットです。これらはCatalogueに届き、セクションごとに整理され、あらゆるツールのアセットピッカーですぐに使えるようになります。すべてこのデバイス上にとどまります。

ブランドを別のデバイスへ移す

上部のアクション行にある Export ボタンは、トークン、フォント、ロゴ、テーマ設定と整合性マニフェストをまとめた、単一の LollyBrand-…zip を書き出します。Import… ボタン（またはスタジオへのドラッグ＆ドロップ）は、次のものを受け付けます：

• LollyBrand パック（.zip） — 1ステップでインストールされます。
• Penpot のエクスポート（.penpot） — そのデザイントークンを取り込みます。
• Design Tokens ファイル（.json） — W3C DTCG または Tokens Studio。
• 通常の SVG（.svg） — Lolly がその色を読み取り、残す色を選べるようにします。最初の色がプライマリになります。

これが、同僚からブランドを受け取ったり、2台目のインストール先へブランドを持ち運んだりする方法です — アカウントもクラウドも不要です。コマンドラインからブランドを取り込みたい場合は、ingest:brand を参照してください。

ブランドが固定されている場合

一部のビルドはロックされたブランドとして配布されます — その色、フォント、トークンがすべてのツールと書き出しで使われ、変更できる部分はありません。その場合、スタジオの代わりに、このビルドは固定されたブランドで配布されており編集が無効になっている旨を説明する短い注記が表示されます。これは意図的な仕様です — 組織が、すべてが確実にブランドに沿ったものであり続けることを保証する方法だからです。

次に進むには

• Lolly の使い方 — キャンバス、保存、プロジェクト、カタログについて。
• デザイントークン — あなたのブランドを表現するトークンモデルについて。
• 書き出しとフォーマット — 印刷単位、CMYK、そしてあなたのブランドが書き出せるフォーマットについて。