ブランドスタジオ

#/startにあるBrand Studioは、ブランド(ロゴ、色、書体、その他のトークン、保管するファイル)を形作る唯一の場所です。ここで一度設定すれば、すべてのツール、ページ、エクスポートはレビューによってではなく構造上それに従います。

変更は行うと同時にアプリ全体でライブプレビューされるため、色やフォントを確定する前に、それがあらゆる場所に反映される様子を確認できます。すべてオンデバイスです。ブランドのファイルとトークンがあなたのマシンから外に出ることはありません(Google Fontsを選ぶと、同意ダイアログの後にそのファミリーだけをGoogleから一度取得します)。ブランドは1つのbrand packファイルとして持ち運べます。

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

ルーム

スタジオは、側面のレールに並んだ一連のルームで構成されています - 手順ではありません。何にも番号は振られておらず、何も他のものによって制限されておらず、どのルームにたどり着いても正当です。

電話では同じリストがヘッダーの下に固定された横並びのチップ帯になります。ルームを切り替えても何も再読み込みされません - エディターはすべてのパネルをマウントしたままにしており、要求されたものを表示するだけです。

#/start?area=<key>ルームへのディープリンクが可能です。キーはoverviewcolor(URLではアメリカ式のスペルであることに注意)typelogostokenscatalogue(Filesルーム - パネルキーは永続的な契約なので、URLは旧名のままです)、versionsです。?tab=は同じものを指す長年のエイリアスで、今も解決されるため、古いリンクやブックマークは引き続き機能します。認識されないものはデッドエンドにならず、Overviewを開きます。

レールの下端には、1つのルームではなくデザインシステム全体に属するアクションが固定されています。

スタジオのルームレール - Overview、Colours、Type、Logos、Tokens、Filessigned by Lollyvector SVG自分で確認するGet the signed file20 paths~1.1k nodes37 groups19 KBスタジオのルームレール - Overview、Colours、Type、Logos、Tokens、Filessigned by Lollyvector SVG自分で確認するGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

Overview

Overviewは最初に到達するルームで、2つの顔を持っています。

まだ何も設定されていない状態では、2つの入口が提示されます - Start from a file(design tokens、Penpotプロジェクト、design systemパック、またはSVG)とStart from scratch(1色を追加し、好きなときに続ける)です - そしてその下にはひっそりとExplore the toolsという退出先もあります。離れることもまた正当な答えだからです。

デザインシステムができると、同じルームは今あるものを示します: パレットとその色数、有効な書体ファミリー、埋まっているロゴスロットの数、トークンの数、そしてFilesルームです。どのブロックもそのルームへの入口です。ここにあるのは件数だけで、進捗バーも完了カードも一切ありません - このスタジオでは何も義務付けられていません。

Logos

まずはマークの入ったフォルダーを上部のドロップゾーンに丸ごと投入することから始めます。"Drop marks here, or choose several at once"は、手持ちのファイルを一度にいくつでも受け付けます。各ファイルはその形状とインクが読み取られ、Waiting for a slotの下に、判断内容を示すチップとしてキューに入ります - "Looks like the Horizontal primary"のように、根拠にした測定値とともにPlaceボタン(そのスロットが既に埋まっている場合はReplace)が付きます。確信が持てない場合、チップはその旨を率直に示し、代わりに8つすべてを一覧にしたChange slotを提示します。何かを押すまでは何も配置されません。

そのキューをめぐって2つのことが起こります。余分な余白のあるマークには、まずトリムの提案が示されます - それに回答するか、Escapeを押すと元のファイルがそのまま入ります。また、あるマークが空の兄弟スロットを満たせる場合、ルームは派生したmono版またはreverse版を、Generatedと表示された独自のチップとして提示します。これは、別の方法でそのスロットを埋めると再び消えます。

その下には、すべてのマークが最終的に収まるグリッド - orientation × treatmentのスロットがあります。

