クイックスタート

Lolly は、色・タイポグラフィ・レイアウト・ロジックといったあなたのルールを、誰でも使えるツールに変換します。いくつかの項目を入力するだけで、画像、PDF、ソーシャルカード、動画などの完成ファイルを作成できます。学ぶことは何もなく、アップロードも不要です。すべてお使いのデバイス上で、オンラインでもオフラインでも動作します。

最初に読むべきはこの1ページです。生産性を高める2つのポイントがあります。Lolly を自分のものにすること(あなたのブランドに合わせること)と、すでにお持ちのものを取り込むこと(デザインファイルやトークン)です。それ以外はすべてリンク一つで確認できます。

Lolly を初めて使う方で、とにかく何か作ってみたいですか? アプリを開き、ギャラリーから好きなツールを選び、空欄を埋めて Render を押してください。あなたのブランドをまとわせたくなったら、またこのページに戻ってきてください。

1. 自分のものにする — ブランドを設定する

Lolly におけるあなたのブランドとは、色・フォント・いくつかのルールからなる小さなデザイントークンドキュメントであり、すべてのツールはこれに基づいてレンダリングされます。一度設定すれば、作成するものはレビューによってではなく、仕組みとして最初からブランドに沿ったものになります。取り込み方法は3通りあり、あなたのブランドが今どこにあるかに合わせて選べます。

ゼロから始める(ウィザード)

初回起動時には Start 画面(#/start)が表示されます。名前とプライマリカラーを指定すると、Lolly はエンジンが他の箇所でも使用しているのと同じ色彩計算を用いて、ライト/ダークのサーフェス・テキスト・アクセントを含む、完全でアクセシブルなパレットを導出します。フォントを選べば、1分足らずで動作するブランドが完成します。どの項目も後から調整できます。

すでにあるブランドをインポートする

ブランドがすでに Penpot、Tokens Studio(Figma)、あるいは通常の DTCG ファイルとしてデザイントークンの形で存在している場合は、打ち直すのではなくそのまま丸ごと取り込みましょう。方法は2通りあります。

• アプリ内で: Start 画面と Your brand エディタは、トークンファイル(または 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" --activate

ingest:brand は、Penpot / Tokens Studio が同じドキュメントをエクスポートする際の3種類のコンテナすべて — 単一の tokens.json、ディレクトリ($metadata.json + セットごとのファイル)、または project.penpot アーカイブ — を受け付けます。--activate を付けると、そのブランドをプロファイルとして登録し、切り替えて、カタログを再構築します。ブランドパックとプロファイルがどのように連携するかについては 設定 を参照してください。

アプリ内で調整する

ブランドが有効になると、ダッシュボードの Your brand エディタ(#/d)はライブエディタとして機能し、色やロールを変更するたびにページ上のすべてのプレビューがその場で更新されます。同じブランドは Profile → Your brand カードにも要約表示されます。フォントは実体のあるファイルです。Google Fonts から選択すると、Lolly はそのファイルをブランドアセットとしてお使いのデバイス上に保存するため、タイポグラフィはオフラインでも持ち運べ、レンダリング時に何かを取得することもありません。

満足のいく形になったら、ブランドを LollyBrand パックとしてエクスポートしましょう。これは1つのファイルで、同僚がインポートすれば全く同じパレット・フォント・ルールを得られます。これが、サーバーを介さずに人や機械の間でブランドを受け渡す方法です。

ブランドトークンは双方向に行き来します。 Lolly のブランドは DTCG トークンそのもの — Penpot がネイティブに読み書きし、Tokens Studio が Figma に持ち込む形式 — であるため、あなたがデザインに使うパレットと Lolly が適用するパレットは、手作業で同期させる2つのリストではなく、1つのドキュメントです。詳しくは デザイントークン を参照してください。

2. すでにお持ちのものを取り込む

白紙から始める必要はありません。Lolly は、あなたがすでに持っているデザインの成果物やオープンなフォーマットを開くことができます。

あらゆる形式のデザインファイル

Figma、Penpot、Illustrator、InDesign、あるいは任意の SVG アプリで仕上げた作品を、描いたアプリの中に閉じ込めておく必要はありません。Layout Studio を開き、Import a design をクリックすると、そのファイルは平坦な画像ではなく生きたレイアウトとして開かれます。すべてのレイヤーは編集可能なボックスになります。テキストは再入力可能なまま、図形は図形のまま、画像はライブラリに格納され、複雑なベクターアートも忠実に保持されます。取り込んだ時点ですでにあなたのブランドの書体と色ルールに沿った状態になっています。

インポートはすべてお使いのデバイス上で行われます。ファイルはブラウザ内で解析され、アップロードは一切行われません。詳細と、何がそのまま引き継がれるかについては、デザインのインポート をご覧ください。

一度限りのデザインをテンプレートへ

ここに真のメリットがあります。インポートされたレイアウトは通常の Layout Studio セッションなので、保存すればそれは1つの URL として存在するようになります。Lolly を使える人なら誰でもその URL を開き、文言を変更し、画像を差し替えて、自分自身のバージョンをレンダリングできます — デザインアプリは不要で、ロックされた部分はロックされたままです。一度限りのデザインが、再利用可能なツールになるのです。これが全体の狙いであり、設定を一行も書かずに実現されます。

オープンなデータとオープンなツール

コミュニティツールセット はオープンソースかつブランドに依存しません — QR コード、地図、フィルター、プライバシーユーティリティなど — そして、あなたがブランドを有効化した瞬間からあなたのブランドに沿ってレンダリングされます。

あなた自身のオープンなデータもツールに取り込めます。CSV や JSON のテーブルを貼り付けるかドロップすれば、ツールの繰り返しフィールドがそこから自動入力され、行ごとに1つの完成アセットが生成されます。

3. 何かを作り、共有または自動化する

「URL が API である」というのは文字どおりの意味です。下のチャートは誰かが描いたものではありません。チャートの種類、見出し、データテーブル全体がアドレスバーに入力されたものであり、同じリンクはどのデバイスでも同じチャートをレンダリングします。

ブランドが有効になり、素材も手元にあれば、どのツールも完成したファイルを生成します。

• どのツールも SVG、PDF、PNG、JPG、WebP、動画 など、必要に応じて実寸の印刷サイズや物理単位でレンダリングできます。詳しくは エクスポートとフォーマット を参照してください。
• リンクを共有する。 すべてのツールの状態は URL として表現されるため、完成したアセットは再現可能でパラメータによってアドレス指定でき、リンクをコミットしておけば必要なときに再生成できます。
• 一括で行う。 バッチグリッド でスプレッドシートからテンプレートを駆動し、行ごとに1つの完成アセットを生成します。
• 自動化する。 同じレンダリングは CLI や AIエージェント からも実行できます — URL がそのまま API です。

次に進むには

目的に応じて、3つの進み方があります。

• Lolly クリエイター向け — ものを作る人向け。得られるメリットと、アプリを最大限に活用する方法。
• Lolly ビルダー向け — ツールを作成し、統合し、デプロイする人向け。技術文書。
• Lolly オペレーター向け — 組織全体のブランド、セキュリティ、展開に責任を持つ人向け。