Lolly は、色、書体、レイアウト、ロジックといったあなたのルールを、誰でも使えるツールに変えます。いくつかの項目を埋めるだけで、画像、PDF、ソーシャルカード、動画といった完成ファイルができあがります。覚えることはほとんどなく、アップロードも不要です。作成も書き出しも、オンラインでもオフラインでも、お使いのデバイス上で動きます。
まず読むべきページはここ1枚です。すぐに使えるようになるために必要なのは2つ、Lolly を自分のものにすることと、すでにお持ちのものを取り込むこと（デザインファイルとトークン）です。それ以外はすべてリンクの先にあります。
Lolly は初めてで、とにかく何か作ってみたいですか。60秒で何かを作る では3つの作例を案内します。あるいは アプリを開いて、ギャラリーから好きなツールを選び、空欄を埋めて Export を押してください。あなたのブランドをまとわせたくなったら、このページに戻ってきてください。
signed by Lollyvector SVG自分で確認するGet the signed file134 paths~35k nodes251 groups705 KB
signed by Lollyvector SVG自分で確認するGet the signed file134 paths~35k nodes251 groups706 KBTry it in the app
1. 自分のものにする：デザインシステムを設定する
Lolly におけるブランドとは、色、フォント、いくつかのルールからなる小さな design-tokens ドキュメントで、すべてのツールがこれを参照して描画します。一度設定すれば、作るものはレビューによってではなく仕組みとしてブランドに沿ったものになります。入り口は3つあります。ブランドが今どこにあるかに合わせて選んでください。
ゼロから始める（デザインシステムビルダー）
初回起動では gallery（ギャラリー）が開き、その上に短いウェルカムダイアログが重なって、3つの入り口を示します。Make it yours（#/start の Brand Studio）、Bring your design（Figma、Penpot、InDesign、PDF のファイルをドロップすると編集できるレイアウトとして開きます。後述の すでにお持ちのものを取り込む への最短ルートです）、そして Explore the community tools の3つで、英語が母語でない方のために言語の並びも添えられています。1枚目のカードを選ぶと Brand Studio に着きます。名前とプライマリカラーを与えれば、Lolly はそこから、ライト／ダークの面、テキスト、アクセントまで含む完全でアクセシブルなパレットを導出します。エンジンが他のどこでも使っているのと同じ色の計算によるものです。
signed by Lollyvector SVG自分で確認するGet the signed file61 paths~9.4k nodes77 groups200 KB
signed by Lollyvector SVG自分で確認するGet the signed file61 paths~9.4k nodes77 groups200 KB フォントを選べば、1分とかからず使えるブランドができあがります。そこから先は、スタジオの6つのルーム、Overview、Colours、Type、Logos、Tokens、Files で、好きな順に、好きなところまで作り込めます。あとから戻っていつでも手直しできます。ダッシュボードの Design system タブ（#/d）は結果を読み取り専用で表示し、編集の場である #/start を指し示します（ブランドが固定されたブランドロック版の Lolly では、変更できるものはありません）。
すでにあるブランドをインポートする
ブランドがすでにデザイントークンとして、Penpot、Tokens Studio（Figma）、あるいは素の DTCG ファイルの形になっているなら、入力し直すのではなくまるごと取り込んでください。方法は2つあります。
- アプリ内で： デザインシステムビルダー：Brand Studio（
#/start）なら、ルームレール下部の Add from… から取り込めます。トークンファイル、Penpot のエクスポート、SVG、LollyBrandパックに対応します。ドロップすればパレットが灯ります。 - コマンドラインから、再利用できるブランドパックを用意するには：
# a monolithic tokens.json, a one-file-per-set directory, or a Penpot project archive
npm run ingest:brand -- ./my-tokens.json --name acme --label "Acme" --activateingest:brand は、Penpot / Tokens Studio が同じドキュメントを書き出す3つの入れ物すべてを受け付けます。単一の tokens.json、ディレクトリ（$metadata.json とセットごとのファイル）、project.penpot アーカイブです。--activate を付けると、そのブランドをプロファイルとして登録し、そこへ切り替え、カタログを再構築します。ブランドパックとプロファイルの関係は 設定 を参照してください。
アプリ内で調整する
ブランドを有効にしたあとも、Brand Studio（#/start）で形を整え続けられます。色や役割を変えると、アプリ全体のプレビューが入力に合わせて即座に更新されます。（#/d のダッシュボードの Design system タブはブランドを読み取り専用で表示するもので、編集はスタジオで行います。）
signed by Lollyvector SVG自分で確認するGet the signed file280 paths~12k nodes140 groups1 image182 KB
signed by Lollyvector SVG自分で確認するGet the signed file280 paths~12k nodes140 groups1 image181 KB 同じブランドは Profile → Your brand カードにも要約されます。フォントは実体を伴います。Google Fonts から選ぶと Lolly はそのファイルをお使いのデバイス上にブランドアセットとして保存するので、書体はオフラインでも一緒に持ち運べ、描画時に何も取得しません。
満足できたら、ブランドを LollyBrand パックとして書き出しましょう。同僚がインポートすれば、まったく同じパレット、フォント、ルールが手に入る1つのファイルです。サーバーを介さずにブランドが人と機械のあいだを移動する仕組みです。
ブランドトークンは双方向に往復します。 Lolly のブランドは DTCG トークンそのもの、つまり Penpot がネイティブに読み書きし、Tokens Studio が Figma に持ち込むあの形式なので、デザインに使うパレットと Lolly が強制するパレットは、手作業で同期する2つのリストではなく1つのドキュメントです。デザイントークン を参照してください。
2. すでにお持ちのものを取り込む
白紙から始める必要はありません。Lolly は、すでにお持ちのデザイン作業とオープンフォーマットをそのまま開きます。
オープンソースのデザインファイル
Figma、Penpot、Illustrator、InDesign、あるいは任意の SVG アプリで仕上げた成果物は、描いたアプリの中に閉じ込めておく必要はありません。Design を開き、Import a design をクリックすると、そのファイルは平坦な絵ではなく生きたレイアウトとして開きます。どのレイヤーも編集できるボックスになります。テキストは打ち直せ、シェイプはシェイプのまま、画像はライブラリに入り、複雑なベクターアートも忠実に保たれます。取り込まれた時点で、あなたのブランドの書体と配色ルールに揃っています。
| お持ちのもの | 取り込み方 |
|---|---|
| Figma のフレーム | ネイティブの .fig（File → Save local copy）、または SVG 書き出し |
| Penpot のデザイン | その .penpot エクスポート、または任意の SVG |
| Illustrator のファイル | ネイティブの .ai（PDF 互換）または .pdf。そのまま開けます |
| InDesign のレイアウト | .idml（File → Export → InDesign Markup） |
| その他すべて | 任意の SVG。どこからでも入れる共通の入り口です |
インポートはすべてお使いのデバイス上で行われます。ファイルはブラウザー内で解析され、何もアップロードされません。詳細と、何がそのまま引き継がれるかは デザインをインポートする にあります。
お持ちなのが PowerPoint のデッキなら、.pptx を Deck Builder にドロップすれば、すでにブランドに沿った状態でスライドごとに編集できます。Rebrand a Deck を使えば、同じデッキがグラフもアニメーションもそのままにテーマだけ変わって返ってきます。
一度きりの制作物からテンプレートへ
ここが効いてくるところです。インポートしたレイアウトはごく普通の Design セッションなので、保存すればそれは URL として存在します。Lolly を使える人なら誰でもその URL を開き、文言を変え、画像を差し替えて、自分の版を描き出せます。デザインアプリは不要で、ロックされた部分はロックされたままです。一度きりのデザインが、再利用できるツールになります。設定を1行も書かずにたどり着ける、これが狙いのすべてです。
オープンなデータとオープンなツール
コミュニティツール群 はオープンソースでブランドに依存しません。QR コード、街路地図、フィルター、プライバシーユーティリティなどがあり、ブランドを有効にした瞬間からあなたのブランドで描画されます。
ツールには自分のオープンデータも渡せます。CSV や JSON の表を貼り付けるかドロップすると、ツールの繰り返しフィールドがそこから埋まり、1行につき1つの完成アセットができます。
3. 何かを作り、共有するか自動化する
ブランドが有効になり、素材が手元にあれば、どのツールも完成ファイルを生み出します。
- 描き出す。 どのツールも SVG、PDF、PNG、JPG、WebP、動画 ほかの形式に描き出せます。必要なら実寸の印刷サイズや物理単位でも出せます。書き出しと形式 を参照してください。
- リンクを共有する。 すべてのツールの状態は URL なので、完成したアセットは再現可能で、パラメーターで指定できます。リンクをコミットしておき、必要なときに再生成できます。
- まとめて処理する。 バッチグリッド でスプレッドシートからテンプレートを駆動します。1行につき1つの完成アセットです。
- 自動化する。 同じ描画が CLI からも AI エージェント からも走ります。URL が API です。
「URL が API です」は文字どおりの意味です。下のチャートは誰も描いていません。種類も見出しもデータ表全体も、アドレスバーに入力されたものです。同じリンクはどのデバイスでも同じチャートを描きます。
signed by Lollyvector SVG自分で確認するGet the signed file14 paths~1.1k nodes3 groups19 KB
signed by Lollyvector SVG自分で確認するGet the signed file14 paths~1.1k nodes3 groups19 KB
次に進む先
ここへ来た目的に応じて、道筋は3つあります。
- クリエイター向けの Lolly：ものを作る方へ。その利点と、アプリを使いこなす方法。
- ビルダー向けの Lolly：ツールを作り、統合し、デプロイする方へ。技術ドキュメント。
- 運用担当者向けの Lolly：組織全体のブランド、セキュリティ、展開に責任を持つ方へ。