これで8つの任意スロットになります。スロットをクリックしてPNG、SVG、JPEG、WebPを追加できます。埋まっているスロットをクリックすると置き換えられます。どのスロットも任意で、すべてこのデバイス内にとどまります。

ロゴマトリックス - 上部に各orientation、各treatmentが独自の破線スロットとして並び、すべて任意ですsigned by Lollyvector SVG自分で確認するGet the signed file8 paths~4.8k nodes19 groups54 KBロゴマトリックス - 上部に各orientation、各treatmentが独自の破線スロットとして並び、すべて任意ですsigned by Lollyvector SVG自分で確認するGet the signed file8 paths~4.8k nodes19 groups54 KB

Colours

The Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVG自分で確認するGet the signed file114 paths~26k nodes149 groups4 images523 KBThe Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVG自分で確認するGet the signed file114 paths~26k nodes149 groups4 images523 KB

最も内容の充実したルームで、2つのペインに分かれています。左側が作業する場所、右側があなたのライブパレットです。両者の間の仕切りをドラッグしてサイズ変更できます(そこでEnterを押すとパレットを折りたたんで邪魔にならないようにできます)。

Coloursルーム - プライマリカラーからランプが導出され、コントラスト比付きの見本カードとライブパレットが表示されますsigned by Lollyvector SVG自分で確認するGet the signed file61 paths~9.4k nodes77 groups200 KBColoursルーム - プライマリカラーからランプが導出され、コントラスト比付きの見本カードとライブパレットが表示されますsigned by Lollyvector SVG自分で確認するGet the signed file61 paths~9.4k nodes77 groups200 KB

色を追加し、役割を与える

Add a colourが、そのシンプルな流れのすべてです。どのような記法でも色を貼り付けるか選ぶと、それがそのまま1つのトークンになります。そこから何かが導出されることも、何かが提案されることもなく、他に何も求められません。色のリストをまるごと貼り付けると、それぞれが個別に追加できるチップになります。

Rolesはその上に重なるレイヤーで、どの色がどの役割を担うかを決めます。Rolesは任意です(自由な3色だけでrolesを持たないデザインシステムも十分に良いものです)。どのスウォッチにも役割を割り当てられ、コントラストの読み取りは背景に対して測定され、まずAPCAが用いられます。

エキスパート用ウィング

その2つの下には、4つの折りたたまれたセクションがあります。必要なものを開いてください。それぞれ#/start?area=color&focus=<wing>としてディープリンク可能です。

1色から、パレット全体へ

Generate a starter paletteの中でPrimary colourを選ぶと、Lollyはエンジンがどこでも使っているのと同じ知覚的な色の数学(OKLCH)を使って、完全なパレット - 明暗のサーフェス、テキスト、アクセント、tint/shadeの完全なランプ - を導き出します。導出を調整するには:

このウィングの中の何も、あなたのブランドに書き込まれることはありません。これはプレビューであり、Replace palette(下記)を押すまでは、アプリ全体でライブに表示され、判断材料にできます。

プライマリの下には、ライブのPrimary / Neutral / Secondary / Blendランプと、LightおよびDarkの見本カードが表示され、それぞれに独自のコントラスト読み取り値 - WCAG比とその横のAPCA Lc値 - が付きます。NeutralまたはSecondaryランプのステップをクリックすると、導出されたデフォルトの代わりにそのシェードを固定できます。

明暗のサンプルカードの上に積み重なった4つのランプ。各カードにはそれぞれのWCAGコントラスト比が付されているsigned by Lollyvector SVG自分で確認するGet the signed file25 paths~4.6k nodes60 groups57 KB明暗のサンプルカードの上に積み重なった4つのランプ。各カードにはそれぞれのWCAGコントラスト比が付されているsigned by Lollyvector SVG自分で確認するGet the signed file25 paths~4.6k nodes60 groups57 KB

パレットを作成する(ハーモニージェネレーター)

