署名入力フォーム 日報内に直筆の受領サインを入力できます

署名入力フォームを含んだ日報テンプレートの例
署名入力フォームを含んだ日報テンプレートの例

署名入力フォームを使えば手書きの署名(サイン)が入力できるフォームを日報に埋め込むことができます。まだまだはんこの人気は高いですが、昨今では脱はんこの動きも加速してきています。 はんこに比べて署名は直筆であるため信頼性が高いというメリットもあります。

NipoPlusで署名入力フォームを追加すると指やスタイラスペンを使って直接サインを日報上に書くことができます。 顧客からの受領サインや同意としての署名をいただくといった使い方ができます。

署名自体はマウスでも書くことができますが、現実問題としてマウスで署名は非常に書きにくいため、タッチパネル対応のPCやiPadなどのタブレット端末で利用してください。 スタイラスペンやアップルペンシルがあれば紙に書くように署名を書くことができます。

キャラクター

タブレットで署名する記事も併せて御覧ください

署名のキャンパスエリアを拡大すれば手書きのイラストエリアとしても利用できます。署名・イラストどちらにも対応しているのが特徴です。署名用にするか、イラスト用にするかは初期設定で選択できます。

署名入力フォームの初期設定

署名入力フォームの初期設定項目で特に注目すべき項目はキャンバスサイズと幅です。 キャンバスサイズは署名サイズと全画面サイズから選べます。全画面サイズを選ぶとイラスト用として振る舞い、描画時にカラーパレットや線の太さなどを変えるボタンが表示されるようになります。 一方で署名の場合はカラーパレットなどのボタンが表示されません。 また幅については極端に狭いと描画後の署名やイラストが小さくなってしまうため、最低でも幅4以上はキープするようにしてください。

名称説明
表示名項目見出しエリアに表示される文字です
項目見出しエリアの背景色を設定できます。灰色・茶色・緑色・紺色・赤色から選択してください。初期値は灰色です
サイズ表示名の文字サイズを最小・小・中・大の4段階から設定できます。初期値は「中」です。表示名が長すぎる場合は設定が無視されます
メモ入力エリアの画面左上に赤文字で表示されます。日報・チェックシートの作成者が迷うことのないように補足文として活用できます
入力必須これがONの場合、イラストが描画されていないと日報の提出ができません
1〜12の幅を選択できます。推奨幅は4〜6です。表示は幅を基準に展開されるため、12など大きな値を設定すると画像が大きくなりすぎて操作性が低下します
キャンバスサイズ署名サイズと全画面サイズから選択できます。署名用であれば署名サイズを選択してください。手書きの地図など、イラスト目的の場合は全画面サイズを選択してください

署名を含んだ日報テンプレートを作成

署名入力フォームを3つ含んだ日報テンプレートを作成しました。1つは極端に幅を狭くしています。 これはアンチパターンとして紹介するためで、本来は幅を4以上にすることを推奨しています。

署名入力フォームだけで構成された日報テンプレートを作成しました。この例をもとに入力・出力画面をご紹介していきます
署名入力フォームだけで構成された日報テンプレートを作成しました。この例をもとに入力・出力画面をご紹介していきます

また、下段はイラスト用として設定しています。イラスト用と署名用の違いについても次の章で詳しく見ていきます。

署名入力フォームの入力画面

署名入力フォームを含んだ日報を作成する画面イメージは次のようになります。なお、以下のサンプル画像はすでに署名やイラストを書き終えたあとの例です。

入力画面イメージ
入力画面イメージ

幅3の領域に書かれた署名は非常に小さく表示され、一方で幅9の領域では署名が比較的大きく表示されていることが確認できます。 バランスを見ながら社内でちょうどよいと思うサイズを模索してください。公式NipoPlusでは署名の推奨幅を4〜6としています。

署名もイラストもタッチパネルから自由に描けるという点では同じですが、イラストの場合は線の色や太さも調整できます。 対する署名は黒文字限定で、且つ先の太さも固定です。それぞれの入力画面の違いを実際にみてみましょう。

署名サイズのキャンパスについて

さて、署名を実際に書くウインドウもみてみましょう。署名作成ボタンをクリックするとポップアップで署名入力用のキャンバスが表示されます。

