ユーザーガイド
正方形ロゴとワイドロゴを追加する
正方形のマークとワイドなワードマークをアップロードし、アプリ内でトリミング・回転して複数のバリエーションを保持し、各PDFテンプレートがどちらを印刷するかを理解します。
多くの企業は、自社のロゴを複数の形で持っています。円や正方形に収まるコンパクトなマークと、社名を並べて表記した横長のバージョンです。Invoice Flow はビジネスプロフィール上にこの両方を別々の枠として保持しています。役割が異なるからです。正方形マークはアプリ内のアバターであり、一部のカスタムPDFレイアウトが印刷する要素でもあります。一方ワイド版は、12種類ある組み込みの請求書テンプレートがヘッダーに配置するものです。ファイルが1つしかなくても両方の枠を埋められます。トリミング画面では、横長のバナーから正方形を切り出したり、ポスターから横長の帯を切り出したりできます。
このガイドでは、メイン州ポートランドの小さなブルワリー、Tidewater Brewing Company を例にします。Old Port 周辺のバーにケグ(樽)を配達している会社です。オーナーの Nora Quinlan は、TB という文字が入った緑色の丸いバッジと、横長のワードマークを持っています。彼女はアプリ内とケグ配達に添える業者向けスタイルの請求書にはバッジを、レストランに送るすっきりした請求書にはワードマークを使いたいと考えています。
プロフィールの他の項目の設定は別のガイドで扱います。このガイドでは、ロゴの行、その背後にあるトリミング画面、そしてPDFテンプレートが2枚の画像をどう使い分けるかを説明します。
画面に表示されるもの
設定(Settings)を開き、上部のプロフィールタイルをタップします(または ビジネスプロフィール(Business Profiles)からプロフィールを選択)。開くフォームのタイトルは ビジネスプロフィールを編集(Edit Business Profile)で、その最初の行がロゴ行です。初回起動時には、オンボーディングの2ページ目にも同じ行が表示されます。
この行には2つの枠があります。
- 左側は正方形のタイルです。その上に v.1・1:1 と表示される小さなドロップダウンがあり、3つの正方形バリエーションを一覧表示します。正方形の枠は常に1:1でトリミングされ、推奨サイズは1200×1200 pxです。
- 右側は行の残りを占める横長のタイルです。ドロップダウンは既定で 4:1・1200×300 px と表示され、4:1・1200×300 px、3:1・1500×500 px、2:1・1200×600 px、16:9・1920×1080 px の4つの形状から選べます。
枠が空の場合、カメラに+のアイコンとその下に 追加(Add)ボタンが表示されます。画像が入ると、タイルはその画像を実際の比率で薄い色の背景の上に表示し、ボタンは 変更(Change)に変わります。各ドロップダウンでは、項目の前にある塗りつぶされたチェック円はそのバリエーションに既に画像があることを、中抜きの円は空であることを示します。
ロゴを枠にアップロードする方法
流れはどちらの枠でも同じで、トリミングの形状だけが異なります。
- プロフィール編集画面で、空のタイルまたは追加(Add)ボタンをタップします。アプリはすぐに写真ギャラリーを開きます(ロゴにはカメラ撮影のオプションはないので、必要な場合は先に写真を撮っておいてください)。
- 画像を選びます。PNG、JPEG、あるいはレターヘッドのスクリーンショットでも構いません。ピッカーは正方形枠では1辺2048 pxまで、ワイド枠では4096 pxまで受け付けます。
- 画像を切り抜く(Crop image)画面が開き、枠の形状に固定されたフレームが表示されます。指1本でドラッグして画像を動かし、2本指でピンチしてズームします。または下部のボタンを使います(次のセクション参照)。
- 右上のチェックマークをタップします。アプリはフレーム内をPNGとしてレンダリングし、プロフィール編集画面に戻ります。タイルにはトリミング結果が表示され、ボタンは変更(Change)になります。
- 下までスクロールして変更を保存(Save Changes)をタップします(オンボーディング中は続ける(Continue))。これをタップするまで、ロゴは開いているフォームの中にしか存在しません。画面を離れると破棄され、アプリは離脱時に未保存の変更について警告します。
同じファイルからもう一方の枠も埋めるには、もう一方のタイルで同じ手順を繰り返し、画像を選び直します。Noraは正方形枠にバッジを、ワイド枠にはバッジとワードマークが入ったバナーを選び、そのバナーを4:1のフレーム内でスライドさせて調整します。
トリミング、回転、位置調整の方法
トリミング画面は黒背景で、中央にトリミングフレームがあります。フレーム内に見えているものすべてがロゴになります。これには透明部分の背後に表示される薄いチェッカーボード模様も含まれます。保存される画像は透明ではなく、平坦なPNGだからです。薄い白の三分割グリッドが、文字を端に合わせる際の目安になります。
下部の6つのアイコンにはテキストラベルがありません。長押しすると名前が表示されます。左から順に次の通りです。
| アイコン | 名前(長押しツールチップ) | 動作 |
|---|---|---|
| フレーム内の十字線 | 中央寄せ(Center) | 画像を上下左右ともフレーム中央に戻します。ズームと回転はそのまま保持されます。 |
| 矢印に挟まれた縦棒 | 水平方向に中央寄せ(Center horizontally) | 左右方向のみ中央に揃えます。上下位置は変わりません。 |
| 矢印に挟まれた横棒 | 垂直方向に中央寄せ(Center vertically) | 上下方向のみ中央に揃えます。 |
| 四角付きの曲がった矢印 | 回転(Rotate) | タップするたびに画像を時計回りに90度回転させます。4回タップすると元の向きに戻ります。 |
| 矢印付きフレーム | 自動フィット(Auto-fit) | 画像がフレーム全体を余白なく覆うようにズームし(短辺がフレームに合わせられ、長辺はトリミングされる場合があります)、中央に配置します。回転は保持されます。 |
| 円形矢印 | リセット(Reset) | 画像を初期状態(中央配置、フレーム内に収まるサイズ、回転なし)に戻します。 |
- 画像の周囲に余白がある場合は、まず自動フィット(Auto-fit)をタップします。このボタンは画面が開いた直後、アプリが画像サイズを読み込む間は少しの間無効になっています。
- 使いたい部分がフレーム内に収まるように画像をドラッグします。小さなマークを拡大したいときはピンチイン、範囲を広げたいときはピンチアウトします。
- 元の画像が横向きで撮影されている場合は、回転(Rotate)を1〜2回タップします。2本指でひねる操作でも任意の角度に自由回転でき、少し傾いたスキャン画像をまっすぐにするのに使えます。
- ズームに満足したら中央寄せ(Center)をタップして画像を中央に戻すか、片方向だけずれている場合は単軸専用の2つのボタンのいずれかを使います。
- やり直したいときはリセット(Reset)をタップします。枠を変更せずに終了する場合は左上の×をタップします。
- トリミングを確定するにはチェックマークをタップします。
すでに枠にあるロゴを再トリミングするには、変更(Change)をタップして画像を切り抜く(Crop image)を選びます。トリミング画面は保存済みの画像(元画像ではなく前回のトリミング結果)を対象に開きます。最初に切りすぎてしまった場合は、画像を置き換える(Replace image)を使って元の画像を選び直してください。
ロゴを置き換える、再トリミングする、削除する方法
枠に画像が入っている場合、変更(Change)ボタンはギャラリーに直接ジャンプしなくなります。代わりに3つの選択肢がある短いボトムシートが開きます。
- 編集したい枠の下にある変更(Change)をタップします。
- 画像を置き換える(Replace image)を選んでギャラリーから新しいファイルを選びトリミングするか、画像を切り抜く(Crop image)を選んで現在の画像でトリミング画面を再度開くか、削除(Delete)を選んで枠を空にします。
- 削除の場合、この項目を削除しますか?(Remove this entry?)というダイアログで赤い削除(Delete)をタップして確定するか、キャンセル(Cancel)で取りやめます。
- フォーム下部の変更を保存(Save Changes)をタップします。ダイアログの文言にもある通り、削除が実際に反映されるのはフォームを保存したときです。
削除は1つのバリエーション、つまりその枠のドロップダウンで現在選択されているものにのみ影響します。ワイド枠が4:1を表示している状態で削除しても、以前アップロードした16:9版は無傷です。
ロゴの複数バージョンを保持する方法
各枠には複数の独立した画像を保存できます。正方形枠にはv.1、v.2、v.3と番号の付いた3つのバージョンがあり、いずれも1:1です。ワイド枠にはアスペクト比ごとに1枚ずつ画像を保存できます。タイル上のドロップダウンは同時に2つの役割を果たします。タイルに表示・編集する画像を切り替えることと、その画像をアクティブなもの、つまりアプリの他の部分が使用するバージョンとしてマークすることです。
- 枠の上にあるドロップダウンを開き、空の項目(中抜きの円)、例えばv.2・1:1や16:9・1920×1080 pxを選びます。
- タイルが空になり、ボタンは追加(Add)と表示されます。タップして画像を選び、その形状用のフレームでトリミングして確定します。
- 再度ドロップダウンを開き、普段使いのデフォルトにしたい項目を選択します。その項目がアクティブなバリエーションになります。
- 変更を保存(Save Changes)をタップします。
Noraはv.1に標準のバッジを、v.2に冬季バージョンを保持しています。12月にはドロップダウンをv.2に切り替えて保存します。ワイド枠には4:1のワードマークと積み重ねた16:9バージョンがあります。
ワイドのドロップダウンを切り替えても既存の画像の形が変わることはありません。2:1を選ぶと、単に2:1用の画像(あれば表示、なければ空欄)が表示されるだけです。同じ素材を別の形状でも使いたい場合は、その形状の下に改めてアップロードしてください。
テンプレートがどちらのロゴを印刷するかの決まり方
Invoice Flowには2系統のPDFレイアウトがあり、それぞれ2つの枠を異なる方法で扱います。
組み込みテンプレート(請求書編集画面のテンプレートを選択(Select Template)で選べるClean、Professional、Modern、Classicほか計12種類)は常にワイドロゴを印刷します。画像はヘッダー内の60×60ptのボックスに比率を保ったまま配置されるため、4:1のワードマークは幅60pt、高さ15ptの帯になり、テンプレートによって会社情報の上または横に配置されます。これらのテンプレートでは正方形マークは一切使用されません。
カスタムテンプレート(テンプレートギャラリーとビジュアルエディター経由)には正方形ロゴ(Square logo)とワイドロゴ(Wide logo)という別々の要素があります。レイアウトはそれに含まれる要素を印刷します。既製のプリセットのうち、たとえばTrades、Clean(Modernグループ内)、Centered、Denseは正方形マークを配置し、Business、Services、Accent stripe、Statement、Airyはワイド版を配置します。正方形要素は60×60ptで印刷され、ワイド要素は高さ40ptで、比率が許す限りの幅になります。これは組み込みのヘッダーボックスよりもワードマークに適しています。
正方形ロゴを使うレイアウトで請求書を出力するには、設定(Settings)を開き、次にカスタムテンプレート(Custom templates)を開き、テンプレートギャラリー(Template gallery)でプリセットを選ぶか(あるいは正方形ロゴ要素を使って自分でレイアウトを作成し)、使用(Use)をタップします。次に請求書編集画面で、テンプレートを選択(Select Template)内のカスタムテンプレート(Custom template)カードでそのテンプレートを選びます。詳細はテンプレートおよびカスタムテンプレートエディターのガイドで扱っています。
ワイド枠については、請求書編集画面にもう一つコントロールがあります。プロフィールにワイドバージョンが2つ以上アップロードされていると、テンプレート選択の下にロゴバリアント(Logo variant)カードが現れ、アスペクト比ごとのサムネイルとプロファイルのデフォルトを使用(Use profile default)ボタンが表示されます。サムネイルをタップすると、その請求書はプロフィールのアクティブなバージョンではなくそのバージョンを印刷するようになり、この選択は請求書ごとに保存されます。正方形の3つのバージョンについても、対応する正方形ロゴバリアント(Square logo variant)カードがあります。
ルールと詳細
- ロゴに関する変更は、変更を保存(Save Changes)や続ける(Continue)をタップするまで一切保存されません。追加、トリミング、削除、アクティブなバリエーションの切り替えは、すべてそれまでは開いているフォームの中だけに存在します。
- 各枠のトリミングはその形状に固定されています。正方形枠は1:1、ワイド枠はドロップダウンで現在選ばれているアスペクト比です。
- トリミングは画面表示密度の2〜4倍でレンダリングされます。一般的なスマートフォンでは、正方形ロゴはおよそ2000 pxになり、印刷に十分な解像度です。出力はロスレスのPNGですが、フレームの薄い背景色も一緒にキャプチャされるため、元画像の透明部分は透明ではなく薄いチェッカーパターンとして出力され、薄いグリッド線も写り込む場合があります。
- アクティブな正方形バリエーションが、設定画面のプロフィールタイルやビジネスプロフィール一覧でアプリが表示するアバターになります。正方形ロゴが一切ない場合、アバターはワイドロゴにフォールバックし、それもなければイニシャルになります。
- ビジネスプロフィール一覧からプロフィールを複製すると、すべてのロゴバージョンが新しいプロフィールにコピーされます。
- 組み込みテンプレートはワイドロゴのみを印刷します。アクティブなワイドバージョンが空の場合、ヘッダーには単にロゴが表示されず、正方形マークが代わりに使われることはありません。
- カスタムテンプレートでは、正方形ロゴ要素はプロフィールのアクティブな正方形バリエーションを印刷します。請求書ごとの正方形ロゴバリアントカードは請求書に値を設定しますが、現在カスタムレンダラーはその上書き値ではなくプロフィールのアクティブなバリエーションを読み込みます。一方、ワイドロゴのロゴバリアントの上書きは両方のテンプレート系統で有効です。
- ロゴツール自体に制限はありませんが、設定からプロフィール編集画面を開くには、他の設定画面と同様、有効なトライアルまたはProサブスクリプションが必要です。
- ロゴ欄が1つしかなかった旧バージョンで作成したプロフィールも引き続き使えます。その画像は(アクティブなアスペクト比の下で)ワイド枠に読み込まれ、あなたが置き換えるまでそのままです。正方形枠は空の状態で始まります。