ダウンロード前にファイルの情報を伝える：資料名と形式を添えよう

「資料はこちら」を押したら、予想より大きなファイルが開いた。ダウンロード前にファイルの情報を伝えるには、行き先の名前に加え、形式や容量を確認できる案内を用意します。リンクの見た目を変える前に、配布する中身と文言を照合しましょう。

今回は架空の見学会を題材に、紙やテキストで資料リンクの案を作ります。実際のPDFや配布ページを公開する課題ではありません。本文に登場する資料名と容量は模擬の設定です。

「資料」を、用途の分かる名前にする

見学会のページに、会場までの地図と当日の持ち物一覧があるとします。両方を「資料をダウンロード」とすると、どちらを開くべきか判断しづらくなります。まず「会場案内図」「当日の持ち物一覧」と内容を区別します。

ファイル名が内部管理用の番号でも、画面のリンク名まで同じ番号にする必要はありません。読む人が探す内容を表す名前にし、管理用ファイル名は制作メモに残します。一般的な文言の作り方はリンク先が分かる言葉へ直す記事も参照できます。

形式と容量は、配布する版から確かめる

今回の文言案は「会場案内図（PDF・約800 KB）」です。PDFはファイルの形式、約800 KBは容量の目安として添えています。実際に掲載する場合は、最終版のファイル情報を確認して数値を置き換えます。見栄えを整えるために容量を小さく書いてはいけません。

「当日の持ち物一覧（PDF・約120 KB）」も同じ書き方にすると、二つを比較できます。ただし、容量を表示すれば読み込み時間を保証できるわけではありません。ここでは所要秒数を書かず、利用者が開く前に判断する材料を示します。

資料の版が複数あるなら、「一般参加者向け」「出展者向け」のような対象も必要です。更新日を載せる場合は、その日が何を意味するかを決め、ページの編集日と資料自体の改訂日を混同しないようにします。

保存されるか、画面で開くかを言い切らない

ファイルへのリンクを押した後の動きは、ブラウザーや設定、サーバーの応答などにも左右されます。MDNのa要素の説明でも、download属性を使った場合の動作に条件があることを確認できます。

そのため、未検証の段階で「押すと必ず端末へ保存されます」と説明しません。今回の案では資料名とPDF形式を伝え、開いた後に保存する方法が必要なら、対象環境で確かめた案内を別途用意します。属性を一つ付ければすべての環境で同じ動きになる、という設計にはしないでください。

また、PDFという文字を小さなアイコンだけに置き換えると、その意味を知らない人には伝わりません。まず文字で形式を残し、リンク単体を読んだ場合にも何の資料か分かる状態を作ります。

差し替え時は、入口と中身を一組で更新する

資料を新版へ交換したのに、リンク先が旧版のままなら、ページの案内だけでは誤りに気付けません。制作メモに「リンクの文言／リンク先／資料の表題／形式／容量」を並べ、同じ版を指しているか確認します。

古い容量表示だけが残る場合もあります。資料の変更作業に、リンク周辺の文言確認を含めましょう。実ファイルがまだない設計段階では「未照合」と書き、確認済みの印を付けません。

リンク名から予想した内容が、資料と一致するか

紙に二つのリンク案を書き、資料の表紙を隠して「何が入っているか」「どの形式か」を説明してみます。その後で資料を開き、予想と一致したかを照合します。容量は最終版から確認した値かも記録してください。

狭い画面へ実装したら、形式と容量が途中で切れずに読めるかを見ます。今回は文言案を完成物とし、動作の確認は実装後の課題として残します。UIデザインの無料レッスンでも、入口の言葉と移動先を対にして点検してみましょう。