Lolly の使い方

アプリを実際に使うための実践ガイドです — ツールを開く、キャンバスで作業する、書き出す、保存する、共有する、という一連の流れを扱います。ここで説明する内容はすべてお使いのデバイス上で動作します。アカウントは不要、アップロードも不要、初回読み込み後はインターネット接続も不要です。

初めての方へ。クイックスタート なら数分で作り始められます。アプリのインストール・デプロイについては Lolly オペレーター向け をご覧ください。このページは、開いた後の操作方法について説明します。

ツールを開く

A tool's split view - the control stack on the left, and the live horizontal bar chart it draws on the right

The tool gallery - every tool as a card, grouped by category

A tool's split view - controls on one side, the live canvas on the other

ホーム画面はギャラリーです — すべてのツールがカテゴリー別にまとめられています。カードをクリックするとツールが開きます。以前に作業したことがある場合は、Continue ボタンで直近のセッションを再開できます。検索ボックスで名前による絞り込みができます。

各ツールは分割ビューになっており、片側にコントロール、もう片側にライブのプレビュー(キャンバス)が表示されます。コントロールを変更すると、プレビューは即座に更新されます。

一部のツール(Layout Studio など)は代わりにフリーキャンバスとして開きます — クロームのない直接操作サーフェスで、テキスト・図形・画像のボックスをドラッグ、リサイズ、回転、スナップさせたり、ダブルクリックでテキストをその場で編集したりできます。他のすべてのツールと同じレンダーパスで書き出されるため、キャンバスそのものがファイルになります。詳しくは下記の フリーキャンバス を参照してください。

キャンバス(プレビュー)

The zoom HUD in the corner of the canvas - minus, the live percentage, plus, Fit, then the theme and sound toggles

プレビューには、書き出される内容が常に正確に表示されます。

デスクトップ

タッチ

クリックでコントロールへジャンプ: デザイン内の任意の要素をクリックすると、対応するサイドバーの入力欄にフォーカスが移り、表示範囲までスクロールされます — 繰り返し行グループの場合は、クリックした行がまさにその場で開くので、見えているものを編集するのはワンタップの距離です。

サイズを変更すると、ビューは常にきれいなフィット表示に戻ります。

フリーキャンバス(Layout Studio)

Layout Studio's free canvas - the artboard with its surrounding pasteboard

フリーキャンバスのツールは、アートボードの周囲に作業スペースを追加します。デザイナーの貼り込み台のようなイメージです。

スマートフォンでの操作

A tool on a phone-width screen - controls as a sheet up top, the generated palette filling the preview below, and the render pill floating bottom-centre

画面幅が狭い場合、レイアウトは1カラムに再構成されます。

コントロール(入力項目)

A tool's control stack - a text field, colour triggers and a slider, and nothing else the author chose to lock down

ツールは、変化させることを意図した入力項目だけを公開します — それ以外(色、レイアウト、タイポグラフィ、ロジック)はツールの作者によって固定されているため、あなたが作るものは作者が定めたルールに必ず従います。入力項目にはテキスト、スライダー、カラーピッカー、ドロップダウン、日付、画像ピッカー、繰り返し行グループなどがあります。折りたたみ可能なセクションにまとめられているものもあります。

リセット: Clear changes をクリックすると、すべての入力項目が初期値に戻ります。

あなたの情報とプロフィール写真

Profile(ギャラリー右上)には、氏名、連絡先情報、任意のプロフィール写真が保存されます。これらの項目を求めるツールでは自動的に事前入力されます — 一度設定しておけば、メール署名、ロックアップ、バッジが自動的に埋まります。各セッションで個別に上書きすることも可能です。ツールがこれらの情報を読み取れるようにするには、Use my details をオンにしてください。

プロフィール写真と情報はこのデバイス上にのみ保存されます。プロフィールは、あなた自身だけでなく、チームやときどき担う役割を表すこともできます。複数のプロフィールを維持する方法を含む詳細については Profiles をご覧ください。

保存と再開

The two-half render pill - an up arrow that opens the export panel, and a tick that saves the session in place

Save をクリックすると、現在の入力内容がそのツールのセッションとして保存されます。ツールごとに複数の名前付きセッションを保持でき、各ツールの Continue ボタンで直近のセッションを再度開けます。履歴ボタン(右上、プロフィールの隣)には、すべてのツールにまたがる保存済みセッションが一覧表示されます。セッションはデバイスにローカルに保存されます。整理するには、下記の Projects を開いてください。

Projects

Projects - saved sessions organised into nestable folders

ProjectsTools の隣にある Projects タブから、または Profile → Storage → Organise in Projects から開けます — は、保存したすべてのもののホームであり、ファイルマネージャーのように動作します。

リンクの共有

すべての入力内容はページの URL に記録されるため、リンクそのものがデザインになります。書き出しコントロール内の Share、または Projects の保存済みセッションの Share link を使うと、Share ダイアログが開きます。そこには、そのままコピーできるリンクに加え、リンクの暗号化と、開いたときの挙動(フルスクリーン表示、書き出しパネルを展開する、&export によるダウンロード即実行、&copy によるクリップボードへのコピー)を切り替えるトグルがあります。