署名入力画面イメージ。キャンパスがポップアップで表示され、そこに署名を書きます。
署名入力画面イメージ。キャンパスがポップアップで表示され、そこに署名を書きます。

スマートフォンでも署名エリアは表示できますが、スマートフォン本体を横向きにしないと全体が表示できませんので注意してください。スマートフォンの横向きの枠を用意していないため例示は省略させていただきます。 署名のキャンパスサイズはS・M・Lの3段階で調整できます。タブレットであれば常にLサイズで良いです。一方でスマートフォンの場合は画面サイズによっては署名キャンパスがはみ出してしまう場合があります。 小さいスマートフォンの場合は画面サイズに応じて自動でキャンバスサイズがSかMに切り替わります。

イラスト用のキャンパスサイズについて

キャンパスサイズをイラスト用にした場合は、描画可能な領域が署名に比べてかなり広くなります。

イラスト用キャンバスの画面。カラーパレットや線の太さを調整するボタンなどが表示されている
イラスト用キャンバスの画面。カラーパレットや線の太さを調整するボタンなどが表示されている

スマートフォンとタブレットでは画面サイズが異なるため、使用できるキャンバスのサイズも大きく異なります。 キャンバスをオープンするときの画面の向きでキャンバスが自動作成されます。スマートフォンの場合は縦向きでキャンバスを開くと縦長のキャンパスになります。 横向きのキャンパスが必要な場合は予めスマートフォンを横向きにした状態でキャンパスを開いてください。

キャラクター

そもそもこの機能はタブレットやタッチパネル対応のPCで利用を想定していますのでスマホは少し使い勝手が悪いです

署名入力フォームを受け取った画面

署名入力フォームを含んだ日報を受け取り、画面に表示した例です。特筆すべき点は有りません。 素直に手書きの署名がそのまま日報に埋め込まれて表示されます

署名入力フォームを含んだ日報を受信したときの見え方
署名入力フォームを含んだ日報を受信したときの見え方

データ活用編

署名入力フォームではPDFへの出力に対応していますが、それ以外の出力や検索には対応していません。

集計可否CSV出力PDF出力文字検索

署名をPDFに出力する

なお、PDFに出力したときはこのように表現されます

署名入力フォームを含む日報をPDFに出力したときの画面
署名入力フォームを含む日報をPDFに出力したときの画面

アンチパターンとして設定した幅3の欄に書かれた署名は少しはみ出してしまっている事がわかりますね。このような理由から署名の幅は4以上に設定を推奨しています。 一方で幅9はかなり余白が空いています。署名の場合はもう少し狭くても良いでしょう。 イラストのエリアは幅12としていますのでかなり大きくPDFに埋め込むことができている様子がわかります。

署名・キャンバスデータをまとめてダウンロード

Version 1.12.0から日報に添付された署名やイラストの一括ダウンロードが可能になりました。CSV出力オプションから「写真・ファイル等を出力する」をONにします。

日報に添付されたバイナリーデータをダウンロードするオプションの設定
日報に添付されたバイナリーデータをダウンロードするオプションの設定

これで写真入力フォーム署名入力フォームファイル入力フォームそれぞれののデータがCSV出力時にまとめてダウンロードされます。

ダウンロードしたCSV.zipを解凍すると、reportsというフォルダがあります。更にreportsの中は1件1件の日報ごとにフォルダ分けされます。各フォルダは「日報の日付+日報の文書ID」という名称になります。

キャラクター

たとえば202208300931_wQ9jKWAyAeflv7GXuPGfのようになります。 _が区切りで、前半が日付(年月日時分)、後半が文書IDです。

それぞれの日報フォルダの中に写真や署名・データファイルなどがまとめられます。

サンプルデータ

このページで使用した実際のサンプルをダウンロードできます

最終更新日: 2022/09/06
nipoplusアプリ起動ボタン

一切の企業情報を入力せずに手軽に体験できます

  • メール・パスワードの設定なしで体験可能(匿名機能
  • クレジットカードの登録も不要
  • Webアプリだからインストール不要
nipoplusアプリ起動ボタン
ios App Store
Android Google Play Store