外観
9. 帳票の見た目を整える
このページでやること: 請求書・納品書・領収書・見積書の見た目と記載内容を、ストアの運用に合わせて整えます。所要時間は15分ほどです。
設定はアプリの「設定」の[デザイン]タブにまとまっています。変更したら、画面の上に表示される保存のバーで[保存]をクリックしてください。
| 設定 | 対象の書類 | 必要なプラン |
|---|---|---|
| ロゴと印影 | 請求書・納品書・領収書・見積書 | Basic 以上 |
| 書類の記載内容 | 請求書・納品書・領収書・見積書 | 無料プラン〜 |
| テンプレート | 請求書 | Basic 以上 |
| フォント | すべての帳票 | Basic 以上 |
ロゴと印影
![設定の[デザイン]タブ。ロゴと印影のアップロードと、書類の書き方の設定](/marutto-invoice/guide/settings-design.jpg)
- 設定の[デザイン]タブを開きます
- 「ロゴと印影」の[画像を選択](設定済みの場合は[変更])をクリックします
- 画像を選択すると、そのままアップロードされます
| 画像 | 印字される位置 |
|---|---|
| ロゴ | 書類の左上 |
| 印影 | 発行者の欄に重ねて |
- 形式は PNG・JPEG、サイズは 500KB までです
- 画像はこのストアの[コンテンツ]→[ファイル]に保存されます
- 見積書では、印影を発行者の欄の右上に印字します
- 削除すると、以降に発行する帳票には印字されません
「再アップロードが必要」と表示された場合
以前のバージョンでアップロードした画像は、保存された URL の有効期限が切れてリンクが切れている場合があります。設定画面とダッシュボードに案内を表示しますので、同じ画像をもう一度アップロードしてください。
書類の記載内容
このセクションはすべてのプランでご利用いただけます。
宛名の書き方と敬称
「請求先に会社名がある注文の宛名」で、注文から宛名を組み立てる書き方を選択します。
| 選択肢 | 印字される宛名 | 敬称 |
|---|---|---|
| 会社名 御中 | 株式会社サンプル | 御中 |
| 会社名 氏名 様 | 株式会社サンプル 山田 太郎 | 様 |
| 氏名 様 | 山田 太郎 | 様 |
- 会社名がない注文は、どの書き方でも「氏名 様」になります
- 注文の詳細画面では、書類ごとに宛名と敬称を変更できます
- お客様がセルフ発行で入力した宛名は、担当者名があれば「様」、会社名・部署名だけなら「御中」になります
- 発行済みの書類は、発行したときの宛名と敬称のままです。 設定を変更しても、すでに交付した書面と食い違うことはありません
明細に割引の行を表示する
既定ではオンで、割引が適用された明細に「割引 -¥1,000」の行を表示します。
オフにすると、割引のある商品を割引後の単価と金額だけで記載します。小計・消費税・合計は変わりません。
- 請求書・納品書・領収書・見積書と、注文の詳細画面の明細に反映されます
- 発行した書類は、発行したときの設定で出力します。 設定を変更したあとに再ダウンロードしても、交付した書面と明細の見え方が変わることはありません
- この設定を追加する前に発行した書類は、割引の行を表示します
領収書に明細を表示する
既定ではオンで、領収書に品名・数量・金額と取引日を記載します。インボイス制度の「取引内容」にあたり、お客様が経費の処理に利用できます。
オフにすると、金額と但し書きだけの領収書になります。
発行済みの領収書は、最初に発行したときの形で出力します。記録のない以前の領収書は、明細なしのままです。
納品書に金額を表示する
既定ではオンです。オフにすると、品名と数量だけの納品書になります(ギフトの同梱向け)。
発行した納品書は、発行したときの設定で出力します。設定を変更しても、発行済みの納品書は変わりません。
テンプレート(請求書)
![設定の[デザイン]タブの「テンプレート」。請求書のテンプレートとベースカラーの選択、HTMLテンプレートの入力欄](/marutto-invoice/guide/settings-template.jpg)
請求書には4つのテンプレートがあります。Basic プラン以上でご利用いただけます。
| テンプレート | 特徴 |
|---|---|
| 標準 | 既定のテンプレート。中央にタイトル、右上に日付、左右に宛先と発行者 |
| クラシック | 罫線で囲んだモノクロのレイアウト。タイトルは中央、発行者は下部 |
| コンパクト | 文字を小さくし、明細が多い注文向け(1ページあたり約40行) |
| カスタム(HTML / Liquid) | HTML と Liquid で自由に記述します |
- 設定の[デザイン]タブの「テンプレート」で「請求書のテンプレート」を選択します
- 「ベースカラー」で、見出しや罫線の色を変更できます
- [保存]をクリックします
ここで選択したテンプレートは、一括発行・自動発行の請求書にも適用されます。
注文ごとに切り替える
注文の詳細画面の「テンプレート」でも、その注文の請求書だけテンプレートを切り替えられます。設定の既定を変更する必要はありません。
納品書・領収書・見積書にテンプレートの選択はありません
テンプレートを選択できるのは請求書だけです。ロゴ・印影・フォントと「書類の記載内容」の設定は、請求書以外の帳票にも反映されます。
発行済みの請求書のテンプレート
発行した請求書は、発行したときのテンプレートを記録しています。設定を変更しても、「発行時の内容でダウンロード」やお客様のダウンロードでは、発行したときのテンプレートで出力します。
カスタム(HTML)テンプレート
「請求書のテンプレート」で「カスタム(HTML / Liquid)」を選択すると、HTML テンプレートの入力欄が表示されます。初期値として既定のテンプレートが入力されているので、必要な箇所を修正してご利用ください。
- CSS は
<style>に記述します(PDF の生成に利用できないプロパティもあります) - 入力欄を空にして保存すると、既定のテンプレートに戻ります
- 画像は Shopify のファイル(
cdn.shopify.com)の URL だけ利用できます。ほかの URL の<img>と、CSS のurl()での画像の読み込みは、PDF の生成時に削除されます - 改ページで分割したくない範囲は、
keep-togetherクラスを付けた<div>で囲みます
代表的な差し込み値
| 差し込み値 | 内容 |
|---|---|
invoice.number / invoice.date | 請求書番号・請求日 |
invoice.subtotal / invoice.total_tax / invoice.total | 小計・消費税・合計 |
invoice.tax_breakdown | 税率ごとの内訳(配列) |
invoice.notes / invoice.bank_info | 備考・振込先 |
invoice.po_number / invoice.period / invoice.due_date | PO番号・対象期間・お支払期限(なければ空) |
seller.company_name / seller.registration_number | 発行者の名称・登録番号 |
buyer.name / buyer.honorific | 宛名・敬称(様・御中) |
line_items | 明細の配列 |
明細(line_items)の各行では、name・quantity・unit_price・gross_amount(割引前の金額)・discount(割引額)・has_discount・tax_rate_key を利用できます。
税率を直接記述しないでください
税率は invoice.tax_breakdown から記載します
消費税の税率は改定されます。テンプレートに 8% 10% と直接記述すると、改定後も古い税率が印字されます。
税率ごとの金額と消費税額は、必ず invoice.tax_breakdown を繰り返して記述してください。
liquid
{% for tax in invoice.tax_breakdown %}
<div>
<span>{{ tax.label }}対象{% if tax.is_reduced %}(軽減税率※){% endif %}: {{ tax.subtotal }}</span>
<span>消費税: {{ tax.tax_amount }}</span>
</div>
{% endfor %}invoice.tax10_subtotal や invoice.tax8_amount は、すでに編集されたテンプレートとの互換のために残しているものです。新しく記述するテンプレートでは使用しないでください。
フォント

