ユーザーガイド

正方形ロゴとワイドロゴを追加する

正方形のマークとワイドなワードマークをアップロードし、アプリ内でトリミング・回転して複数のバリエーションを保持し、各PDFテンプレートがどちらを印刷するかを理解します。

更新日: 2026-09-09

多くの企業は、自社のロゴを複数の形で持っています。円や正方形に収まるコンパクトなマークと、社名を並べて表記した横長のバージョンです。Invoice Flow はビジネスプロフィール上にこの両方を別々の枠として保持しています。役割が異なるからです。正方形マークはアプリ内のアバターであり、一部のカスタムPDFレイアウトが印刷する要素でもあります。一方ワイド版は、12種類ある組み込みの請求書テンプレートがヘッダーに配置するものです。ファイルが1つしかなくても両方の枠を埋められます。トリミング画面では、横長のバナーから正方形を切り出したり、ポスターから横長の帯を切り出したりできます。

このガイドでは、メイン州ポートランドの小さなブルワリー、Tidewater Brewing Company を例にします。Old Port 周辺のバーにケグ(樽)を配達している会社です。オーナーの Nora Quinlan は、TB という文字が入った緑色の丸いバッジと、横長のワードマークを持っています。彼女はアプリ内とケグ配達に添える業者向けスタイルの請求書にはバッジを、レストランに送るすっきりした請求書にはワードマークを使いたいと考えています。

プロフィールの他の項目の設定は別のガイドで扱います。このガイドでは、ロゴの行、その背後にあるトリミング画面、そしてPDFテンプレートが2枚の画像をどう使い分けるかを説明します。

画面に表示されるもの

設定(Settings)を開き、上部のプロフィールタイルをタップします(または ビジネスプロフィール(Business Profiles)からプロフィールを選択)。開くフォームのタイトルは ビジネスプロフィールを編集(Edit Business Profile)で、その最初の行がロゴ行です。初回起動時には、オンボーディングの2ページ目にも同じ行が表示されます。

この行には2つの枠があります。

枠が空の場合、カメラに+のアイコンとその下に 追加(Add)ボタンが表示されます。画像が入ると、タイルはその画像を実際の比率で薄い色の背景の上に表示し、ボタンは 変更(Change)に変わります。各ドロップダウンでは、項目の前にある塗りつぶされたチェック円はそのバリエーションに既に画像があることを、中抜きの円は空であることを示します。

Invoice Flow アプリのビジネスプロフィール編集画面。正方形ロゴ枠にはTidewater Brewingの緑色の丸いバッジ、ワイドな4:1枠にはTidewater Brewing Companyのワードマークが表示され、どちらにも変更ボタンがあり、その下に署名と名前のフィールドがある
Noraのプロフィール。正方形枠にバッジ、ワイドな4:1枠にワードマークが設定されている。

ロゴを枠にアップロードする方法

流れはどちらの枠でも同じで、トリミングの形状だけが異なります。

  1. プロフィール編集画面で、空のタイルまたは追加(Add)ボタンをタップします。アプリはすぐに写真ギャラリーを開きます(ロゴにはカメラ撮影のオプションはないので、必要な場合は先に写真を撮っておいてください)。
  2. 画像を選びます。PNG、JPEG、あるいはレターヘッドのスクリーンショットでも構いません。ピッカーは正方形枠では1辺2048 pxまで、ワイド枠では4096 pxまで受け付けます。
  3. 画像を切り抜く(Crop image)画面が開き、枠の形状に固定されたフレームが表示されます。指1本でドラッグして画像を動かし、2本指でピンチしてズームします。または下部のボタンを使います(次のセクション参照)。
  4. 右上のチェックマークをタップします。アプリはフレーム内をPNGとしてレンダリングし、プロフィール編集画面に戻ります。タイルにはトリミング結果が表示され、ボタンは変更(Change)になります。
  5. 下までスクロールして変更を保存(Save Changes)をタップします(オンボーディング中は続ける(Continue))。これをタップするまで、ロゴは開いているフォームの中にしか存在しません。画面を離れると破棄され、アプリは離脱時に未保存の変更について警告します。

同じファイルからもう一方の枠も埋めるには、もう一方のタイルで同じ手順を繰り返し、画像を選び直します。Noraは正方形枠にバッジを、ワイド枠にはバッジとワードマークが入ったバナーを選び、そのバナーを4:1のフレーム内でスライドさせて調整します。

トリミング、回転、位置調整の方法

トリミング画面は黒背景で、中央にトリミングフレームがあります。フレーム内に見えているものすべてがロゴになります。これには透明部分の背後に表示される薄いチェッカーボード模様も含まれます。保存される画像は透明ではなく、平坦なPNGだからです。薄い白の三分割グリッドが、文字を端に合わせる際の目安になります。

