Lolly の使い方
アプリを実際に使うための実践ガイドです — ツールを開く、キャンバスで作業する、書き出す、保存する、共有する、という一連の流れを扱います。ここで説明する内容はすべてお使いのデバイス上で動作します。アカウントは不要、アップロードも不要、初回読み込み後はインターネット接続も不要です。
初めての方へ。クイックスタート なら数分で作り始められます。アプリのインストール・デプロイについては Lolly オペレーター向け をご覧ください。このページは、開いた後の操作方法について説明します。
ツールを開く


ホーム画面はギャラリーです — すべてのツールがカテゴリー別にまとめられています。カードをクリックするとツールが開きます。以前に作業したことがある場合は、Continue ボタンで直近のセッションを再開できます。検索ボックスで名前による絞り込みができます。
各ツールは分割ビューになっており、片側にコントロール、もう片側にライブのプレビュー(キャンバス)が表示されます。コントロールを変更すると、プレビューは即座に更新されます。
一部のツール(Layout Studio など)は代わりにフリーキャンバスとして開きます — クロームのない直接操作サーフェスで、テキスト・図形・画像のボックスをドラッグ、リサイズ、回転、スナップさせたり、ダブルクリックでテキストをその場で編集したりできます。他のすべてのツールと同じレンダーパスで書き出されるため、キャンバスそのものがファイルになります。詳しくは下記の フリーキャンバス を参照してください。
キャンバス(プレビュー)
プレビューには、書き出される内容が常に正確に表示されます。
デスクトップ
- ズーム: Cmd/Ctrl + スクロール、またはトラックパッドでのピンチ操作 — ズームはポインター位置を中心に行われます。
- パン: Space キーを押しながらドラッグするか、マウスの中ボタンでドラッグします(通常のクリックはデザインの要素をクリックするために空いたままです)。
- キーボード:
0= fit to window ·1= 100% ·+/−= zoom. - ズーム HUD: 隅にある小さな
− NN% + Fitコントロールです。パーセンテージをクリックすると Fit ↔ 100% を切り替えられます。
タッチ
- ズームはピンチ、パンはドラッグ、フィット表示へのリセットはダブルタップです。
クリックでコントロールへジャンプ: デザイン内の任意の要素をクリックすると、対応するサイドバーの入力欄にフォーカスが移り、表示範囲までスクロールされます — 繰り返し行グループの場合は、クリックした行がまさにその場で開くので、見えているものを編集するのはワンタップの距離です。
サイズを変更すると、ビューは常にきれいなフィット表示に戻ります。
フリーキャンバス(Layout Studio)
フリーキャンバスのツールは、アートボードの周囲に作業スペースを追加します。デザイナーの貼り込み台のようなイメージです。
- キャンバス外への一時配置。 ボックスをフレームの端の外へドラッグしても、完全に表示されたまま選択可能です — 構図を整えている間、要素を横に置いておき、後でフレーム内へドラッグし直せます。フレームの外側にあるものはすべてわずかにフェードされ、書き出し領域が一目でわかるようになっています。また、フレームには影が付いたままなので、ファイルがどこから始まるかが正確にわかります。
- 書き出されるのはフレームだけです。 書き出されるファイルはアートボードの範囲に限られます — 外側に残っているもの(またはボックスが端からはみ出している部分)は、ラスター・ベクターいずれの形式でも、単純に出力からクロップされます。
- フレームから遠く離れた場所に要素を配置しているときは、Fit を超えてズームアウト(最大 20% まで)すると貼り込み台全体を見渡せます。
- リサイズ可能なアートボード。 書き出しサイズを変更すると、その場でフレームがリサイズされます。ボックスは位置を保持するため、既存のコンテンツを中心にレイアウトを組み直すことができます。
スマートフォンでの操作
画面幅が狭い場合、レイアウトは1カラムに再構成されます。
- コントロールは上部のシートになり、下端にドラッグ用のグリップが付きます。グリップをドラッグしてサイズを変更できます — peek(覗く)/ half(半分)/ full(全画面) にスナップします — または、グリップをタップして折りたたみ ↔ 展開を切り替えられます。プレビューは下の空間を埋め、編集中も表示され続けます。
- フローティングの Render ボタンをタップすると Export シートが開きます — フォーマット、サイズ、コピー、保存、ダウンロードのすべてのコントロールが一箇所にまとまっています。背景をタップすると閉じられます。
コントロール(入力項目)
ツールは、変化させることを意図した入力項目だけを公開します — それ以外(色、レイアウト、タイポグラフィ、ロジック)はツールの作者によって固定されているため、あなたが作るものは作者が定めたルールに必ず従います。入力項目にはテキスト、スライダー、カラーピッカー、ドロップダウン、日付、画像ピッカー、繰り返し行グループなどがあります。折りたたみ可能なセクションにまとめられているものもあります。
リセット: Clear changes をクリックすると、すべての入力項目が初期値に戻ります。
あなたの情報とプロフィール写真
Profile(ギャラリー右上)には、氏名、連絡先情報、任意のプロフィール写真が保存されます。これらの項目を求めるツールでは自動的に事前入力されます — 一度設定しておけば、メール署名、ロックアップ、バッジが自動的に埋まります。各セッションで個別に上書きすることも可能です。ツールがこれらの情報を読み取れるようにするには、Use my details をオンにしてください。
プロフィール写真と情報はこのデバイス上にのみ保存されます。プロフィールは、あなた自身だけでなく、チームやときどき担う役割を表すこともできます。複数のプロフィールを維持する方法を含む詳細については Profiles をご覧ください。
保存と再開
Save をクリックすると、現在の入力内容がそのツールのセッションとして保存されます。ツールごとに複数の名前付きセッションを保持でき、各ツールの Continue ボタンで直近のセッションを再度開けます。履歴ボタン(右上、プロフィールの隣)には、すべてのツールにまたがる保存済みセッションが一覧表示されます。セッションはデバイスにローカルに保存されます。整理するには、下記の Projects を開いてください。
Projects
Projects — Tools の隣にある Projects タブから、または Profile → Storage → Organise in Projects から開けます — は、保存したすべてのもののホームであり、ファイルマネージャーのように動作します。
- 入れ子にできるフォルダー。 保存したセッションをフォルダーにグループ化でき、フォルダーの中にさらにフォルダーを、好きなだけ深く作れます。フォルダーの作成、名前の変更、タイルを別のフォルダーへドラッグしての移動が可能で、パンくずリストで上の階層へ戻れます。常に存在する Uncategorised フォルダーには、まだ整理されていないものが入ります。
- 新しい作業をそのままファイルする。 フォルダー内で + New tool を使うとツールが開き、最初の保存が自動的にそのフォルダーに収められます。
- 複数選択(デスクトップ)。 タイルのチェックボックスをオンにする、空いたキャンバス上で選択ボックスをドラッグする、または Shift/Cmd クリックする方法があります。タイルを右クリックするとコンテキストメニューが表示されます。選択したもの全体に対して一括で操作できます。
- フォルダーまたは選択範囲全体をレンダリングする。 Render folder は、フォルダー内(サブフォルダーを含む)のすべての保存済みセッションを、入れ子構造の1つの
.zipとして書き出します。Render selection は任意の複数選択に対して同じことを行い、単一のセッションはそのまま個別のファイルとしてレンダリングされます。Batch/Pro は不要です。 - 保存したセッションを共有する。 セッションを右クリック → Share link を選ぶと、まったく同じ入力内容でそのセッションを再度開くリンクがコピーされます(Share ダイアログの詳細は下記を参照)。
リンクの共有
すべての入力内容はページの URL に記録されるため、リンクそのものがデザインになります。書き出しコントロール内の Share、または Projects の保存済みセッションの Share link を使うと、Share ダイアログが開きます。そこには、そのままコピーできるリンクに加え、リンクの暗号化と、開いたときの挙動(フルスクリーン表示、書き出しパネルを展開する、&export によるダウンロード即実行、© によるクリップボードへのコピー)を切り替えるトグルがあります。
大きなデザインでは URL が長くなるため、ダイアログには、状態全体をコンパクトなトークンに詰め込んだ Shortest link も用意されています — 読みやすい形式も常に併記されます。同僚に貼り付けたり、ブックマークしたり、コミットしたりできます(詳細: URL Mode)。
お使いのデバイスからアップロードした画像は、共有リンクに含まれません — それらはご自身のマシン上にのみ存在します。
ライブカメラ(モーションリアクティブなツール)
写真のフィルター — Halftone、Scanline、Posterize、Duotone — には、カメラが利用可能な場合に Go live ボタンが表示されます。オンにすると、エフェクトが Web カメラの映像をフレームごとに追跡するため、動きに反応します。結果は GIF、WebM、MP4 として録画できます。フレームの読み取りと処理はお使いのデバイス上で行われ、外部に送信されることは一切なく、ツールを停止または離れた瞬間にカメラは解放されます(どの画像ピッカーにも、1フレームをデバイス上の画像として取り込む Take a photo があります)。
My images
ツールでデバイスから画像を追加できる場合、その画像は縮小され、EXIF/GPS 情報が除去された上で、個人用の My images ライブラリ(Profile → Storage 内)に保存されます。どのツールでも再利用できます。ライブラリには上限があり、完全にローカルです — そこで画像を管理・削除できます。
Catalogue — あなたのアセットライブラリ