指定しない場合は、標準の日本語フォント(Noto Sans JP)で印字します。自社のフォントを使用する場合は、フォントファイルの URL を入力します。
- 設定の[デザイン]タブの「フォント」で「自社のフォントを指定する」をクリックして開きます
- 「フォントの URL(標準の太さ)」にフォントファイルの URL を入力します
- 太字を別のファイルにする場合は「フォントの URL(太字・任意)」にも入力します
- [保存]をクリックします
- HTTPS で開ける
.ttf/.otfファイルの URL を入力します(.woff/.woff2は設定に保存できますが、PDF の生成で読み込めずに標準のフォントで印字されることがあります) - Google Fonts の CSS の URL は利用できません。フォントファイルそのものの URL を入力してください
- 日本語を含まないフォントは使用されません
- 太字を入力しない場合は、太字も標準の太さのフォントで印字します
- 読み込みに失敗した場合は、標準の日本語フォントで印字します
無料プランでの制限
無料プランでは、次の設定を利用できません。発行する請求書は標準のテンプレートで、ロゴ・印影・自社フォントは印字されません。
- ロゴ・印影
- テンプレートの選択(カスタム(HTML)を含む)
- 自社フォント
「書類の記載内容」(宛名の書き方・割引の行・領収書の明細・納品書の金額)は、無料プランでもご利用いただけます。
詳しくは10. プランと料金をご確認ください。
次に読む: 10. プランと料金