同じウイングの中で、パレットを作成するは、プライマリカラーから調和するアクセントカラーを生成します。ハーモニーを選びます - 補色近似色トライアドテトラードアナロガス(これは独自のアクセント数、2から5、そして10°から45°の色相角度を伴います)- そして各候補には自動生成された分かりやすい名前と+ 追加ボタンが付いてきます。1つ追加すると、その色は即座にパレットに入ります。1回の操作で1つのトークンです。「あなたのパレット、適用済み」は、実際のグラフィック上でセット全体をプレビューします。

生成されたアクセント。それぞれにスウォッチ、自動生成された名前、16進値、追加ボタンが付いているsigned by Lollyvector SVG自分で確認するGet the signed file8 paths936 nodes14 groups15 KB生成されたアクセント。それぞれにスウォッチ、自動生成された名前、16進値、追加ボタンが付いているsigned by Lollyvector SVG自分で確認するGet the signed file8 paths936 nodes14 groups15 KB

生成したパレットを確定する

パレットを置き換えるは、このウイングの中で何かを書き込む唯一のコントロールですが、すぐには書き込みません。押すと、まずレビューカードが開き、「パレットを置き換えますか?」という見出しの下に、これから起きることが正確に列挙されます - 割り当てた通りに保たれるロールの数、自分で追加した色のうち保持される数、再アンカーされるシェードカーブの数、再ピン留めされる印刷ロックの数、非表示のまま残る隠しシェードの数、色を保ったままのグラデーションストップの数。

そのカードのパレットを置き換えるを押すと確定され、キャンセルは何も変更せずに離脱します。実行後、カードは「パレットを置き換えました。」に変わり、すでにフォーカスされた取り消しボタンが1つ付きます - そしてスワップのにデザインシステム全体のチェックポイントが取得されるため、「元に戻す」ことは復元であり、失われた午後にはなりません。

パレット、チャート、各スウォッチ

右ペインには、ブランドが持つすべての色がグループ(プライマリ、ニュートラル、セカンダリ、スペクトラム、カスタム、ロール)ごとにリストされ、各グループは独自の+ 追加を持ち折りたたみ可能です。その下のカラーチャートは、同じスウォッチの2つのビューに折りたたまれています - ホイール(OKLCHホイール - ドットをドラッグして色を変え、ドットをクリックして編集するか、空いている場所をクリックして新しいスウォッチを追加)とガマットチャート、表示可能な範囲が実際にどこで終わるかを示します。#/start?area=color&focus=chartは、?wheelが常にそうしているように、直接カードを開きます。

パレットペイン。すべてのグループが折りたたみ可能で、ダウンロードピルが下端に配置されているsigned by Lollyvector SVG自分で確認するGet the signed file155 paths~14k nodes199 groups1 image191 KBパレットペイン。すべてのグループが折りたたみ可能で、ダウンロードピルが下端に配置されているsigned by Lollyvector SVG自分で確認するGet the signed file155 paths~14k nodes199 groups1 image191 KB

OKLCHホイール - 角度が色相、外側への距離が彩度、グレーは側面のライトネスレールに沿って並ぶsigned by Lollyvector SVG自分で確認するGet the signed file274 paths~3.7k nodes67 groups83 KBOKLCHホイール - 角度が色相、外側への距離が彩度、グレーは側面のライトネスレールに沿って並ぶsigned by Lollyvector SVG自分で確認するGet the signed file274 paths~3.7k nodes67 groups83 KB

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

これらの印刷ロックは、CMYKのPDFやTIFFをエクスポートするときに印刷所が使用するものです - エクスポートを参照してください。

スウォッチを削除するのは安全です。派生したランプのステップとテーマロールは非表示になります(背後のトークンは引き続き解決されるため、下流で何も壊れません)。一方、自分で追加した色は完全に削除されます。

グラデーション

任意のグラデーションパネルは、背景やアクセント用に、パレットからブレンドトークンを作成します。ブランドがグラデーションを使わないなら完全にスキップしてください。各グラデーションにはプレビュー、名前付きストップ(2〜8個)、角度があります。重要な挙動: ストップはスウォッチを参照するため、そのスウォッチの色を変えるとグラデーションも追従します。補間はきれいなブレンドのためOKLCHで行われます。ストップを削除するとランが短くなります。