Catalogue(#/c、またはメニューの Catalogue リンク)は、ツールが利用できるすべて——ブランドロゴ、画像、音声、モーションを種類ごとにまとめたもの——を集めた場所であり、あなた自身のクリエイティブファイルが置かれる場所でもあります。サーバーも、管理コンソールも、プルリクエストも不要です。すべてがお使いのデバイス上にあります。
- ファイルを取り込む。 画像、SVG、音声クリップ、動画、Lottie、PDF などをアップロード領域にドラッグする——またはクリックして選ぶ——と、すぐに Catalogue に追加され、すべてのツールのアセットピッカーで使えるようになります。好きなだけ取り込めますし、デバイスの外に出ることは決してありません。
- よく使うものをお気に入りに。 アセット(またはブランドスウォッチ)を ★ すると、すべてのピッカーの先頭に固定されるため、定番のロゴや色にワンクリックでアクセスできます。
- 整理する。 アセットを別のグループに分類し直したり、使わない共有ブランドアセットを非表示にしたり(Show hidden で元に戻せます)、自分でアップロードしたものを完全に削除したりできます。
パレットとフォントをどこへでも

Catalogue の Swatches パネルは、単なる参照用ではありません——色をクリックしてコピーしたり、他のツールが扱える形式でブランドパレット全体をダウンロードしたりできます。
- デザイントークン(JSON)、CSS 変数、または CSS クラス — ブランドをそのままスタイルシートやビルドに取り込めます。
- Adobe Swatch Exchange(.ase) — Illustrator や Photoshop に読み込めます。
- GIMP パレット(.gpl) — GIMP や Inkscape 向けです。
Fonts パネルには、ブランドの書体がそれぞれ download ボタン付きで一覧表示され、ローカルにインストールしたり印刷会社に渡したりできます。(Brand Studio の Colours タブでも同じパレットのダウンロードが可能です。)
アセットは、オープンでDIY的な道の半分にすぎません。もう半分は自分だけのツールを作ることです——フリーキャンバス(前述の Layout Studio)を使えば、コード不要で視覚的に構築できます。
サウンドとアクセシビリティ
Lolly は、誰にとっても快適に使えることを目指しています。インターフェースはキーボードで操作でき、カスタムコントロールにはスクリーンリーダー向けの適切なラベルが付いており、各ツールのライブプレビューは、何を作っているかを説明する1枚のラベル付き画像として公開されています。
穏やかな補助サウンドのレイヤーが、あなたの操作を確認してくれます — ギャラリーへの到着、Content Credentials の有効・無効チェック、パネルを閉じる、フィルターを切り替える、といった場面で鳴ります。デフォルトでオンになっていますが、常に任意です。スイッチが表示される場所(各ビューのオプションポップオーバー、または Profile)ならどこでも Sound をオフにでき、その選択は記憶されます。
そのスイッチの隣にあるのが Neurospicy Mode です — 作業中に静かに流れる、任意の落ち着いたバックグラウンド集中トラックです。オンにすると、画面の隅に小さなプレーヤードックが開き、アプリ内のどこへ移動してもついてきます。そこからトラックを検索して選び、前後にスキップし、音量を設定し、最小化したり閉じたりできます。トラックリストはいくつかのカテゴリーにまたがっています——手続き的に生成される Lolly Sings の楽曲、アンビエントのループやビート、自分でアップロードした音声、そしてインターネットのライブ radio 局がいくつか(これらには接続が必要で、それ以外はすべてオフラインで再生されます)。デフォルトではオフで、Sound と同様、セッションやデバイスをまたいで記憶されます。Sound をオフにすると、集中トラックもミュートされます。
ストレージとプライバシー
すべてはお使いのブラウザのローカルデータベース(IndexedDB)に保存されます。プロフィール、保存済みセッション、アップロードした画像、ダウンロード済みカタログコンテンツのキャッシュです。Profile → Storage では使用状況を確認でき、以下のことができます。
- Clear cache — ダウンロード済みのカタログコンテンツを破棄します(次回の読み込み時に再同期されます)。
- Clear all my data — プロフィール、セッション、画像をすべて消去します。元に戻すことはできません。
何も外部へ送信されることはありません。テレメトリーもクラウドレンダリングもありません。
別のデバイスへの移行
すべてがお使いのデバイス上に存在するため、Profile → Storage → Move to another device を使えば、アカウントもクラウドも使わずに、すべてを2台目のインストール先へ持ち運べます。
- Export my data は、単一の
LollyTools-<First>-<Last>-<YYYY-MM-DD>-<n>.zipをダウンロードします(名前の部分はプロフィールから取得され、未設定の場合は省略されます。<n>は同日中の書き出しが衝突しないようにするための日ごとのカウンターです)。このファイルには、プロフィール、保存済みのすべてのセッション(サムネイル付き)、アップロードした画像、各種設定(テーマ、サイドバー幅、ローカルの活動統計)が含まれます。 - もう一方のインストール先で Import data… を使うと、そのファイルが読み込まれます。処理はマージ方式です。同じ名前のもの(プロフィール、セッションスロット、画像)はインポートしたコピーで置き換えられ、そのデバイス上の他のものはそのまま保持されます。保存済みセッションは、インポートした画像に自動的に再リンクされます。
カタログキャッシュは含まれません — 新しいデバイス上で自動的に再ダウンロードされます。このバンドルは通常の zip ファイル(manifest.json + profile.json + sessions.json + assets.json + assets/blobs/… + prefs.json、フォーマット id lolly-backup)なので、メール、USB、AirDrop を経由しても壊れずに残り、どのシェルで読み込んでも同じフォーマットです。各パートはチェックサムが付いているため、転送中に破損したファイルは、中途半端な状態で復元されるのではなく、インポート時に検出されます(詳細なフォーマット仕様: Data Transfer)。
デザインのインポート(Figma、Penpot、Illustrator、InDesign)
既存のデザインを Lolly に取り込んで、そのまま作業を続けることができます。Layout Studio を開き、キャンバスツールバーの Import a design をクリックして、Figma の .fig または SVG、Penpot の .penpot、Illustrator の .ai / .pdf、あるいは InDesign の .idml を選択してください。レイヤーはフリーキャンバス上の編集可能なボックスになります — テキストは再入力可能なままで、画像は My images に格納され、書体と色はブランドのグローバル設定に従います — その後、結果は他のセッションと同じように保存・共有・レンダリングできます。解析はすべてお使いのデバイス上で行われます。詳細: Import a design。
書き出し
フォーマットの選択、出力サイズと印刷単位、透過、動画、コピー/共有についての詳しい説明は Exporting & Formats をご覧ください。要点をまとめると、フォーマットを選び、必要であればサイズを設定し、Download(またはクリップボードへ Copy)するだけです。
Batch(Pro)モード
パワーユーザー向けに、Batch(ギャラリーからリンクされ、デフォルトでオンになっている Pro 機能フラグの背後にあります)は多数のバリエーションを一度にレンダリングします — 各行が1組の入力項目となるグリッドで、まとめて書き出されます。カードを十数か国語にローカライズしたり、すべてのサイズバリエーションを一度に生成したりするのに最適です。行の入力は、直接タイピングする、スプレッドシートからそのまま貼り付ける、CSV をインポートする(書き出しも可能です)のいずれかで行え、行ごとにフォーマット、サイズ、出力ファイル名を設定できます。グリッド全体を名前付きの batch セッションとして保存すればギャラリーから再度開くことができ、すべての行を1つの .zip としてダウンロードできます。
Batch は、1つのテンプレートの多数のバリエーションを一度に生成するためのものです。すでに保存済みのセッションを再レンダリングするには、上記の Projects → Render folder / Render selection を使用してください — Pro は不要です。
オフラインとインストール
Lolly は PWA です。初回読み込みの後はオフラインでも動作します — ブラウザのアドレスバーから(モバイルでは Add to Home Screen から)インストールすると、アプリのようなフルスクリーン体験が得られます。オンラインに戻ると自動的に更新されます。