Invoice Flow アプリの画像を切り抜く画面。4:1フレーム内にTidewater Brewingのバナーがわずかに左に寄せられ、右側にチェッカーボードの帯が見え、下部に6つの白いコントロールアイコンが並んでいる
自動フィット後にわずかに左へドラッグした4:1フレーム。右側のチェッカーボードは元画像にピクセルがない部分。

下部の6つのアイコンにはテキストラベルがありません。長押しすると名前が表示されます。左から順に次の通りです。

アイコン名前(長押しツールチップ)動作
フレーム内の十字線中央寄せ(Center)画像を上下左右ともフレーム中央に戻します。ズームと回転はそのまま保持されます。
矢印に挟まれた縦棒水平方向に中央寄せ(Center horizontally)左右方向のみ中央に揃えます。上下位置は変わりません。
矢印に挟まれた横棒垂直方向に中央寄せ(Center vertically)上下方向のみ中央に揃えます。
四角付きの曲がった矢印回転(Rotate)タップするたびに画像を時計回りに90度回転させます。4回タップすると元の向きに戻ります。
矢印付きフレーム自動フィット(Auto-fit)画像がフレーム全体を余白なく覆うようにズームし(短辺がフレームに合わせられ、長辺はトリミングされる場合があります)、中央に配置します。回転は保持されます。
円形矢印リセット(Reset)画像を初期状態(中央配置、フレーム内に収まるサイズ、回転なし)に戻します。
  1. 画像の周囲に余白がある場合は、まず自動フィット(Auto-fit)をタップします。このボタンは画面が開いた直後、アプリが画像サイズを読み込む間は少しの間無効になっています。
  2. 使いたい部分がフレーム内に収まるように画像をドラッグします。小さなマークを拡大したいときはピンチイン、範囲を広げたいときはピンチアウトします。
  3. 元の画像が横向きで撮影されている場合は、回転(Rotate)を1〜2回タップします。2本指でひねる操作でも任意の角度に自由回転でき、少し傾いたスキャン画像をまっすぐにするのに使えます。
  4. ズームに満足したら中央寄せ(Center)をタップして画像を中央に戻すか、片方向だけずれている場合は単軸専用の2つのボタンのいずれかを使います。
  5. やり直したいときはリセット(Reset)をタップします。枠を変更せずに終了する場合は左上の×をタップします。
  6. トリミングを確定するにはチェックマークをタップします。
Invoice Flow アプリの画像を切り抜く画面。正方形の1:1フレーム内でTidewater Brewingのバナーが90度回転され、自動フィットでズームされてバッジがフレーム上部いっぱいに収まっている
同じバナーを1:1フレームで、回転を1回、自動フィットを1回タップした後の状態。グリッドはバッジが配置される位置を示している。

すでに枠にあるロゴを再トリミングするには、変更(Change)をタップして画像を切り抜く(Crop image)を選びます。トリミング画面は保存済みの画像(元画像ではなく前回のトリミング結果)を対象に開きます。最初に切りすぎてしまった場合は、画像を置き換える(Replace image)を使って元の画像を選び直してください。

ロゴを置き換える、再トリミングする、削除する方法

枠に画像が入っている場合、変更(Change)ボタンはギャラリーに直接ジャンプしなくなります。代わりに3つの選択肢がある短いボトムシートが開きます。

Invoice Flow アプリのプロフィール編集画面が薄暗くなり、その手前にボトムシートが表示されている。アップロードアイコン付きの「画像を置き換える」、切り抜きアイコン付きの「画像を切り抜く」、赤色でゴミ箱アイコン付きの「削除」の3行が並ぶ
変更の背後にあるシート。ギャラリーから置き換える、保存済み画像を再トリミングする、または現在アクティブなバリエーションを削除する。
  1. 編集したい枠の下にある変更(Change)をタップします。
  2. 画像を置き換える(Replace image)を選んでギャラリーから新しいファイルを選びトリミングするか、画像を切り抜く(Crop image)を選んで現在の画像でトリミング画面を再度開くか、削除(Delete)を選んで枠を空にします。
  3. 削除の場合、この項目を削除しますか?(Remove this entry?)というダイアログで赤い削除(Delete)をタップして確定するか、キャンセル(Cancel)で取りやめます。
  4. フォーム下部の変更を保存(Save Changes)をタップします。ダイアログの文言にもある通り、削除が実際に反映されるのはフォームを保存したときです。
Invoice Flow アプリのアラートダイアログ。タイトルは「この項目を削除しますか?」で、本文には「リストから削除されます。下部の『変更を保存』をタップして適用してください」とあり、キャンセルと削除のボタンがある
削除はその枠のドロップダウンで現在選択されているバリエーションのみに影響し、それ以外は残る。

削除は1つのバリエーション、つまりその枠のドロップダウンで現在選択されているものにのみ影響します。ワイド枠が4:1を表示している状態で削除しても、以前アップロードした16:9版は無傷です。

ロゴの複数バージョンを保持する方法