パレットを他所へ持ち出す

パレットペインの下端に配置されたフローティングピルは、パレット全体をデザイントークン(JSON)CSS変数CSSクラスSCSS変数GIMPパレット(.gpl)Adobe Swatch Exchange(.ase)としてダウンロードします - ブランドをそのままIllustrator、Figma、GIMP、スタイルシートに投入できます。ペインのスクロール領域の外に置かれているため、パレットがどれだけスクロールしても定位置を保ちます。(カタログビューからパレットをダウンロードすることもできます。)

タイプ

The compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVG自分で確認するGet the signed file74 paths~11k nodes99 groups234 KBThe compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVG自分で確認するGet the signed file74 paths~11k nodes99 groups234 KB

このルームは4つのロールカードから始まります - アプリ、あなたのツール、そしてすべてのエクスポートが実際に参照する4つのフェイスです。各カードには、そのロールに現在設定されているものが、そのフェイスで表示され、実際のコピーが1行添えられています。

見出し、コード、イタリックは、割り当てるまでそれぞれプライマリにフォールバックするため、フォント1種類のブランドはここで何も決める必要がありません。カード上の操作は何も確定しません。変更(または空のロールではフェイスを選ぶ)は、そのロールに絞った比較ステージを開きます。

タイプルーム - ロールカードと、各フェイスが実際に機能しているライブサンプルsigned by Lollyvector SVG自分で確認するGet the signed file59 paths~9.3k nodes73 groups196 KBタイプルーム - ロールカードと、各フェイスが実際に機能しているライブサンプルsigned by Lollyvector SVG自分で確認するGet the signed file59 paths~9.3k nodes73 groups196 KB

比較ステージ

このステージはダイアログではなくルーム内にインラインで開くため、元にいたカードは画面に残ったままです。Google Fontsのファミリー(Inter、Fraunces、Space Grotesk……)を検索するか、フォントファイルをドロップし、比較に追加を押すと、いずれもインストールされる前に候補が同じ単語で並んで表示されます。Escapeでキャンセルすると、開いたカードにキーボード操作を戻します。

それが唯一の入口であり、だからこそ何もあなたのブランドに気づかれずに入り込むことはありません。ステージの下には2つの管理パネルがあります:

いずれの方法でも、フェイスはこのデバイスに留まり、アプリ内で、あなたのツールで、そしてすべてのエクスポートでレンダリングされ、永遠にオフラインで機能し、あなたのブランドパックと一緒に移動します - レンダリング時に何も取得されません。Google Fontsにあるものはすべてオープンライセンス(OFL/Apache/UFL)で提供されています。

下部のタイプロールパネルには、各ロールのライブサンプルが表示されます - プライマリでの本文とUI、上位見出し用の任意のディスプレイフェイス、強調用のイタリック、コードとデータ用のモノ - セット全体が連携して機能する様子を確認できます。

タイプロールのサンプル - 見出し、本文、イタリック、コードがそれぞれ解決されたフェイスで組まれ、フェイス名が横に添えられているsigned by Lollyvector SVG自分で確認するGet the signed file17 paths~5.6k nodes29 groups68 KBタイプロールのサンプル - 見出し、本文、イタリック、コードがそれぞれ解決されたフェイスで組まれ、フェイス名が横に添えられているsigned by Lollyvector SVG自分で確認するGet the signed file17 paths~5.6k nodes29 groups68 KB

トークン

デザインシステムの残りの部分を、コードに触れずに編集できます。

トークンルーム - 角丸スライダーに加え、スペーシング、サイジング、シャドウ、その他のシステムsigned by Lollyvector SVG自分で確認するGet the signed file73 paths~14k nodes95 groups1 image292 KBトークンルーム - 角丸スライダーに加え、スペーシング、サイジング、シャドウ、その他のシステムsigned by Lollyvector SVG自分で確認するGet the signed file73 paths~14k nodes95 groups1 image292 KB