大きなデザインでは 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 — あなたのアセットライブラリ

The Catalogue - brand assets, swatches and fonts, plus your own uploads

Catalogue#/c、またはメニューの Catalogue リンク)は、ツールが利用できるすべて——ブランドロゴ、画像、音声、モーションを種類ごとにまとめたもの——を集めた場所であり、あなた自身のクリエイティブファイルが置かれる場所でもあります。サーバーも、管理コンソールも、プルリクエストも不要です。すべてがお使いのデバイス上にあります。

パレットとフォントをどこへでも

The Swatches panel - the five palette download buttons across the top, then every brand colour as a copyable chip

Catalogue の Swatches パネルは、単なる参照用ではありません——色をクリックしてコピーしたり、他のツールが扱える形式でブランドパレット全体をダウンロードしたりできます。

Fonts パネルには、ブランドの書体がそれぞれ download ボタン付きで一覧表示され、ローカルにインストールしたり印刷会社に渡したりできます。(Brand Studio の Colours タブでも同じパレットのダウンロードが可能です。)

アセットは、オープンでDIY的な道の半分にすぎません。もう半分は自分だけのツールを作ることです——フリーキャンバス(前述の Layout Studio)を使えば、コード不要で視覚的に構築できます。

サウンドとアクセシビリティ

Lolly は、誰にとっても快適に使えることを目指しています。インターフェースはキーボードで操作でき、カスタムコントロールにはスクリーンリーダー向けの適切なラベルが付いており、各ツールのライブプレビューは、何を作っているかを説明する1枚のラベル付き画像として公開されています。

穏やかな補助サウンドのレイヤーが、あなたの操作を確認してくれます — ギャラリーへの到着、Content Credentials の有効・無効チェック、パネルを閉じる、フィルターを切り替える、といった場面で鳴ります。デフォルトでオンになっていますが、常に任意です。スイッチが表示される場所(各ビューのオプションポップオーバー、または Profile)ならどこでも Sound をオフにでき、その選択は記憶されます。

そのスイッチの隣にあるのが Neurospicy Mode です — 作業中に静かに流れる、任意の落ち着いたバックグラウンド集中トラックです。オンにすると、画面の隅に小さなプレーヤードックが開き、アプリ内のどこへ移動してもついてきます。そこからトラックを検索して選び、前後にスキップし、音量を設定し、最小化したり閉じたりできます。トラックリストはいくつかのカテゴリーにまたがっています——手続き的に生成される Lolly Sings の楽曲、アンビエントのループやビート、自分でアップロードした音声、そしてインターネットのライブ radio 局がいくつか(これらには接続が必要で、それ以外はすべてオフラインで再生されます)。デフォルトではオフで、Sound と同様、セッションやデバイスをまたいで記憶されます。Sound をオフにすると、集中トラックもミュートされます。

ストレージとプライバシー

すべてはお使いのブラウザのローカルデータベース(IndexedDB)に保存されます。プロフィール、保存済みセッション、アップロードした画像、ダウンロード済みカタログコンテンツのキャッシュです。Profile → Storage では使用状況を確認でき、以下のことができます。

何も外部へ送信されることはありません。テレメトリーもクラウドレンダリングもありません。

別のデバイスへの移行

すべてがお使いのデバイス上に存在するため、Profile → Storage → Move to another device を使えば、アカウントもクラウドも使わずに、すべてを2台目のインストール先へ持ち運べます。

カタログキャッシュは含まれません — 新しいデバイス上で自動的に再ダウンロードされます。このバンドルは通常の 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)モード

The batch toolbar - zip name, units, DPI and the format every row inherits, with Sessions and Render on the right

パワーユーザー向けに、Batch(ギャラリーからリンクされ、デフォルトでオンになっている Pro 機能フラグの背後にあります)は多数のバリエーションを一度にレンダリングします — 各行が1組の入力項目となるグリッドで、まとめて書き出されます。カードを十数か国語にローカライズしたり、すべてのサイズバリエーションを一度に生成したりするのに最適です。行の入力は、直接タイピングする、スプレッドシートからそのまま貼り付ける、CSV をインポートする(書き出しも可能です)のいずれかで行え、行ごとにフォーマット、サイズ、出力ファイル名を設定できます。グリッド全体を名前付きの batch セッションとして保存すればギャラリーから再度開くことができ、すべての行を1つの .zip としてダウンロードできます。

Batch は、1つのテンプレートの多数のバリエーションを一度に生成するためのものです。すでに保存済みのセッションを再レンダリングするには、上記の Projects → Render folder / Render selection を使用してください — Pro は不要です。

オフラインとインストール

Lolly は PWA です。初回読み込みの後はオフラインでも動作します — ブラウザのアドレスバーから(モバイルでは Add to Home Screen から)インストールすると、アプリのようなフルスクリーン体験が得られます。オンラインに戻ると自動的に更新されます。