各枠には複数の独立した画像を保存できます。正方形枠にはv.1、v.2、v.3と番号の付いた3つのバージョンがあり、いずれも1:1です。ワイド枠にはアスペクト比ごとに1枚ずつ画像を保存できます。タイル上のドロップダウンは同時に2つの役割を果たします。タイルに表示・編集する画像を切り替えることと、その画像をアクティブなもの、つまりアプリの他の部分が使用するバージョンとしてマークすることです。

Invoice Flow アプリのプロフィール編集画面。正方形ロゴのドロップダウンが開き、v.1・1:1とv.2・1:1が塗りつぶされたチェック円付き、v.3・1:1が中抜きの円で表示されている
正方形の3つのバージョン。v.1とv.2には画像があり、v.3は空いている。
Invoice Flow アプリのプロフィール編集画面。ワイドロゴのドロップダウンが開き、4:1・1200×300 pxと16:9・1920×1080 pxが塗りつぶされたチェック円付き、3:1・1500×500 pxと2:1・1200×600 pxが中抜きの円で一覧表示されている
アスペクト比ごとのワイドバージョン。4:1と16:9はアップロード済み、3:1と2:1は空。
  1. 枠の上にあるドロップダウンを開き、空の項目(中抜きの円)、例えばv.2・1:1や16:9・1920×1080 pxを選びます。
  2. タイルが空になり、ボタンは追加(Add)と表示されます。タップして画像を選び、その形状用のフレームでトリミングして確定します。
  3. 再度ドロップダウンを開き、普段使いのデフォルトにしたい項目を選択します。その項目がアクティブなバリエーションになります。
  4. 変更を保存(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で、比率が許す限りの幅になります。これは組み込みのヘッダーボックスよりもワードマークに適しています。

Invoice Flow アプリの請求書PDF TBC-2042。組み込みのCleanテンプレートで、左上に会社名と住所の横に小さく印刷されたTidewater Brewingのワイドワードマーク、青いBill Toボックス、4行のケグ表がある
組み込みのCleanテンプレート。60ptのヘッダーボックス内にワイドワードマークが配置される。
Invoice Flow アプリの請求書PDF TBC-2042をTradesカスタムプリセットでレンダリングした様子。左側に緑色の丸いTBバッジが会社名と電話番号の上に表示され、中央に大きなINVOICEというタイトル、緑色の表がある
Tradesプリセット。同じ請求書だが、正方形バッジが会社名の上に印刷される。

正方形ロゴを使うレイアウトで請求書を出力するには、設定(Settings)を開き、次にカスタムテンプレート(Custom templates)を開き、テンプレートギャラリー(Template gallery)でプリセットを選ぶか(あるいは正方形ロゴ要素を使って自分でレイアウトを作成し)、使用(Use)をタップします。次に請求書編集画面で、テンプレートを選択(Select Template)内のカスタムテンプレート(Custom template)カードでそのテンプレートを選びます。詳細はテンプレートおよびカスタムテンプレートエディターのガイドで扱っています。

ワイド枠については、請求書編集画面にもう一つコントロールがあります。プロフィールにワイドバージョンが2つ以上アップロードされていると、テンプレート選択の下にロゴバリアント(Logo variant)カードが現れ、アスペクト比ごとのサムネイルとプロファイルのデフォルトを使用(Use profile default)ボタンが表示されます。サムネイルをタップすると、その請求書はプロフィールのアクティブなバージョンではなくそのバージョンを印刷するようになり、この選択は請求書ごとに保存されます。正方形の3つのバージョンについても、対応する正方形ロゴバリアント(Square logo variant)カードがあります。

ルールと詳細

トリミング画面は、フレーム内に見えているものをそのままキャプチャします。元ファイルの背景も、元画像が透明であったりフレームの端まで届いていない部分の薄いチェッカーボードも含まれます。PDFのパレットが暗い色の場合、その薄い矩形がマークの周りに印刷されてしまいます。自動フィットを使って素材がフレーム全体を覆うようにし、背景が用紙の色(通常は白)に近い素材を選ぶことをおすすめします。

ヒント

片方しか必要ないと思っても、両方の枠を埋めておきましょう。組み込みテンプレートにはワイド版が、アプリのアバターやギャラリーの複数のプリセットには正方形版が必要です。後からテンプレートを切り替える方が、足りない形状を追加するためにプロフィールを開き直すより、はるかに手早く済みます。
正方形枠はタイトにトリミングしましょう。マークは60pt、約2cmで印刷されるため、余白の多いバッジは非常に小さくなってしまいます。自動フィットを使ってから、素材が三分割グリッドの線に触れるまでピンチインしてください。
ワイドロゴの明るいバージョンと暗いバージョンを、別々のアスペクト項目として保持しておきましょう。たとえば標準版を4:1に、白文字版を16:9に置いておきます。暗いパレットを使う請求書では、プロフィールに手を加えずに、ロゴバリアントカードで明るいバージョンを選べます。

関連ガイド