ファイル

ブランドが保持するファイル - ロゴを除く - をここにドロップします: ベクター画像音声モーション(動画、Lottie、アニメーション)アセット。これらはカタログに入り、セクションごとに整理され、すべてのツールのアセットピッカーですぐに使えるようになります。すべてこのデバイスに留まります。(レール上のラベルはこのルームをファイルと表記していますが、URLキーはcatalogueのままです。パネルキーは永続的な契約であるためです。)

ブランドを取り込む

レール下部の追加元…は、2段階のピッカーを開きます。最初の段階では、フォーマットではなく、あなたが何を持っているかを尋ねます。

デザインファイルのソースを選ぶと、第2段階は下のカードです。受け付けるフォーマットが優先順にアイコンタイルとして先頭に並び、カード全体が1つのドロップターゲットです - カード上のどこをクリックしても、ファイルをドラッグしても構いません。ファイルをスタジオに直接ドロップすることもできます。

インポートカード - 受け付けるフォーマットが優先順にアイコンタイルとして並び、カード全体が1つのドロップターゲットになっているsigned by Lollyvector SVG自分で確認するGet the signed file19 paths~3.2k nodes35 groups2 images175 KBインポートカード - 受け付けるフォーマットが優先順にアイコンタイルとして並び、カード全体が1つのドロップターゲットになっているsigned by Lollyvector SVG自分で確認するGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

各デザインファイルが提供するもの:

ソースのインストールは、まずチェックポイントを取得します。そのため「インポート前に戻す」は1回の復元で済みます。そして、スキャンで見つかったものはそのまま入るわけではありません。候補はトレイに置かれ、それぞれがその種類の素材を所管するルームを通じて、個別の操作で追加されます。

#/start?source=<kind>は指定したソース(filepdfimagefonturl)でピッカーを開き、?importはプレーンなリストで開きます。

デバイス間でブランドを移動する

レール下部のエクスポートは、単一のLollyBrand-…zipを書き出します - トークン、フォント、ロゴ、テーマ設定に加え、戻す際に検証される整合性マニフェスト付きです。その横のトークン(.json)は、プレーンなデザイントークンドキュメントだけを単独で書き出します。フォントもロゴもなく、トークンのみです。これはリポジトリ、CIステップ、他のトークンツールが実際に読み取るものです。

それを戻すには、追加元… → デザイントークンまたはデザインファイル(上記)を使うか、スタジオへのドラッグ&ドロップで行います。これは、同僚がブランドをあなたに渡す方法、あるいはあなたが2台目のインストールへブランドを持ち込む方法です - アカウントもクラウドも不要です。コマンドラインからブランドを取り込むには、代わりにingest:brandを参照してください。

バージョン

レールの下部にあるVersionsは、デザインシステムが動き続ける標的であることをやめる場所です。公開すると、このデバイスに保存される恒久的で名前の付いたコピーが得られます。それ以降は変更されないため、それを固定したツールは常に同じものを描き続けます。パネルは、公開すべき自分のものが存在するまでは非表示のままなので、一度も公開しないスタジオがコントロールを目にすることはありません。

何かを押す前に知っておくべき3つのことがあり、パネルは押す前にこの3つすべてを提示します(押した後ではなく)。

Publish only、またはPublish and make activeを選べます。違いは、ツールとアプリが今後そのバージョンに従うか、それとも最新の編集に従い続けるかです。Follow the latest againを選ぶと、すべての編集が行われた瞬間にライブに反映されます。#/start?area=versionsはパネルを直接開きます。

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

一部のビルドはロックされたブランドを出荷します。色、フォント、トークンはすべてのツールと書き出しが使用するものであり、変更する余地はありません。この場合、スタジオはこのビルドが固定ブランドで出荷されており編集が無効になっている旨を説明する短いメモに置き換えられます。これは意図的なものです。組織がすべてをオンブランドに保証する方法なのです。

次に進む先