FORM-008 公開  更新

ファイル添付型 フォーム

資料や写真などのファイルを添えて送れる問い合わせフォームの設計です。
添付できる形式や容量を選ぶ前に伝え、ファイルごとにアップロードの状態と失敗の理由を示すことで、読み手は迷わずに添付を終えられます。
受け取ったファイルの保存場所や扱いまで決めておくことで、送る側にも受け取る側にも安心な窓口にします。

ワイヤーフレーム(PC)

ファイル添付型 フォーム PC版ワイヤーフレーム

ワイヤーフレーム(SP)

ファイル添付型 フォーム SP版ワイヤーフレーム

SP版の特徴

  1. ドラッグの案内は出さない:SPではファイルをドラッグして置く操作を前提にしにくいため、ボタンから選ぶ形を基本にしています。
  2. 「ファイルを選ぶ」は全幅のボタン:押す場所を大きくして、写真の一覧やカメラからも選びやすくしています。
  3. 上限の条件は縦に並べる:狭い画面で横に並べると途中で折り返され、どこで区切れるのか分かりにくくなるためです。
  4. 長いファイル名は省略する:名前が長くても削除ボタンが押しやすい位置に残るよう、はみ出す部分を省略しています。

採用前の判断ポイント

向いているケース

  • 資料や写真があると、問い合わせの内容が伝わりやすい
  • 見積もりの依頼や、現状の確認に参考の資料が役立つ
  • 図面、原稿、不具合の画面など、言葉だけでは説明しにくいものがある
  • 見積もり依頼、修理・不具合の相談、応募のフォームなど

向かないケース

  • ファイルを受け取っても、確認や保管の体制がない(受け取ったファイルが放置されるおそれがあります)
  • 送ってもらうファイルが大きく、フォームの上限では足りないことが多い(共有のURLで受け取る案内を中心にします)
  • 項目が少なく、すぐに送れることを優先したい(1ページ完結型が向きます)

このワイヤーの特徴

添付できる条件が、選ぶ前に分かる

形式や容量の上限を選んだあとに知ると、ファイルを用意し直すことになります。添付の欄のすぐ下に、使える形式・1ファイルの上限・件数を先に書いています。

ファイルごとに、今の状態が分かる

複数のファイルを添えると、どれが送れていて、どれが止まっているのかが分からなくなりがちです。ファイルごとにアップロード中・添付済み・添付できない理由を表示しています。

1つのファイルで失敗しても、ほかの入力は残る

容量の超過などで1つのファイルが添付できなくても、ほかのファイルや入力した内容はそのまま残ります。失敗したファイルだけに理由と対処を示し、そのファイルだけを削除できるようにしています。

大きなファイルにも、送る手段を用意している

上限を超えるファイルは、フォームでは受け取れません。共有のURLをお問い合わせ内容に書いて送る方法を、あらかじめ案内しています。
共有のURLも、閲覧期限やアクセス制限を付けられる方法だと、受け取る側も安心です。

SPでは、ボタンからファイルを選ぶ形にする

SPではファイルをドラッグして置く操作を前提にしにくいため、その案内はかえって混乱のもとになります。ドラッグの案内は出さず、横いっぱいの「ファイルを選ぶ」ボタンから選ぶ形を基本にしています。

制作時のよくある失敗

添付できる形式や容量を、送信したあとに伝える

送信したあとに「この形式は受け付けられません」と表示されると、読み手は最初からやり直すことになります。
形式・容量・件数の上限は、添付の欄に先に書き、ファイルを選んだ時点で確かめます。

添付の失敗で、入力した内容まで消える

ファイルのエラーでページが読み込み直され、お名前やお問い合わせ内容まで消えてしまう作りがあります。
ファイルの確認はその場で行い、失敗したファイルだけを外せるようにします。

アップロードが終わる前に、送信できてしまう

アップロード中に送信ボタンを押すと、ファイルが付かないまま送られることがあります。
アップロード中に押された場合は、終わるまで待ってほしいことを伝え、ファイルが付いてから送信します。

受け取ったファイルが、誰でも開ける場所に保存される

添付されたファイルを、URLを知っていれば誰でも開ける場所に置くと、見積もりや個人情報を含む資料が外に出るおそれがあります。
保存場所は担当者だけが開けるようにし、保存する期間と削除の手順も決めておきます。

ファイル名の拡張子だけで、中身を判断する

拡張子は名前を変えるだけで偽れるため、それだけでは安全なファイルかどうか分かりません。
受け取る側のサーバーでも、ファイルの種類と容量をあらためて確かめ、必要に応じてウイルスの検査を行います。

よくある質問

添付ファイルは、必須にしたほうがよいですか?

多くの問い合わせでは、任意にしておくのが扱いやすいです。
資料がなくても相談できるようにしておくと、問い合わせのハードルが上がりません。
応募書類のように、ファイルがないと手続きが進まない場合だけ必須にします。

容量の上限は、どれくらいにすればよいですか?

受け取る側のサーバーやメールの制限、実際に届くファイルの大きさから決めます。
上限を大きくしすぎると、アップロードに時間がかかって途中でやめる人が増えることもあります。
上限を超えるファイルには、共有のURLで送ってもらう方法を案内しておくと安心です。
その場合も、誰でも見られる公開リンクを前提にせず、閲覧期限やアクセス制限を付けられる方法をすすめます。

添付されたファイルを、担当者のメールに添付して受け取ってもよいですか?

小規模な運用ではメールへの添付でも対応できますが、容量の制限で届かなかったり、転送のときに誤った相手へ送られたり、保存先が人によってばらついたりしやすくなります。
件数が多い場合や機密性の高いファイルを扱う場合は、決めた保存先に保管し、メールでは届いたことだけを知らせる形のほうが管理しやすくなります。

SPから写真を添付してもらうには、どうすればよいですか?

ファイルを選ぶボタンを押すと、SPでは写真の一覧やカメラから選べます。
受け付ける形式に画像を含め、写真は容量が大きくなりやすいため、上限を超えた場合の案内もあわせて用意します。

同じパーツのPattern

フォームの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開